For the second time, let’s talk about the basic knowledge of JS require.js modular tool_javascript skills

Previous article: JS modular tool We introduced requirejs in a very simple way: http://www.jb51.net/article/82527.htm, this article will talk about requirejs Some basic knowledge, including how to use API, etc.

Basic API

require will define three variables: define, require, requirejs, where require === requirejs, generally using require is shorter

define As you can see from the name, this API is used to define a module
require Load dependent modules and execute the callback function after loading
a.js in the previous article:

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

Define a module through the define function, and then use it in the page:

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

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

Load file

In the previous examples, the loaded modules were all local js, but in most cases the JS that needs to be loaded by the web page may come from the local server, other websites or CDN, so it cannot be loaded in this way. We can load 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. To put it simply, it is to give the module a shorter and easier to remember name. For example, mark Baidu’s jquery library address as jquery, so When requiring, you only need to write ["jquery"] to load the js. We can also configure local js like this:

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

Configuring paths will make our module names more refined. Paths also has an important function, which is to configure multiple paths. If the remote cdn library does not load successfully, you can load the local library, such as:

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, jquery in the local js directory will be loaded

When using requirejs, you do not need to write the .js suffix when loading the module, and of course you cannot write the suffix
The $ parameter is found in the callback function in the above example. This is the output variable of the dependent jquery module. If you depend on multiple modules, you can write multiple parameters in sequence to use:

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

If a module does not output variable values, then there is none, so try to write the output module in front to prevent misunderstandings caused by misplaced positions

Global configuration

The require.config configuration appears repeatedly in the above example. If the configuration is added to each page, it will definitely look very inelegant. requirejs provides a function called "master data". We first 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 to use requirejs on the page:

30991f28d634f8ab6d341d370759b12d2cacc6d41bbb37262a98f745aa00fbf0
To explain, the script tag that loads the requirejs script adds the data-main attribute. The js specified by this attribute will be processed after reuqire.js is loaded. After we add the require.config configuration to data-main, we can make each All pages use this configuration, and then require can be used directly in the page to load all short module names

data-main also has an important function. When the script tag specifies the data-main attribute, require will default to the js specified by data-main as the root path. What does this mean? For example, after data-main="js/main" is set above, after we use require(['jquery']) (without configuring jquery paths), require will automatically load the js/jquery.js file instead of jquery.js, equivalent to the default configuration:

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

Third Party Modules

Modules loaded through require generally need to comply with AMD specifications, that is, use define to declare the module. However, sometimes non-AMD standard js needs to be loaded. At this time, another function is needed: shim, and shim is also difficult to explain. Understand, shim is directly translated as "pad", which actually has this meaning. Currently I mainly use it in two places
1. Non-AMD module output, "pad" non-standard AMD modules into available modules. For example: in the old version of jquery, it does not inherit the AMD specification, so you cannot directly require["jquery"]. At this time, A shim is required. For example, if I use the underscore class library, but it does not implement the AMD specification, then we can configure it like this

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

After configuring this way, we can reference the underscore module in other modules:

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

For 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 the jquery.form plug-in. At this time, you need to "pad" the form plug-in into jquery:

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

can also be abbreviated as:

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

这样配置之后我们就可以使用加载插件后的jquery了

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

好了，requirejs的基本配置大致就是这么多，还有一些扩展的功能会在之后的篇幅中提到，大家不要错过呀！