require.js的总结

07-requireJS

为什么要使用require.js

• 一个页面如果加载多个js文件，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间也会越长

• js文件之间存在依赖关系，因此必须严格保证加载顺序

• require.js，就是问了解决这两个问题

  • 实现js文件的异步加载，避免网页失去响应
  • 管理模块之间的依赖性，便于代码的编写和维护

require.js的使用步骤

• 去官网下载最新版本，直接放到页面进行加载，并跟主模块main.js建立联系,js文件后缀可以省略

  <script src="js/require.js" data-main="js/main"></script> 

主模块的写法

• 主模块就是负责各个子模块的依赖关系，并负责调用，也就是在main.js中

  • 使用require方法,并子模块js文件依赖到主模块js文件中，js文件后缀可以省略

  require(["jquery","teacher/list"],function($,teacherList){
  
    //可以向jquery了
    $("demo").addClass("active");
  
    //调用引入过来的teacherList子模块
    teacherList();
  })

子模块的写法

• 子模块就是一个页面一个js，可能一个子页面页面还有其他的js文件，

  • 使用define方法，使用return向外暴露出去,并且可以引入html文件，个子模块的各个js文件

  • 特别注意text.js文件是来读取html文件的，需要参照相应的格式text!区分出来后面直接写文件路径，html文件后缀不能省略

  define(["jquery","text!tpls/teacherList.html","arttemplate"],function($,teacherListTpl,art){
    return function(){
  
      //
  
      //使用jquery
      $("demo").addClass("active");
  
    }
  })

require.js文件配置

• 使用require.config()方法来配置文件路径依赖的js文件

  • baseUrl参数是设置基目录，只要是基目录下的文件都可以直接写了
  • paths参数是设置文件路径的，也就是需要引入的js文件，比如jquery，jquery.cookie，text，template-web等等，他们都是以基目录为基准
  • shim是设置依赖关系的，比如bootstrap依赖于jquery的，那需要设置一下，bootstrap:{deps:[“jquery”]}这个方法类似就行了

  require.config({
    baseUrl:"js",
    map: {
        *: {
            css: 'require/css'
        }
    },
    paths:{
        jquery:"lib/jquery-2.1.4",
        cookie:"lib/jquery.cookie",
        text:"lib/text",
        arttemplate:"lib/template-web",
  
        //配置tpls文件夹路径
        tpls:"../tpls",
  
        bootstrap:"../assets/bootstrap/js/bootstrap",
        datetime:"../assets/datetimepicker/js/bootstrap-datetimepicker",
        upload:"../assets/uploadify/jquery.uploadify",
        //配置ueditor的2个文件
        ueConf:"../assets/ueditor/ueditor.config",
        ueAll:"../assets/ueditor/ueditor.all",
        zeroClipboard:"../assets/ueditor/third-party/zeroclipboard/ZeroClipboard",
        echarts:"lib/echarts.min",
        mui:"../lib/mui/mui"
    },
    shim:{
        bootstrap:{
            deps:["jquery"]
        },
        datetime:{
            deps:["bootstrap"]
        },
        upload:{
            deps:["jquery"]
        }
          mui:{
              deps:["css!../lib/mui/mui.css"]
      }
    }
  })

AMD规范问题

• Asynchronous Module Definition，用白话文讲就是 异步模块定义

• 支持AMD规范的就直接引入就行了

• 不支持AMD规范的，需要依赖支持AMD的，或者直接设置

  • 比如bootstrap依赖jquery，jquery支持AMD规范，那只需设置一下就行了

  require.config({
    paths:{
      bootstrap:"./lib/bootstrap",
      jquery:"./lib/jquery"
    }
    shim:{
    bootstarp:{
      deps:["jquery"]
   }
  })

  ​

• 不依赖与任何支持AMD规范的js文件需要设置一下,让它支持AMD规范

  if (typeof define === "function" && define.amd) {
  define([], function () {
      return jQuery;
  });
  }
  
  //或者使用子模块一样向外暴露函数
  define(["jquery","text!tpls/teacherList.html","arttemplate"],function($,teacherListTpl,art){
  return function(){
  
    //使用jquery
    $("demo").addClass("active");
  
  }
  })

require.js按需加载html文件

/*有一个插件，text.js可以读取html内容*/

//只需在require.config设置一下
 require.config({
    baseUrl:"js",
    paths:{
        text:"lib/text",    
    },
})

//哪里需要就引入比如 有一个product.html，html后缀不能省略
define(["text!product.html"],function(productTpl){

  //productTpl就会得到product.html代码的字符串，并且还可以注册事件
}) 

require.js按需加载css文件

• 按需加载css有两种方法

  

  • 就是在require.config()设置map和shim

  • “map”告诉RequireJS在任何模块之前，都先载入这个模块，这样别的模块依赖于css!../style/1.css这样的模块都知道怎么处理了

    /*入口脚本*/
    require.config({    
     baseUrl: "scripts/",
     paths: {        
       "utiljs": "helper/util"    
     },    
     waitSeconds: 15,    
     map: {        
       '*': {            
         'css': 'lib/css'        
       }    
     },    
     shim : {        
       'utiljs': ['css!../style/1.css']    
    }});
    
    require(["utiljs"], function(utiljs) {   
    utiljs();
    });

  • 直接在相应的子模块引入

  //记住是没有返回值的，可以放到最后面
  require.config({    
     baseUrl: "scripts/",
     paths: {        
  
     },    
     waitSeconds: 15,    
     map: {        
       '*': {            
         'css': 'lib/css'        
       }    
     },    
  });
  
  define(["css!../style/1.css"],function(){
  
  })

  ​