คำสั่งที่ดีที่สุด (เป็นกฎของหัวแม่มือ) เมื่อมันสั้น (รหัสฉลาด), (อาจ) ใช้งานได้อีกครั้งและมีขอบเขต จำกัด ในแง่ของการทำงาน การสร้างคำสั่งที่รวมถึง UI และขึ้นอยู่กับบริการ (ที่ฉันถือว่าจัดการการเชื่อมต่อกับแบ็กเอนด์) ไม่เพียง แต่ให้ 2 หน้าที่การใช้งานนั่นคือ:
- การควบคุม UI เพื่อแสดง / ป้อนข้อมูลสำหรับวิดเจ็ต
- ส่งไปที่แบ็กเอนด์ (ผ่านบริการ)
แต่ยังทำให้ใช้งานได้น้อยลงเนื่องจากคุณไม่สามารถใช้งานได้อีกกับบริการอื่นหรือใช้ UI อื่น (อย่างน้อยก็ไม่สะดวก)
เมื่อการตัดสินใจเหล่านี้ผมมักจะเปรียบเทียบกับในตัวองค์ประกอบ HTML: ยกตัวอย่างเช่น<input>, <textarea>หรือ<form>พวกเขามีความเป็นอิสระจากแบ็กเอนด์ที่เฉพาะเจาะจงใด ๆ HTML5 ให้<input>องค์ประกอบพิเศษสองสามอย่างเช่นองค์ประกอบdateซึ่งยังคงเป็นอิสระจากแบ็กเอนด์และตำแหน่งที่ข้อมูลไปหรือการใช้งาน เป็นองค์ประกอบของอินเตอร์เฟสอย่างหมดจด วิดเจ็ตที่กำหนดเองของคุณสร้างขึ้นโดยใช้คำสั่งฉันคิดว่าควรเป็นไปตามรูปแบบเดียวกันหากเป็นไปได้
อย่างไรก็ตามนี่ไม่ใช่จุดสิ้นสุดของเรื่องราว จะเกินกว่าความคล้ายคลึงกับในตัวองค์ประกอบ HTML คุณสามารถสร้างแนวทางใหม่ใช้งานที่บริการโทรศัพท์ทั้งสองและใช้คำสั่ง UI <textarea>อย่างหมดจดเช่นเดียวกับมันอาจใช้ สมมติว่าคุณต้องการใช้ HTML บางส่วนดังนี้:
<document document-url="'documents/3345.html'">
<document-data></document-data>
<comments></comments>
<comment-entry></comment-entry>
</document>
ในการเขียนโค้ดของcommentEntrydirective คุณสามารถสร้าง directive เล็ก ๆ ที่มีคอนโทรลเลอร์ที่เชื่อมโยงบริการกับ UI-widget สิ่งที่ต้องการ:
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
});
};
}
};
});
การทำสิ่งนี้ให้สุดขีดคุณอาจไม่จำเป็นต้องมีng-controllerแอตทริบิวต์แบบแมนนวลใน HTML: คุณสามารถทำได้โดยใช้คำสั่งตราบใดที่แต่ละคนมีบทบาท "UI" ชัดเจนหรือบทบาท "ข้อมูล" ที่ชัดเจน
มีข้อเสียที่ฉันควรพูดถึง: มันให้ "ชิ้นส่วนเคลื่อนไหว" มากขึ้นในแอปพลิเคชันซึ่งเพิ่มความซับซ้อนเล็กน้อย อย่างไรก็ตามหากแต่ละส่วนมีบทบาทที่ชัดเจนและดี (ทดสอบกับหน่วย + E2E) ฉันจะโต้แย้งว่ามันคุ้มค่าและมีประโยชน์โดยรวมในระยะยาว