一个基于React整套技术栈+Node.js的前端页面制做工具

时间 2019-11-16

标签一个基于 react 整套技术 node.js node 前端页面制做工具栏目 React 繁體版

原文原文链接

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

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

线上地址前端

1、功能特色

组件丰富。有标题、图片、按钮、正文、音频、视频、统计、jscss输入。
实时预览。每次修改均可以立马看到最新的预览。
支持三种导入方式，支持导出配置文件。
支持恢复现场功能(关闭页面配置不丢失)
支持Undo/Redo操做。(组件个数发生变化为触发点)
能够随时发布、修改、删除已发布的页面。
本项目密码统一采用bcrypt编码，即便拖库也不会泄漏本身的密码。
每一个页面都有一个发布密码，从而能够方便多人管理也可防止别人修改。
页面前端架构采用react+redux，并采用immutable数据结构。能够将每次组件的更新最小化，从而达到页面性能的最优化。
后台对上传的图片自动进行压缩，防止文件过大
适配移动端

2、用到的技术

1. 前端

React
Redux
React-Redux
Immutable
React-Router
fetch
es6
es7

2. 后台

Node
Express

3. 工具

Webpack
Sass
Pug

3、脚手架工具

由于项目用的技术比较多，采用脚手架工具能够省去咱们搭建项目的时间。通过搜索，我发现有三个用的比较多：node

create-react-app

create-react-app star数
react-starter-kit

react-starter-kit star数
react-boilerplate

react-boilerplate star数

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

4、核心代码分析

1. Store

Store 就是保存数据的地方，你能够把它当作一个容器。整个应用只能有一个 Store。jquery

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 ，拆不拆分均可以。android

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

2. Action

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

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属性，还有其余附带的信息。git

3. Immutable

Immutable 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实际效果图

可见，当咱们去改变标题组件标题文字的时候，只有标题组件和标题预览组件会被从新渲染，其余组件和预览组件并无。这就是immutable带来的性能提高的地方。原来的项目当组件多了以后，渲染会卡顿，有时候甚至短暂黑屏。

4. Reducer

Store 收到 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状态，那是由于咱们在最顶层组件外面又包了一层组件。入口文件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，路由切换交给后台。

5、使用说明

左边一栏是组件列表，在移动端点击左上角的双右箭头便可看到。点击对应的组件，网页中间会出现相应的组件信息。单击出来的组件头，能够切换展开与隐藏。更新相应的组件信息，在右侧能够看到实时预览。移动端须要点击右下角的黄色按钮（支持拖动）。

在中间区域的最上面有个内容配置区。左边有导入、导出、清空功能。导入支持支持导入json配置文件，这个配置文件能够在咱们配置完准备发布的时候点击导出便可生成。还支持直接输入发布目录名称，好比：lmlc；或者输入完整的线上地址，好比：https://pagemaker.wty90.com/release/lmlc.html；固然也支持粘贴配置文件内容。清空会清空掉如今的全部配置的组件。内容配置区的右边是Redo/Undo功能。为了性能考虑，这里只以组件个数发生变化为触发点。

右侧是预览区域。中间区域内容一有变化，右侧会实时更新展现。当项目配置完成想要发布的时候，点击右侧区域左上角的发布按钮，会出现一个弹窗。第一个输入框是发布目录，若是是新项目须要建立发布密码。若是要更新已存在的项目，须要确认发布密码。平台密码是：pagemaker。如需更改，在data文件夹下修改password.json文件内容的value值。咱们采用的是bcrypt编码。你们能够去BCrypt Calculator网站，方便计算出编码值。右上角有个查看按钮，能够查看采用 pagemaker 已经发布的页面。

隐藏功能：点击预览区域苹果手机的home键，会出现清理无用文件的弹窗，由于下载文件会在服务器端建立一个缓存文件。还有一些用户上传的图片等一直没有发布，在服务器端会一直堆积。这个须要提供后台密码，修改同平台密码，在data文件夹下的server_code.json文件。这个功能是针对管理员的，普通用户无须理会。

6、兼容性和打包优化

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效果。

欢迎你们star学习交流：github地址 | 个人博客