Componentization and modularization

Componentization
Why component development
Sometimes the amount of page code is too large , Too much logic or the same functional component is used on many pages , Maintenance is quite complicated , This is the time , Component development is needed to split functions 、 Component encapsulation , To achieve component versatility , Enhance code readability , Maintenance costs can also be greatly reduced .
The advantages of component development
Reduce the coupling of various functions of the system to a great extent , And improve the aggregation within the function . This is important for front-end engineering and reducing code maintenance , There are great benefits , The reduction of coupling , It improves the extensibility of the system , Reduce the complexity of development , Improve development efficiency , Reduce development costs .
The principle of component development
Single mindedness
Configurability
Standardization
reusability
Maintainability

modularization
Why modularity
In the early JavaScript Version has no block level scope 、 There is no class 、 No bag 、 There are no modules , This will bring some problems , Such as reuse 、 rely on 、 Conflict 、 The code is disorganized, etc , With the expansion of the front end , Modularity is very urgent
The benefits of modularity
Avoid variable pollution , name conflict
Improve code reuse rate
Improved maintainability
Facilitate dependency management
Several methods of modularization
Function encapsulation

var myModule = {
    
	var1:1,
	var2:2,
	fn1:function() {
    
	},
	fn2:function() {
    
	}
}

summary ： This avoids contamination of variables , Just make sure the module name is unique , At the same time, members in the same module also have relationships
defects ： The external can modify the internal members at will , This creates unexpected safety problems
Execute the function expression immediately （IIFE）

var myModule = (function() {
    
	var var1=1;
	var var2=2;
	function fn1() {
    
	}
	function fn2() {
    
	}
	return {
    
		fn1:fn1,
		fn2:fn2
	};
})();

summary ： This prevents us from modifying variables outside the module that we have not exposed 、 function
shortcoming ： The function is relatively weak , The packaging process increases the workload , Namespace contamination may still occur 、 Closures have costs .