前端页面制作工具pagemaker详解
本项目只是本来项目的简便实现，去除了用的不多和复杂的组件。但麻雀虽小五脏俱全，本项目采纳了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. Store
Store 就是留存数据的地方，你可以把它看成一个容器。整个利用只能有一个 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. Action
Action 描写当前发生的事情。改动 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. 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实际结果图
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状态，那是由于我们在最顶层组件外面又包了一层<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详解的具体内容，更多请关注百分百源码网其它相关文章！
