資訊專欄INFORMATION COLUMN
摘要：但這樣的模型存在一些明顯的弊端組件之間的交互是直接通過調用對方的函數來實現，耦合性高，不易維護與擴張。增加層為了降低組件與層的耦合性，我們可以增加一個層，專門負責模型的增刪改查等操作。但目前組件之間的耦合性依然很高。
1 簡介
TodoMVC（http://todomvc.com/）這個開源項目是幫助小伙伴們選擇合適的MV*框架。TodoMVC旨在用各種框架實現TodoList的增、刪、改、查功能，麻雀雖小，五臟俱全，是供小伙伴學習、練習、再學習的好例子。
（看看人家老外的例子，再看看咱們過來的例子。。。哎）
2 我的版本
雖然官網上有各種實現版本，但仿佛缺少那么一個版本，就是，就是。。。我實現的版本。為此，本猿拋磚引玉，用RequireJs+jQuery實現一個組件化的TodoMVC。
源碼地址: https://github.com/Asrocky/iTodoMVC/tree/master
之所以沒有用到高級的前端MV框架，如AngularJs、ReactJs+Flux等，是為了幫助大家學習前端組件化開發思想。同時，也希望大家將這種較為單純的實現方法與其它前端MV框架進行對比，理解其它框架的實現初衷和原理。
本猿實現的這個版本有以下兩大特點：
1) 組件之間的關系可視化：
在頁面上右鍵“審查元素”就能通過注釋，清楚地看見組件之間的關系（如下圖）。這些注釋是通過覆寫jquery的html、append等函數實現的，并不需要程序猿自己去打印注釋。這樣一來，調試或修改代碼時就能夠快速定位代碼的出處，即使不是本人寫的代碼，調試起來也很輕松。當需要正式發布代碼時，可以通過設置一個參數來關閉這個注釋功能。
2) 組件之間不直接調用對方的函數，而是通過消息來完成交互。
如上圖所示，我設計了兩種消息，一種是請求消息（request），一種是觸發消息（trigger）。
請求消息（request）：意思是當這個組件要做某個操作，比如添加Todo，它便發起“addTodo”這個消息，并附帶上newTodo這個參數。至于誰來實現這個請求，它不關心。
觸發消息（trigger）：意思是當這個組件完成了某個操作，比如成功添加Todo，它便觸發“NewTodo_addTodo”這個消息，誰關心這個消息，誰就把自己的函數綁定到這個消息上。
請求消息與觸發消息的最大區別是：請求消息只會有一個實現，一對一的關系，而且往往會返回處理后的結果；而觸發消息是一對多的關系，就像廣播消息一樣，誰關心誰監聽，一旦有這個消息觸發，便執行相關操作。
具體實現代碼請查看TodoApputilsase.js（代碼很挫，只供學習參考）
3 實現
Talk is cheap, show me the code!——忍不住引用一下Linus Torvalds的名言。但在看代碼前，先看看項目完成后的代碼目錄結構，方便理解。
3.1 拆分組件
假設下面是設計工程師給你的靜態頁面（TodoApp _static_TodoApp.html），我們首先要做的事情是用組件化的思維，將其分為若干個組件來動態渲染。
何為組件？組件就是你給我一個錨點——一個section，一個div，或者一個span，我就在這個錨點指定的空間內渲染組件內容。
如何拆分？請遵守兩個原則：
1、一切皆組件：我們將TodoApp這個應用看作一個大組件，它嵌套了三個子組件：NewTodo組件、ListTodo組件、SortTodo組件。而ListTodo組件又嵌套了子組件TodoItem。
2、單一職責原則：組件的功能盡可能地單一明了，不要將太多的功能設計到同一個組件中。功能多了，就想辦法設計子組件，將功能分拆出去。
根據上面提到兩個設計原則，我們將這個靜態頁面代碼分拆成5個組件，它們的關系和功能如下：
3.2 構建組件
根據上述的設計，我們將設計好的組件構建出來。從MVC的角度分析，其關系如下圖所示。
但這樣的模型存在一些明顯的弊端：
1) 組件之間的交互是直接通過調用對方的函數來實現，耦合性高，不易維護與擴張。
2) 組件直接訪問與操作數據儲存(Storage)，這個Storage可能是服務端，也可能是本地存儲，不管是什么，直接訪問與操作會導致代碼維護與擴展的極為不靈活。
比如說項目的前后臺并行開發。前端數據的存儲操作通過一個假服務端或瀏覽器的本地存儲來完成。如果你將這部分操作直接寫在組件的代碼中，以后改你代碼的同事一定會罵你九條街。
3.3 增加Service層
為了降低組件與Storage層的耦合性，我們可以增加一個Service層，專門負責模型的增刪改查等操作。你也可以將這個Service層理解成Model層，因為它封裝了模型的所有操作。
但目前組件之間的耦合性依然很高。比如現在增加了一個新模塊ProjectApp，要求當TodoApp新增Todo時，ProjectApp也要做出聯動響應。那么你不得不找到TodoApp中新增Todo的代碼進行修改。大部分人遇到這種情況都會來一句——找你妹的代碼！
3.4 增加消息中間件
之前已經提到過，本實例中的組件是通過消息來完成交互的。但問題就來了，消息都發到哪了？誰來處理這些消息了？如果直接在各個組件中監聽、處理消息，將會導致一個消息被發送后，不知道誰會處理了這個消息。代碼維護起來十分困難。
為此，我們可以增加了一個特殊的組件——消息中間件msgHub。
請求消息的實現與觸發消息的綁定都是在msgHub中完成。如此一來，以后變更或擴展項目，只需要在msgHub中修改消息與函數之間的綁定關系即可（TodoAppcomps msgHub.js）。
夜已深，有空再將詳細介紹代碼。歡迎交流拍磚。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86072.html
摘要：在裝載組件之前調用會組件的構造函數。當實現子類的構造函數時，應該在任何其他語句之前調用設置初始狀態綁定鍵盤回車事件，添加新任務修改狀態值，每次修改以后，自動調用方法，再次渲染組件。可以通過直接安裝到項目中，使用或進行引用。 首先我們看一下我們完成后的最終形態：TodoMvc： showImg(https://segmentfault.com/img/remote/14600000085...
摘要：需要提醒讀者的是，的很多例子都是通過來寫的，但這并不是語法，后面我們會有單獨的一小節講解的基本語法，不過目前為止我們先將跟多精力放在上。 書籍完整目錄 1.2 JSX 語法 showImg(https://segmentfault.com/img/bVvKLR); 官方文檔 https://facebook.github.io/react/docs/jsx-in-depth.html ...
摘要：一般來說，聲明式編程關注于發生了啥，而命令式則同時關注與咋發生的。聲明式編程可以較好地解決這個問題，剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區處理，這樣就能讓開發者專注于發生了啥，這里推薦一波與。 本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。 繼續譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...
摘要：學習了一段時間的，獨立完成了一個練習?，F總結一下這個階段的學習經歷?？偨Y我認為學習一個技術有步能看懂代碼的語法，能看懂別人代碼的邏輯并且做一些小修改，能自己從無到有獨立寫出一個東西出來。接下來打算把做一些和工程化這兩方面的學習。 學習了一段時間的react，獨立完成了一個app練習：TodoMVC?，F總結一下這個階段的學習經歷。 個人背景：熟練掌握javascript，用angula...
閱讀 2249·2021-11-22 09:34
閱讀 2012·2021-09-22 15:22
閱讀 2015·2019-08-29 15:05
閱讀 2105·2019-08-26 10:43
閱讀 3406·2019-08-26 10:26
閱讀 876·2019-08-23 18:29
閱讀 3518·2019-08-23 16:42
閱讀 1994·2019-08-23 14:46
