FKP-REST是一套全棧javascript框架

 

react服務端/客戶端，同構代碼心得

作者：webkixi

react服務端/客戶端，同構代碼心得

服務端，客戶端同構一套代碼，大前端的夢想，為了省略重復的代碼，卻平添了不少煩惱，頭發也白了，。。。。，妹子還在家等我.

目錄結構問題

我們引用了很多的庫，在開發前端代碼的時候，習慣性的我們不會考慮到node端對於庫的引用，這就是開始同構最大的痛點。整個目錄結構需要調整。

減少調用層級

比如說開發前端時，有一個libs的庫，在react的前端組件開發時，我們多次調用到libs里面的若干方法，這個時候，為了同構，需要將libs庫做一個抽離，既是從前端代碼中抽離到中間的部分。

這么說有點不好理解，簡單配一個圖吧。

FKP原來的結構

node -> fed -> libs -> component -> pages

大致上我們原來的結構都類似於這樣，調整好之后的結構，如下：

node <-> libs <-> fed -> component -> pages

這樣，我們將libs抽離到中間的部分，相對來說，在同構時，require的層級少了很多。但是還不夠，為了 將react同構，我們還需要調整component的結構，如下：

node <-> libs <-> component <-> fed -> pages

如此這般，大致的結構算調整好了，接下來解決require的坑，讓webpack和node端require做到無縫切換。 讓require('libs/index')，這種引用兼容於兩端。 在這里FKPJS用到了一個好用的包文件app-module-path，指定node端require的目錄優先級，及自寫了一個 include的方法（封裝require），來簡化require的調用深度。 並對libs庫做更細化的抽象與提取，最后，FKPJS的libs結構做到如上所述。

組件結構問題

解決了目錄結構問題后，為了做到同構，我們需要合理的組件結構，以方便兩端的調用，經過本人的實踐，FKPJS將組件分為三層，原子組件，組合組件，組件封裝，如下圖

原子 -> 組合 -> 封裝

1. 原子組件(react/widgets)

適用node/fed，復用型組件，最小粒度化，產出純結構，純粹的react組件，封裝了對數據的處理

2. 組合組件(react/modules/xxx/_component/xxx)

適用node/fed，組合不同的原子組件，並引入相關mixins，實現like redux，產出純結構，純react組件，傳輸數據

3. 組件封裝(react/modules/xxx/yyy)

適用於前端，最表層，處理配置文件，可導入JQ等庫實現內部邏輯、效果，並響應由業務層傳導進來的方法，數據等等。

在FKPJS中封裝的比較好的有兩個組件，react/modules/pagination/pagi，react/modules/list/base_list.jsx，list組件有點復雜，我們先說下 pagi這個組件吧

pagi這個組件，用於分頁，可前后端同構

Demo

前端業務中實現的代碼

varPagi=require('modules/pagination/pagi'),// 初始化分頁數據 pageData ={ total:60, per:20, url:'/', query:'page='}Pagi(pageData,{ container:'pagi',begin:{ start:0, off:5}, itemMethod: bindItem })

服務端同構的代碼

// pages/pagi.jsvar _props ={ itemMethod:false, listMethod:false, itemClass:'', listClass:'pagenation wid-12', data:{ total:60, per:20, url:'/', query:'page='},begin:{ start:0, off:5}}var reactHtml =yield react2html('react/modules/pagination/pagi', _props) reactHtml[0]='<div class="pagi" id="pagi" >'+reactHtml[0]+'</div>' oridata.pagi = reactHtml[0]return.....

組件封裝

封裝部分

// 封裝方法function pagination(data, opts ){// 處理配置文件 var noop =false, dft ={ container:'', globalName:'_Pagi', itemMethod: noop, listMethod: noop, itemClass:'', listClass:'pagenation wid-12', data:{ total:200, per:10, url:'/', query:'page='},begin:{ start:0, off:7}} dft = _.assign(dft, opts)if(!dft.container)returnfalse;if(data){ dft.data = data }// fkp redux// 初始化組件數據// FKPJS使用SA代替redux// 需要在組合組件中引入，store的minxin SA.set(dft.globalName,{ data: data,begin: dft.begin})// fkp redux // 將組建的action放到 SA 的全局名字中// 需要在 _Pagi組件中引入 store 這個mixinsvarPagi=_Pagi(dft.globalName)// 渲染組件 render(<Pagi data={data}begin={dft.begin} itemDefaultMethod={idm} itemMethod={dft.itemMethod} listMethod={dft.listMethod} itemClass={dft.itemClass} listClass={dft.listClass}/>, document.getElementById(dft.container))}// 服務端同構，執行這個部分 pagination.server =function(){return_Pagi(true)};module.exports = pagination

組合組件

這里不貼出所有代碼，部分

varList=require('../../../widgets/listView/list');varStore=require('../../../mixins/store');//引入這個就完成了reduxvar _storeName;var _jump =false;// List的item組件varPageItem=React.createClass({ componentDidMount:function(){var ele =React.findDOMNode(this), mtd =this.props.itemMethod, dmtd =this.props.itemDefaultMethod;if(dmtd &&typeof dmtd==='function'){ dmtd.call(ele, _storeName, mtd);}},.......

組合組件-算法部分

render:function(){if(this.state.data){var data =this.state.data, newData =[], pages = data.total/data.per, pre, aft, half,begin=this.state.begin,........

組合組件-實現部分

function actRct( storeName ){// 根據storeName，可以實現多個組件，並redux化// for serverif(storeName===true){returnReact.createClass( pagenation );}// for client _storeName = storeName||'_Pagi';var _rct = _.cloneDeep(pagenation);if( _rct.mixins && _rct.mixins.length ){ _rct.mixins.push(Store( _storeName ))//實現redux}else{ _rct.mixins =[Store( _storeName )]}returnReact.createClass( _rct );//返回react組件

原子組件

1. List List source
2. Item Item source
3. Item 算法部分 Item算法實現

綜上所述，做到兩端同構的話，需要有一個全局的眼光，從基礎的目錄結構開始，到組件的結構，其實還有css的結構，html的結構，這里就不一一說明了，希望能拋磚引玉

文章目錄

• 目錄結構問題
• 組件結構問題