1 How the older generation of front-end engineers achieve modularity

Before the advent of ECMAScript 6, the JavaScript language did not have a built-in syntax that supports modularization. This led to the inefficiency and cumbersome process of quoting .js, organizing files, extending functions, and maintaining projects when developing complex web applications on the front-end. However, for a complex Web application, modular programming can provide good work division, function expansion, and engineering maintenance, which is the most basic requirement in software development methodology. At that time, the older generation of front-end engineers could use IIFE functions to achieve modularity, and many libraries such as jQuery implemented this way.

let module = (function() {
    var _version = "1.0"; 
    var _name = "a-nice-module";

    function _log(x) {
        console.log(x);
    }

    function say(s) {
        _log(s);
    }

    return {
        name: _name,
        say: say
    };
})();

console.log(module._version);//>> undefined
console.log(module._log);//>> undefined
console.log(module.name); //>> a-nice-module
module.say("hello"); //>> hello

Modules are essentially encapsulation, which clearly distinguishes the accessible and non-accessible in the module. As in the above example, the private property _version and private method _log inside the module cannot be accessed outside the module; and the internal property _name and method say(s) are exposed in the form of an object property and method, and then the Objects are returned to callers outside the module, so they can be accessed outside the module. ECMAScript 6 absorbs the excellent ideas of the older generation of front-end engineers, and finally adopts the import and export built-in syntax to support modular development. Based on the implementation of the bottom of the browser, the modular development of the front-end becomes unprecedentedly standardized and efficient. Up, modular development finally ushered in an application boom.

2 Modularity of ECMAScript 6

1. Variables in the module are passed by reference

The change of the variables in the module will be synchronized to the outside, which means that the module is passed by reference, that is, when the module is referenced, the outer layer of the module is wrapped with a layer of objects, and the variables are passed by the attributes of the object. Examples are as follows:

///////////////// module.js //////////////////////

let m = 0;
setTimeout(() => {
  m = 1;
}, 1000);
export function getM() {
  return m;
}

The above code is equivalent to passing the following object, where _m represents the private attribute m

{
  _m:0,
  getM:function(){
    return this._m;
  }
}

The following is the entry file index.js:

/////////////// index.js //////////////////////////

import {getM} from "./module.js";
setTimeout(()=>{
    console.log(getM());
});
setTimeout(()=>{
    console.log(getM());
},2000);
//>> 0
//>> 1