前端页面制作工具pagemaker详解

　　pagemaker是一个前端页面制作工具，方便产品，运营和视觉的同学迅速开发简单的前端页面，从而可以解放前端同学的工作量。此项目创意来自网易乐得内部项目nfop中的pagemaker项目。原来项目的前端是采用jquery和模板ejs做的，每次组件的更新都会重绘整个dom，性能不是很好。因为当时react特别火，加上项目本身的适合，最后决定采用react来试试水。因为原来整个项目是包含很多子项目一起，所以后台的实现也没有参考，完全重写。

　　本项目只是原来项目的简单实现，去除了用的不多和复杂的组件。但麻雀虽小五脏俱全，本项目采用了react的一整套技术栈，适合那些对react有过前期学习，想通过demo来加深理解并动手实践的同学。建议学习本demo的之前，先学习/复习下相关的知识点：React技术栈系列教程、Immutable详解及React中实践。

　　一、功能特点

　　组件丰富。有标题、图片、按钮、正文、音频、视频、统计、jscss输入。

　　实时预览。每次修改都可以立马看到最新的预览。

　　支持三种导入方式，支持导出配置文件。

　　支持Undo/Redo操作。(组件个数发生变化为触发点)

　　可以随时发布、修改、删除已发布的页面。

　　每个页面都有一个发布密码，从而可以防止别人修改。

　　页面前端架构采用react+redux，并采用immutable数据结构。可以将每次组件的更新最小化，从而达到页面性能的最优化。

　　后台对上传的图片自动进行压缩，防止文件过大

　　适配移动端

　　二、用到的技术

　　1.前端

　　React

　　Redux

　　React-Redux

　　Immutable

　　React-Router

　　fetch

　　es6

　　es7

　　2.后台

　　Node

　　Express

　　3.工具

　　Webpack

　　Sass

　　Pug

　　三、脚手架工具

　　因为项目用的技术比较多，采用脚手架工具可以省去我们搭建项目的时间。经过搜索，我发现有三个用的比较多：

　　create-react-app

　　react-starter-kit

　　react-boilerplate

　　github上的star数都很高，第一个是Facebook官方出的reactdemo。但是看下来，三个项目都比较庞大，引入了很多不需要的功能包。后来搜索了下，发现一个好用的脚手架工具：yeoman，大家可以选择相应的generator。我选择的是react-webpack。项目比较清爽，需要大家自己搭建redux和immutable环境，以及后台express。其实也好，锻炼下自己构建项目的能力。

　　四、核心代码分析

　　1.Store

　　Store就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个Store。

　　import{createStore}from'redux';

　　import{combineReducers}from'redux-immutable';

　　importunitfrom'./reducer/unit';

　　//importcontentfrom'./reducer/content';

　　letdevToolsEnhancer=null;

　　if(process.env.NODE_ENV==='development'){

　　devToolsEnhancer=require('remote-redux-devtools');

　　}

　　constreducers=combineReducers({unit});

　　letstore=null;

　　if(devToolsEnhancer){

　　store=createStore(reducers,devToolsEnhancer.default({realtime:true,port:config.reduxDevPort}));

　　}

　　else{

　　store=createStore(reducers);

　　}

　　exportdefaultstore;

　　Redux提供createStore这个函数，用来生成Store。由于整个应用只有一个State对象，包含所有数据，对于大型应用来说，这个State必然十分庞大，导致Reducer函数也十分庞大。Redux提供了一个combineReducers方法，用于Reducer的拆分。你只要定义各个子Reducer函数，然后用这个方法，将它们合成一个大的Reducer。当然，我们这里只有一个unit的Reducer，拆不拆分都可以。

　　devToolsEnhancer是个中间件（middleware）。用于在开发环境时使用ReduxDevTools来调试redux。

　　2.Action

　　Action描述当前发生的事情。改变State的唯一办法，就是使用Action。它会运送数据到Store。

　　importStorefrom'../store';

　　constdispatch=Store.dispatch;

　　constactions={

　　addUnit:(name)=>dispatch({type:'AddUnit',name}),

　　copyUnit:(id)=>dispatch({type:'CopyUnit',id}),

　　editUnit:(id,prop,value)=>dispatch({type:'EditUnit',id,prop,value}),

　　removeUnit:(id)=>dispatch({type:'RemoveUnit',id}),

　　clear:()=>dispatch({type:'Clear'}),

　　insert:(data,index)=>dispatch({type:'Insert',data,index}),

　　moveUnit:(fid,tid)=>dispatch({type:'MoveUnit',fid,tid}),

　　};

　　exportdefaultactions;

　　State的变化，会导致View的变化。但是，用户接触不到State，只能接触到View。所以，State的变化必须是View导致的。Action就是View发出的通知，表示State应该要发生变化了。代码中，我们定义了actions对象，他有很多属性，每个属性都是函数，函数的输出是派发了一个action对象，通过Store.dispatch发出。action是一个包含了必须的type属性，还有其他附带的信息。

　　3.Immutable

　　ImmutableData就是一旦创建，就不能再被更改的数据。对Immutable对象的任何修改或添加删除操作都会返回一个新的Immutable对象。详细介绍，推荐知乎上的Immutable详解及React中实践。我们项目里用的是Facebook工程师LeeByron花费3年时间打造的immutable.js库。具体的API大家可以去官网学习。

　　熟悉React的都知道，React做性能优化时有一个避免重复渲染的大招，就是使用shouldComponentUpdate()，但它默认返回true，即始终会执行render()方法，然后做VirtualDOM比较，并得出是否需要做真实DOM更新，这里往往会带来很多无必要的渲染并成为性能瓶颈。当然我们也可以在shouldComponentUpdate()中使用使用deepCopy和deepCompare来避免无必要的render()，但deepCopy和deepCompare一般都是非常耗性能的。

　　Immutable则提供了简洁高效的判断数据是否变化的方法，只需===(地址比较)和is(值比较)比较就能知道是否需要执行render()，而这个操作几乎0成本，所以可以极大提高性能。修改后的shouldComponentUpdate是这样的：

　　import{is}from'immutable';

　　shouldComponentUpdate:(nextProps={},nextState={})=>{

　　constthisProps=this.props||{},thisState=this.state||{};

　　if(Object.keys(thisProps).length!==Object.keys(nextProps).length||

　　Object.keys(thisState).length!==Object.keys(nextState).length){

　　returntrue;

　　}

　　for(constkeyinnextProps){

　　if(thisProps[key]!==nextProps[key]||！is(thisProps[key],nextProps[key])){

　　returntrue;

　　}