The front end emphasizes engineering, modularization, componentization, and progressiveness.
1. Engineering
Engineering is the separation of the structure, style, and action of the entire project. Engineering is an idea rather than a technology (of course, we will use some technologies to achieve engineering). Various specifications, technology selection, project construction optimization, JS/CSS module machine, UI componentization, etc.
Front-end engineering is to use the thinking of engineering to view and develop your own projects, rather than just roll up your sleeves and start writing one page at a time.
- In the configuration of the initial project file structure and basic files are automatically generated by the command line (tool), code construction: webpack, scaffolding: *cli, used to create the project directory structure.
- Determine code specifications, indentation, line breaks, and various precompilation tools less, coffee, to ensure consistent output code standards
- Unit test whether the JS file is standardized. No need to manually copy to jshint for detection. Now configure grunt to monitor file changes to automatically check and display the test results. You can also configure the build tool to automatically refresh the browser to achieve real-time file change monitoring
- Configure grunt, gulp can do automatic tasks, compile in real time, and respond to file changes by monitoring
- Use tools to automatically package and upload to the server
2. Modularity
The page is formed by multiple modules, which do not interfere with each other. Load them when you use them. Various other modules (js, css) can be introduced, which has high scalability. Modularization is to divide the previous general page into pages formed by several modules. This process (thought) is called modularization.
- Defining a module
According to the CommonJS 1 specification, a single file is a module. Each module is a separate scope, that is, variables defined in the module cannot be read by other modules unless they are defined as attributes of the global object. - Module output The
module has only one export, the module.exports object. We need to put the content that the module wants to output into this object. - Load module
Load module uses require method, which reads a file and executes it, and returns the module.exports object inside the file.
Three, componentization
Componentization regards the page as a container, and each independent part of the page, such as the head, navigation, focus map, sidebar, bottom, etc., is regarded as independent components. Different pages can contain relevant components according to the needs of the content. Make up a complete page.
To improve the previous general page into a page formed by individual components, the process (thought) is called componentization.
Rules :
- Each independent, visual/interactive area on the page is treated as a component;
- Each component corresponds to a project directory, and various resources required by the component are maintained nearby in this directory;
due to the independence of components, components and components can be freely combined; - The page is just a container of components, responsible for combining components to form a fully functional interface;
- When a component is not needed, or you want to replace a component, you can delete/replace the entire directory.
Ensure the sealing of components. Because the JS aspect is modular. The function limit of the component. That is, what should be implemented inside the component, and what should be implemented by the caller of the component. The definition of component function boundaries is only responsible for UI-related functions, and all business logic is passed from the caller. That is, it is written in param.js. So the param.js file is a very important file, which basically contains all the business processing logic of this page. Obviously, as page business logic becomes more complex, js files will become larger and larger. It doesn't matter, separate the different component parameters into different js files to achieve, and then build a special folder to organize them.
Fourth, standardization
The directory structure is determined by the specific front-end framework, and the directory naming has a customary meaning. Such as:
1. The src folder stores all the source code and other static resources (such as pictures, iconfont).
2. The dist folder stores all the compiled code.
3. The build folder stores all the codes needed for engineering.
4. Of course the documents stored in the document folder.
PS: One of the most direct benefits of modularization and componentization is reuse. At the same time, we should also have a concept. In addition to reuse, modularization and componentization are divided and conquered. We can do so without affecting other codes. Modify an independent module or component as needed. Therefore, in many places, we do not have a strong need for reuse in time, and we can develop modular or componentized development based on divide and conquer requirements.
Because there is no modular programming on the web side, it is just that the JavaScript logic of the page is complicated, but it can continue to work, but there must be modules on the server side. So although JavaScript has been developed on the web side for so many years, the first popular modularization specification is the server Brought by end-of-the-line JavaScript applications, the CommonJS specification is carried forward by NodeJS, which marks the official stage of JavaScript modular programming. ↩︎