Modular thinking in page Reconstruction

Recently, it has been plagued by "modularization". It is also an article and a PPT, and has been forced to think about many related things. After sorting out my thoughts on modularization during this period, most of them are my own experience and understanding of page reconstruction, which has limitations to some extent, I also hope that I can learn new things in a gentle manner.

"Modularization" is just a trendy title for the technologies and methods we have been using in the past, just like "Ajax ". However, as a trend in the development of page reconstruction, more and more people are paying attention to it. unconsciously, it is full of "modularization", but do you really understand what is "modularization?

What is modularity?
There are 28 explanations of "modularization" in CNKI. It can be seen that "modular" thinking is widely used. It is closest to the "modularization" in page refactoring. The existing explanation should be the explanation in software development.

Let's take a look at how Baidu's entries explain "modularization:

Modularization refers to the process of dividing software systems into several modules from top to bottom when solving a complex problem. Each module completes a specific sub-function. All modules are assembled in a certain way to form a whole and complete the functions required by the entire system. The module has the following basic attributes: interface, function, logic, status, function, status, and interface reflect the external characteristics of the module, and the logic reflects its internal characteristics. In the software's system structure, a module is a unit that can be combined, decomposed, and replaced.

There are quite a few related books. If you are interested, you can search for them. We need to emphasize that what we learn from is a way of thinking.
Why modular page creation?
The increasing site content and code size gradually affect the client experience (mainly the open speed) and the maintenance efficiency. Is there any way to solve these problems?

It is easy for us to think about: reducing code redundancy, improving code reuse rate, image compression, and so on. How can we achieve this? Modular thinking can be solved, that is, it can effectively reduce code redundancy and improve code reuse rate. More importantly, it can support multi-person maintenance and reduce maintenance costs. CSS is more flexible in writing and prone to code coupling. modularization can also reduce coupling to some extent, which is helpful for locating bugs. Therefore, we should pay more attention to and use "modular thinking" to compile the site in the early stage of the site.

Some of the site performance optimizations we have mentioned before are also "modular", such as improving code reuse and development efficiency. There are many advantages of "modularization, I probably listed the following:

• Improve code reuse rate
• Improve development efficiency and reduce communication costs
• Reduced Coupling
• Reduce release risks
• Reduces Bug Locating time and fix costs
• Improve page fault tolerance
• Better implementation and fast Iteration
• Better support for gray release
The most important one is "Improving code reuse rate", which is also one of the most important features of modularization.

How to Implement "modularization "?
The main problem here is the "modularization" of HTML and CSS. Let's take a look at the skin replacement implementation method:

• Change the file (JS) with the same class name)
• Change the class name (JS) for the same file)
We can see the implementation of the HTML and CSS interfaces:

• Three Methods of CSS Introduction
• Class Name
For better implementation of this interface, related conventions, rules, and specifications (interaction, design, page, and development) are required, such: all current States use the same class name "nonce", and all gray-changing performances use the original class name followed by "_ n", the implementation method of tab, and so on. With these conventions, rules, and specifications, HTML code can easily be templated and unified with interface specifications.

There are two misunderstandings that need to be recognized first:

• Modular code segments cannot be used in any location (modular code segments also have applicability restrictions and require an environment that provides interface rules)
• The code segment after modularization cannot be changed (the code segment after modularization can be modified according to actual needs)
All independent modules are placed in the same project. Because the project has its own performance and interaction uniformity, a similar part must appear between modules, these parts can be proposed as a public definition to reduce redundancy. In this case, the coupling problem occurs, and it is impossible to completely do not coupling, therefore, the most important aspect of modularity is "moderate coupling ". With the public definition, you have to adjust the implementation method of the module style, and this adjustment will also affect the implementation method of the "interface.

Original from: http://isd.tencent.com /? P = 1134 # More-1134

 

After reading this article and integrating with our zhongle.com, in fact, we started to pay attention to the Code modularization details at the early stage of the revision construction. We often get all the revisions of a topic, so don't be busy cutting the chart, evaluate the entire site and predict which sections will be reused to implement modular design code.

The following is an example of zule network code modularization.

Figure 1

 

Figure 2

 

 

Figure 3

 

The three pictures above can be simply regarded as a list of friends with titles.

Let's look at the difference. Figure 2 and Figure 3 add some elements on the basis of figure 1. Figure 2 adds online identity items and access time items, and figure 3 adds a friend Link and an operable delete button. Recognizing this, we can use Figure 1 as a basis for its construction, and integrate various components for its disassembly and assembly.

The above is just a simple example. You are welcome to express your own opinions.