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

本篇內(nèi)容介紹了“前端頁面制作工具pagemaker怎么用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

　　pagemaker是一個(gè)前端頁面制作工具，方便產(chǎn)品，運(yùn)營和視覺的同學(xué)迅速開發(fā)簡單的前端頁面，從而可以解放前端同學(xué)的工作量。

　　一、功能特點(diǎn)

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

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

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

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

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

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

　　頁面前端架構(gòu)采用react+redux，并采用immutable數(shù)據(jù)結(jié)構(gòu)。可以將每次組件的更新最小化，從而達(dá)到頁面性能的最優(yōu)化。

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

　　適配移動(dòng)端

　　二、用到的技術(shù)

　　1.前端

　　React

　　Redux

　　React-Redux

　　Immutable

　　React-Router

　　fetch

　　es6

　　es7

　　2.后臺(tái)

　　Node

　　Express

　　3.工具

　　Webpack

　　Sass

　　Pug

　　三、腳手架工具

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

　　create-react-app

　　react-starter-kit

　　react-boilerplate

　　github上的star數(shù)都很高，第一個(gè)是Facebook官方出的reactdemo。但是看下來，三個(gè)項(xiàng)目都比較龐大，引入了很多不需要的功能包。后來搜索了下，發(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';

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

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

　　2.Action

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

　　3.Immutable

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

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

　　Immutable則提供了簡潔高效的判斷數(shù)據(jù)是否變化的方法，只需===(地址比較)和is(值比較)比較就能知道是否需要執(zhí)行render()，而這個(gè)操作幾乎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怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！