RequireJS

1. 定义

• js文件的模块加载器

  官网下载地址：https://requirejs.org/

2. 优点

1. 防止js加载阻塞页面渲染
2. 使用程序调用的方式加载js

3. 加载本地JS模块

• define

  功能：定义一个模块

  把 hello_define.js 定义成模块 hello_define

  define(function(){
      function hello(){
        alert("hello world！")
      }
      hello()
  })
  

• require

  功能：加载依赖模块，并执行加载完后的回调函数

  通过define函数定义了一个模块，然后在页面中使用：

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

  require()第一个参数是模块的路径，是一个数组，必填；第二个参数是一个回调函数，加载完模块之后执行，可选。

4. 加载文件模块

加载的JS来自本地服务器、其他网站或CDN，符合AMD（异步加载模块）规范。

• require.config

  功能：配置模块加载位置，同时可给模块自定义一个简短的名字。

  例如加载网络文件jQuery.js和本地文件hello_define.js：

  注意：在使用requirejs时，加载模块时不能写.js后缀的

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

5. 加载第三方模块

加载第三方插件模块、不符合AMD规范的js，需要配置使用shim来加载。

1. 非AMD模块输出

   例如underscore类库，他并没有实现AMD规范，那我们可以这样配置：

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

2. 插件形式的非AMD模块

   例如jquery.form插件

   require.config({
       shim: {
           "jquery.form" : {
               deps : ["jquery"]
           }
       }
   })
   或者简写成：
   require.config({
       shim: {
           "jquery.form" : ["jquery"]
       }
   })
   
   调用：
   require.config(["jquery", "jquery.form"], function($){
       $(function(){
           $("#form").ajaxSubmit({...});
       })
   })
   

6. 全局配置

• 定义一个main.js

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "hello_define" : "js/hello_define"   
    }
})

其中会在网络链接地址加载失败时，通过加载本地的js/jquery.js来加载jquery模块

• 通过加载 requirejs 脚本的 script 标签加入的data-main属性，进行全局配置。

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