Trong bài viết này, hãy cố gắng hiểu cách chúng ta có thể xây dựng chức năng phức tạp bằng cách soạn thảo các chức năng nhỏ hơn trong JavaScript.

ĂN, NGỦ, MÃ — Cách tiếp cận lồng nhau

Giả sử rằng chúng ta muốn thực hiện hoạt động “ĂN, NGỦ, MÔ và lặp lại điều này một lần nữa. Đây là một cách tiếp cận làm thế nào chúng ta có thể làm điều này.

const activity = (str) => str.toUpperCase();
const sleep = (str) => `${str} SLEEP`;
const code = (str) => `${str} CODE`;
const repeat = (str) => `${str} | ${str}`;

// EAT SLEEP CODE | EAT SLEEP CODE
console.log(
  repeat(code(sleep(activity('eat'))))
  );

ĂN, NGỦ, MÃ - Thành phần bậc cao hơn

Chúng tôi sẽ xem xét cách chúng tôi có thể làm cho điều này tốt hơn bằng cách sử dụng hàm bậc cao hơn để tạo bố cục cho chúng tôi.

const activity = (str) => str.toUpperCase();
const sleep = (str) => `${str} SLEEP`;
const code = (str) => `${str} CODE`;
const repeat = (str) => `${str} | ${str}`;

// Higher order function that accepts any number of functions as arguments
const compose = (...fns) => x => fns.reduce((acc, fn)=> fn(acc),x);
const myRoutine = compose(activity, sleep, code, repeat);

// EAT SLEEP CODE | EAT SLEEP CODE
console.log(myRoutine('eat'));

• Phương thức soạn thảo có thể chấp nhận nhiều hàm làm đối số bằng cách sử dụng toán tử nghỉ.
• Sau đó, nó trả về một hàm đang đợi giá trị ban đầu của nó.
• Trong hàm được trả về này, chúng ta có thể truy cập vào mảng các hàm được truyền dưới dạng đối số (đóng).
• Thứ tự của hàm đi từ trái sang phải. Vì vậy, chúng tôi sẽ sử dụng phương thức rút gọn, chấp nhận một bộ tích lũy và giá trị hiện tại là một hàm. Điều này sẽ trả về kết quả của giá trị tích lũy trên chức năng hiện tại.
• Đối số thứ hai để giảm là giá trị ban đầu của chúng tôi x.
• Vì vậy, cuối cùng chúng ta có thể tạo thói quen của mình bằng cách soạn tất cả các hoạt động của mình. Thường trình nên được gọi bằng cách chuyển đối số cho chức năng đầu tiên.

Đây là chế độ xem được chia nhỏ của chức năng soạn thảo để rõ ràng hơn.

// Arrow variant
const compose = (...fns) => x => fns.reduce((acc, fn)=> fn(acc),x);

// Non arrow variant
function compose(...fns) {
  return function (x) {
    return fns.reduce((acc, fn) => fn(acc), x);
  };
}

Cách tiếp cận này có những lợi ích sau:

• Giúp giảm bớt sự rườm rà do lồng ghép nhiều chức năng.
• Có thể đọc và có thể mở rộng