Home > Web Front-end > JS Tutorial > body text

Summary of usage of Require.js

一个新手
Release: 2017-10-26 09:48:27
Original
1753 people have browsed it

1. Why use require.js

## First, if a page loads multiple js files , the browser will stop rendering the web page. The more files are loaded, the longer the web page will lose response. Secondly, because there are dependencies between js files, the loading order must be strictly guaranteed. When the dependencies are complex, the code It will become difficult to write and maintain.

require.js is to solve these two problems:

  1. ## 

    realize js Asynchronous loading of files to avoid web page loss of response;

  2.  

    Manage dependencies between modules to facilitate code writing and maintenance.

2. Loading require.js## Chapter Step one, go to the official website to download the latest version and put it directly on the page to load

 <script src="js/require.js"></script>
Copy after login


Loading this file may cause the webpage to lose response, you can change it Put it at the bottom of the page to load, you can also write like this

 <script src="js/require.js" defer async="true" ></script>
Copy after login


The async attribute indicates that this file needs to be loaded asynchronously to avoid the webpage losing response. IE does not support this attribute and only supports defer, so defer is also written.

After loading require.js, the next step is to load our own code, which is the entrance, which can be called the main module. If the file is named main.js, it will be written as follows That’s it:

<script src="js/require.js" data-main="js/main"></script>    .js后缀可以省略
Copy after login


3. How to write the main module If the main module depends on jQuery, you can write it like this

 require([&#39;jquery&#39;], function ($){
   alert($);
});
Copy after login

4. require.config() method

require.config({
  paths: {
    "jquery": "jquery.min",
    "underscore": "underscore.min",
    "backbone": "backbone.min"
  }
});
Copy after login
The above code gives the file names of the three modules. The path defaults to the same directory as main.js (js subdirectory). If these modules are in other directories, such as the js/lib directory, there are two ways to write them.

    One is to specify the paths one by one
  • require.config({
      paths: {
        "jquery": "lib/jquery.min",
        "underscore": "lib/underscore.min",
        "backbone": "lib/backbone.min"
      }
    });
    Copy after login

 
    Another One is to directly change the base directory (baseUrl).
  • require.config({
      baseUrl: "js/lib",
      paths: {
        "jquery": "jquery.min",
        "underscor: "underscore.min",
        "backbone": "backbone.min"
      }
    });
    Copy after login

    If a module is on another host, you can also directly specify its URL, such as
  • require.config({
      paths: {
        "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
      }
    });
    Copy after login

##5. How to write AMD module

Module loaded by require.js , using AMD specifications. In other words, the module must be written according to AMD's regulations.

Specifically, the module must be defined using a specific define() function.

If a module does not depend on other modules, it can be defined directly in the define() function.

// math.js
define(function (){
  var add = function (x,y){
    return x+y;
  };
  return {
    add: add
  };
});
Copy after login
 The loading method is as follows:

 // main.js
require([&#39;math&#39;], function (math){
  alert(math.add(1,1));
});
Copy after login

 If this module also depends on other modules, then the first parameter of the define() function must Is an array indicating the dependencies of this module.

 define([&#39;myLib&#39;], function(myLib){
  function foo(){
    myLib.doSomething();
  }
  return {     //返回模块中的函数
    foo : foo
  };
});
Copy after login

当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。

六、加载非规范的模块(shim的使用方式)

 //  app.js
 function sayHello(name){
  alert(&#39;Hi &#39;+name);
}
Copy after login
 //  main.js
require.config({
  shim: {
    &#39;app&#39;: { //这个键名为要载入的目标文件的文件名,不能随便命名。
      exports: &#39;sayHello&#39; //exports的值为my.js提供的 对外接口的名称
    }
  }
});

require([&#39;app&#39;], function(sayHello) {
    alert(sayHello())  
})
Copy after login

导出一个函数,意味着我们得到了一个javaScript类

但是如果在my.js中写了很多function,整合成一个function有点麻烦,想直接导出?方法如下:

 // app.js
function sayHi(name){
    alert(&#39;Hi &#39;+name);
}
function sayHello(name){
    alert(&#39;Hiello  &#39;+name);
}
Copy after login
// main.js  
  require.config({
    shim: {
      app: {
        init: function() { //这里使用init将2个接口返回
          return {
            sayHi: sayHi,
            sayHello: sayHello
          }
        }
      }
    }
  });

  require([&#39;app&#39;], function(a) {
    a.sayHi(&#39;zhangsan&#39;);
    a.sayHello(&#39;lisi&#39;);
  });
Copy after login

shim的有序导入

   require.config({  

    shim: {  
      &#39;jquery.ui.core&#39;: [&#39;jquery&#39;],  //表示在jquery导入之后导入
      &#39;jquery.ui.widget&#39;: [&#39;jquery&#39;],  
      &#39;jquery.ui.mouse&#39;: [&#39;jquery&#39;],  
      &#39;jquery.ui.slider&#39;:[&#39;jquery&#39;]
     },  
    paths : {    
       jquery : &#39;jquery-2.1.1/jquery&#39;,    
       domReady : &#39;require-2.1.11/domReady&#39;,    
       &#39;jquery.ui.core&#39; : &#39;jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core&#39;,    
       &#39;jquery.ui.widget&#39; : &#39;jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget&#39;,    
       &#39;jquery.ui.mouse&#39; : &#39;jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse&#39;,    
       &#39;jquery.ui.slider&#39; : &#39;jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider&#39; 
        }
  });    
 
  require([&#39;jquery&#39;, &#39;domReady&#39;,&#39;jquery.ui.core&#39;,&#39;jquery.ui.widget&#39;,&#39;jquery.ui.mouse&#39;,&#39;jquery.ui.slider&#39;],    function($) {            
      $("#slider" ).slider({              
       value:0,           
       min: 0,           
       max: 4,           
       step: 1,           
       slide: function( event, ui ) {}     
        });    
   }
Copy after login

The above is the detailed content of Summary of usage of Require.js. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template