RequireJs basic knowledge of Magento Development

A, RequireJS Overview

　　RequireJS is a tool library, the main module for managing client. Asynchronous or dynamic loading, to improve code performance and maintainability.

　　RequireJS basic idea is define by the method, as defined code module; by methods require to achieve load module code.

　　1.1define Method: definition module

　　　　define a method for definition module, RequireJS requires each module in a separate file.

　　　　According to whether it is dependent on other modules, the discussion can be divided into two cases. The first situation is defined in independent modules, i.e. defined independent of other modules; The second is to define non-independent modules, i.e. the defined dependencies on other modules.

　　1) an independent module

　　　　If the module is a separate module is defined, it does not depend on any other module can be generated directly define methods.

define({
    method1 : function(){},
    method2 : function(){}
});

　　The above code generation module has a method1, method2 two methods.

　　Another equivalent method is to put the object written as a function, the function return value is the output of the module.

define(function(){
    return {
        method1:function() {},
        method2:function() {}
};
})

　　The latter point higher degree of freedom in writing, can write the code module initialization function in vivo.

　　It is worth noting, DEFINE module can return any defined value, is not limited to the object.

2) non-independent modules

　　If the module is defined to rely on other modules, the method must define the following format.

define(['module1','module2'],function(m1,m2) {

.....

});

　　The first method is a parameter define an array, it is currently a member of the module depends module. The second parameter define the method is a function, all the members of the current side of the array is loaded, it will be called. Member of its parameters with an array of correspondence.

1.2require method: Call module

　　require a method for invoking module, and its parameters define similar methods.

require(['foo','bar'],function( foo, bar){
    
    foo.doSomething();
});

2. Configure require.js: config method

　　require method itself is a target that has a config method, require.js to configure the operating parameters. config method takes an object as a parameter.

require.config({
    paths: {
        jquery: [
            'lib/jquery'
            ]
        }
});

　　Config parameter object method has the following key members:

　　　1）paths

　　　　paths parameter specifies the location of each module. This position may be the same relative position on a server, it can be an external URL. The plurality of positions can be defined for each module, if the first loading fails, a second loading position. When you specify a local file path, you can omit the final js file extension.

　　　2) baseUrl

　　　　baseUrl parameter specifies the directory of the local module reference position, i.e. the path which the local module with respect to the directory. This property is typically specified by the data-main attributes of require.js loading.

　　　3）shim

　　　　Some libraries are not compatible with AMD, this time on the need to specify the value of the property shim. shim can be understood as "pads" to help require.js loaded non-AMD specification library.

require.config({
    paths:{
        "underscore":"vender/underscore"
    },
    shim: {
        "underscore":{
                exports:"_"
        }
    }
});

3. Plug

　　requireJS allow the plug to load data in various formats.

4. optimizer r.js

　　RequireJS provides a command-line tool based on node.js r.js, used to compress multiple js files. Its main role is to compress the plurality of modules are combined into one file script file to reduce the number of HTTP page request.

The above is RequireJS probably understand, in late application requireJS in magento will explain more in detail.

　Castle

RequireJs basic knowledge of Magento Development

Guess you like