Detailed description of component-based front-end development process
|
Background <br />Students who work on the front-end know that if there are too many pages, things will become messy, so we need to unify the development process. The quality of the development process directly affects the efficiency of page development and indirectly affects the duration of the game. Goal of the development process <br />Pages can be completed quickly. Through componentization, code reuse is ensured to avoid duplication of work. Ensure that the page can run efficiently after it goes online. Scope of development process <br />File storage standards. The organizational structure and coding standards of the code. Release strategy. The development tools necessary to support the entire process. Each team has its own development process specifications. In fact, there is no best process specification, only the most suitable one. The following introduces a set of general development process specifications that are summarized and summarized based on the development processes of multiple teams. Folder Specification <br />Assume the project folder is p/. This folder contains: p/assets/ stores development tools p/dev/ stores project files in development status p/dpl/ stores the common component library of the project p/release/ stores released project files (the files here are all compressed) The structure in p/dev/ is : p/dev/website1/public/ Projects shared by the entire site (store files shared by the entire site) 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 /dev/website1/project1/assets/page1.css p/dev/website1/project1/assets/images/ p/dev/website1/project1/include/page1.inc The structure within p/dpl/ is : p/dpl/system/ system js module p/dpl/controls/ UI module p/dpl/widgets/ Business components The structure of each folder is as follows: 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/ The structure inside p/release/ is: Depending on the online file specification, it can also be the same as p/dev/. Component-based development implementation 1. JS and CSS used by the entire site The js and css used by the entire site are synthesized by selecting some components from p/dpl/ using tools. Put it in p/dev/website1/public/assets/common.js (or .css) 2. JS and CSS that are not shared by the entire site A component can be loaded in a web page using the following code: ?using("System.Category1.Component1"); var comp1 = new Component1(); Among them, System.Category1.Component1 will be mapped to p/dpl/system/category1/assets/component1.js (or .css). In development state, using will load components synchronously. After the page is published, using will be replaced by the source code of the corresponding component without the need for dynamic loading. 3. Asynchronous loading of js and css The process itself does not provide the function of asynchronously loading components. Any third-party module loader can be used in the project to implement asynchronous loading. 4. Reuse of HTML <br />Write include("include/topbar.inc") in the HTML file to embed the corresponding HTML fragment into the page. Page publishing <br />Page publishing mainly does these things: Inline includes and usings, etc. to reduce the number of page requests. Compress js and css. Re-change the file location to meet the actual project needs (for example, you need to extract js and css, and filter html) |
<<: Example code for implementing a pure CSS pop-up menu using transform
>>: Tkinter uses js canvas to achieve gradient color
Recommend
Simple example of limit parameter of mysql paging
Two parameters of Mysql paging select * from user...
The textarea tag cannot be resized and cannot be dragged with the mouse
The textarea tag size is immutable Copy code The c...
Analysis of the principles and usage of Linux hard links and soft links
In the Linux system, there is a kind of file call...
Baidu Input Method opens API, claims it can be ported and used at will
The relevant person in charge of Baidu Input Metho...
Multiple solutions for cross-domain reasons in web development
Table of contents Cross-domain reasons JSONP Ngin...
Mysql 5.6 "implicit conversion" causes index failure and inaccurate data
background When performing a SQL query, I tried t...
Tomcat's method of setting ports through placeholders (i.e. parameter specification method)
For work needs, I found a lot of information on t...
CSS3 overflow property explained
1. Overflow Overflow is overflow (container). Whe...
Use the vue-element-admin framework to dynamically obtain the menu function from the backend
Table of contents 2. Detailed explanation 2.1. Ad...
SQL left join and right join principle and example analysis
There are two tables, and the records in table A ...
An example of how to quickly deploy web applications using Tomcat in Docker
After learning the basic operations of Docker, we...
How to convert rows to columns in MySQL
MySQL row to column operation The so-called row-t...
CSS optimization skills self-practice experience
1. Use css sprites. The advantage is that the smal...
Detailed explanation of the implementation of regular backup of MySQL database tables
Implementation of regular backup of Mysql databas...
How to solve the problem of zabbix monitoring causing Chinese garbled characters in the graphical interface due to PHP problems
Solve the problem of Chinese garbled characters i...