Use of Requirejs

Requirejs is an extension of AMD's specifications to learn about the connections and differences between AMD and CMD and COMMONJS.

First, require can avoid the blocking of JS, resulting in the page other deconstruction brush does not come out, or brush is very slow.

One typical example is the alert method, which pops up the pop-up window before clicking OK, and the page is blank before the text is displayed. Workaround One: We can put JS at the end of HTML, another:

<script src= "js/require.js" defer async= "true" ></script>

Defer is compatible with Ie,async that is supported by modern browsers.

Second, load our module Data-main

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

Three, the main module of the wording

Main.jsrequire ([' Modulea ', ' Moduleb ', ' Modulec '], function (Modulea, Moduleb, Modulec) {//some code here});

Require accepts two parameters:

The first parameter: An array of strings representing the dependent modules;

The second parameter: The callback function, the inside argument, the object of the dependent module, such as the JQuery object, used by $. In addition, the callback executes only when a block is loaded, which is important and how to understand it.

I made an example (source code download) and look at the next piece of code:

Green This module is a method of using JQ, green This module file size only 200b, feel much smaller than the file size of jquery, usually green first load, and then load the jquery. However, before the completion of jquery, Green used the JQ will be error, such as:

Even so, this does not affect the execution of the togreen of the Generation green. This is because jquery and other modules have been loaded before the togreen.

Iv. notation of the module

The 1th type:

require.config ({paths: { "jquery": "Lib/jquery.min", "underscore": "Lib/underscore.min", "backbone": "Lib/backbone.min" });

The 2nd type:

Require.config ({baseUrl: "Js/lib", Paths: {"jquery": "Jquery.min", "underscore": "Underscore.min", "backbone" : "Backbone.min"});

The 3rd type:

Require.config ({paths: {"jquery": "Https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"}});

V. How AMD modules are written

define ([' mylib '], function (mylib) {function foo () {mylib.dosomething (); } return {    foo:foo};});

When the require () function loads the above module, the Mylib.js file is loaded first.

Vi. loading of non-canonical modules

require.config ({            shim:                {' Jquery.scroll ': {                    deps: [' jquery '],                    ' JQuery.fn.scroll '}}        }

Deps refers to a dependent module

Exports indicates the name of the external call of this module, White point refers to the plugin file name

Summary: Requirejs not loaded JS file, you can also load json, TXT, image, detailed content can be crossing Web or GitHub

　　

Use of Requirejs