react服务端/客户端,同构代码心得
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组件
原子组件
- List List source
- Item Item source
- Item 算法部分 Item算法实现
综上所述,做到两端同构的话,需要有一个全局的眼光,从基础的目录结构开始,到组件的结构,其实还有css的结构,html的结构,这里就不一一说明了,希望能抛砖引玉
文章目录
- 目录结构问题
- 组件结构问题
react服务端/客户端,同构代码心得的更多相关文章
- react服务端渲染同构报错Browser history needs a DOM
https://github.com/nozzle/react-static/issues/343 去掉了browserRouter就不报错了,但是又会有其他报错..
- TCP Socket服务端客户端(二)
本文服务端客户端封装代码转自https://blog.csdn.net/zhujunxxxxx/article/details/44258719,并作了简单的修改. 1)服务端 此类主要处理服务端相关 ...
- react服务端渲染(同构)
学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对re ...
- react基础学习和react服务端渲染框架next.js踩坑
说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...
- 基于JAX-WS的Web Service服务端/客户端 ;JAX-WS + Spring 开发webservice
一.基于JAX-WS的Web Service服务端/客户端 下面描述的是在main函数中使用JAX-WS的Web Service的方法,不是在web工程里访问,在web工程里访问,参加第二节. JAX ...
- JAVA WEBSERVICE服务端&客户端的配置及调用(基于JDK)
前言:我之前是从事C#开发的,因公司项目目前转战JAVA&ANDROID开发,由于对JAVA的各种不了解,遇到的也是重重困难.目前在做WEBSERVICE提供数据支持,看了网上相关大片的资料也 ...
- eclipse使用CXF3.1.*创建webservice服务端客户端以及客户端手机APP(二)
eclipse使用CXF3.1.*创建webservice服务端客户端以及客户端手机APP(二) 接上篇博客,本篇博客主要包含两个内容: 4.使用Android studio创建webservice客 ...
- eclipse使用CXF3.1.*创建webservice服务端客户端以及客户端手机APP(一)
eclipse使用CXF3.1.*创建webservice服务端客户端以及客户端手机APP(一) 本篇博客主要包含五个内容: 1.CXF换将搭建以及eclipse配置CXF. 2.eclipse创建w ...
- TCP/IP网络编程之基于UDP的服务端/客户端
理解UDP 在之前学习TCP的过程中,我们还了解了TCP/IP协议栈.在四层TCP/IP模型中,传输层分为TCP和UDP这两种.数据交换过程可以分为通过TCP套接字完成的TCP方式和通过UDP套接字完 ...
随机推荐
- Codeforces Beta Round #51 A. Flea travel 水题
A. Flea travel Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/55/problem ...
- BZOJ 1968: [Ahoi2005]COMMON 约数研究 水题
1968: [Ahoi2005]COMMON 约数研究 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeO ...
- TreeView
添加项目 TreeView1.Items.Add(nil,'ABC'); 删除选中的节点 TreeView1.Selected.Delete; 删除鼠标右键选中的节点 var ...
- psp开发------汉化插件
近期略微研究了下psp汉化,写了个汉化插件,在这记录下.聊以慰藉. 传统的汉化流程找码表,字库,破解什么这里不多讲,网上有教程.以下说下一种另类汉化方法.特别对于难以破解字库的游戏,当然这样的方法也有 ...
- SQL用法总结
1.创建数据库语句 create table persons( 'id' INT NOT NULL AUTO_INCREMENT, ) NOT NULL, ) NOT NULL, PRIMARY KE ...
- apache常见错误汇总
<>问题: Access forbidden! You don't have permission to access the requested directory. There is ...
- mysql数据库问答
一. 问:如果有一张表,里面有个字段为id的自增主键,当已经向表里面插入了10条数据之后,删除了id为8,9,10的数据,再把mysql重启,之后再插入一条数据,那么这条数据的id值应该是多少,是8, ...
- Maven学习小结(四 聚合与继承)
1.聚合 一次构建多个项目模块. 2.继承 为了消除重复,把很多相同的配置提取出来,例如groupid和version: 2.1 Maven中可以继承的POM元素 groupId :项目组 ID ,项 ...
- argparse - 命令行选项与参数解析(转)
argparse - 命令行选项与参数解析(译)Mar 30, 2013 原文:argparse – Command line option and argument parsing 译者:young ...
- css笔记13:display用法
1.代码演示: element.html如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...