JS modularity for some understanding and ES6 modular Learning

Modular

1 iife

2 commonjs

3 The modularization of JS in the browser　

4 Simple understanding of the principle of the module loader

5 es6

Before participating in the Baidu front-end Technical college to do the small topic, when they write the module is written immediately call expression (Iife) mode, such as a single function when the thought is not involved in the global variable pollution, in the package based on the module (such as the form validation function)

        (function(win) {            var obj = {};             function Add () {                Console.log ("Add");            }             = add;             = obj;        } (window));        Obj.add ();

is in the immediate invocation of the expression we want the function binding on an object last bound to the window such a pattern is not very good when writing function, but as you become more and more, there will be some problems

1) The window is not mounted too many objects

2) The name of the same variable inside the module is mounted on the window, for example, two modules are mounted inside the window.obj then the load execution must overwrite the previous module's

3) rely on the solution of the problem must be well-dependent maintenance that is the module needs to be loaded and executed before the module to think of a lot of JS in the page look

4) It's not very friendly on the scale. Each time you need to extend the new functionality to an internal object or a variable on the window, the pollution problem is similar to 2.

Above is just some of my superficial understanding of the modularity of this iife pattern

Commonjs Commonjs is a specification of JavaScript modularity It defines a sentence for the JavaScript implementation of a canonical citation official web site Javascript:not just for browsers any more!

A simple comprehension is something more that can be done through commonjs,javascript.

How to write one of the simplest COMMONJS modules

/* Module Reference section  referencing other modules
*/

/* Module Definition section  
*/
function  Add (b) {    return a +b;} function multiple (A, a    ) {return A *b;}
/* Module Exports the functionality of the export module
*/  =

COMMONJS specification definition implements a module is divided into Module reference module to define module identification (require () the identity used at the time) This is a simple example of the official website This is an example

JS Modularity in the browser this way is absolutely no problem in node, but the first problem in the browser is require module.exports These keywords are not supported in the browser  That is, we need the module loader to help us implement the require to load the Commonjs module. Another point is that the browser environment is different from the server require is synchronous, it waits for the module to be downloaded and executed after the following code is run Server-side is read from the local disk corresponding module such loading speed is acceptable, but in the browser involves loading from the service side of the corresponding JS this will cause the page to lock up the require.js and sea.js

A simple understanding of the principle of the module loader first by caching the loaded object when multiple dependencies are loaded, the number of loads is recorded, and the number of each loaded module is reduced in the callback reference understanding requirejs-implementation of a simple module loader when all dependencies are completed after loading

ES6 ES6 introduced a modular system can refer to this article to learn the modular ES6 ES6 (16): module This series of articles is really good

JS modularity for some understanding and ES6 modular Learning