JS Modular Specification Amd's Requirejs

1. Basic operation

1. Loading JavaScript files (portal files)

   Requirejs loads all the code with an address relative to BaseURL

   <script data-main="scripts/main.js" src="scripts/require.js"></script>

2. Related configuration

   requirejs.config({    baseUrl: ‘js/lib‘,    paths: {        app: ‘../app‘    }});requirejs([‘jquery‘, ‘canvas‘, ‘app/sub‘],function   ($,        canvas,   sub) {    //jQuery, canvas and the app/sub module are all    //loaded and can be used here now.});

2. module-related

1. A simple value pair

   define({    color: "black",    size: "unisize"});

2. There is no dependency on the functional definition

   define(function () {    return {        color: "black",        size: "unisize"    }});

3. A functional definition of the existence of a dependency

   define(["./cart", "./inventory"], function(cart, inventory) {        //return an object to define the "my/shirt" module.        return {            color: "blue",            size: "large",            addToCart: function() {                inventory.decrement(this);                cart.add(this);            }        }    });

4. Define a module as a function

    define(["my/cart", "my/inventory"],        function(cart, inventory) {            return function(title) {                return title ? (window.title = title) :                       inventory.storeName + ‘ ‘ + cart.name;            }        }    );

3. Simple packaging Commonjs to define the module

define(function(require, exports, module) {    var a = require(‘a‘),        b = require(‘b‘);    //Return the module value    return function () {};    });

4. Define a naming module (used in Jquery)

define("foo/title",    ["my/cart", "my/inventory"],    function(cart, inventory) {        //Define foo/title object in here.   });jquery:if ( typeof define === "function" && define.amd ) {    define( "jquery", [], function() {        return jQuery;    } );}

5.JSONP Service Dependency

In order to use the JSON service in requirejs, you need to specify the value of the callback parameter as "define". This means that you can consider the value of the obtained JSONP URL as a module definition.

The following is an example of a call to the JSONP API Endpoint. In this example, Jsonp's callback parameter is "callback", so "callback=define" tells the API to wrap the JSON response into a "define ()":

require(["http://example.com/api/data.json?callback=define"],    function (data) {        //The data object will be the API response for the        //JSONP data call.        console.log(data);    });

only JSONP services that return a value type JSON object are supported , and other return types such as arrays, strings, numbers, etc. are not supported.

6. Compress Merge

2. General compression Merge

   node r.js -o baseUrl=js name=main out=built.js

   There is an external CDN situation

   //表示paths.jquery不参与合并，压缩。这时生成的built.jsnode r.js -o baseUrl=js name=main out=built.js paths.jquery=empty:  也就不包含它了。

   Merging into large files, setting configuration files

   ({    appDir: "./",    baseUrl: "js",    dir: "../r6-built",    paths: {        jquery: ‘empty:‘    },    modules: [        {            name: "page1"        },        {            name: "page2"        }    ]})

   Command

   node r.js -o build.js

4. Merging compressed CSS

   node r.js -o cssIn=css/main.css out=css/built.css

   You can also use the OPTIMIZECSS parameter setting to configure whether compression and compression options are Available.

   The value of the OPTIMIZECSS is

   none  不压缩，仅合并standard  标准压缩 去换行、空格、注释standard.keepLines  除标准压缩外，保留换行standard.keepComments  除标准压缩外，保留注释standard.keepComments.keepLines  除标准压缩外，保留换行和注释

   Example:

   node r.js -o cssIn=css/main.css out=css/built.css optimizeCss=standard

   Built.css the whole line after Compression.

JS Modular specification AMD Requirejs