JavaScript modular Programming (i): the module of the writing __ algorithm

Reprint Link

This article has been transferred from Nanyi's technical blog: JavaScript Modular Programming: A preface to the module

JavaScript modular programming has become an urgent requirement. Ideally, developers only need to implement the core business logic, and others can load other people's written modules.
However, JavaScript is not a modular programming language, and it does not support "classes", let alone "modules".
The JavaScript community has made a lot of effort to implement the "module" effect in the existing operating environment. This paper summarizes the best practices of current "JavaScript modular Programming", and explains how to put it into practice. Although this is not a beginner's tutorial, you can read a little bit about the basic syntax of JavaScript. Original Wording

A module is a set of methods for implementing a particular function.
Only the different functions (and the variables of the record state) are simply put together, even a module.

function M1 () {
    //...
}
function m2 () {
    //...
}

The above function m1 () and M2 () to form a module. When used, call directly on the line.
The disadvantage of this approach is obvious: "pollution" of the global variable, can not guarantee that no variable name conflicts with other modules, and module members do not see a direct relationship. Object Notation

To solve the above shortcomings, the module can be written as an object, all module members are placed inside this object.

var module1 = new Object ({
    _count:0,
    m1:function () {
        //...
    },
    m2:function () {
        //...
    }
})

The functions above M1 () and M2 () are encapsulated in the Module1 object. When used, the object's properties are invoked.

MODULE1.M1 ();

However, this writing exposes all module members and the internal state can be overwritten externally. For example, external code can directly change the value of an internal counter.

Module1._count = 5;

Execute function writing now

Using the immediately-invoked Function Expression, you can achieve the purpose of not exposing private members.

var Module1 = (function () {
    var _count = 0;
    var m1 = function () {
        //...
    };
    var m2 = function () {
        //...
    };

    return {
        m1:m1,
        m2:m2
    };
}) ();

Using the above notation, the external code cannot read the internal _count variable.

Console.log (module1._count);    Undefined

Module1 is the basic writing of JS module. Below, and then to the processing of this writing. magnification mode

If a module is large, it must be divided into several parts, or a module needs to inherit another module, then it is necessary to use the "magnification mode."

var Module1 = (function (mod) {
    mod.m3 = function () {
        //...
    };
    return mod;
}) (Module1);

The above code adds a new method M3 () to the Module1 module, and then returns the new Module1 module. wide magnification mode

In a browser environment, parts of a module are usually retrieved from the web, and sometimes it is not possible to know which part will be loaded first. If the previous section is written, the first part of the execution may load a nonexistent object, and the "wide magnification mode" is used.

var Module1 = (function (mod) {
    //...
    return mod;
}) (Window.module1 | | {})

In contrast to "zoom mode", the "wide magnification mode" is the "execute function now" argument can be an empty object. Enter global variable

Independence is an important feature of the module, it is best not to interact directly with other parts of the program.
In order to call global variables inside a module, you must explicitly enter the other variables into the module.

var Module1 = (function ($, YAHOO) {
    //...
}) (JQuery, YAHOO);