Cải thiện kĩ năng Javascript bằng cách tự viết Framework

Tram Ho

Đã bao giờ bạn tự hỏi cách hoạt động của 1 framework ?

Khi tôi phát hiện ra AngularJS sau khi học Jquery từ rất nhiều năm trước, AngularJs giường như nó là một thứ ma thuật đen tối đối với tôi

Sau đó, Vue js ra mắt, và khi phân tích cách hoạt động của nó, tôi đã thử viết hệ thống ràng buộc 2 chiều của riêng mình.

Trong bài viết này, tôi sẽ chỉ cho bạn cách viết 1 Javascript framework với các HTML elements tùy chỉnh, cách thức giao tiếp và binding 2 chiều.

Cách thức giao tiếp hoạt động như thế nào ?

Sẽ là rất tốt để bắt đầu với sự hiểu biết về cách hoạt động của framework. Trên thực tế, khi bạn khai báo 1 thành phần mới trong Vue js, framework sẽ hỗ trợ từng thuộc tính (getters và setters) bằng cách sử dụng proxy design pattern.

Do đó, nó sẽ có thể phát hiện các thay đổi giá trị thuộc tính kể cả từ đầu vào ở code hoặc từ người dùng nhập.

Proxy design pattern trông như thế nào ?

Ý tưởng đằng sau proxy design pattern rất đơn giản đó là sự truy cập overload vào một object. Một ví dụ tương tự trong cuộc sống là truy cập vào tài khoản ngân hàng của bạn.

Ví dụ: bạn không thể truy cập trực tiếp vào số dư tài khoản ngân hàng của mình và thay đổi theo nhu cầu. Bạn cần hỏi người có quyền, trong trường hợp này là ngân hàng bạn đang gửi tiền.

Trong ví dụ trên, khi sử dụng object bank để truy cập vào số dư (balance), hàm getters đã bị overload và nó luôn trả về 9.000.000 thay vì giá trị của thuộc tính, ngay cả khi thuộc tính không tồn tại

Bằng cách overloading hàm setters, bạn có thể điều khiển hành vi của nó. Bạn có thể thay đổi giá trị vào hàm set, cập nhật các thuộc tính khác thay thế, thậm chí là không làm bất cứ điều gì.

Ví dụ về cách hoạt động

Bây giờ bạn đã chắc chắn hiểu về cách hoạt động của proxy design pattern, hãy bắt đầu viết Javascript framework của riêng bạn

Để đơn giản, tôi sẽ bắt chước cú pháp của Angular Js để thực hiện. Định nghĩa 1 controller và binding template tới controller action.

Đầu tiên, định nghĩa 1 controller với các properties. Sau đó, sử dụng controller này ở trong template. Cuối cùng sử dụng thuộc tính ng-bind để bật double-binding với giá trị của phần tử.

Gán template và khởi tạo controller

Để có các properties dùng cho việc bind, chúng ta cần có 1 controller và định nghĩa các properties. Vì vậy, phải cần định nghĩa controller và cho nó vào framework.

Trong quá trình định nghĩa controller, framework sẽ tìm kiếm các phần tử có thuộc tính ng-controller.

Nếu nó phù hợp với một trong số các controller đã khai báo, nó sẽ tạo ra một instance mới của controller đó. Instance controller đó sẽ chỉ chịu trách nhiệm cho một phần của mẫu template này.

Đây là cách khai báo một controller thủ công. Object controller sẽ chưa tất cả các controllers được khai báo trong framework bằng cách gọi addController.

Đối với mỗi controller, một factory function sẽ được lưu để khởi tạo controller mới khi cần. Framework cũng lưu mỗi instance mới của cùng controller được sử dụng trong cùng 1 template.

Bindings

Tại thời điểm này, chúng ta đã có một instance của controller và 1 template sử dụng instance controller này

Bước tiếp theo là trông chờ cho việc binding phần tử mà sử dụng properties của controller.

Rất đơn giản, nó lưu toàn bộ các ràng buộc của một object (sử dụng như một hash)

Biến này chứa tất cả thuộc tính để liên kết với properties hiện tại và tất cả các phần tử DOM được bind từ property này

Bind controller properties 2 chiều

Sau khi công việc sơ bộ đã được thực hiện bởi Framework, bây giờ đến phần thú vị: double-binding.

Nó liên quan đến việc ràng buộc properties của controller với các DOM elements bất cứ khi nào mà code cập nhập giá trị của properties.

Ngoài ra, đừng quên liên kết DOM elements với properties của controller. Bằng cách này, khi người dùng thay đổi giá trị đầu vào, nó sẽ cập nhật vào properties của controller. Sau đó, nó cũng cập nhật các element DOM khác liên kết với property đó.

Phát hiện cập nhật từ code qua proxy

Như đã giải thích ở trên, Vue bao bọc các component trong một proxy để tương tác với các thay đổi của các properties. Hãy làm điều tương tự bằng cách ủy quyền setter chỉ cho các properties ràng buộc với controller.

Bất cứ khi nào một property được thiết lập, proxy sẽ tìm kiếm tất cả các elements có liên kết với property này. Sau đó nó sẽ cập nhật giá trị mới cho chúng.

Trong ví dụ này, chúng ta sẽ chỉ hỗ trợ các ràng buộc từ phần tử đầu vào, vì value của chúng được đặt.

Phản ứng trên các events của element

Điều cuối cùng cần làm là lắng nghe tương tác của người dùng trên giao diện. DOM elements trigger các events khi chúng phát hiện có thay đổi giá trị

Lắng nghe các events đó và cập nhật các property ràng buộc với giá trị mới

Bạn có thể xem toàn bộ demo tại đây

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo