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
A brief analysis of MySQL explicit type conversion
CAST function In the previous article, we mention...
Docker installation method and detailed explanation of Docker's four network modes
1. Install Docker yum -y install docker-io The &q...
Can MySQL's repeatable read level solve phantom reads?
introduction When I was learning more about datab...
CSS transparent border background-clip magic
This article mainly introduces the wonderful use ...
WeChat applet records user movement trajectory
Table of contents Add Configuration json configur...
A brief discussion on two current limiting methods in Nginx
The load is generally estimated during system des...
React non-parent-child component parameter passing example code
React is a JAVASCRIPT library for building user i...
vue-cropper component realizes image cutting and uploading
This article shares the specific code of the vue-...
Use the vue-element-admin framework to dynamically obtain the menu function from the backend
Table of contents 2. Detailed explanation 2.1. Ad...
Explanation of MySQL's horizontal and vertical table partitioning
In my previous article, I said that the optimizat...
Vue implements 3 ways to switch tabs and switch to maintain data status
3 ways to implement tab switching in Vue 1. v-sho...
Detailed explanation of CSS child element fixed positioning solution relative to parent element
Basic Concepts Absolute positioning: An element b...
Implementing circular scrolling list function based on Vue
Note: You need to give the parent container a hei...
Use docker to build kong cluster operation
It is very simple to build a kong cluster under t...
CSS XTHML writing standards and common problems summary (page optimization)
Project Documentation Directory Div+CSS Naming Sta...