As a rookie, the word "module" has been heard countless times. Recently, I was asked to write a simple module, wtf, but, what is it? (This article is based on my thinking process, if you have any mistakes, please point out)

Module: A set of methods to implement specific functions. (I think modules are similar to classes in that they implement a set of methods that expose access interfaces to the outside world. The difference is that modules don't need to be instantiated, and modules don't have constructors.) Actually, I don't think it's necessary to write down at this point...

First, you must have written such code.

//Modular
var wyc = (function(){
	function getName(){
		console.log("wyc");
	}
	function getAge(){
		console.log(22);
	}
	return {
		getName: getName,
		getAge: getAge
	}
})();
//Visit
wyc.getName();
wyc.getAge();

2. Why are the modules above?

Above, we used immediate execution and return objects. Let's first look at the original writing (not the two above)

function getName(){
	console.log("wyc");
}
function getAge(){
	console.log(22);
}

Let's start by saying that these two functions implement a function to print wyc at the age of 22. If you need these two functions to implement another function later, you can print wp's age 22. Function calls are messy.

3. Other Writing Methods of Modules

1. Object Method

var wyc = {
	name: "wyc",
	getName: function(){
		console.log(this.name);
	}
}
wyc.getName();

2. Implement function writing immediately

1) Write 1: 1. An example of code you must have written is a way to write functions that execute immediately.

2) Writing 2:

var wyc = (function(){
 	var what_I_want = "you";
 	var my = {};
 	my.name = "wyc";
 	my.getName = function(){
 		console.log(this.name);
 	}
 	my.sayWhatYouWant = function(){
 		console.log(what_I_want);
 	}
 	return my;
 })();
 wyc.getName();					//wyc
 console.log(wyc.name);			//wyc
 wyc.sayWhatYouWant();			//you
 console.log(wyc.what_I_want);	//undefined

3. Amplification Mode/Tightly Coupled Extension

If a module needs to depend on another module, that is to say, the module needs to use the method in another module.

 var wyc = (function(){
 	var what_I_want = "you",
 		my = {};
 	my.name = "wyc";
 	my.getName = function(){
 		return this.name;
 	}
 	my.sayWhatYouWant = function(){
 		return what_I_want;
 	}
 	return my;
 })();
 
 var wp = (function($){
 	var my = {};
 	$.getName = function(){
 		return "xxx";
 	}
 	my.hate = function(){
 		console.log("I hate"+$.getName()+",I don't hate it anymore."+$.name);//I hate xxx. I don't hate wyc anymore.
 	}
 	return my;
 })(wyc);
 wp.hate();

4. Wide Amplification Mode/Loose Coupling Extension

var wp = (function($){
 	var my = {};
 	$.getName = function(){
 		return "xxx";
 	}
 	my.hate = function(){
 		console.log("I hate"+$.getName()+",I don't hate it anymore."+$.name);//I hate xxx. I don't hate undefined anymore.
 	}
 	return my;
 })(window.wyc || {});
 wp.hate();

IV. The relationship between jquery plug-ins and modules

jquery plug-in is an implementation of tightly coupled extended jquery module.

(function ($) {
	$.fn.extend({
		"bold": function () {
			// font-weight
			return this.css({ fontWeight: "bold" });
		}
	});
})(jQuery);

jquery can be called in a chain, but not here. See more about jquery plug-ins. jquery source code analysis

5. What is modularity (Detective Conan)

Case Discovery Site: Paging is implemented on a page, but jpaginate.js was quoted before jqeury.js... The program exploded.

Case analysis: jpaginate module relies on jquery module, because javascript scripts are loaded synchronously. So if jpaginate can't get jquery objects, it will report an error.

Sometimes we need a lot of modules to implement a function. But the dependencies between js modules, js also need the style of css, which is easy to make mistakes and difficult to maintain and modify. (For example, I use a stack of up-and-down dependent js files on multiple pages, and I added a dependent js file before, so I have to modify each page.)

Modularization is to solve the above two problems.

1. Dependence between management modules to facilitate module maintenance

2. Implement interdependent asynchronous loading of js files to avoid browser fake death

Concerning modularity, there are centralized specifications, commonJS, AMD, CMD, modular management and packaging tools, and webpack.

Write the rest later...