前端頁面製作工具

来源:https://www.cnblogs.com/tywei90/archive/2018/02/21/8456656.html
-Advertisement-
Play Games

pagemaker是一個前端頁面製作工具，方便產品，運營和視覺的同學迅速開發簡單的前端頁面，從而可以解放前端同學的工作量。此項目創意來自網易樂得內部項目 "nfop" 中的pagemaker項目。原來項目的前端是採用jquery和模板ejs做的，每次組件的更新都會重繪整個dom，性能不是很好。因為當 ...


pagemaker是一個前端頁面製作工具，方便產品，運營和視覺的同學迅速開發簡單的前端頁面，從而可以解放前端同學的工作量。此項目創意來自網易樂得內部項目nfop中的pagemaker項目。原來項目的前端是採用jquery和模板ejs做的，每次組件的更新都會重繪整個dom，性能不是很好。因為當時react特別火，加上項目本身的適合，最後決定採用react來試試水。因為原來整個項目是包含很多子項目一起，所以後臺的實現也沒有參考，完全重寫。

本項目只是原來項目的簡單實現，去除了用的不多和複雜的組件。但麻雀雖小五臟俱全，本項目採用了react的一整套技術棧，適合那些對react有過前期學習，想通過demo來加深理解並動手實踐的同學。建議學習本demo的之前，先學習/複習下相關的知識點：React 技術棧系列教程、Immutable 詳解及 React 中實踐。

線上地址

一、功能特點

  1. 組件豐富。有標題、圖片、按鈕、正文、音頻、視頻、統計、jscss輸入。
  2. 實時預覽。每次修改都可以立馬看到最新的預覽。
  3. 支持三種導入方式，支持導出配置文件。
  4. 支持Undo/Redo操作。(組件個數發生變化為觸發點)
  5. 可以隨時發佈、修改、刪除已發佈的頁面。
  6. 每個頁面都有一個發佈密碼，從而可以防止別人修改。
  7. 頁面前端架構採用react+redux，並採用immutable數據結構。可以將每次組件的更新最小化，從而達到頁面性能的最優化。
  8. 後臺對上傳的圖片自動進行壓縮，防止文件過大
  9. 適配移動端

二、用到的技術

1. 前端

  1. React
  2. Redux
  3. React-Redux
  4. Immutable
  5. React-Router
  6. fetch
  7. es6
  8. es7

2. 後臺

  1. Node
  2. Express

3. 工具

  1. Webpack
  2. Sass
  3. Pug

三、腳手架工具

因為項目用的技術比較多，採用腳手架工具可以省去我們搭建項目的時間。經過搜索，我發現有三個用的比較多：

  1. create-react-app create-react-app star數
  2. react-starter-kit react-starter-kit star數
  3. react-boilerplate react-boilerplate star數

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 變化後，不會再渲染樹中的所有節點，而是只渲染圖中綠色的部分：

immutable演示

本項目中，我們採用支持 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. 工作流程

如下圖所示：
redux流程圖

用戶能接觸到的只有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狀態，那是因為我們在最頂層組件外面又包了一層

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

歡迎大家star學習交流：github地址 | 我的博客


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • SSH
    SSH簡介 SSH的主要特性 SSH的組成 SSH處理過程 SSH協議的實現工具 ssh 客戶端 ssh 伺服器 ssh 服務的最佳實踐 要使用預設埠 禁止使用protocol version 1 限制可登錄用戶 設定空閑會話超時時長 利用防火牆設置ssh 訪問策略 僅監聽特定的IP 地址 基於口 ...
  • 痞子衡隨筆：常用的數據傳輸差錯檢測技術（0）- 摘要
    RT ...
  • 帝國CMS備份出現數據恢復不完整的問題
    今天linux主機中毒了，把用帝國備份王備份之後，恢復了快照到剛建主機的狀態； 哎，只怪當初沒有勤快的去做快照啊； 重新配置好後； 開始使用帝國備份王； 數據恢復之後，打開文章，提示“附加表值出錯” 百度搜索了一堆解決問題，但是解決不了我的問題，我在打開phpmyadmin，發現資料庫里的表dede ...
  • 與數組初遇JavaScript
    數組有三種寫法 1. var arr=new Array(); 2. var arr=[1,2,3] 3. var arr=new Array(); arr[0]=1; 下麵我解釋如下代碼: 關鍵詞for是用來迴圈的，用法很簡單，不過用點規律 for(等於什麼;到什麼值;怎麼到那個值)，上面的代碼便 ...
  • jQuery03
    使用jQuery實現表單校驗：（單獨拿出來介紹表單校驗，是因為內容比較多，知識點較多）； 1、註：這裡使用validation插件完成對錶單數據的校驗； validate：一款優秀的表單驗證插件——validation插件 （1）特點： 內置驗證規則：擁有必填、數字、email、url和信用卡號碼等 ...
  • JavaScript DOM編程藝術（第2版）學習筆記1（1~4章）
    第一章 一些基本概念 HTML（超文本標記語言），構建網頁的靜態結構，由一系列的DOM組成； CSS（層疊樣式表），給網頁各部分結構添加樣式； JavaScript，通過獲取DOM給靜態結構加上動作，使用戶能夠與靜態網頁進行交互； DOM，一種API（應用程式介面），通過這個介面動態的訪問和修改結構 ...
  • jQuery02
    一、使用jQuery為標簽添加屬性或者樣式 1、$("#id名").css("css屬性名"，"屬性值")；比如：$("tbody tr:even").css("background-color","yellow"); 2、使用addClass（"class名"），然後在引入的css文件中寫樣式：. ...
  • Html富文本編輯器
    本文推薦兩款簡單的富文本編輯器【KindEditor,NicEdit】用於獲得所見即所得的編輯效果，本文僅供學習分享使用，如有不足之處，還請指正。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類