Requirejs Use note place

Source: Internet
Author: User
Tags format definition

Using Requirejs to do asynchronous module loading, there are a few notable points to note:

1. module definition two ways of writing

1. Functional definitions of dependencies

If the module has a dependency: the first parameter is an array of dependent names, and the second argument is a function that is called to define the module after all dependencies of the module have been loaded, so the module should return an object that defines the module. The dependency is injected into the function as a parameter, and the argument list corresponds to the dependent name list one by one.

function (AJ) {     varfunction() {          Aj.hello (' I am c.js ');     }      return {          Hello:hello     }});

PS: The return value type of the module is not mandatory to be an object, and the return value of any function is allowed.

2. COMMONJS module Format definition

Require: Used to introduce dependencies on other module methods.

Exports: An object that exports a module variable or method.

Module: Contains the information for the module.

require.config ({    "",    config:        {' B ': {            ' large '}    },     paths: {          ' base/a ',          ' base/b ',          ' base/c '}     });
Definefunction(Require, exports, module) {varAJ = require ("a"); varHello =function() {Aj.hello (' I am b.js '); }     varHello2 =function() {Aj.hello (' I am b.js22 '); } Exports.hello=Hello; Console.log ("B.js:exports", exports); Console.log ("B.js:module", module); Console.log ("B.js:config", Module.config ()); //cannot be used together, return will overwrite the front exports     /*return {Hello:hello2}*/});

The Ps:return object and the exports cannot be used together, and return overrides the exports of the previous adjustment.

The following is the information that is printed after the call:

Exports: You can see that exports is a property of module.

Module: It includes the alias, Uri, export object, and config information method of the module.

Config: We often need to pass configuration information to a module. These configurations are often application levels of information and require a means to pass them down to the module.

In Requirejs, the config configuration item based on the Requirejs.config () is implemented.

2. Beware of single-case variables

Be wary of variables in the singleton, because Requirejs is require once, and then require is used before the cache. So when a variable is defined within the module, as long as the require changes, the other require are consistent.

Definefunction() {      varindex = 0; varHello =function(msg) {Console.log (msg); }      varAddindex =function() {index++; }     varGetIndex =function(){          returnindex; }     return{Hello:hello, Addindex:addindex, Getindex:getindex}});

Call:

function (a) {     require ([function  (a) {          Console.log (A.getindex ());          A.addindex ();          A.addindex ();     });     Require ([function  (A) {          console.log (A.getindex ());     }) ;

The above are printed separately:

02

This example shows that these require are all shared with an index variable.

3. Clear the Cache

Because Requirejs has the function of caching, but we do not want it to be cached at the time of development, we can set the Urlargs in Require.config.

Urlargs:requirejs Additional query parameters appended to the URL when the resource is fetched.

Example:

Urlargs: "bust=" +  (new Date ()). GetTime ()

This is useful in development, but remember to remove it before deploying to the build environment.

4. Loading modules from other packages

Requirejs supports loading modules from the COMMONJS package structure, but requires some additional configuration.

Package config Specifies the following properties for a specific packet:

1. Name: Package name (for module name/prefix mapping).

2. Location: The position on the disk. The locations are relative to the BaseURL values in the configuration, unless they contain a protocol or start with "/".

3. Main: The module within a package that is applied when the require call is initiated with "package name".

The default is "main" unless you have made another setting here.

The value is relative to the package directory.

Example:

Main.js

require.config ({     "",     packages: [{          "student",          "Package-stu"     } , {          "teacher",          "Package-tea"     }],     "bust=" +  (new Date ()). GetTime ()}); require ([function  (Sto, Tea) {     Sto.hello ();         Tea.hello ();    });

Tea.js:

Define (function(require, exports, module) {     function() {          console.log (' I am a teacher. ' );     }});

Stu.js:

Define (function(require, exports, module) {     = ' cape ';    });

Store.js:

Define (function(require, exports, module) {     var stu = require ("Student/stu");       function() {          console.log (' I am ' + stu.name);     }});

This way of loading modules from other packages, I feel like there are two weird places (I don't quite understand, although the example is tuned):

1. The module inside the other package refers to the other module, but the user affects how the module is written.

2. The main.js in the other bag seems to be useless, no matter what.

Reference documents

1. Requirejs Chinese web

This article for the original article, reproduced please retain the original source, convenient traceability, if there is the wrong place, thank you correct.

This address: http://www.cnblogs.com/lovesong/p/5495177.html

Requirejs Use note place

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.