Trong bài viết này, chúng ta sẽ nói về các bao đóng trong JavaScript. Tôi sẽ hướng dẫn bạn định nghĩa về bao đóng, ví dụ về đóng tiện ích tìm nạp hàng ngày đơn giản và một số ưu điểm và nhược điểm của việc sử dụng bao đóng.
Mục lục
Không chần chừ nữa, chúng ta hãy bắt đầu.
điều kiện tiên quyết
Bạn nên hiểu rõ về các chủ đề sau để hiểu bài viết này:
đóng cửa là gì?
Bao đóng là các hàm có quyền truy cập vào các biến có trong chuỗi phạm vi của chúng ngay cả khi hàm bên ngoài không còn tồn tại.
Để hiểu điều này chi tiết hơn, hãy hiểu chuỗi phạm vi là gì. Chuỗi phạm vi đề cập đến thực tế là phạm vi cha không có quyền truy cập vào các biến bên trong phạm vi con của nó, nhưng phạm vi con lại có quyền truy cập vào các biến có trong phạm vi cha của nó.
Hãy làm cho điều này rõ ràng hơn bằng cách xem một ví dụ dưới đây:
let buttonProps = (borderRadius) => {
const createVariantButtonProps = (variant, color) => {
const newProps = {
borderRadius,
variant,
color
};
return newProps;
}
return createVariantButtonProps;
}Như bạn có thể thấy, chúng ta có một chức năng gọi là buttonProps. Chức năng này chấp nhận borderRadius như một lý lẽ. Hãy xem xét buttonProps chức năng như chức năng cha mẹ của chúng tôi.
Chúng ta có một hàm khác đã được định nghĩa bên trong hàm cha, đó là createVariantButtonProps. Chức năng này sẽ chấp nhận variant và color như một đối số và trả về một đối tượng cấu thành một biến borderRadius hiện diện bên ngoài phạm vi của nó.
Nhưng một câu hỏi đặt ra là làm thế nào hàm bên trong giải quyết các biến có trong phạm vi cha.
Vâng, điều này là có thể thông qua phạm vi từ vựng. Sử dụng phạm vi từ vựng, trình phân tích cú pháp JS biết cách giải quyết các biến có trong phạm vi hiện tại của nó hoặc trên thực tế biết cách giải quyết các biến có trong các hàm lồng nhau.
Vì vậy, dựa trên lời giải thích trên, createVariantButtonProps sẽ có quyền truy cập vào các biến có trong chức năng bên ngoài của nó buttonProps.
Trong ví dụ trên, hàm bên trong createVariantButtonProps là một đóng cửa. Để hiểu chi tiết về các bao đóng, trước tiên chúng ta sẽ đi qua các đặc điểm của bao đóng như sau:
- Ngay cả khi chức năng bên ngoài không còn tồn tại, một bao đóng vẫn có quyền truy cập vào các biến cha của nó.
- Các bao đóng không có quyền truy cập vào chức năng bên ngoài của chúng
argstham số.
Hãy đi vào chi tiết hơn về từng điểm này.
Ngay cả khi chức năng bên ngoài không còn tồn tại, nó vẫn có quyền truy cập vào các biến cha của nó.
Đây là chức năng cơ bản của bất kỳ bao đóng nào. Đây là phương châm sống chính hay còn gọi là nguyên tắc làm việc của họ.
Để thấy điều này trong hành động, bây giờ chúng ta sẽ thực hiện ở trên buttonProps chức năng.
let primaryButton = buttonProps("1rem"); gọi các buttonProps chức năng sẽ trả lại cho chúng tôi một chức năng khác là bao đóng của chúng tôi.
Bây giờ hãy thực hiện bao đóng này:
const primaryButtonProps = primaryButton("primary", "red");Khi việc đóng được thực thi, nó sẽ trả về đối tượng sau:
{
"borderRadius":"1rem",
"variant":"primary",
"color":"red"
}Ở đây một lần nữa một câu hỏi đặt ra: Làm thế nào để primaryButton chức năng có quyền truy cập vào biến borderRadius mà không có mặt bên trong nó?
Nếu chúng ta xem qua định nghĩa về bao đóng và chuỗi phạm vi mà chúng ta đã thảo luận trước đó, thì nó hoàn toàn phù hợp với trường hợp đó.
Hãy tìm hiểu sâu hơn về lý do tại sao các bao đóng vẫn có quyền truy cập vào các biến được xác định bên ngoài phạm vi của chúng, ngay cả khi hàm bên ngoài không còn tồn tại – ví dụ: borderRadius?
Câu trả lời rất đơn giản: bao đóng không lưu trữ giá trị tĩnh. Thay vào đó, chúng lưu trữ các tham chiếu đến các biến có trong chuỗi phạm vi. Theo cách này, ngay cả khi chức năng bên ngoài chết, chức năng bên trong, đó là một bao đóng, vẫn có quyền truy cập vào các biến cha của nó.
Trường hợp sử dụng bao đóng: Tạo tiện ích tìm nạp với bao đóng
Bây giờ chúng ta đã biết bao đóng là gì, chúng ta sẽ tạo một hàm tiện ích cho mục đích chung đẹp mắt. Nó sẽ xử lý các phương thức yêu cầu khác nhau như GET và POST với API REST.
Đối với trường hợp sử dụng này,
- Chúng tôi sẽ sử dụng API trình giữ chỗ JSON. Điều này cung cấp cho chúng tôi một số dữ liệu giả mà chúng tôi có thể chỉnh sửa bằng API REST.
- Chúng tôi sẽ sử dụng API tìm nạp của JavaScript.
Trước tiên hãy thảo luận về lý do tại sao chúng ta cần thiết kế một tiện ích như vậy. Có một vài lý do:
- Đối với mọi cuộc gọi tìm nạp, chúng tôi không muốn xác định URL cơ sở (hoặc các tham số phổ biến khác) mọi lúc. Vì vậy, chúng tôi sẽ tạo một cơ chế sẽ lưu trữ URL/tham số cơ sở dưới dạng trạng thái.
- Để loại bỏ mã dư thừa.
- Để cung cấp tính mô-đun trong cơ sở mã.
Hãy cùng tìm hiểu chi tiết về tiện ích này. Tiện ích tìm nạp của chúng tôi sẽ giống như bên dưới:
const fetchUtility = (baseURL, headers) => {
const createFetchInstance = (route, requestMethod, data) => {
const tempReq = new Request(`${baseURL}${route}`, {
method: requestMethod,
headers,
data: data || null
});
return [fetch, tempReq];
};
return createFetchInstance;
};fetchUtilitychấp nhận hai tham số đó làbaseURLvàheaders. Chúng sẽ được sử dụng sau này trong quá trình đóng để tạo URL cơ sở cùng với các tiêu đề.- Sau đó chúng tôi có
createFetchInstancechấp nhậnrouterequestMethodvàdatanhư các tham số. - Tiếp theo, hàm này tạo một đối tượng yêu cầu mới sẽ tạo URL của chúng ta bằng mã:
${baseURL}${route}. Chúng tôi cũng chuyển vào một đối tượng bao gồm loại phương thức yêu cầu, tiêu đề và dữ liệu nếu có. - Sau đó, chúng tôi trả về phiên bản API tìm nạp cùng với đối tượng yêu cầu.
- Cuối cùng, chúng tôi trả lại
createFetchInstancechức năng.
Bây giờ hãy xem chức năng này hoạt động. gọi cho chúng tôi fetchUtility chức năng khởi tạo baseURL:
const fetchInstance = fetchUtility("https://jsonplaceholder.typicode.com");- Nếu chúng ta quan sát, các
fetchInstancebây giờ có giá trị của việc đóng chức năngfetchUtility. - Tiếp theo, chúng tôi chuyển tuyến đường và loại yêu cầu cho việc đóng cửa
fetchInstance:
const [getFunc, getReq] = fetchInstance("/todos/1", "GET");Như bạn có thể thấy điều này trả về cho chúng tôi một mảng phiên bản API tìm nạp và phần thân yêu cầu mà chúng tôi đã định cấu hình.
Cuối cùng, chúng ta có thể sử dụng getFunc tìm nạp API để gọi yêu cầu getReq như dưới đây:
getFunc(getReq)
.then((resp) => resp.json())
.then((data) => console.log(data));Chúng ta cũng có thể tạo một yêu cầu POST tương tự như yêu cầu GET ở trên. Chúng ta chỉ cần gọi fetchInstance một lần nữa như dưới đây:
const [postFunc, postReq] = fetchInstance(
"/posts",
"POST",
JSON.stringify({
title: "foo",
body: "bar",
userId: 1
})
);Và để thực hiện yêu cầu đăng bài này, chúng ta có thể thực hiện thao tác tương tự mà chúng ta đã thực hiện đối với yêu cầu GET:
postFunc(postReq)
.then((resp) => resp.json())
.then((data) => console.log(data));Nếu chúng ta xem kỹ ví dụ trên, chúng ta có thể thấy rằng hàm bên trong createFetchInstance có quyền truy cập vào các biến có trong chuỗi phạm vi của nó. Với sự trợ giúp của phạm vi từ vựng, trong quá trình định nghĩa createFetchInstance nó giải quyết các tên biến.
Theo cách này, bao đóng tham chiếu đến các biến baseURL và headers trong định nghĩa của nó ngay cả sau chức năng bên ngoài fetchUtility đã không còn tồn tại.
Nếu chúng ta nghĩ về bao đóng từ một góc độ khác, thì bao đóng giúp chúng ta duy trì trạng thái như baseURL và headers mà chúng ta có thể sử dụng trên các lệnh gọi hàm.
Ưu điểm của việc đóng cửa
Dưới đây là một số lợi thế của việc đóng cửa:
- Chúng cho phép bạn đính kèm các biến vào ngữ cảnh thực thi.
- Các biến trong bao đóng có thể giúp bạn duy trì trạng thái mà bạn có thể sử dụng sau này.
- Họ cung cấp đóng gói dữ liệu.
- Chúng giúp loại bỏ mã thừa.
- Chúng giúp duy trì mã mô-đun.
Nhược điểm của việc đóng cửa
Có hai nhược điểm chính của việc lạm dụng bao đóng:
- Các biến được khai báo bên trong một bao đóng không được thu gom rác.
- Quá nhiều lần đóng có thể làm chậm ứng dụng của bạn. Điều này thực sự là do trùng lặp mã trong bộ nhớ.
Tóm lược
Vì vậy, theo cách này, các bao đóng có thể thực sự hữu ích nếu bạn muốn xử lý hoặc triển khai các mẫu thiết kế nhất định. Chúng cũng giúp bạn viết mã gọn gàng và theo mô-đun.
Nếu bạn thích ý tưởng đóng cửa, thì tôi khuyên bạn nên đọc thêm về các chủ đề sau:
Cảm ơn bạn đã đọc!
theo tôi trên TwitterGitHub và LinkedIn.
