在組件中思考-js教程-PHP中文網

在組件中思考

鑰匙要點

界面開發的組件方法提供了比傳統MVC和MVVM框架的好處，重點是交互的最小抽象部分，而不是建模業務領域。
在我看來，MVC設計的頂空間是“我如何建模我的業務領域？如何建模與該域交互的過程？如何建模界面以促進這些過程？”。我認為，這個頂空不能促進良好的組件設計。實際上，當您打算將界面分解為可組合組件時，您應該如何思考。充其量您最終會獲得微型應用程序。在最糟糕的情況下，您將建立上帝的組成部分。您要做的最後一件事是將業務領域作為組件建模。您應該以建模為目標是您可以描述的最小的互動段。

設計重複使用

而不是“我如何製作這個不可接受的警報面板？”，問自己：“如果我添加了新的HTML元素來促進這種互動，它們會是什麼？”。我發現這導致了與業務領域安全距離的組成部分，並且本質上是在不同情況下最可重複使用的組件。

作為另一個例子，不要製作您要允許搜索幫助系統的任何地方使用類型的幫助搜索組件，製作一個暗示性的文本輸入組件，以了解提供輸入建議所涉及的交互。然後進行幫助搜索API數據組件，該組件知道如何接收數據請求，與幫助搜索API進行交互並進行廣播結果。現在，您的建議性文本輸入的測試不需要任何嘲笑API，當您被要求將建議添加到“標籤”字段中時，您可以放入現有的建議性文本輸入組件中，匯總一個簡單的數據組件來交談到標籤API，然後完成！

實踐 - “項目清單”

對於具體示例，讓我們看一個簡單的接口作為隔離組件。以下模型是從99Designs 1比1項目系統中提取的。雖然UI已大大簡化，但我們將在撰寫本網站上構建的JavaScript是生產代碼。這是線框：

在組件中思考

我們所擁有的是在三個項目列表之間進行導航 - 主動，草稿和存檔。每個項目都有一個可以對其執行的操作 - 存檔一個活躍的項目，刪除草稿或重新激活存檔項目。在應用設計思維中，我們將開始建模項目並提供諸如“存檔”和“刪除”之類的方法，以及“狀態”屬性以跟踪其所屬的三個列表中的哪個。正是我們要避免的事情，因此我們只能關注互動以及促進它們所需的東西。

在其核心中，我們每行有一個動作。執行該操作時，我們想從列表中刪除該行。我們已經提供了任何特定項目的領域知識！此外，我們有一個計數，每個列表中有多少個項目。為了限製本文的範圍，我們假設每個頁面都是生成服務器端的，而TAB導航會導致完整頁面刷新。由於我們不需要強制依賴JavaScript，因此我們的操作按鈕將是提交事件處理程序的表單元素，這些元素會異步執行表格的操作並在完成時廣播事件。

以下是單個項目行的HTML：>

>我將使用飛行來構建我們的組件。目前，由於我以前的SitePoint JavaScript文章中概述的原因。

<span><span><span><li</span>></span>
</span>  <span><span><span><a</span> href<span>="/projects/99"</span> title<span>="View project"</span>></span>Need sticker designs for XYZ Co.<span><span></a</span>></span>
</span>  <span><span><span><div</span> class<span>="project__actions"</span>></span>
</span>    <span><span><span><a</span> href<span>="/projects/99"</span> class<span>="button"</span>></span>View<span><span></a</span>></span>
</span>    <span><span><span><form</span> class<span>="action"</span> action<span>="/projects/99/archive"</span> method<span>="post"</span>></span>
</span>        <span><span><span><button</span>></span>Archive<span><span></button</span>></span>
</span>    <span><span><span></form</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></li</span>></span></span>

登入後複製

>這是我們用於處理表單提交和廣播事件的異步組件：

我們維護一個嚴格的政策，即從未使用JavaScript的類屬性，因此我們將在我們的操作表格中添加一個data-assync-form屬性，並將我們的組件附加到所有匹配的表單上，例如So：

<span><span><span><li</span>></span>
</span>  <span><span><span><a</span> href<span>="/projects/99"</span> title<span>="View project"</span>></span>Need sticker designs for XYZ Co.<span><span></a</span>></span>
</span>  <span><span><span><div</span> class<span>="project__actions"</span>></span>
</span>    <span><span><span><a</span> href<span>="/projects/99"</span> class<span>="button"</span>></span>View<span><span></a</span>></span>
</span>    <span><span><span><form</span> class<span>="action"</span> action<span>="/projects/99/archive"</span> method<span>="post"</span>></span>
</span>        <span><span><span><button</span>></span>Archive<span><span></button</span>></span>
</span>    <span><span><span></form</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></li</span>></span></span>

登入後複製

>現在，我們有能力執行動作，並廣播將在成功中傳播DOM樹的事件。下一步是聆聽該事件，並刪除其起泡的行。為此，我們有可移動的：

<span>define(function(require) {
</span>  <span>'use strict';
</span>
  <span>var defineComponent = require('flight/lib/component');
</span>
  <span>function <span>AsyncForm</span>() {
</span>    <span>this.defaultAttrs({
</span>      <span>broadcastEvent: 'uiFormProcessed'
</span>    <span>});
</span>
    <span>this.after('initialize', function() {
</span>      <span>this.on(this.node, 'submit', this.asyncSubmit.bind(this));
</span>    <span>});
</span>
    <span>this.asyncSubmit = function(event) {
</span>      event<span>.preventDefault();
</span>      $<span>.ajax({
</span>        <span>'url': this.$node.attr('action'),
</span>        <span>'dataType': 'json',
</span>        <span>'data': this.$node.serializeArray(),
</span>        <span>'type': this.$node.attr('method')
</span>      <span>}).done(function(response<span>, data</span>) {
</span>        <span>this.$node.trigger(this.attr.broadcastEvent, data);
</span>      <span>}.bind(this)).fail(function() {
</span>        <span>// error handling excluded for brevity
</span>      <span>});
</span>    <span>};
</span>  <span>}
</span>
  <span>return defineComponent(AsyncForm);
</span><span>});</span>

登入後複製

>再次，我們在項目行中添加了一個可移動的屬性，然後將組件附加到行元素：

<span>AsyncForm.attachTo('[data-async-form]');</span>

登入後複製

完成！每個事件都有兩個小組，我們以優雅降級的方式處理了三種類型的動作。只剩下一件事，這就是我們在每個選項卡上的計數。應該很容易，我們需要的只是每次刪除一行時將活動選項卡的計數減少一個。但是等等！當一個活動的項目被存檔時，歸檔的計數需要增加，並且重新激活存檔的項目時，激活的計數需要增加。首先，讓我們製作一個可以接收指令更改其數字的計數組件：

<span>define(function(require) {
</span>  <span>'use strict';
</span>
  <span>var defineComponent = require('flight/lib/component');
</span>
  <span>function <span>Removable</span>() {
</span>    <span>this.defaultAttrs({
</span>      <span>'removeOn': 'uiFormProcessed'
</span>    <span>});
</span>
    <span>this.after('initialize', function() {
</span>      <span>this.on(this.attr.removeOn, this.remove.bind(this));
</span>    <span>});
</span>
    <span>this.remove = function(event) {
</span>      <span>// Animate row removal, remove DOM node, teardown component
</span>      $<span>.when(this.$node
</span>        <span>.animate({'opacity': 0}, 'fast')
</span>        <span>.slideUp('fast')
</span>      <span>).done(function() {
</span>        <span>this.$node.remove();
</span>      <span>}.bind(this));
</span>    <span>};
</span>  <span>}
</span>
  <span>return defineComponent(Removable);
</span><span>});</span>

登入後複製

我們的計數將在HTML中表示為 4 之類的東西。由於計數在文檔級別上傾聽事件，因此我們將其事件屬性為空。這將迫使任何使用它來定義此實例應聽取的事件，並防止意外地讓多個計數實例收聽同一事件的說明。

<span>Removable.attachTo('[data-removable]');</span>

登入後複製

<span>define(function(require) {
</span>  <span>'use strict';
</span>
  <span>var defineComponent = require('flight/lib/component');
</span>
  <span>function <span>Count</span>() {
</span>    <span>this.defaultAttrs({
</span>      <span>'event': null
</span>    <span>});
</span>
    <span>this.after('initialize', function() {
</span>      <span>this.on(document, this.attr.event, this.update.bind(this));
</span>    <span>});
</span>
    <span>this.update = function(event<span>, data</span>) {
</span>      <span>this.$node.text(
</span>        <span>parseInt(this.$node.text(), 10) + data.modifier
</span>      <span>);
</span>    <span>}
</span>  <span>}
</span>
  <span>return defineComponent(Count);
</span><span>});</span>

登入後複製

現在，計數和可移動之間的耦合發生在特定的頁面腳本中，我們將組件連接到DOM：：

任務完成了。我們的櫃檯對我們的項目列表行不了解，這些行不了解其中的形式。而且，這些組件都沒有以少數方式設計的，圍繞著項目列表的概念。

<span>Count.attachTo(
</span>  <span>'[data-counter="active"]',
</span>  <span>{'event': 'uiActiveCountChanged'}
</span><span>);
</span>
<span>Count.attachTo(
</span>  <span>'[data-counter="draft"]',
</span>  <span>{'event': 'uiDraftCountChanged'}
</span><span>);
</span>
<span>Count.attachTo(
</span>  <span>'[data-counter="archived"]',
</span>  <span>{'event': 'uiArchivedCountChanged'}
</span><span>);</span>

登入後複製

最後一分鐘添加

>我們的UX設計師指出，如果有人試圖刪除草稿時，我們要求確認會更好，因為這項操作無法撤銷。沒問題，我們可以鞭打一個可以做到這一點的組件：