目前完成4篇源碼分析文章：

• MVVM大比拼之knockout.js源碼精析
• MVVM大比拼之a(chǎn)valon.js源碼精析
• MVVM大比拼之vue.js源碼精析
• MVVM大比拼之AngularJS源碼精析

分析所關(guān)注的點(diǎn)集中在 ：雙工綁定的實(shí)現(xiàn)機(jī)制、視圖編譯等幾個(gè)關(guān)鍵點(diǎn)。建議讀者從knockout開始按順序閱讀。 關(guān)于性能測試，vue的作者已經(jīng)做過了，在這里。

之后的文章將關(guān)注一下各個(gè)框架在repeat指令下的實(shí)現(xiàn)。另外準(zhǔn)備再深入介紹一下bacon.js，從另外一個(gè)角度看數(shù)據(jù)與視圖。

?

zerojs! 造出最好的 CMS 輪子

zerojs是一個(gè)基于nodejs、angularjs、git的CMS。在它之上可以繼續(xù)開發(fā)出博客、論壇、wiki等類似的內(nèi)容管理型系統(tǒng)。

• 擁抱開發(fā)者和社區(qū)
  • 層次清晰，高度解耦。前后端即使分開也都是完全可獨(dú)立運(yùn)行的系統(tǒng)。
  • 每一個(gè)層次都是用當(dāng)前業(yè)界最流行的工具和方法作為底層，對開發(fā)者來說幾乎無學(xué)習(xí)成本。
  • 模塊、主題、套件體系簡單成熟，二次開發(fā)沒有坑。

后端架構(gòu)

zerojs 底層基于 sails。繼承了 sails 三大優(yōu)勢：

• 強(qiáng)大的 Model 層。sails實(shí)現(xiàn)了自己的ORM，接口幾乎和 mongoose 完全一致，簡單易用。配合上社區(qū)統(tǒng)一的數(shù)據(jù)庫驅(qū)動(dòng)，可完美支持mongo、mysql、redis、postgreSQL等等數(shù)據(jù)庫。ORM封裝完善，設(shè)置可以對單個(gè)model指定使用的數(shù)據(jù)庫。
• 為model提供全自動(dòng)的RESTful接口。實(shí)現(xiàn)聲明即可用。
• controller 和 view 完全基于express實(shí)現(xiàn)，無附加學(xué)習(xí)成本。

zerojs 的核心層包含了CMS最通用的功能，特點(diǎn)有三：

• 內(nèi)容管理功能強(qiáng)大。zerojs為"內(nèi)容節(jié)點(diǎn)","分類與標(biāo)簽"等核心概念建立了統(tǒng)一的抽象，為繼承者統(tǒng)一提供索引、摘要等功能。同時(shí)系統(tǒng)仍然非常開放，允許開發(fā)者聲明普通的model，然后通過mixin的方式使用部分功能。
• 系統(tǒng)可擴(kuò)展性高。幾乎在每個(gè)流程的關(guān)鍵動(dòng)作處都使用了hook來支持?jǐn)U展。例如“增、刪、改、查”的前前后后。同時(shí)在系統(tǒng)操作（例如記錄統(tǒng)計(jì)數(shù)據(jù)）處都采用了選擇driver的方式來支持適合開發(fā)者的需求。
• 對前端前無古人的友好。原生支持傳統(tǒng)模板渲染、前端MVVM框架渲染及混合渲染等多種方式。系統(tǒng)默認(rèn)提供一整套angular模塊（包括登陸、注冊、節(jié)點(diǎn)增刪改查等）給開發(fā)者隨意組合使用，可實(shí)現(xiàn)幾乎 0 代碼的情況下將前端變成單頁應(yīng)用。工程化問題（如靜態(tài)資源的壓縮打包）由系統(tǒng)自動(dòng)根據(jù)當(dāng)前環(huán)境完成。

zerojs 的擴(kuò)展層基于git實(shí)現(xiàn)，優(yōu)勢：

• 代碼安全有保障，不會(huì)搞掛系統(tǒng)。
• 一鍵即可在當(dāng)前開發(fā)環(huán)境打包自己開發(fā)的新功能。無需手動(dòng)整理。

?

以下是一個(gè)基于zerojs打造的博客系統(tǒng)基礎(chǔ)模塊示意圖：

?

前端架構(gòu)

前面已經(jīng)提到 zerojs 對前端提供的全部都是標(biāo)準(zhǔn)的 REST 接口，并且在 view 的渲染上支持多種方式。意味著前端完全可以自主開發(fā)，甚至完全拋棄掉服務(wù)器端的view層，不在同一環(huán)境也可以。這里講的前端架構(gòu)，主要是指zerojs默認(rèn)提供的angular的前端架構(gòu)。下面分三個(gè)前端最關(guān)心的問題來講：

一、如何使用默認(rèn)前模塊？

zerojs 為"用戶、節(jié)點(diǎn)、標(biāo)簽、統(tǒng)計(jì)"等每一個(gè)主要功能都提供了一整套完善的angular模塊，并且都有默認(rèn)的controller。很多時(shí)候，例如新增一種節(jié)點(diǎn)類型如“日記”，開發(fā)者需要做的僅僅是非常簡單的三步：

在后端聲明一下這個(gè)類型。

前端引入文件，

然后寫前端的模板文件就夠了。

即使要增加字段，都只要寫模板就夠了。默認(rèn)模塊已經(jīng)經(jīng)過了各種場景的錘煉，功能非常完善。如果你真是遇到非常特別，一定要自己手動(dòng)處理的地方，那你仍然可以大量復(fù)用默認(rèn)模塊的service、filter等等。幾乎所有功能都被封裝到了service里。 非常值得注意的時(shí)，這些默認(rèn)模塊和zerojs的后端沒有任何耦合！這意味著即使你要完全換成自己的后端，只要接口標(biāo)準(zhǔn)，那么這些模塊也都是可用的。

二、如何處理預(yù)加載的數(shù)據(jù)？

在做單頁應(yīng)用的時(shí)候，常常為了節(jié)省請求、加速第一屏顯示速度而把讓服務(wù)器端提前把一些數(shù)據(jù)直接渲染在頁面上，例如"當(dāng)前用戶的基本信息"，"第一屏數(shù)據(jù)"等。zerojs在處理view的時(shí)候，遇到"渲染單個(gè)節(jié)點(diǎn)"、"渲染節(jié)點(diǎn)列表"都會(huì)默認(rèn)將節(jié)點(diǎn)內(nèi)容直接渲染到頁面上，在angular中，引入系統(tǒng)默認(rèn)提供的preload模塊即可獲取到這些數(shù)據(jù)。不過仍然不用太操心，系統(tǒng)提供的節(jié)點(diǎn)增刪改查、列表渲染、單個(gè)節(jié)點(diǎn)渲染等默認(rèn)angular模塊都已經(jīng)自動(dòng)支持使用preload數(shù)據(jù)了。開發(fā)者還是只要正常寫模板就好。

三、前端腳本的模塊依賴、打包壓縮等如何處理？

這些問題都是工程問題，zerojs在生產(chǎn)環(huán)境會(huì)分析模板然后統(tǒng)一打包再注入到模板中。未來在view層可能會(huì)推出CDN模塊，對前端更友好！

?

?下面是一個(gè)基于zerojs打造的博客系統(tǒng)，當(dāng)然，毫不客氣地說要成為博客中的王者。

http://www.cnblogs.com/sskyy/p/3918299.html

總結(jié)

以上是生活随笔為你收集整理的【转】MVVM大比拼小结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。