Modular JavaScript design mode (1)

In the world of extensible JavaScript, if we say an application is modular, it usually means that it is highly decoupled from a series of modules, different functional fragments. When possible, with one dependency, loose coupling can simplify the maintainability of applications. If this is effectively implemented, it is easy to understand how one part affects the other.

The overall goal of asynchronous module definition (AMD) is to provide a modular JavaScript solution for developers to use. Born from the Dojo development experience using XHR + eval, supporters of this format hope to avoid any future solutions being affected by the shortcomings of previous solutions. The AMD module format itself is a recommendation for defining modules. Both modules and dependencies can be asynchronously loaded.

AMD was initially the draft Specification of the CommonJS heavy module format, but since it was not widely consistent, the further development of this format was transferred to the amdjs community (https://github.com/amdjs ).

I. Module entry

Two key concepts about AMD are worth noting. They are the define method defined by the module and the require method used to process dependency loading. Use the following method: define is used to define a named or unnamed module:

Define (module_id/* optional */, [dependencies]/* optional */, definition function/* function for instantiating the module or object Instantiation module or object function */)

Module_id is an optional parameter, which is usually required only when a non-AMD connection tool is used. When this parameter is missing, we call this module unanonymous (anonymous ).

When using this anonymous module, the module identity concept is DRY, so that it is easier to avoid duplication of file names and code. Because the code becomes lighter, you can easily move it to another location without modifying the Code itself or changing its module ID.

Developers can only run the same code in multiple environments by using AMD optimizers, working in CommonJS environments (such as r. js https://github.com/jrburke/r.js.

Define ("myModule", // defines a module ['foo', 'bar'], function (foo, bar) {// module-defined function, map foo bar dependencies to functions as parameters

// Create your module var myModule = {dostuff: function () {console. log ('yay, stuff ') ;}; return myModule ;});

// Another definition method: define ('mymodule', ['Math', 'graph'], function (math, graph) {return {plot: function (x, y) {return graph. drawPie (math. randomGrid (x, y ));}}});

Require is usually used to load code of top-level JavaScript files or modules.

// Foo bar is two external modules. After loading the two modules, the output is passed into require (['foo', 'bar'], function (foo, bar) as the callback function parameter) {// foo. doSomething ();})

Dynamic dependency Loading

define(function (require) {    var isReady = false, foobar;    require(['foo', 'bar'], function (foo, bar) {        isReady = true;        foobar = foo() + bar();    });    return {        isReady: isReady,        foobar: foobar    }})

Understanding AMD: plug-ins

// AMD can be used to load content in any format. // This method can be used for template dependency, so that you can perform skin replacement during page loading. define (['. /templates ', 'text !. /Template. md ', 'css !. /Template.css '], function (templates, template) {console. log (templates );});

Although the preceding example contains css! It is used to load css dependencies, but this method has some warnings. When Party css is fully loaded, it does not necessarily take effect completely. Depending on how the creation process is handled, it may also use css as a dependent file and be included in the optimized file. Therefore, when css is used as a load dependency, be cautious.

This example can be viewed as requirejs (['app/mymodule'], function () {}), indicating that the top-level global object of the loader is used. Here we demonstrate how to use different AMD loaders to load the top-level module nahor. By using the define () function, if the tower accepts a local module parameter, then all require ([]) all examples apply to curl. js and RequireJS.