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的minxinSA.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組件

原子組件

List List source

Item Item source

Item 算法部分 Item算法實現

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

文章目錄

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

轉載于:https://www.cnblogs.com/yzf851348507/p/5601060.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的react服务端/客户端，同构代码心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。