Shulou(Shulou.com)06/03 Report--

Editor to share with you the example analysis of JS modular knowledge points, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Modularity is the only way to language expansion, which can help developers split and organize code.

Module mode

Before the formation of the modular specification, JS developers used the Module design pattern to solve the pollution problem of JS global scope. The Module pattern was originally defined as a way to provide private and public encapsulation for classes in traditional software engineering. In JavaScript, the Module pattern is encapsulated by anonymous function self-call (closure) and distinguishes between private and public members by customizing the exposure behavior.

Let myModule = (function (window) {let moduleName = 'module' / / private / / public function setModuleName (name) {moduleName = name} / / public function getModuleName () {return moduleName} return {setModuleName, getModuleName} / / exposure behavior}) (window)

The above example is a way of writing the Module pattern, which opens a new scope through the feature of closures, alleviating global scope naming conflicts and security problems. However, developers cannot use it to organize and split code, so there is a modular specification based on it.

Modular programming

1. CommonJS

CommonJS is mainly used in Node development, each file is a module, no file has its own scope. Expose public members through module.exports. For example:

/ / filename: x.jslet x = 1bot function add () {x + = 1; return x;} module.exports.x = x politics module.exports.add = add

In addition, CommonJS introduces module dependencies through require (), and require functions can introduce third-party modules such as Node's built-in modules, custom modules, and npm.

/ / File name: main.jslet xm = require ('. / x.js'); console.log (xm.x); / / 1console.log (xm.add ()); / / 2console.log (xm.x); / / 1

As we can see from the above code, the require function loads x.js synchronously and returns the copy value of the literal amount of module.exports output. Some people may ask module.exports.x = x; isn't it an assignment? how can it be fat? We say that the Module pattern is the cornerstone of the modular specification, and CommonJS is also an encapsulation of the Module pattern. We can use the Module pattern to achieve the above code effect:

Let xModule = (function () {let x = 1; function add () {x + = 1; return x;} return {x, add};}) (); let xm = xModule;console.log (xm.x); / / 1console.log (xm.add ()); / / 2console.log (xm.x); / / 1

Through the CommonJS principle of Module model simulation, we can well explain the characteristics of CommonJS. Because CommonJS needs to get the return value of an anonymous function self-call through assignment, the require function is synchronized when loading the module. However, the loading mechanism of the CommonJS module limits the use of CommonJS on the client side, because it is very time-consuming to load the CommonJS module synchronously through HTTP.

2. AMD and CMD

2.1 AMD

/ / define the module define of AMD specification ([function () {return module}))

The dependent modules that are different from the CommonJS,AMD specification are loaded asynchronously, while the defined modules are executed as callback functions, depending on the require.js module management tool library. Of course, the AMD specification is not encapsulated by anonymous function self-calling, but we can still use the principle of closures to implement private and public members of the module:

Define (['module1',' module2'], function (M1, m2) {let x = 1; function add () {x + = 1; return x;} return {add};})

2.2 CMD

CMD is the standardized output of module definition in the process of promotion by SeaJS. AMD favors relying on the front, while CMD favors relying on proximity.

Define (function (require, exports, module) {/ / synchronous load module var a = require ('. / a'); a.doSomething (); / / load a module asynchronously and execute callback require.async (['. / b'], function (b) {b.doSomething ();}) when loading is complete; / / exposed member exports.doSomething = function () {};}) / / use the module seajs.use ('path')

CMD integrates the characteristics of CommonJS and AMD and supports synchronous and asynchronous loading modules. CMD does not execute a dependent module after loading, it just downloads it, enters the main logic after all dependent modules are loaded, and executes the corresponding module only when it encounters a require statement, so that the execution order and writing order of the modules are exactly the same. Therefore, there is no HTTP request process when the require function loads the module synchronously in CMD.

ES6 module

ES6's modularity is no longer a specification, but a feature of the JS language. With the introduction of ES6, AMD and CMD have become history. Compared with the modular specification, the ES6 module has two major characteristics:

The modular specification outputs a copy of the value, and the ES6 module outputs a reference to the value.

The modular specification is run-time loading and the ES6 module is the compile-time output interface.

The output of the modular specification is an object that is generated only after the script has been run. While the ES6 module is not an object, ES6 module is a multi-object output, multi-object loading model. In principle, the modularization specification is the encapsulation of anonymous function self-call, while ES6 module is a member that uses anonymous function self-call to call output. The difference between the two can be found in Babel and CommonJS modules.

The above is all the contents of the article "sample Analysis of JS Modular knowledge points". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.