前端頁(yè)面制作工具pagemaker的示例分析-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“前端頁(yè)面制作工具pagemaker的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“前端頁(yè)面制作工具pagemaker的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供特克斯網(wǎng)站建設(shè)、特克斯做網(wǎng)站、特克斯網(wǎng)站設(shè)計(jì)、特克斯網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、特克斯企業(yè)網(wǎng)站模板建站服務(wù)，10年特克斯做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

pagemaker是一個(gè)前端頁(yè)面制作工具，方便產(chǎn)品，運(yùn)營(yíng)和視覺(jué)的同學(xué)迅速開(kāi)發(fā)簡(jiǎn)單的前端頁(yè)面，從而可以解放前端同學(xué)的工作量。此項(xiàng)目創(chuàng)意來(lái)自網(wǎng)易樂(lè)得內(nèi)部項(xiàng)目nfop中的pagemaker項(xiàng)目。原來(lái)項(xiàng)目的前端是采用jquery和模板e(cuò)js做的，每次組件的更新都會(huì)重繪整個(gè)dom，性能不是很好。因?yàn)楫?dāng)時(shí)react特別火，加上項(xiàng)目本身的適合，最后決定采用react來(lái)試試水。因?yàn)樵瓉?lái)整個(gè)項(xiàng)目是包含很多子項(xiàng)目一起，所以后臺(tái)的實(shí)現(xiàn)也沒(méi)有參考，完全重寫。

本項(xiàng)目只是原來(lái)項(xiàng)目的簡(jiǎn)單實(shí)現(xiàn)，去除了用的不多和復(fù)雜的組件。但麻雀雖小五臟俱全，本項(xiàng)目采用了react的一整套技術(shù)棧，適合那些對(duì)react有過(guò)前期學(xué)習(xí)，想通過(guò)demo來(lái)加深理解并動(dòng)手實(shí)踐的同學(xué)。建議學(xué)習(xí)本demo的之前，先學(xué)習(xí)/復(fù)習(xí)下相關(guān)的知識(shí)點(diǎn)：React 技術(shù)棧系列教程、Immutable 詳解及 React 中實(shí)踐。

一、功能特點(diǎn)

1. 組件豐富。有標(biāo)題、圖片、按鈕、正文、音頻、視頻、統(tǒng)計(jì)、jscss輸入。

2. 實(shí)時(shí)預(yù)覽。每次修改都可以立馬看到最新的預(yù)覽。

3. 支持三種導(dǎo)入方式，支持導(dǎo)出配置文件。

4. 支持Undo/Redo操作。(組件個(gè)數(shù)發(fā)生變化為觸發(fā)點(diǎn))

5. 可以隨時(shí)發(fā)布、修改、刪除已發(fā)布的頁(yè)面。

6. 每個(gè)頁(yè)面都有一個(gè)發(fā)布密碼，從而可以防止別人修改。

7. 頁(yè)面前端架構(gòu)采用react+redux，并采用immutable數(shù)據(jù)結(jié)構(gòu)?？梢詫⒚看谓M件的更新最小化，從而達(dá)到頁(yè)面性能的最優(yōu)化。

8. 后臺(tái)對(duì)上傳的圖片自動(dòng)進(jìn)行壓縮，防止文件過(guò)大

9. 適配移動(dòng)端

二、用到的技術(shù)1. 前端

1. React

2. Redux

3. React-Redux

4. Immutable

5. React-Router

6. fetch

7. es6

8. es7

2. 后臺(tái)

1. Node

2. Express

3. 工具

1. Webpack

2. Sass

3. Pug

三、腳手架工具

因?yàn)轫?xiàng)目用的技術(shù)比較多，采用腳手架工具可以省去我們搭建項(xiàng)目的時(shí)間。經(jīng)過(guò)搜索，我發(fā)現(xiàn)有三個(gè)用的比較多：

1. create-react-app  

2. react-starter-kit  

3. react-boilerplate  

github上的star數(shù)都很高，第一個(gè)是Facebook官方出的react demo。但是看下來(lái)，三個(gè)項(xiàng)目都比較龐大，引入了很多不需要的功能包。后來(lái)搜索了下，發(fā)現(xiàn)一個(gè)好用的腳手架工具：yeoman，大家可以選擇相應(yīng)的generator。我選擇的是react-webpack。項(xiàng)目比較清爽，需要大家自己搭建redux和immutable環(huán)境，以及后臺(tái)express。其實(shí)也好，鍛煉下自己構(gòu)建項(xiàng)目的能力。

四、核心代碼分析1. Store

Store 就是保存數(shù)據(jù)的地方，你可以把它看成一個(gè)容器。整個(gè)應(yīng)用只能有一個(gè) 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這個(gè)函數(shù)，用來(lái)生成 Store。由于整個(gè)應(yīng)用只有一個(gè) State 對(duì)象，包含所有數(shù)據(jù)，對(duì)于大型應(yīng)用來(lái)說(shuō)，這個(gè) State 必然十分龐大，導(dǎo)致 Reducer 函數(shù)也十分龐大。Redux 提供了一個(gè) combineReducers 方法，用于 Reducer 的拆分。你只要定義各個(gè)子 Reducer 函數(shù)，然后用這個(gè)方法，將它們合成一個(gè)大的 Reducer。當(dāng)然，我們這里只有一個(gè) unit 的 Reducer ，拆不拆分都可以。

devToolsEnhancer是個(gè)中間件（middleware）。用于在開(kāi)發(fā)環(huán)境時(shí)使用Redux DevTools來(lái)調(diào)試redux。

2. Action

Action 描述當(dāng)前發(fā)生的事情。改變 State 的唯一辦法，就是使用 Action。它會(huì)運(yùn)送數(shù)據(jù)到 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 的變化，會(huì)導(dǎo)致 View 的變化。但是，用戶接觸不到 State，只能接觸到 View。所以，State 的變化必須是 View 導(dǎo)致的。Action 就是 View 發(fā)出的通知，表示 State 應(yīng)該要發(fā)生變化了。代碼中，我們定義了actions對(duì)象，他有很多屬性，每個(gè)屬性都是函數(shù)，函數(shù)的輸出是派發(fā)了一個(gè)action對(duì)象，通過(guò)Store.dispatch發(fā)出。action是一個(gè)包含了必須的type屬性，還有其他附帶的信息。

3. Immutable

Immutable Data 就是一旦創(chuàng)建，就不能再被更改的數(shù)據(jù)。對(duì) Immutable 對(duì)象的任何修改或添加刪除操作都會(huì)返回一個(gè)新的 Immutable 對(duì)象。詳細(xì)介紹，推薦知乎上的Immutable 詳解及 React 中實(shí)踐。我們項(xiàng)目里用的是Facebook 工程師 Lee Byron 花費(fèi) 3 年時(shí)間打造的immutable.js庫(kù)。具體的API大家可以去官網(wǎng)學(xué)習(xí)。

熟悉 React 的都知道，React 做性能優(yōu)化時(shí)有一個(gè)避免重復(fù)渲染的大招，就是使用shouldComponentUpdate()，但它默認(rèn)返回true，即始終會(huì)執(zhí)行render()方法，然后做 Virtual DOM 比較，并得出是否需要做真實(shí) DOM 更新，這里往往會(huì)帶來(lái)很多無(wú)必要的渲染并成為性能瓶頸。當(dāng)然我們也可以在shouldComponentUpdate()中使用使用 deepCopy 和 deepCompare 來(lái)避免無(wú)必要的render()，但 deepCopy 和 deepCompare 一般都是非常耗性能的。

Immutable 則提供了簡(jiǎn)潔高效的判斷數(shù)據(jù)是否變化的方法，只需===(地址比較) 和is( 值比較) 比較就能知道是否需要執(zhí)行render()，而這個(gè)操作幾乎 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 后，如下圖，當(dāng)紅色節(jié)點(diǎn)的 state 變化后，不會(huì)再渲染樹中的所有節(jié)點(diǎn)，而是只渲染圖中綠色的部分：

本項(xiàng)目中，我們采用支持 class 語(yǔ)法的 pure-render-decorator 來(lái)實(shí)現(xiàn)。我們希望達(dá)到的效果是：當(dāng)我們編輯組件的屬性時(shí)，其他組件并不被渲染，而且preview里，只有被修改的preview組件update，而其他preview組件不渲染。為了方便觀察組件是否被渲染，我們?nèi)藶榈慕o組件增加了data-id的屬性，其值為Math.random()的隨機(jī)值。效果如下圖所示：

immutable實(shí)際效果圖

4. Reducer

Store 收到 Action 以后，必須給出一個(gè)新的 State，這樣 View 才會(huì)發(fā)生變化。這種 State 的計(jì)算過(guò)程就叫做 Reducer。

import immutable from 'immutable';

const unitsConfig = immutable.fromJS({
    META: {
        type: 'META',
        name: 'META信息配置',
        title: '',
        keywords: '',
        desc: ''
    },
    TITLE: {
        type: 'TITLE',
        name: '標(biāo)題',
        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: '統(tǒng)計(jì)',
        id: ''
    }
})

const initialState = immutable.fromJS([
    {
        type: 'META',
        name: 'META信息配置',
        title: '',
        keywords: '',
        desc: '',
        // 非常重要的屬性，表明這次state變化來(lái)自哪個(gè)組件！
        fromType: ''
    }
]);


function reducer(state = initialState, action) {
    let newState, localData, tmp
    // 初始化從localstorage取數(shù)據(jù)
    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，便于恢復(fù)現(xiàn)場(chǎng)
    localStorage.setItem('config', JSON.stringify(newState.toJS()));

    // 撤銷，恢復(fù)操作(僅以組件數(shù)量變化為觸發(fā)點(diǎn)，否則存儲(chǔ)數(shù)據(jù)巨大，也沒(méi)必要)
    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){
            // 組件的數(shù)量有變化，刪除歷史記錄index指針狀態(tài)之后的所有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{
            // 組件數(shù)量沒(méi)有變化，index不變。但是要更新存儲(chǔ)的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是一個(gè)函數(shù)，它接受Action和當(dāng)前State作為參數(shù)，返回一個(gè)新的State。unitsConfig是存儲(chǔ)著各個(gè)組件初始配置的對(duì)象集合，所有新添加的組件都從里邊取初始值。State有一個(gè)初始值：initialState，包含META組件，因?yàn)槊總€(gè)web頁(yè)面必定有一個(gè)META信息，而且只有一個(gè)，所以頁(yè)面左側(cè)組件列表里不包含它。

reducer會(huì)根據(jù)action的type不同，去執(zhí)行相應(yīng)的操作。但是一定要注意，immutable數(shù)據(jù)操作后要記得賦值。每次結(jié)束后我們都會(huì)去修改fromType值，是因?yàn)橛械慕M件，比如AUDIO、CODE等修改后，預(yù)覽的js代碼需要重新執(zhí)行一次才可以生效，而其他組件我們可以不用去執(zhí)行，提高性能。

當(dāng)然，我們頁(yè)面也做了現(xiàn)場(chǎng)恢復(fù)功能(localStorage)，也得益于immutable數(shù)據(jù)結(jié)構(gòu)，我們實(shí)現(xiàn)了Redo/Undo的功能。Redo/Undo的功能僅會(huì)在組件個(gè)數(shù)有變化的時(shí)候計(jì)作一次版本，否則錄取的的信息太多，會(huì)對(duì)性能造成影響。當(dāng)然，組件信息發(fā)生變化我們是會(huì)去更新數(shù)組的。

5. 工作流程

用戶能接觸到的只有view層，就是組件里的各種輸入框，單選多選等。用戶與之發(fā)生交互，會(huì)發(fā)出action。React-Redux提供connect方法，用于從UI組件生成容器組件。connect方法接受兩個(gè)參數(shù)：mapStateToProps和mapDispatchToProps，按照React-Redux的API，我們需要將Store.dispatch(action)寫在mapDispatchToProps函數(shù)里邊，但是為了書寫方便和直觀看出這個(gè)action是哪里發(fā)出的，我們沒(méi)有遵循這個(gè)API，而是直接寫在在代碼中。

然后，Store 自動(dòng)調(diào)用 Reducer，并且傳入兩個(gè)參數(shù)：當(dāng)前 State 和收到的 Action。 Reducer 會(huì)返回新的 State 。State 一旦有變化，Store 就會(huì)調(diào)用監(jiān)聽(tīng)函數(shù)。在React-Redux規(guī)則里，我們需要提供mapStateToProps函數(shù)，建立一個(gè)從（外部的）state對(duì)象到（UI組件的）props對(duì)象的映射關(guān)系。mapStateToProps會(huì)訂閱 Store，每當(dāng)state更新的時(shí)候，就會(huì)自動(dòng)執(zhí)行，重新計(jì)算 UI 組件的參數(shù)，從而觸發(fā)UI組件的重新渲染。大家可以看我們content.js組件的最后代碼：

export default connect(
    state => ({
        unit: state.get('unit'),
    })
)(Content);

connect方法可以省略mapStateToProps參數(shù)，那樣的話，UI組件就不會(huì)訂閱Store，就是說(shuō) Store 的更新不會(huì)引起 UI 組件的更新。像header和footer組件，就是純UI組件。

為什么我們的各個(gè)子組件都可以拿到state狀態(tài)，那是因?yàn)槲覀冊(cè)谧铐攲咏M件外面又包了一層<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，路由切換交給后臺(tái)。

五、兼容性和打包優(yōu)化1. 兼容性

為了讓頁(yè)面更好的兼容IE9+和android瀏覽器，因?yàn)轫?xiàng)目使用了babel，所以采用babel-polyfill和babel-plugin-transform-runtime插件。

2. Antd按需加載

Antd完整包特別大，有10M多。而我們項(xiàng)目里主要是采用了彈窗組件，所以我們應(yīng)該采用按需加載。只需在.babelrc文件里配置一下即可，詳見(jiàn)官方說(shuō)明。

3. webpack配置externals屬性

項(xiàng)目最后打包的main.js非常大，有接近10M多。在網(wǎng)上搜了很多方法，最后發(fā)現(xiàn)webpack配置externals屬性的方法非常好?？梢岳胮c的多文件并行下載，降低自己服務(wù)器的壓力和流量，同時(shí)可以利用cdn的緩存資源。配置如下所示：

externals: {
    "jquery": "jQuery",
    "react": "React",
    "react-dom": "ReactDOM",
    'CodeMirror': 'CodeMirror',
    'immutable': 'Immutable',
    'react-router': 'ReactRouter'
}

externals屬性告訴webpack，如下的這些資源不進(jìn)行打包，從外部引入。一般都是一些公共文件，比如jquery、react等。注意，因?yàn)檫@些文件從外部引入，所以在npm install的時(shí)候，有些依賴這些公共文件的包安裝會(huì)報(bào)warning，所以看到這些大家不要緊張。經(jīng)過(guò)處理，main.js文件大小降到3.7M，然后nginx配置下gzip編碼壓縮，最終將文件大小降到872KB。因?yàn)樵谝苿?dòng)端，文件加載還是比較慢的，我又給頁(yè)面加了loading效果。

以上是“前端頁(yè)面制作工具pagemaker的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

網(wǎng)站題目：前端頁(yè)面制作工具pagemaker的示例分析-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://muchs.cn/article14/dsppde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、企業(yè)建站、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)