The second chat about the basic knowledge of JSrequire. js modular tools _ javascript skills

The second chat is about JSrequire. the basic knowledge of js modular tools. This article provides you with JSrequire. the most basic knowledge of js modular tools. If you are interested, refer to the previous article: JS modular tools. We introduced requirejs: idea in a very simple way.

Basic API

Require defines three variables: define, require, and requirejs. require = requirejs is generally used for a brief description.

DefineFrom the name, we can see that this api is used to define a module.
RequireLoad the dependency module and execute the loaded callback function.
A. js in the previous article:

define(function(){  function fun1(){   alert("it works");  }  fun1();})

Use the define function to define a module and then use it on the page:

Require (["js/a"]);
To load this module (note that the dependency in require is an array, even if there is only one dependency, you must define it using an array). The second parameter of requir API is callback, a function, is used to process the loaded logic, such:

require(["js/a"],function(){  alert("load finished");})

Load files

In the previous example, the loading module is a local js, but in most cases, the JS to be loaded on a webpage may come from a local server, other websites, or CDN, so that it cannot be loaded in this way, let's take loading a jquery library as an example:

require.config({  paths : {    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   }})require(["jquery","js/a"],function($){  $(function(){    alert("load finished");   })})

This involves require. config, require. config is used to configure the module loading location. Simply put, it is a shorter and better-remembered name for the module, for example, marking Baidu's jquery library address as jquery, in this way, you only need to write ["jquery"] in require to load this js. We can also configure the local js as follows:

require.config({  paths : {    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],    "a" : "js/a"   }})require(["jquery","a"],function($){  $(function(){    alert("load finished");   })})

The paths configuration improves the module name. Another important feature of paths is to configure multiple paths. If the remote cdn library is not loaded successfully, you can load the local library, for example:

require.config({  paths : {    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],    "a" : "js/a"   }})require(["jquery","a"],function($){  $(function(){    alert("load finished");   })})

After this configuration, when Baidu's jquery is not loaded successfully, the jquery under the Local js directory will be loaded

When using requirejs, you do not need to write. js suffixes when loading modules. Of course, you cannot write suffixes.
The callback function in the preceding example shows the $ parameter, which is the output variable of the dependent jquery module. If you depend on multiple modules, you can write multiple parameters in sequence to use it:

require(["jquery","underscore"],function($, _){  $(function(){    _.each([1,2,3],alert);  })})

If a module does not output a variable value, it does not. Therefore, try to write the output module in front to avoid misunderstanding caused by location disorder.

Global Configuration

In the preceding example, require is repeated. config configuration. If the configuration is added to each page, it will inevitably look very indecent. requirejs provides a feature called "primary data". First, we create a main. js:

require.config({  paths : {    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],    "a" : "js/a"   }})

Then use the following method in the page to use requirejs: