Hôm nay, chúng ta sẽ tìm hiểu bằng cách nào mà closures hoạt động trong Javascript bằng 1 ví dụ đơn giản.

Hiểu được closures là rất quan trọng để thành thạo được Javascript vì nó kích hoạt patterns hết sức mạnh mẽ như data privacy và function factories. Hơn thế nữa, đây là 1 chủ đề hết sức phổ biến trong phỏng vấn.

Rất nhiều dev Javascript gặp khó khăn với closures do tính trừu tượng của nó. Chúng ta sẽ giải thích 1 cách đơn giản và dễ hiểu có thể nắm bắt được khái niệm này 1 cách dễ dàng.

Hiểu được Closures để phát huy toàn bộ những kỹ năng về Javascript tiềm tàng của bạn

Closures là 1 khái niệm cơ bản trong Javascript, cho phép các function giữ quyền truy cập tới các variable từ scope của chúng ngay cả khi scope đó đã đóng.

Bây giờ chúng ta sẽ tạo 1 hàm có tên là parentFunction:

Bên trong hàm, ta thấy biến let có tên num với console.log Sau đó, ta tạo 1 hàm có tên là childFunction và trả về hàm đó. Hàm childFunction có giá trị log ra là num++. Hàm childFunction có quyền truy cập giá trị num vì nó có quyền truy cập vào scope hàm cha của nó trong đó có giá trị num.

Cuối cùng, chúng ta sẽ tạo 1 hàm có tên là finalFunction bằng cách thực thi parentFunction:

Nếu chúng ta chạy đoạn code này, thì đây chính xác là những gì hàm finalFunction sẽ được log ra:

Điều quan trọng là bên ngoài hàm parentFunction, chúng ta không thể truy cập giá trị num. Chúng ta sẽ nhận về error nếu log như cách làm dưới đây:

Tuy nhiên, nếu chúng ta thực thi hàm finalFunction:

Chúng ta sẽ thấy giá trị num tăng lên 1.

Chúng ta thấy giá trị được log ra bằng 1 vì console.log(num) đầu tiên được thực thi khi hàm finalFunction được tạo thông qua parentFunction. Và sau đó, giá trị 2 được hiện thị bởi vì chúng ta chạy hàm finalFunction.

Hàm finalFunction có quyền truy cập vào giá trị num mặc dù hàm parentFunction đã được gọi và closed lại.

Một closure được tạo ra khi chúng ta định nghĩa 1 hàm chứ không phải khi 1 hàm đó thực thi.

Có thể hiểu ngắn ngọn, xúc tích như khái niệm trên w3schools: Closures là 1 hàm có quyền truy cập vào scope của cha nó, thậm chí là sau khi hàm cha đã bị closed

Tổng kết lại

Hiểu rõ closures là 1 điều hết sức quan trọng để đi sâu vào các khái niệm nâng cao hơn trong front-end development. Ngoài ra, đây là 1 chủ để phổ biến trong phỏng vấn. Vì vậy bằng cách nắm bắt khái niệm này, bạn sẽ nâng cao kỹ năng đối với 1 front-end developer.

Sass đã được trình làng như một công cụ tự biên dịch hoàn toàn dưới local, hình thành nên trục xương sống của những dự án trong xuyên xuất hơn 1 thập kỉ qua. Nó cho phép tổ chức 1 cách hiệu quả, có thể mở rộng và đầy ổn định 1 gói các CSS. Thậm chí đến ngày hôm nay, tôi vẫn cân nhắc rằng Sass thật sự là 1 công cụ đầy mạnh mẽ. Tuy nhiên, khi mà chúng ta đang bước vào năm 2024, không thể phủ nhận rằng CSS đã và đang trải qua sự phát triển cực kì nhanh chóng. Những tính năng mà trước đây là độc tôn của Sass giờ đây hoàn toàn được tích hợp vào trong CSS, bao gồm biến và điểm nhấn gần nhất là: CSS Nesting.

Variables

Định nghĩa variables đã là 1 điểm mạnh cực lớn riêng biệt của SCSS, cho phép tập trung kiểm soát rất nhiều thuộc tính, 1 tính năng mà đã không có trong CSS trong 1 thời gian dài. Tuy nhiên, hiện nay, variable có thể được định nghĩa trong CSS bằng 1 cách tương tự như ở trong Sass. Một sự khác biệt đáng kể, tuy nhiên, có phải rằng SCSS variables tồn tại độc lập trong bối cảnh tiền xử lý, trong khi CSS variables có thể sử dụng trong trình duyệt và thập chí được viết đè lên 1 cách dynamically bằng Javascript.

CSS Nesting

Khả năng xác định các quy tắc style của một thành phần trong một thành phần khác giúp đơn giản hóa đáng kể việc viết CSS. Thay vì sử dụng nhiều lần cùng một bột selector cho các phần tử phụ hoặc pseudo-selectors, nesting cho phép nhóm các phần tử này trong selector cha. Kỹ thuật này dẫn đến một cấu trúc mã rõ ràng, phân cấp và do đó hiệu quả hơn.

Với sự hỗ trợ của trình duyệt hơn 84% đối với CSS Nesting và 86% đối với Nesting Selector, kỹ thuật này ngày càng trở nên dễ tiếp cận.

:is() Pseudo-Class

:is() pseudo-class cách mạng hóa khái niệm selector bằng cách chấp nhận danh sách các selector và tạo kiểu cho tất cả các phần tử khớp với bất kỳ selector nào trong số này. Điều này hỗ trợ rất nhiều cho việc lựa chọn và styling cho các phần tử trong DOM.

Thay vì danh sách selector dài, bạn có thể sử dụng :is() để cải thiện khả năng đọc đồng thời tránh bộ chọn dài.

:has() Pseudo-Class

:has() pseudo class cung cấp một cách mạnh mẽ để chọn một phần tử dựa trên các phần tử con của nó, tương tự như việc áp dụng các kiểu có điều kiện.

Truy vấn vùng chứa

Truy vấn vùng chứa được coi là sự đổi mới quan trọng nhất trong thiết kế web kể từ CSS3. Họ mở rộng khái niệm Responsive Design bằng cách cho phép các thành phần điều chỉnh dựa trên kích thước vùng chứa của chúng. Technique này cho phép thiết kế của một phần tử thay đổi linh hoạt tùy theo context, dẫn đến thiết kế linh hoạt và thích ứng hơn.

Nếu tùy chọn vùng chứa có variable --theme: dark, hãy thêm CSS sau.

Xếp tầng layers

Với xếp tầng layers, chúng ta có thể tránh việc nesting các classes, ID, v.v. để có độ đặc hiệu cao hơn bằng cách chỉ định layer của riêng mình. Bằng cách sử dụng @layer và @imports, chúng ta có thể xây dựng các layer xếp tầng của riêng mình - từ các kiểu có mức độ ưu tiên thấp như đặt lại và mặc định, thông qua các theme, framework và design systems, cho đến các kiểu có mức độ ưu tiên cao nhất như components, utilities và overrides. Các layer xếp chồng cung cấp nhiều quyền kiểm soát hơn.

Tương lai của SASS

Có nghĩa là Sass đang trở nên lỗi thời? Không. Mixins và các function, chẳng hạn như chuyển đổi pixel thành rem, vẫn là những lợi thế không thể thay thế của Sass. Tuy nhiên, tôi đã quyết định từ bỏ Sass trong hầu hết các dự án của mình. Thay vào đó, tôi sử dụng block codes và packages được xác định trước trong Sublime Editor, điều này đã cải thiện đáng kể quy trình làm việc của tôi.