Summary of usage of Require.js

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>

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>

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后缀可以省略

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

 require(['jquery'], function ($){
　　　alert($);
});

4. require.config() method

require.config({
　　paths: {
　　　　"jquery": "jquery.min",
　　　　"underscore": "underscore.min",
　　　　"backbone": "backbone.min"
　　}
});

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"
  　　}
  });

　

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"
  　　}
  });

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"
  　　}
  });

##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
　　};
});

　The loading method is as follows:

 // main.js
require(['math'], function (math){
　　alert(math.add(1,1));
});

　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(['myLib'], function(myLib){
　　function foo(){
　　　　myLib.doSomething();
　　}
　　return {     //返回模块中的函数
　　　　foo : foo
　　};
});

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

六、加载非规范的模块（shim的使用方式）

 //  app.js
 function sayHello(name){
 　alert('Hi '+name);
}

 //  main.js
require.config({
　　shim: {
　　　　'app': { //这个键名为要载入的目标文件的文件名，不能随便命名。
　　　　　　exports: 'sayHello' //exports的值为my.js提供的 对外接口的名称
　　　　}
　　}
});

require(['app'], function(sayHello) {
    alert(sayHello())  
})

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

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

 //　app.js
function sayHi(name){
    alert('Hi '+name);
}
function sayHello(name){
    alert('Hiello  '+name);
}

// main.js  
　　require.config({
　　　　shim: {
　　　　　　app: {
　　　　　　　　init: function() { //这里使用init将2个接口返回
　　　　　　　　　　return {
　　　　　　　　　　　　sayHi: sayHi,
　　　　　　　　　　　　sayHello: sayHello
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}
　　});

　　require(['app'], function(a) {
　　　　a.sayHi('zhangsan');
　　　　a.sayHello('lisi');
　　});

     shim的有序导入

   require.config({  

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

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!