Understanding javascript modularity_javascript skills

Modularization is a common programming best practice. The modularization of programs makes it easier for us to use other people's code and load whatever modules we want for whatever functions we want, thereby improving code utilization efficiency and increasing development speed.

Modules are like building blocks. With them, we can build programs with various functions and styles. What are the characteristics of building blocks? Small and simple. Similarly, the modules in our program should also do this, ensuring that the functions you create only complete one job at a time, so that other developers can simply debug and modify your code without having to browse all the code to figure out each step. What function does a block of code perform? Only by being small and simple like this can it achieve its universal function.

1. JavaScript modularization method
1. Function encapsulation
The scope of JavaScript is based on functions, so we can use functions as modules.

function fn1(){
  //code
}

function fn2(){
  //code
}

Disadvantages: "Polluting" global variables, there is no guarantee that variable names will not conflict with other modules

2. Object

var myModule1 = {
  fn1: function(){
    //code
  },
  fn2: function(){
    //code
  }
}

Disadvantages: All module members will be exposed, and the internal state can be overwritten by the outside

Immediately self-execute function - recommended

var myModule = (function(){
  function fn1(){
    //code
  },
  function fn2(){
    //code
  },
  return {
    fn1: fn1,
    fn2: fn2
  };
})();

2. Small and simple
Regarding small and simple, let's look at an example. For example, we now want to write a function that creates a new link and add a class for the type "mailto" hyperlink. You can do this:

function addLink(text, url, parentElement) {
  var newLink = document.createElement('a');//创建a标签
  newLink.setAttribute('href', url);//为a标签设置href属性
  newLink.appendChild(document.createTextNode(text));//为a标签添加文本
  if(url.indexOf("mailto:")==-1){
    newLink.className = 'mail';
  }
  parentElement.appendChild(newLink);//将a标签添加到页面
}

Writing this way may work, but you may find that you are not allowed to add other functions, so this function is not applicable. Therefore, the more specific the function, the more difficult it is to apply it to different situations.
The way the functions are written here does not meet the requirements of modularity - one function only does one thing. Let’s adapt the function:

function createLink(text,url) {
  var newLink = document.createElement('a');
  newLink.setAttribute('href', url);
  newLink.appendChild(document.createTextNode(text));
  return newLink;
}

The createLink function here only does one thing - create and return the a tag to be added to the page (small and simple), so that we can call such a function whenever we need to create a hyperlink.

3. CommonJS
In a browser environment, the lack of modules is not a big problem. After all, the complexity of web programs is limited; but on the server side, there must be modules to interact with the operating system and other applications, otherwise programming will not be possible at all. Although JavaScript has been developed on the web for so many years, the first popular modular specification was brought by server-side JavaScript applications. The CommonJS specification was carried forward by NodeJS, which marked the official entry of JavaScript modular programming on the stage.
The module system of node.js is implemented according to the CommonJS specification. In CommonJS, there is a global method require() for loading modules.
Load module:

var math = require('math');
Calling module:

math.add(2,3)
The CommonJS specification is not applicable to the browser environment because it has a major limitation. In the above example, the second line of math.add(2, 3) must be run after math.js is loaded, and The modules are all placed on the server side, so it may take a long time. The waiting time depends on the speed of the network.

The CommonJS specification applies to the server side, because for the server side, all modules are stored in the local hard disk and can be loaded synchronously. The waiting time is the reading time of the hard disk

4. How should the module be defined and loaded?
AMD
Asynchronous Module Definition asynchronous module definition, main representative: require.js
Purpose:
(1) Implement asynchronous loading of js files to avoid web pages losing response;
(2) Manage dependencies between modules to facilitate code writing and maintenance.

1. Define module

define(["./cart", "./inventory"], function(cart, inventory) {
  //通过[]引入依赖
  return {
    color: "blue",
    size: "large",
    addToCart: function() {
      inventory.decrement(this);
      cart.add(this);
    }
  }
}
);

2. Load module

require( ["some/module", "my/module", "a.js", "b.js"],
function(someModule,  myModule) {
  //This function will be called when all the dependencies
  //listed above are loaded. Note that this function could
  //be called before the page is loaded.
  //This callback is optional.
}
 );

CMD
Common Module Definition Common module definition, CMD specification is developed domestically. Main representative: sea.js

1. Define module

define(function(require, exports, module) {
 // 通过 require 引入依赖
 var $ = require('jquery');
 var Spinning = require('./spinning');
 // 通过 exports 对外提供接口
 exports.doSomething = ...
 // 或者通过 module.exports 提供整个接口
 module.exports = ...
});

2. Load module

seajs.use("../static/hello/src/main")
Difference:

For dependent modules, AMD is executed in advance and CMD is executed delayed. However, starting from RequireJS 2.0, it has also been changed to be able to delay execution (the processing method is different depending on the writing method). CMD recommends as lazy as possible.

CMD advocates dependence nearby, AMD advocates dependence up front.

The above is the entire content of this article, I hope it will be helpful to everyone’s study.