Một lệnh là tốt nhất (dưới dạng quy tắc) khi nó ngắn (mã thông minh), (có khả năng) có thể sử dụng lại và có phạm vi giới hạn về chức năng. Tạo một lệnh bao gồm UI và phụ thuộc vào một dịch vụ (mà tôi giả sử xử lý kết nối với phụ trợ), không chỉ cung cấp cho nó 2 vai trò chức năng, cụ thể là:
- Kiểm soát UI để hiển thị / nhập dữ liệu cho widget.
- Đệ trình phụ trợ (thông qua dịch vụ).
nhưng cũng làm cho nó ít sử dụng lại được, vì sau đó bạn không thể sử dụng lại với dịch vụ khác hoặc với một giao diện người dùng khác (ít nhất là không dễ dàng).
Khi đưa ra những quyết định này, tôi thường so sánh với built-in phần tử HTML: ví dụ <input>, <textarea>hay <form>: họ là hoàn toàn độc lập của bất kỳ cụ phụ trợ. HTML5 đã cung cấp cho <input>phần tử một vài loại bổ sung, ví dụ date, vẫn độc lập với phụ trợ và nơi chính xác dữ liệu đi hoặc cách sử dụng. Chúng hoàn toàn là các yếu tố giao diện. Các widget tùy chỉnh của bạn, được xây dựng bằng chỉ thị, tôi nghĩ nên theo cùng một mẫu, nếu có thể.
Tuy nhiên, đây không phải là kết thúc của câu chuyện. Vượt xa sự tương tự với các yếu tố HTML tích hợp, bạn có thể tạo các chỉ thị có thể sử dụng lại, vừa gọi dịch vụ, vừa sử dụng chỉ thị UI hoàn toàn, giống như nó có thể sử dụng a <textarea>. Giả sử bạn muốn sử dụng một số HTML như sau:
<document document-url="'documents/3345.html'">
<document-data></document-data>
<comments></comments>
<comment-entry></comment-entry>
</document>
Để mã hóa commentEntrychỉ thị, bạn có thể tạo một lệnh rất nhỏ chỉ chứa bộ điều khiển liên kết dịch vụ với tiện ích UI. Cái gì đó như:
app.directive('commentEntry', function (myService) {
return {
restrict: 'E',
template: '<comment-widget on-save="save(data)" on-cancel="cancel()"></comment-widget>',
require: '^document',
link: function (scope, iElement, iAttrs, documentController) {
// Allow the controller here to access the document controller
scope.documentController = documentController;
},
controller: function ($scope) {
$scope.save = function (data) {
// Assuming the document controller exposes a function "getUrl"
var url = $scope.documentController.getUrl();
myService.saveComments(url, data).then(function (result) {
// Do something
});
};
}
};
});
Đưa điều này đến mức cực đoan, bạn có thể không cần phải có ng-controllerthuộc tính thủ công trong HTML: bạn có thể thực hiện tất cả bằng cách sử dụng các lệnh, miễn là mỗi trực tiếp có vai trò "UI" rõ ràng hoặc vai trò "dữ liệu" rõ ràng.
Có một nhược điểm tôi nên đề cập: nó cung cấp nhiều "bộ phận chuyển động" hơn cho ứng dụng, điều này làm tăng thêm một chút phức tạp. Tuy nhiên, nếu mỗi phần có vai trò rõ ràng và tốt (đơn vị + E2E đã được kiểm tra), tôi sẽ cho rằng nó đáng giá và lợi ích chung trong dài hạn.