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

This article will explain in detail about the component-based front-end development process analysis, the editor thinks it is very practical, so share it with you as a reference, I hope you can get something after reading this article.

Background

As the front-end students all know, if you do more pages, things will be messy, so we need to unify a development process. The quality of the development process directly affects the efficiency of page development and indirectly affects the time of the game.

Goals of the development process

The page can be completed quickly.

Through the way of componentization, we can ensure code reuse and avoid repetitive work.

Ensure that the page can run efficiently after it is online.

The scope of the development process

Specification for the storage of documents.

The organizational structure and coding specification of the code.

Release strategy.

The development tools necessary to support the entire process.

Each team has its own development process specification. In fact, there is no best process specification, only the most suitable one. The following is a summary of a set of general development process specifications based on the development processes of multiple teams.

Folder specification

Suppose the project folder is p /. Then this folder contains:

P/assets/ stores development tools

P/dev/ stores project files of development status

P/dpl/ stores the common component library of the project

P/release/ stores the released project files (all the files here are compressed)

The structure in p/dev/ is:

P/dev/website1/public/ site-wide common projects (storage of station-wide public files)

P/dev/website1/project1/ Project 1

P/dev/website1/project2/ Project 2

....

The structure within each project is:

P/dev/website1/project1/page1.html

P/dev/website1/project1/assets/page1.js

P/dev/website1/project1/assets/page1.css

P/dev/website1/project1/assets/images/

P/dev/website1/project1/include/page1.inc

The structure in p/dpl/ is:

P/dpl/system/ system js module

P/dpl/controls/ UI module

P/dpl/widgets/ business component

Where the structure within each folder is:

P/dpl/system/category1/component1.html

P/dpl/system/category1/assets/component1.js

P/dpl/system/category1/assets/component1.css

P/dpl/system/category1/assets/images/

Structure within p/release/:

According to the online document specification, it can also be the same as p/dev/.

Component based development and implementation

1. The common js and css of the whole station

The common js and css of the whole station are composed of some components selected from the p/dpl/ with tools. Put it on p/dev/website1/public/assets/common.js (or .css)

two。 Js and css that are not common to the whole station

You can load an assembly in a web page using the following code:

? using ("System.Category1.Component1")

Var comp1 = new Component1 ()

Where System.Category1.Component1 is mapped to p/dpl/system/category1/assets/component1.js (or .css).

In the development state, using loads the assembly synchronously. After the page is published, the using will be replaced with the source code of the corresponding component without the need for dynamic loading.

3. Load js and css asynchronously

The process itself does not provide the ability to load components asynchronously, and any third-party module loader can be used in the project to achieve asynchronous loading.

4. Reuse of html

Write include ("include/topbar.inc") in the html file to embed the corresponding html fragment into the page.

The release of the page

Page publishing mainly does these things:

Inline include, using, etc., to reduce the number of requests for pages.

Compress js and css.

Re-change the file location to meet the actual project requirements (for example, you need to extract js and css and filter html)

This is the end of this article on "component-based front-end development process analysis". I hope the above content can be of some help to you, so that you can learn more knowledge. If you think the article is good, please share it for more people to see.

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.