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官方出的react demo。但是看下来，三个项目都比较庞大，引入了很多不需要的功能包。后来搜索了下，发现一个好用的脚手架工具：yeoman，大家可以选择相应的generator。我选择的是react-webpack。项目比较清爽，需要大家自己搭建redux和immutable环境，以及后台express。其实也好，锻炼下自己构建项目的能力。
四、核心代码分析1. storestore 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 store。
import { createstore } from 'redux'; import { combinereducers } from 'redux-immutable'; import unit from './reducer/unit'; // import content from './reducer/content'; let devtoolsenhancer = null; if (process.env.node_env === 'development') {     devtoolsenhancer = require('remote-redux-devtools'); } const reducers = combinereducers({ unit }); let store = null; if (devtoolsenhancer) {     store = createstore(reducers, devtoolsenhancer.default({ realtime: true, port: config.reduxdevport })); } else {     store = createstore(reducers); } export default store;
redux 提供createstore这个函数，用来生成 store。由于整个应用只有一个 state 对象，包含所有数据，对于大型应用来说，这个 state 必然十分庞大，导致 reducer 函数也十分庞大。redux 提供了一个 combinereducers 方法，用于 reducer 的拆分。你只要定义各个子 reducer 函数，然后用这个方法，将它们合成一个大的 reducer。当然，我们这里只有一个 unit 的 reducer ，拆不拆分都可以。
devtoolsenhancer是个中间件（middleware）。用于在开发环境时使用redux devtools来调试redux。
2. actionaction 描述当前发生的事情。改变 state 的唯一办法，就是使用 action。它会运送数据到 store。
import store from '../store'; const dispatch = store.dispatch; const actions = {     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 }), }; export default actions;
state 的变化，会导致 view 的变化。但是，用户接触不到 state，只能接触到 view。所以，state 的变化必须是 view 导致的。action 就是 view 发出的通知，表示 state 应该要发生变化了。代码中，我们定义了actions对象，他有很多属性，每个属性都是函数，函数的输出是派发了一个action对象，通过store.dispatch发出。action是一个包含了必须的type属性，还有其他附带的信息。
3. immutableimmutable data 就是一旦创建，就不能再被更改的数据。对 immutable 对象的任何修改或添加删除操作都会返回一个新的 immutable 对象。详细介绍，推荐知乎上的immutable 详解及 react 中实践。我们项目里用的是facebook 工程师 lee byron 花费 3 年时间打造的immutable.js库。具体的api大家可以去官网学习。
熟悉 react 的都知道，react 做性能优化时有一个避免重复渲染的大招，就是使用 shouldcomponentupdate()，但它默认返回 true，即始终会执行 render() 方法，然后做 virtual dom 比较，并得出是否需要做真实 dom 更新，这里往往会带来很多无必要的渲染并成为性能瓶颈。当然我们也可以在 shouldcomponentupdate() 中使用使用 deepcopy 和 deepcompare 来避免无必要的 render()，但 deepcopy 和 deepcompare 一般都是非常耗性能的。
immutable 则提供了简洁高效的判断数据是否变化的方法，只需 ===(地址比较) 和 is( 值比较) 比较就能知道是否需要执行 render()，而这个操作几乎 0 成本，所以可以极大提高性能。修改后的 shouldcomponentupdate 是这样的：
import { is } from 'immutable'; shouldcomponentupdate: (nextprops = {}, nextstate = {}) => {   const thisprops = this.props || {}, thisstate = this.state || {};   if (object.keys(thisprops).length !== object.keys(nextprops).length ||       object.keys(thisstate).length !== object.keys(nextstate).length) {     return true;   }   for (const key in nextprops) {     if (thisprops[key] !== nextprops[key] || ！is(thisprops[key], nextprops[key])) {       return true;     }   }   for (const key in nextstate) {     if (thisstate[key] !== nextstate[key] || ！is(thisstate[key], nextstate[key])) {       return true;     }   }   return false; }
使用 immutable 后，如下图，当红色节点的 state 变化后，不会再渲染树中的所有节点，而是只渲染图中绿色的部分：
本项目中，我们采用支持 class 语法的 pure-render-decorator 来实现。我们希望达到的效果是：当我们编辑组件的属性时，其他组件并不被渲染，而且preview里，只有被修改的preview组件update，而其他preview组件不渲染。为了方便观察组件是否被渲染，我们人为的给组件增加了data-id的属性，其值为math.random()的随机值。效果如下图所示：
immutable实际效果图
4. reducerstore 收到 action 以后，必须给出一个新的 state，这样 view 才会发生变化。这种 state 的计算过程就叫做 reducer。
import immutable from 'immutable'; const unitsconfig = immutable.fromjs({     meta: {         type: 'meta',         name: 'meta信息配置',         title: '',         keywords: '',         desc: ''     },     title: {         type: 'title',         name: '标题',         text: '',         url: '',         color: '#000',         fontsize: middle,         textalign: center,         padding: [0, 0, 0, 0],         margin: [10, 0, 20, 0]     },     image: {         type: 'image',         name: '图片',         address: '',         url: '',         bgcolor: '#fff',         padding: [0, 0, 0, 0],         margin: [10, 0, 20, 0]     },     button: {         type: 'button',         name: '按钮',         address: '',         url: '',         txt: '',         margin: [             0, 30, 20, 30         ],         buttonstyle: yellowstyle,         bigradius: true,         style: 'default'     },     textbody: {         type: 'textbody',         name: '正文',         text: '',         textcolor: '#333',         bgcolor: '#fff',         fontsize: small,         textalign: center,         padding: [0, 0, 0, 0],         margin: [0, 30, 20, 30],         changeline: true,         retract: true,         biglh: true,         bigpd: true,         noul: true,         borderradius: true     },     audio: {         type: 'audio',         name: '音频',         address: '',         size: 'middle',         position: 'topright',         bgcolor: '#9160c3',         loop: true,         auto: true     },     video: {         type: 'video',         name: '视频',         address: '',         loop: true,         auto: true,         padding: [0, 0, 20, 0]     },     code: {         type: 'code',         name: 'jscss',         js: '',         css: ''     },     statistic: {         type: 'statistic',         name: '统计',         id: ''     } }) const initialstate = immutable.fromjs([     {         type: 'meta',         name: 'meta信息配置',         title: '',         keywords: '',         desc: '',         // 非常重要的属性，表明这次state变化来自哪个组件！         fromtype: ''     } ]); function reducer(state = initialstate, action) {     let newstate, localdata, tmp     // 初始化从localstorage取数据     if (state === initialstate) {         localdata = localstorage.getitem('config');         !!localdata && (state = immutable.fromjs(json.parse(localdata)));         // sessionstorage的初始化         sessionstorage.setitem('configs', json.stringify([]));         sessionstorage.setitem('index', 0);     }     switch (action.type) {         case 'addunit': {             tmp = state.push(unitsconfig.get(action.name));             newstate = tmp.setin([0, 'fromtype'], action.name);             break         }         case 'copyunit': {             tmp = state.push(state.get(action.id));             newstate = tmp.setin([0, 'fromtype'], state.getin([action.id, 'type']));             break         }         case 'editunit': {             tmp = state.setin([action.id, action.prop], action.value);             newstate = tmp.setin([0, 'fromtype'], state.getin([action.id, 'type']));             break         }         case 'removeunit': {             const type = state.getin([action.id, 'type']);             tmp = state.splice(action.id, 1);             newstate = tmp.setin([0, 'fromtype'], type);             break         }         case 'clear': {             tmp = initialstate;             newstate = tmp.setin([0, 'fromtype'], 'all');             break         }         case 'insert': {             tmp = immutable.fromjs(action.data);             newstate = tmp.setin([0, 'fromtype'], 'all');             break         }         case 'moveunit':{             const {fid, tid} = action;             const fitem = state.get(fid);             if (fitem && fid != tid) {                 tmp = state.splice(fid, 1).splice(tid, 0, fitem);             } else {                 tmp = state;             }             newstate = tmp.setin([0, 'fromtype'], '');             break;         }         default:             newstate = state;     }     // 更新localstorage，便于恢复现场     localstorage.setitem('config', json.stringify(newstate.tojs()));     // 撤销，恢复操作(仅以组件数量变化为触发点，否则存储数据巨大，也没必要)     let index = parseint(sessionstorage.getitem('index'));     let configs = json.parse(sessionstorage.getitem('configs'));     if(action.type == 'insert' && action.index){         sessionstorage.setitem('index', index + action.index);     }else{         if(newstate.tojs().length != state.tojs().length){             // 组件的数量有变化，删除历史记录index指针状态之后的所有configs，将这次变化的config作为最新的记录             configs.splice(index + 1, configs.length - index - 1, json.stringify(newstate.tojs()));             sessionstorage.setitem('configs', json.stringify(configs));             sessionstorage.setitem('index', configs.length - 1);         }else{             // 组件数量没有变化，index不变。但是要更新存储的config配置             configs.splice(index, 1, json.stringify(newstate.tojs()));             sessionstorage.setitem('configs', json.stringify(configs));         }     }          // console.log(json.parse(sessionstorage.getitem('configs')));     return newstate } export default reducer;
reducer是一个函数，它接受action和当前state作为参数，返回一个新的state。unitsconfig是存储着各个组件初始配置的对象集合，所有新添加的组件都从里边取初始值。state有一个初始值：initialstate，包含meta组件，因为每个web页面必定有一个meta信息，而且只有一个，所以页面左侧组件列表里不包含它。
reducer会根据action的type不同，去执行相应的操作。但是一定要注意，immutable数据操作后要记得赋值。每次结束后我们都会去修改fromtype值，是因为有的组件，比如audio、code等修改后，预览的js代码需要重新执行一次才可以生效，而其他组件我们可以不用去执行，提高性能。
当然，我们页面也做了现场恢复功能(localstorage)，也得益于immutable数据结构，我们实现了redo/undo的功能。redo/undo的功能仅会在组件个数有变化的时候计作一次版本，否则录取的的信息太多，会对性能造成影响。当然，组件信息发生变化我们是会去更新数组的。
5. 工作流程用户能接触到的只有view层，就是组件里的各种输入框，单选多选等。用户与之发生交互，会发出action。react-redux提供connect方法，用于从ui组件生成容器组件。connect方法接受两个参数：mapstatetoprops和mapdispatchtoprops，按照react-redux的api，我们需要将store.dispatch(action)写在mapdispatchtoprops函数里边，但是为了书写方便和直观看出这个action是哪里发出的，我们没有遵循这个api，而是直接写在在代码中。
然后，store 自动调用 reducer，并且传入两个参数：当前 state 和收到的 action。 reducer 会返回新的 state 。state 一旦有变化，store 就会调用监听函数。在react-redux规则里，我们需要提供mapstatetoprops函数，建立一个从（外部的）state对象到（ui组件的）props对象的映射关系。mapstatetoprops会订阅 store，每当state更新的时候，就会自动执行，重新计算 ui 组件的参数，从而触发ui组件的重新渲染。大家可以看我们content.js组件的最后代码：
export default connect(     state => ({         unit: state.get('unit'),     }) )(content);
connect方法可以省略mapstatetoprops参数，那样的话，ui组件就不会订阅store，就是说 store 的更新不会引起 ui 组件的更新。像header和footer组件，就是纯ui组件。
为什么我们的各个子组件都可以拿到state状态，那是因为我们在最顶层组件外面又包了一层<provider> 组件。入口文件index.js代码如下：
import babel-polyfill; import react from 'react'; import reactdom from 'react-dom'; import { provider } from 'react-redux'; import { router, route, indexroute, browserhistory } from 'react-router'; import './index.scss'; import store from './store'; import app from './components/app'; reactdom.render(     <provider store={store}>         <router history={browserhistory}>             <route path="/" component={app}>             </route>         </router>     </provider>,     document.queryselector('#app') );
我们的react-router采用的是browserhistory，使用的是html5的history api，路由切换交给后台。
五、兼容性和打包优化1. 兼容性为了让页面更好的兼容ie9+和android浏览器，因为项目使用了babel，所以采用babel-polyfill和babel-plugin-transform-runtime插件。
2. antd按需加载antd完整包特别大，有10m多。而我们项目里主要是采用了弹窗组件，所以我们应该采用按需加载。只需在.babelrc文件里配置一下即可，详见官方说明。
3. webpack配置externals属性项目最后打包的main.js非常大，有接近10m多。在网上搜了很多方法，最后发现webpack配置externals属性的方法非常好。可以利用pc的多文件并行下载，降低自己服务器的压力和流量，同时可以利用cdn的缓存资源。配置如下所示：
externals: {     jquery: jquery,     react: react,     react-dom: reactdom,     'codemirror': 'codemirror',     'immutable': 'immutable',     'react-router': 'reactrouter' }
externals属性告诉webpack，如下的这些资源不进行打包，从外部引入。一般都是一些公共文件，比如jquery、react等。注意，因为这些文件从外部引入，所以在npm install的时候，有些依赖这些公共文件的包安装会报warning，所以看到这些大家不要紧张。经过处理，main.js文件大小降到3.7m，然后nginx配置下gzip编码压缩，最终将文件大小降到872kb。因为在移动端，文件加载还是比较慢的，我又给页面加了loading效果。
以上就是前端页面制作工具pagemaker详解的详细内容。