Example tutorial on loading JavaScript modules using the RequireJS library-JS Tutorial-php.cn

The default loading method of js through script tags is synchronous, that is, after the js in the first script tag is loaded, the second one starts to be loaded, and so on, until all js files are loaded. And the dependency of js must be ensured through the order of script; during js loading, the browser will stop responding, which greatly affects the user experience. Based on this, many solutions to js loading and unloading have appeared, require js is one of them one.

The modules loaded by requirejs are generally modules that comply with AMD standards, that is, defined with define and ruturn to return modules that expose methods and variables; requirejs can also load modules that meet AMD standards, but it is more troublesome. This time not involving.

require loading js main involves the following aspects:

script tag data-main attribute declares the entry module loaded by requirejs, async="true" (non-ie) and defer(ie) tags indicate asynchronous load.

require.config The path corresponding to the configuration module

require declaration of dependencies

html demo

<script src ="js/require.js" defer async="true" data-main="js/main" >
 
<!--给出requirejs路径，声明为异步加载，指定入口模块为
 
main.js（可省略.js）-->

Copy after login

main.js

require.config({
  //声明模块的位置
  paths: {
    "jquery":"libs/jquery"
    "login" : "libs/login"
  }
  //或使用baseUrl指定所有模块的路径
  baseUrl: "js/libs"
});
//使用require加载模块，第一个参数为数组，即要加载的模块，将按数组顺序加载；第二个为回调函数，在全部加载完成后执行。
require([&#39;jquery&#39;,&#39;login&#39;],function($,Login){
  alert("jquery and login module load success!");
  Login.do_login();
  //some else
});

Copy after login

Conforms amd's login module definition

//依赖jquery的定义
 define([&#39;jquery&#39;],function($){
   // some definations
  function do_login(){
    $.post(&#39;/sessions/create&#39;,{uname:$("#uname").val(),
         password:$("#password").val()},function(data){
     //some 
   });
   return {do_login:do_login};
  } 
 });
 
//不依赖其他模块的定义
define(function(){
 //some definations
 return {xx:xx};
});

Copy after login

rails does not apply a js loader. On the one hand, the asset pipe of the new version of rails will package all js files into one js file, and there is no state of multiple js loading. On the one hand, turbolink uses the so-called pjax technology, which has mixed reviews. The default link is changed to ajax mode, which only obtains the bod part of the html and leaves the head part unchanged, so that js is loaded only when the website is opened for the first time.

Case 1: Load JavaScript file

<script src="./js/require.js"></script> 
  <script> 
 require(["./js/a.js", "./js/b.js"], function() { 
      myFunctionA(); 
      myFunctionB(); 
   }); 
  </script>

Copy after login

The string array parameter in the require method can allow different values. When the string ends with ".js", or with When the string starts with "/" or is a URL, RequireJS will think that the user is loading a JavaScript file directly. Otherwise, when the string is similar to "my/module", it will think that this is a module and will use the user's name to load a JavaScript file. Configure the baseUrl and paths to load the JavaScript file where the corresponding module is located. The configuration part will be introduced in detail later.

What should be pointed out here is that RequireJS does not guarantee that myFunctionA and myFunctionB must be executed after the page is loaded. When it is necessary to ensure that the script is executed after the page is loaded, RequireJS provides an independent domReady Module, you need to go to the RequireJS official website to download this module, it is not included in RequireJS. With the domReady module, the code in Case 1 can be slightly modified and added with a dependency on domReady.

Case 2: Execute JavaScript after the page is loaded

<script src="./js/require.js"></script> 
  <script> 
 require(["domReady!", "./js/a.js", "./js/b.js"], function() { 
      myFunctionA(); 
      myFunctionB(); 
   }); 
  </script>

Copy after login

After executing the code of Case 2, you can see through Firebug that RequireJS will be inserted into a.js and b.js on the current page respectively. A