The second time I talked about the basic knowledge of JS require. js modular tools, jsrequire. js

The second time I talked about the basic knowledge of JS require. js modular tools, jsrequire. js

Previous Article: JS modularization tool we introduced requirejs: Plugin 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:

<Script data-main = "js/main" src = "js/require. js"> </script>
Explanation: the script tag for loading the requirejs script is added with the data-main attribute. The js specified by this attribute will be loaded with reuqire. after js processing, we put require. after the configuration of config is added to data-main, this configuration can be used on every page. Then, you can directly use require to load all the short module names on the page.

Data-main also has an important function. When the script tag specifies the data-main attribute, require uses the js specified by data-main as the root path by default. What does this mean? After the above data-main = "js/main" is set, we will use require (['jquery ']) (do not configure jquery paths ), require automatically loads js/jquery. js file, not jquery. js, which is equivalent to the default configuration:

require.config({  baseUrl : "js"})

Third-party module

The modules loaded through require generally need to comply with AMD specifications, that is, define should be used to declare the module. However, in some cases, JavaScript Codes Without AMD specifications need to be loaded. In this case, another function is required: shim, shim is hard to understand, and shim is translated as "pad" directly. It actually means this. At present, I mainly use it in two places.
1. non-AMD module output, non-standard AMD module "pad" into available modules, for example, in the old version of jquery, there is no inheritance of AMD specifications, therefore, you cannot directly request ["jquery"]. shim is required at this time. For example, if I use the underscore class library, but it does not implement AMD specifications, We can configure it like this.

require.config({  shim: {    "underscore" : {      exports : "_";    }  }})

After this configuration, We can reference the underscore module in other modules:

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

Non-AMD modules in the form of plug-ins, we often use jquery plug-ins, and these plug-ins basically do not comply with AMD specifications, such as jquery. form plug-in. In this case, you need to "pad" the form plug-in to jquery:

require.config({  shim: {    "underscore" : {      exports : "_";    },    "jquery.form" : {      deps : ["jquery"]    }  }})

It can also be abbreviated:

require.config({  shim: {    "underscore" : {      exports : "_";    },    "jquery.form" : ["jquery"]  }})

In this way, we can use jquery after the plug-in is loaded.

require.config(["jquery", "jquery.form"], function($){  $(function(){    $("#form").ajaxSubmit({...});  })})

Okay, there are so many basic configurations for requirejs, and some extended features will be mentioned later. Don't miss it!