总结一下RequireJS

一、AMD规范

AMD(Asynchronous Module Definition，异步模块定义)指定一种机制，在该机制下模块和依赖可以异步加载。

语法

define(id?,dependencies?.factory)

id：指定义中模块的名字（可选），如果没有提供该参数，模块的名字应该默认为模块加载器请求指定的脚本的名字。

depndencies ：当前模块依赖的，已被模块定义的模块标识的数组字面量。
factory：一个需要进行实例化的函数或者对象。

示例

define('modal',['jQuery','dialog'],function(){
  $('.xxx').show()
  Dialog.open()
})

二、RequireJS介绍

RequireJS是一个JavaScript模块加载器。
RequireJS遵循AMD规范，用于解决命名冲突和文件依赖的问题。
RequireJS加载模块化脚本将提高代码的加载速度和质量。

使用RequireJS的好处

1、声明不同js文件之间的依赖。

2、可以按需、并行、延时载入js库。

3、可以让我们的代码以模块化的方式组织。

三、使用方法。

Demo栗子目录结构：

目录结构

在html中添加<script>标签：

  <script data-main="./js/app.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>

data-main：配置文件(文件入口)，一般命名为config.js。
src：Requirejs地址。

配置config.js

requirejs.config({
  baseUrl: 'js', 
  paths: {
    app: 'app' 
  },
});

requirejs(['app'], function (app) {
  app.init();
});

baseUrl ：用于加载模块的根路径。在配置这个属性后，以后的文件都是在这个路径下查找内容了。

paths：用于一些常用库或者文件夹路径映射，方便后面使用，省得每次都要输入一长串路径。（js 文件的后缀可以省略）

define ：定义模块。

require：加载模块

更多请查阅官方文档

app.js

// 因为用到了hello和hello2，所以需引入['hello','hello2']
 define(['hello','hello2'], function(x,y) { //hello的参数x ，hello2的参数y
  var app = {
    init:function(){
      x.init() //hello
      y.init() //hello2
      console.log('这里是app') 
    }
  }
  return app //把app返回出去，对应的config.js里面。
  
});

config.js

requirejs.config({
  baseUrl: 'js', //用于加载模块的根路径。在配置这个属性后，以后的文件都是在这个路径下查找内容了。
  paths: {
    app: 'app' 
  },
});

requirejs(['app'], function (app) {
  app.init();
});

hello.js

// 因为用到了jQuery所以需要引入
define(['jQuery'], function() {
var a = {
  init:function(){
    console.log($('.box').html())
    console.log("hello")
  }
}
return a //把a给返回出去
});

hello2.js

// 因为用到了jQuery所以需要引入
define(['jQuery'], function() {
var b = {
  init:function(){
      $('.box').append( "<p>段落</p>" )
      console.log("hello2")
  }
}
return b //把b给返回出去
});

jQuery.js 省略可自行下载

大概流程图.png

代码地址

最后编辑于：2018.03.22 16:39:53