前端同構(gòu)MVC實(shí)踐分析

　　1、同構(gòu)的概念和意義

　　1.1、isomorphic 是什么？

　　isomorphic，讀作［?a?s?’m?：f?k］，意思是：同形的，同構(gòu)的。

　　維基百科對它的描述是：同構(gòu)是在數(shù)學(xué)對象之間定義的一類映射，它能揭示出在這些對象的屬性或者操作之間存在的關(guān)系。若兩個數(shù)學(xué)結(jié)構(gòu)之間存在同構(gòu)映射，那么這兩個結(jié)構(gòu)叫做是同構(gòu)的。一般來說，如果忽略掉同構(gòu)的對象的屬性或操作的具體定義，單從結(jié)構(gòu)上講，同構(gòu)的對象是完全等價的。

　　同構(gòu)，也被化用在物理、化學(xué)以及計(jì)算機(jī)等其他領(lǐng)域。

　　1.2、isomorphic java

　　isomorphic java（同構(gòu) js），是指一份 js 代碼，既然可以跑在瀏覽器端，也可以跑在服務(wù)端。

　　圖 1

　　同構(gòu) js 的發(fā)展歷史，比 progressive web app 還要早很多。2009 年， node.js 問世，給予我們前后端統(tǒng)一語言的想象；更進(jìn)一步的，前后端公用一套代碼，也不是不可能。

　　有一個網(wǎng)站 isomorphic.net，專門收集跟同構(gòu) js 相關(guān)的文章和項(xiàng)目。從里面的文章列表來看，早在 2011 年的時候，業(yè)界已經(jīng)開始探討同構(gòu) js，并認(rèn)為這將是未來的趨勢。

　　可惜的是，同構(gòu) js 其實(shí)并沒有得到真正意義上的發(fā)展。因?yàn)?，?2011 年，node.js 和 ECMA 都不夠成熟，我們并沒有很好的基礎(chǔ)設(shè)施，去滿足同構(gòu)的目標(biāo)。

　　現(xiàn)在是 2017 年，情況已經(jīng)有所不同。ECMA 2015 標(biāo)準(zhǔn)定案，提供了一個標(biāo)準(zhǔn)的模塊規(guī)范，前后端通用。盡管目前 node.js 和瀏覽器都沒有實(shí)現(xiàn) ES2015 模塊標(biāo)準(zhǔn)，但是我們有 Babel 和 Webpack 等工具，可以提前享用新的語言特性帶來的便利。

　　2、同構(gòu)的種類和層次

　　2.1、同構(gòu)的種類

　　同構(gòu) js 有兩個種類：「內(nèi)容同構(gòu)」和「形式同構(gòu)」。

　　其中，「內(nèi)容同構(gòu)」指服務(wù)端和瀏覽器端執(zhí)行的代碼完全等價。比如：

　　functionadd（a， b）{returna + b}

　　不管在服務(wù)端還是瀏覽器端，add 函數(shù)都是一樣的。

　　而「形式同構(gòu)」則不同，從原教旨主義的角度上看，它不是同構(gòu)。因?yàn)椋跒g覽器端有一部分代碼永遠(yuǎn)不會執(zhí)行，而在服務(wù)端另一部分代碼永遠(yuǎn)不會執(zhí)行。比如：

　　functiondoSomething（）{ if（isServer） { // dosomething inserver-side } elseif（isClient） { //dosomething inclient-side }}

　　在 npm 里，有很多 package 標(biāo)榜自己是同構(gòu)的，用的方式就是「形式同構(gòu)」。如果不作特殊處理，「形式同構(gòu)」可能會增加瀏覽器端加載的 js 代碼的體積。比如 React，它的 140+kb 的體積，是把只在服務(wù)端運(yùn)行的代碼也包含了進(jìn)去。

　　2.2、同構(gòu)的層次

　　同構(gòu)不是一個布爾值，true 或者 false；同構(gòu)是一個光譜形態(tài)，可以在很小范圍里上實(shí)現(xiàn)同構(gòu)，也可以在很大范圍里實(shí)現(xiàn)同構(gòu)。

　　-function 層次：零碎的代碼片斷或者函數(shù)，支持同構(gòu)。比如瀏覽器端和服務(wù)端都實(shí)現(xiàn)了 setTimeout 函數(shù)，比如 lodash/underscore 的工具函數(shù)都是同構(gòu)的。

　　-feature 層次：在這個層次里的同構(gòu)代碼，通常會承擔(dān)一定的業(yè)務(wù)職能。比如 React 和 Vue 都借助 virtual-dom 實(shí)現(xiàn)了同構(gòu)，它們是服務(wù)于 View 層的渲染；比如 Redux 和 Vuex 也是同構(gòu)的，它們負(fù)責(zé) Model 層的數(shù)據(jù)處理。

　　-framework 層次：在框架層面實(shí)現(xiàn)同構(gòu)，它可能包含了所有層次的同構(gòu)，需要精心處理支持同構(gòu)和不支持同構(gòu)的兩個部分，如何妥善地整合在一起。

　　我們今天所討論的 isomorphic-mvc（簡稱 IMVC），是在 framework 層次上實(shí)現(xiàn)同構(gòu)。

　　3、同構(gòu)的價值和作用

　　3.1、同構(gòu)的價值

　　同構(gòu) js，不僅僅有抽象上的美感，它還有很多實(shí)用價值。

　　SEO 友好：View 層在瀏覽器端和服務(wù)端都可以運(yùn)行，意味著可以在服務(wù)端吐出 html，支持搜索引擎的抓取。

　　加快訪問體驗(yàn)：服務(wù)端渲染可以加快瀏覽器端的首次訪問的渲染速度，而瀏覽器端渲染，可以加快用戶交互時的反饋速度。

　　代碼的可維護(hù)性：同構(gòu)可以減少語言切換的成本，減小代碼的重復(fù)率，增加代碼的可維護(hù)性。

　　不使用同構(gòu)方案，也可以用別的辦法實(shí)現(xiàn)前兩個的目標(biāo)，但是別的辦法卻難以同時滿足三個目標(biāo)。