engineering

Front-end engineering is a high-level idea rather than a kind of technology. The so-called front-end engineering is to analyze, organize and build front-end projects as a system engineering so as to achieve the purpose of clear project structure, clear division of labor, tacit team cooperation and improved development efficiency. Modularization and componentization are relatively specific development ways under the thought of engineering, so modularization and componentization can be simply considered as the expression form of engineering.

Front-end engineering is divided into three major stages:

  1. Technology selection
  2. Build optimization
  3. Modular development, componentized development

modular

Modularity mainly reflects the idea of divide and rule. Divide and conquer is an important idea of software engineering and the cornerstone of complex system development and maintenance.Copy the code

Modular advantages:

  1. Improve maintainability
  2. Improve code reuse
  3. Facilitate dependency management
  4. Can avoid variable pollution, naming conflicts

Three modular specifications

1. The CommonJS

According to the CommonJS specification, a single file is a module. Each module is a separate scope, that is, variables defined inside the module cannot be read by other modules unless they are defined as properties of the Global object.

2. AMD

AMD is an Asynchronous Module Definition. The AMD specification defines modules through the define method and loads modules through the require method. RequireJS implements this specification.

3. CMD

CMD is the Common Module Definition, which is the standardized output of SeaJS Module Definition in the promotion process.

Modular specifications: blog.csdn.net/fu983531588…

componentization

  1. Each separate, visual/interactive area on the page is treated as a component.
  2. Each component corresponds to a project directory, where the various resources required by the component are maintained nearby
  3. Because components are independent, they can be composed freely from one component to another
  4. A page is nothing more than a container for components that combine to form a fully functional interface
  5. When a component is not needed or you want to replace it, you can remove/replace the entire directory
  6. Componentization regards the page as a container, and each independent part of the page, such as the header, navigation, focus, sidebar, bottom, etc. is regarded as an independent component. Different pages can form a complete page by putting related components according to the needs of the content.

PS: Modular and componentization is one of the most direct benefits of reuse, at the same time we should also have a idea, modular and componentization except for reuse as well as partition, we can in the case of does not affect other code according to the need to modify a certain independent modules or components, so many places we don’t have a strong reuse requires timely can also be split according to the requirements in terms of modularity Or componentized development.

Refer to the article

Blog.csdn.net/fu983531588…