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