Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to use the front-end page creation tool pagemaker". In the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Pagemaker is a front-end page production tool to facilitate products, operators and visual students to quickly develop simple front-end pages, which can liberate the workload of front-end students.

I. functional features

Rich in components. There are captions, pictures, buttons, text, audio, video, statistics, jscss input.

Live preview. You can see the latest preview immediately with each change.

Supports three import methods and supports the export of configuration files.

Undo/Redo operation is supported. (the number of components changes to the trigger point)

You can publish, modify, or delete published pages at any time.

Each page has a publishing password to prevent others from changing it.

The front-end structure of the page adopts react+redux and immutable data structure. Each update of the component can be minimized to optimize page performance.

The background automatically compresses the uploaded pictures to prevent the file from being too large

Adaptive mobile terminal

Second, the technology used

1. Front end

React

Redux

React-Redux

Immutable

React-Router

Fetch

Es6

Es7

two。 Backstage

Node

Express

3. Tools

Webpack

Sass

Pug

Third, scaffolding tools

Because the project uses a lot of technology, the use of scaffolding tools can save us the time to build the project. After searching, I found that three of them are more useful:

Create-react-app

React-starter-kit

React-boilerplate

The number of star on github is very high, and the first is the official reactdemo issued by Facebook. But from the point of view, the three projects are relatively large, introducing a lot of unneeded feature packages. Later, I searched and found a useful scaffolding tool: yeoman, we can choose the corresponding generator. I chose react-webpack. The project is relatively refreshing, and you need to build your own redux and immutable environment, as well as background express. In fact, it's good to exercise your ability to build a project.

Fourth, core code analysis

1.Store

Store is the place where data is stored, and you can think of it as a container. There can be only one Store for the entire application.

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 provides the function createStore, which is used to generate Store. Because the whole application has only one State object, which contains all the data, for large applications, the State must be very large, resulting in the Reducer function is also very large. Redux provides a combineReducers method for splitting Reducer. All you have to do is define each sub-Reducer function and then use this method to synthesize them into a large Reducer. Of course, we only have one Reducer of unit here, and we can split it or not.

DevToolsEnhancer is middleware (middleware). Used to debug redux using ReduxDevTools in the development environment.

2.Action

Action describes what is happening right now. The only way to change State is to use Action. It will deliver the data to 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

The change of State will lead to the change of View. However, users do not have access to State, only View. Therefore, the change in State must be caused by View. Action is a notification from View that State should change. In the code, we define the actions object, which has many properties, each of which is a function, and the output of the function is to dispatch an action object, which is issued through Store.dispatch. Action is a type attribute that contains the required attributes, as well as other accompanying information.

3.Immutable

An ImmutableData is data that, once created, cannot be changed. Any modifications, additions and deletions to the Immutable object return a new Immutable object. Detailed introduction, recommend the detailed explanation of Immutable on Zhihu and practice in React. Our project uses the immutable.js library that Facebook engineer LeeByron spent 3 years building. You can go to the official website to learn the specific API.

Those who are familiar with React all know that when React does performance optimization, a big way to avoid repeated rendering is to use shouldComponentUpdate (), but it returns true by default, that is, it always executes the render () method, then makes a VirtualDOM comparison, and finds out whether it needs to do a real DOM update, which often brings a lot of unnecessary rendering and becomes a performance bottleneck. Of course, we can also use deepCopy and deepCompare in shouldComponentUpdate () to avoid unnecessary render (), but deepCopy and deepCompare are generally very performance-intensive.

Immutable provides a concise and efficient way to determine whether the data has changed. You only need to compare = (address comparison) and is (value comparison) to know whether you need to perform render (), and this operation is almost zero cost, so it can greatly improve performance. The modified shouldComponentUpdate looks like this:

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

}

This is the end of the content of "how to use the front-end page creation tool pagemaker". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.