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

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

我們提供的服務有：成都網站設計、網站建設、微信公眾號開發(fā)、網站優(yōu)化、網站認證、金溪ssl等。為超過千家企事業(yè)單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的金溪網站制作公司

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

一、功能特點

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

實時預覽。每次修改都可以立馬看到最新的預覽。

支持三種導入方式，支持導出配置文件。

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

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

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

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

后臺對上傳的圖片自動進行壓縮，防止文件過大

適配移動端

二、用到的技術

1.前端

React

Redux

React-Redux

Immutable

React-Router

fetch

es6

es7

2.后臺

Node

Express

3.工具

Webpack

Sass

Pug

三、腳手架工具

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

create-react-app

react-starter-kit

react-boilerplate

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

四、核心代碼分析

1.Store

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

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

2.Action

Action描述當前發(fā)生的事情。改變State的唯一辦法，就是使用Action。它會運送數(shù)據到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發(fā)出的通知，表示State應該要發(fā)生變化了。代碼中，我們定義了actions對象，他有很多屬性，每個屬性都是函數(shù)，函數(shù)的輸出是派發(fā)了一個action對象，通過Store.dispatch發(fā)出。action是一個包含了必須的type屬性，還有其他附帶的信息。

3.Immutable

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

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

Immutable則提供了簡潔高效的判斷數(shù)據是否變化的方法，只需===(地址比較)和is(值比較)比較就能知道是否需要執(zhí)行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怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網站，小編將為大家輸出更多高質量的實用文章！

標題名稱：前端頁面制作工具pagemaker怎么用
文章網址：http://bm7419.com/article6/ijhpig.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站制作、定制開發(fā)、關鍵詞優(yōu)化、網站設計、自適應網站、云服務器

廣告

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