Deep understanding of Require.js Learning Notes

So, let's see what the require.js has to do with it!
Compatible with COMMONJS

AMD (Asynchronous Module definition specification) appears from the COMMONJS workgroup. COMMONJS is designed to create javascript ecosystems. An important part of COMMONJS is TRANSPORT/C, the predecessor of AMD, and Require.js is an implementation of the specification.

Syntax differences between the COMMONJS module and the AMD module are mainly due to AMD's need to support the asynchronous nature of the browser. and the Commonjs module needs to be synchronized, for example:

The code is as follows	Copy Code
var somemodule = require ("Somemodule"); var anothermodule = require ("Anothermodule"); Exports.asplode = function () { Somemodule.dotehawesome (); Anothermodule.domoarawesome (); };

The AMD module is an asynchronous loading module, so the module definition requires an array as the first parameter, and the callback function is passed in as the second parameter after the module is loaded.

The code is as follows	Copy Code
Define (["Somemodule"], function (somemodule) { return { Asplode:function () { Somemodule.dotehawesome (); This will be performed asynchronously Require (["anothermodule"], function (anothermodule) { Anothermodule.domoarawesome (); }); } }; });

However, AMD can also be compatible with COMMONJS syntax in Require.js. By using AMD's define function to package COMMONJS modules, you can also have a COMMONJS module in AMD, for example:

The code is as follows	Copy Code
Define (function (Require, exports, module) var somemodule = require ("Somemodule"); var anothermodule = require ("Anothermodule"); Somemodule.dotehawesome (); Anothermodule.domoarawesome (); Exports.asplode = function () { Somemodule.dotehawesome (); Anothermodule.domoarawesome (); }; });

In fact, Require.js uses the function. tostring to interpret the module contents of the callback function, to find its correct dependencies and turn it into a common AMD module. It is important to note that if you write a module in this way, it may be incompatible with other AMD loaders because it violates the AMD specification, but it is a good understanding of how this format is written.

What happened here, Require.js actually did the function.tostring callback function to parse the contents of the module to find the right dependencies, just like it if it were a normal AMD module. It is important to note that if you choose to write modules like this, they will most likely not be compatible with other AMD module loaders, as this violates the AMD specification, but it is well understood that this format exists!

CDN Fallback

Another hidden require.js gem is that its support when the CDN load is incorrect, rollback loads the local corresponding library. We can achieve this through Require.config:

Requirejs.config ({
Paths: {
jquery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js ',
' Lib/jquery '
]
}
});

No reliance? The literal amount of the object? No problem!

When you write a module without any dependencies and simply return an object containing some functional functions, then we can use a simple syntax:

Define ({
Forcechoke:function () {

},
Forcelighting:function () {

},
Forcerun:function () {

}
});

It's simple and useful if the module is just a collection of features, or just a packet.

Circular dependencies

In some cases, we may need the functions in modules Modulea and Modulea to rely on some applications. This is circular dependency.

Js/app/modulea.js
Define (["Require", "App/app"],
function (require, app) {
return {
Foo:function (title) {
var app = require ("App/app");
return app.something ();
}
}
}
);

Get the address of the module

If you need to get the address of the module, you can do so ...

var path = Require.tourl ("./style.css");

BaseURL

Typically, in a unit test, your source code may be placed in a folder like SRC, and your test may be in a similar tests folder. This may be more difficult to get the test configured correctly.

For example, we have a index.html file in the tests folder and need to load the tests/spec/*.js locally. and assume that all source code is in the Src/js/*.js, and there is a main.js in that folder.

Index.html, the Data-main is not set when the Require.js is loaded.

<script src= "Src/js/vendor/require.js" ></script>
<script>
Require (["...] /src/js/main.js "], function () {
Require.config ({
BaseURL: ". /src/js/"
});

Require ([
"./spec/test.spec.js",
"./spec/moar.spec.js"
], function () {
Start your test framework
});
});
</script>

You can find that Main.js is loaded. However, because there is no set data-main, we need to develop a baseurl. When using Data-main, BaseURL is automatically set according to the files it sets.

Here you can see the main.js being loaded. However, since it does not load the data main script tag, you must specify a base. Inferred from the position in the main file when the data is used primarily for baseurl. By customizing BaseURL we can easily store test code and application code separately.

JSONP

We can handle JSONP terminals like this:

Require ([
"Http://someapi.com/foo?callback=define"
], function (data) {
Console.log (data);
});

For non-AMD libraries, use Shim to solve

Under a lot of requests, we need to use a non-AMD library. For example, backbone and underscore are not adapted to AMD specifications. and jquery actually just defines itself as a global variable called jquery, so there's nothing to do with jquery.

Fortunately, we can use the shim configuration to solve this problem.

The code is as follows	Copy Code
Require.config ({ Paths: { "Backbone": "Vendor/backbone", "Underscore": "Vendor/underscore" }, Shim: { "Backbone": { Deps: ["underscore"], Exports: "Backbone" }, "Underscore": { Exports: "_" } } });