Speaking of modular development, everyone must be familiar with it, especially as the front-end application becomes more complex and the code grows exponentially, we have to spend a lot of time on management, and modularization is gradually accepted by everyone.
So specifically speaking, modular development refers to dividing complex application functions into multiple modules for development, so that a module is a file that implements a specific function. With modules, the most direct value is that we can more easily Manage code, or even directly import and use other people's code, and load any module for any function you want.
The development of modular development
In fact, the modularization of early JavaScript was realized based on the way of file division. This is the most primitive module system in our web. Of course, there are several outstanding problems in this way, such as naming conflicts and global pollution.
Later, we adopt the namespace method, agreeing that each module only exposes a global object, and all module members are mounted under this object. The specific method is to wrap each module into a global object on the basis of JavaScript modularization It is similar to adding namespaces for some members of our modules in the module, but this method has an obvious problem that it does not solve the dependency problem between modules.
Later, the method of immediately executing functions (IIFE) also appeared. Its principle is to put each module in the private scope of the function. For the members that need to be exposed, they can be implemented by mounting them on the global object. Here is also a practical example:
;(function () {
var name = 'module1'
function moduleFn() {
console.log(name + '---> moduleFn');
}
window.module1 = {
moduleFn: moduleFn
}
})()
So far, modular development has new developments and technical implementation methods, especially in today's rapid development of hybrid applications, with more diverse application functions and more complex codes. The importance of modular development seems to have become a consensus.
Advantages of modular development
If you want to talk about the biggest difference between modular development and traditional development models, I personally think that in addition to the inconsistent implementation methods, modular development can actually improve development efficiency and convenience. More specifically, I think it is mainly reflected in the following four aspects:
1. Flexible architecture and separation of focus
In modular development, modularization itself can be flexibly adjusted and expanded according to actual needs and changes, and the system can be divided into different levels, such as data access layer, business logic layer, presentation layer, etc. This layered design method can reduce the coupling of the system and improve the scalability of the system to a certain extent.
The separation of focus shows that the focus can be divided into functional requirements and performance requirements, and then developed and tested separately, so as to reduce the complexity of the system.
2. Convenient combination and decomposition between modules
In modular development, both combination and decomposition are easy to understand. As the name implies, combination refers to assembling different modules in a certain way, so that more complex functions or scenarios can be realized, and decomposition, in turn, is to decompose a complex module. It is several simple sub-modules for better function realization and maintenance.
3. It is convenient for single module function debugging and upgrading
When we adopt modular development, many complex functions become a separate module. If you need to debug or upgrade the function of a certain module, you can quickly carry out this function module without affecting the whole body. .
4. Multi-person collaboration does not interfere with each other
This is very easy to understand. Since modularization itself is realized by system decoupling, it is divided into multiple modularizations and corresponds to multiple code packages. In this way, mutual cooperation without being affected is also a way to improve efficiency.
The current state of modular development
Modularity is also constantly updated with the development of technology. For example, the development methods favored by many developers include dependency packaging and dependency loading.
1. Dependency loading
At present, this method is widely used, such as require js, sea.js, etc., except for the different writing specifications, the module chunk file is actually retrieved through the relevant require api, and the logic code is run after the loading is completed.
2. Rely on packaging
The classic representative is Webpack. In fact, it separates modules when writing code, but finds each module according to the dependency relationship when packaging, and finally packs them into the same file, and identifies an id for each chunk. When running logic code, point the module reference to this id to achieve modularity.
3. Small programs
In addition, with the practice of WeChat, Alipay and other apps, the small program container technology FinClip has also become an option for modularization. Its principle is actually the same as the previous modular development model, decoupling complex and tightly coupled functional applications into Small modules one by one, but the difference is that the carrying methods of these small modules are replaced by small programs, which is simpler from the perspective of development and management.
If we take a complex mobile banking app as an example, it is equivalent to using the small program container technology to break up the bloated APP functions, decouple the functional modules from each other, and make each business function a small program that is minimized, built into blocks, and Lego-like.
