Cân nhắc trong JavaScript: Loại bỏ câu lệnh switch để code tốt hơn
Trong bài viết này, tôi sẽ cố gắng thuyết phục bạn để loại bỏ câu lệnh switch. Trong khi câu lệnh switch rất hữu ích, tuy nhiên lại không phù hợp với phần còn lại của code chức năng. Chúng không phải Immutable, không tương thích với các chức năng khác và trong vài trường hợp thì mới ...
Trong bài viết này, tôi sẽ cố gắng thuyết phục bạn để loại bỏ câu lệnh switch.
Trong khi câu lệnh switch rất hữu ích, tuy nhiên lại không phù hợp với phần còn lại của code chức năng. Chúng không phải Immutable, không tương thích với các chức năng khác và trong vài trường hợp thì mới hiệu quả.
Hơn nữa switch còn sử dụng break, đây cũng là anti-functional. (Cùng tìm lý do tại sao break lại đáng sợ như vậy trong bài viết dưới đây)
Những gì tôi thực sự muốn là một cái gì đó immutable và không có các tác dụng phụ. Một cái gì đó có thể giúp tôi vượt qua mọi giới hạn. Bạn biết đấy, cái gì đó có chức năng!
Hãy cùng tìm hiểu ngay và xem một ví dụ trực tiếp từ redux website.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } } |
Tôi đã thử thay đổi một chút và khi kết thúc thì lồng vào ternary.
|
1 2 3 4 5 6 |
const counter (state = 0, action) => action.type === 'INCREMENT' ? state + 1 : action.type === 'DECREMENT' ? state -1 : : state |
(Nếu bạn thấy cú pháp này gây khó hiểu, thì hãy xem kỹ bài viết này, nó sẽ giải thích if‘s và lồng vào ternary.)
Cách này thật sự tốt hơn, nhưng có một điều tôi không thích là việc lặp đi lặp lại action.type ===. Vì vậy, sau đó tôi nghĩ rằng tôi có lẽ có thể sử dụng một object literal. Tôi cũng có thể tạo ra một chức năng để wrap các object literal và đồng thời hỗ trợ thêm cho trường hợp mặc định.
|
1 2 3 4 5 6 7 8 9 |
function switchcase (cases, defaultCase, key) => { if (key in cases) { return cases[key] } else { return defaultCase } } |
Bây giờ chúng ta hãy “xào nấu” cậu bé xấu xí này, chuyển đổi if đến một ternary và thay đổi ES6 một chút!
|
1 2 3 4 |
const switchcase = cases => defaultCase => key => key in cases ? cases[key] : defaultCase |
Ngon!
Bây giờ reducer của chúng tôi sẽ như thế này …
|
1 2 3 4 5 6 7 |
const counter (state = 0, action) => switchcase({ 'INCREMENT': state + 1, 'DECREMENT': state -1 })(state)(action.type) |
Vấn đề với phiên bản đầu tiên của switchcase là toàn bộ object literal được evaluate trước khi được chuyển đến chức năng switchcase . Điều này có nghĩa là state +1 và state -1 đều được evaluate. Điều này có thể rất nguy hiểm … Thế là không tốt.
Hmm … nếu các giá trị trong các object literal đã có function, chúng có thể được thực hiện khi trong một trường hợp phù hợp.
Vì vậy, chúng ta hãy tạo ra một chức năng đồng hành gọi là switchcaseF (F tượng trưng cho hàm), mà cũng giống như switchcase ngoại trừ việc không chứa giá trị mà thay vào đó là hàm.
|
1 2 3 4 |
const switchcaseF = cases => defaultCase => key => switchcase(cases)(defaultCase)(key)() |
Bây giờ các giá trị của reducer có thể được thay đổi thành các function và chỉ có trường hợp phù hợp sẽ được evaluate.
|
1 2 3 4 5 6 7 |
const counter (state = 0, action) => switchcase({ 'INCREMENT': () => state + 1, 'DECREMENT': () => state -1 })(() => state)(action.type) |
… nhưng tôi đại loại muốn các function này có thể tùy chỉnh. Vì vậy, hãy thử thêm cái này …
|
1 2 3 4 5 6 7 |
const executeIfFunction = f => f instanceof Function ? f() : f const switchcaseF = cases => defaultCase => key => executeIfFunction(switchcase(cases)(defaultCase)(key)) |
Bây giờ redux reducer của chúng tôi có thể như thế này (thông báo giá trị mặc định) …
|
1 2 3 4 5 6 7 |
const counter (state = 0, action) => switchcase({ 'INCREMENT': () => state + 1, 'DECREMENT': () => state -1 })(state)(action.type) |
OK, không khác biệt nhiều, nhưng chúng ta có thể làm những điều như thế này. (Thêm RESET)
|
1 2 3 4 5 6 7 8 |
const counter (state = 0, action) => switchcase({ 'RESET': 0, 'INCREMENT': () => state + 1, 'DECREMENT': () => state -1 })(state)(action.type) |
Một ví dụ khác
Ví dụ này được lấy từ http://www.w3schools.com/js/js_switch.asp
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var day; switch (new Date().getDay()) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; } |
Bởi vì chúng tôi đã sử dụng switchcase đúng cách, chúng tôi có thể phân tích switch này để các phương thức có thể tái sử dụng nhiều lần, và tất cả chúng ta đều biết …
Làm cho code của chúng ta có thể tái sử dụng luôn luôn là một trong những mục tiêu của chúng ta.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const getDay = switchcase({ 0: 'Sunday', 1: 'Monday', 2: 'Tuesday', 3: 'Wednesday', 4: 'Thursday', 5: 'Friday', 6: 'Saturday' })('Unknown') const getCurrentDay = () => getDay(new Date().getDay()) const day = getCurrentDay() |
Ở đây chúng tôi đã tách ra tất cả các logic từ chức năng getCurrentDay không tinh khiết của chúng tôi vào một chức năng getDay thuần túy. Điều này sẽ làm cho kiểm tra và function composition dễ dàng hơn nhiều.
Ví dụ điển hình
Bây giờ chúng ta có thể làm những điều cool như tạo ra một switchcase lập trình!
|
1 2 3 4 5 6 7 8 9 |
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] const getDay = switchcase( days.reduce((acc, value) => (acc[value] = `The day is ${value}.`, acc), {}) )("I don't know what day it is.") console.log(getDay('Monday')) // 'The day is Monday. |
Đây không phải là ví dụ điển hình nhất. Có những cách rõ ràng và tốt hơn để tạo ra sentence này, tôi chỉ cố gắng để giới thiệu những gì các switchcase có thể làm, do đó tôi đã cắt giảm một số slack!
Code
Đây là switchcase hoàn chỉnh, thuần tuý, immutable và có tác dụng của chúng tôi.
|
1 2 3 4 5 6 7 8 9 10 |
const executeIfFunction = f => typeof f === 'function' ? f() : f export const switchcase = cases => defaultCase => key => key in cases ? cases[key] : defaultCase export const switchcaseF = cases => defaultCase => key => executeIfFunction(switchcase(cases)(defaultCase)(key)) |
Thư viện của bên thứ 3
Đối với những người quan tâm sâu hơn vào thế giới function, thì có một số thư viện tuyệt vời tôi muốn giới thiệu.
Ramda — Ramda là một thư viện chức năng tương tự như lodash và underscore. Xem qua chức năng cond của Ramda. Các chức năng nếu tương tự như switchcase sẽ là một thay thế tuyệt vời!
lodash/fp —Lodash / fp là phiên bản functional của lodash.
Fantasy Land —Một trong những thư viện chức năng phổ biến cho JavaScript.
Tóm tắt
Câu lệnh switch không phù hợp với mô hình chức năng của chúng ta, nhưng chúng ta có thể tạo ra một hàm có các đặc tính tương tự. Chúng tôi phân tích switch thành các phần nhỏ hơn để có thể tái sử dụng. Chúng tôi thậm chí có thể tạo ra một chương trình!
Lưu ý: trước khi bạn ngạc nhiên vì sao switchcase không hỗ trợ ‘fall-through’, đó là vì tôi không cần chúng trong dự án. Nhưng bạn không lưu lại một bản sao chính xác của switch. Vì thật sự chúng ta không cần chúng.
Techtalk via Hackernoon
