前端頁面制作工具pagemaker怎么用

本篇內容介紹了“前端頁面制作工具pagemaker怎么用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　pagemaker是一個前端頁面制作工具，方便產品，運營和視覺的同學迅速開發簡單的前端頁面，從而可以解放前端同學的工作量。

　　一、功能特點

　　組件豐富。有標題、圖片、按鈕、正文、音頻、視頻、統計、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官方出的reactdemo。但是看下來，三個項目都比較龐大，引入了很多不需要的功能包。后來搜索了下，發現一個好用的腳手架工具：yeoman，大家可以選擇相應的generator。我選擇的是react-webpack。項目比較清爽，需要大家自己搭建redux和immutable環境，以及后臺express。其實也好，鍛煉下自己構建項目的能力。

　　四、核心代碼分析

　　1.Store

　　Store就是保存數據的地方，你可以把它看成一個容器。整個應用只能有一個Store。

　　import{createStore}from'redux';

　　import{combineReducers}from'redux-immutable';

　　importunitfrom'./reducer/unit';

　　//importcontentfrom'./reducer/content';

　　letdevToolsEnhancer=null;

　　if(process.env.NODE_ENV==='development'){

　　devToolsEnhancer=require('remote-redux-devtools');

　　}

　　constreducers=combineReducers({unit});

　　letstore=null;

　　if(devToolsEnhancer){

　　store=createStore(reducers,devToolsEnhancer.default({realtime:true,port:config.reduxDevPort}));

　　}

　　else{

　　store=createStore(reducers);

　　}

　　exportdefaultstore;

　　Redux提供createStore這個函數，用來生成Store。由于整個應用只有一個State對象，包含所有數據，對于大型應用來說，這個State必然十分龐大，導致Reducer函數也十分龐大。Redux提供了一個combineReducers方法，用于Reducer的拆分。你只要定義各個子Reducer函數，然后用這個方法，將它們合成一個大的Reducer。當然，我們這里只有一個unit的Reducer，拆不拆分都可以。

　　devToolsEnhancer是個中間件（middleware）。用于在開發環境時使用ReduxDevTools來調試redux。

　　2.Action

　　Action描述當前發生的事情。改變State的唯一辦法，就是使用Action。它會運送數據到Store。

　　importStorefrom'../store';

　　constdispatch=Store.dispatch;

　　constactions={

　　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}),

　　};

　　exportdefaultactions;

　　State的變化，會導致View的變化。但是，用戶接觸不到State，只能接觸到View。所以，State的變化必須是View導致的。Action就是View發出的通知，表示State應該要發生變化了。代碼中，我們定義了actions對象，他有很多屬性，每個屬性都是函數，函數的輸出是派發了一個action對象，通過Store.dispatch發出。action是一個包含了必須的type屬性，還有其他附帶的信息。

　　3.Immutable

　　ImmutableData就是一旦創建，就不能再被更改的數據。對Immutable對象的任何修改或添加刪除操作都會返回一個新的Immutable對象。詳細介紹，推薦知乎上的Immutable詳解及React中實踐。我們項目里用的是Facebook工程師LeeByron花費3年時間打造的immutable.js庫。具體的API大家可以去官網學習。

　　熟悉React的都知道，React做性能優化時有一個避免重復渲染的大招，就是使用shouldComponentUpdate()，但它默認返回true，即始終會執行render()方法，然后做VirtualDOM比較，并得出是否需要做真實DOM更新，這里往往會帶來很多無必要的渲染并成為性能瓶頸。當然我們也可以在shouldComponentUpdate()中使用使用deepCopy和deepCompare來避免無必要的render()，但deepCopy和deepCompare一般都是非常耗性能的。

　　Immutable則提供了簡潔高效的判斷數據是否變化的方法，只需===(地址比較)和is(值比較)比較就能知道是否需要執行render()，而這個操作幾乎0成本，所以可以極大提高性能。修改后的shouldComponentUpdate是這樣的：

　　import{is}from'immutable';

　　shouldComponentUpdate:(nextProps={},nextState={})=>{

　　constthisProps=this.props||{},thisState=this.state||{};

　　if(Object.keys(thisProps).length!==Object.keys(nextProps).length||

　　Object.keys(thisState).length!==Object.keys(nextState).length){

　　returntrue;

　　}

　　for(constkeyinnextProps){

　　if(thisProps[key]!==nextProps[key]||！is(thisProps[key],nextProps[key])){

　　returntrue;

　　}

　　}

　　for(constkeyinnextState){

　　if(thisState[key]!==nextState[key]||！is(thisState[key],nextState[key])){

　　returntrue;

　　}

　　}

　　returnfalse;

　　}

“前端頁面制作工具pagemaker怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！