Design idea of front-end modularization

Modular Concept

Modularization is to reduce cycle dependency, reduce coupling and improve design efficiency. To do this, we need to have a design rule where all the modules are designed under this rule. Good design rules classify the work tasks by classifying the coupling-intensive design parameters as a module. While the modules interact with each other through a fixed interface (so-called visible parameters), the internal implementation (so-called implicit parameters) is http://www.aliyun.com/zixun/aggregation/7434.html by the module's "> Development team to play freely.

The purpose of the program modularization:

reduction of cyclic dependence reduces coupling and improves design efficiency

Program Modularization Implementation:

the modular design of HTML CSS images through the internal implementation of a fixed interface interaction module between the coupling-intensive modules

The implementation of page modularity, which refers to the modular implementation of the page code that removes the JavaScript section. Modular with HTML CSS images.
The implementation of the page modularization is a highly coupled page fragment package, module layout as a public interface, a highly coupled page packaging, using a separate CSS file, highly coupled with the image of the package, to some kind of strong correlation of the picture to create a folder.
The purpose of the page modularization is to achieve a collaborative development page for many people, improve the speed of page development and reduce maintenance difficulty. The speed of research and development is reflected in the collaborative parallel development of many people, maintenance difficulty is reflected in reducing the confusion of version, according to the module to reduce the version of the code conflict and file error coverage.

Split page module, from small to large decomposition
1. Split Page Module
A page has many small module modules, he comes from the original requirements documents, such as
Logo, navigation, content 1, content 2, content 3, content 4, tail navigation, copyright information and so on.
According to them, they can split the basic modules.
2. Split Web site module
Arrange the entire Web site with a channel or category for splitting, such as
Home, content page, text list page, picture List page, Channel 1 page, Channel 2 page, Category 1 page, Category 2 page, admin page, etc.
3. Each website as a module. Like what
Mall Station, pay station, forum, three stations independent of three large modules.

Modular implementation
1. High coupling extraction as a module, control module code scope
Code 1. Non-inheriting module, controlling scopes by descendant selector

<div class= "mod" ><h3 class= "title" >title</h3><div class= "con" > Con </div> <a class= " More ">more</a></div>.footer {}.footer ul {}.footer p {}.mod {}.mod.) title {}.mod. con {}.mod. more {}< div class= "Footer" ><ul><li><a href= "title=" "> About </a></li><li><a href=" " Title= "> Cooperation </a></li><li><a href=" "title=" > Recruitment </a></li></ul> copyright©2009 Company Copyright </div>

Code 2, the inheritance module, the extraction of the public parts of many modules, the specific module through the priority processing. Inheritance module in the whole station some modules of batch modification processing, but also improve reusability, reduce code duplication.

MoD {}.mod. title {}.mod. con {}.mod. more {}.note {}.note. title {}.note. con {}.note. more {}<div class= ' mod note ' > <h3 class= "title" >title</h3><div class= "con" > Con </div> <a class= "More" >more</a ></div>

2. Page Module
The control of the page module code scope is controlled by the CSS file. A class of highly-coupled pages uses its own CSS file.
3. Open Interface between modules
Above is the encapsulation of the module, what does the exposed interface represent in the page?
The first is reset,base, inheritable modules, which are open interfaces that must be developed according to the code, that is, your page code must be developed on the basis of the above code.
Next is the CSS file, the CSS file name and the page he acts on.
Again is the layout, module Class,id naming, where the module is on the page. The performance in CSS is positioning, layout, and partial box models. float, position, width, height and so on. Layout is usually implemented using CSS as an interface, if the layout has a high degree of logic, completely through the combination of HTML and CSS, such as 960 Grid System, or the use of Yui Grid.css. The name of the module class and ID is used to differentiate between modules, and it is not possible to have different modules with one class and ID name in all CSS in a page.

Planning Whole Station module

The basic principle mentioned above, the real implementation is still a lot of problems, the module granularity problem, common modules and common modules, inheritance module is worthy of inheritance and so on, page module how to divide.
First, learn about your project by drawing a tree map of your site to understand the overall structure and page module
Secondly, to clear up the structure and visual logic, the structural logic is to see your page consists of those modules, visual logic to understand the inheritable modules, layout logic (grid layout or non-grid layout)

Drawings：

Source: http://www.baiduux.com/blog/2010/02/24/Front-End modular design ideas