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

　　1.1、isomorphic 是什么？

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

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

　　同構(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 問(wèn)世，給予我們前后端統(tǒng)一語(yǔ)言的想象；更進(jìn)一步的，前后端公用一套代碼，也不是不可能。

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

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

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

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

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

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

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

　　functionadd（a， b）{returna + b}

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

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

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

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

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

　　同構(gòu)不是一個(gè)布爾值，true 或者 false；同構(gòu)是一個(gè)光譜形態(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è)層次里的同構(gòu)代碼，通常會(huì)承擔(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)的兩個(gè)部分，如何妥善地整合在一起。

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

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

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

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

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

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

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

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

相關(guān)電子資料下載

• 躍昉動(dòng)態(tài)｜躍昉簽署亞洲城市減碳卡澳門合作框架協(xié)議 26
• 使用MVVM框架實(shí)現(xiàn)一個(gè)簡(jiǎn)單加法器 30
• 探討嵌入式系統(tǒng)的軟硬件框架 29
• 昇騰AI框架全棧深度介紹 317
• 隆基與德國(guó)重要合作伙伴PVI簽署1.5GW Hi-MO X6框架協(xié)議 208
• PyCharm 2022.2支持最新 Python 3.11 和 PyScript 框架 86
• 華工科技與振華重工簽署戰(zhàn)略合作框架協(xié)議 253
• 嵌入式狀態(tài)機(jī)編程-QP狀態(tài)機(jī)框架基本知識(shí)介紹 76
• 介紹一款基于昆侖芯AI加速卡的高效模型推理部署框架 142
• 基于觀察者模式設(shè)計(jì)的框架-REB，使代碼模塊化 68