require-js-模块化）使用教程

模块化的标准

有了模块，我们就可以更方便地使用别人的代码,想要什么功能，就加载什么模块。这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！ 【螺丝与螺帽】

• CommonJS：是一个模块化的标准，Node.js在使用的模块化标准。适用与后端开发的标准。
• AMD（Async Module Definition）：在CommonJS基础上衍生出来的适用于前端开发的模块化标准。
  
  • 特点：预加载，第一次访问时，将所有的文件都加载出来。
  • 优点：第一次访问完成以后，再次访问速度会很快
  • 缺点：第一次加载，需要的时间会比较长
  • 代表：requirejs
• CMD（Common Module Definition）：在CommonJS基础上衍生出来的适用于前端开发的模块化标准。
  
  • 特点：懒加载，只有使用到的时候，才会加载对应的模块。
  • 优点：第一次访问速度会比较快
  • 缺点：再次访问其他模块时会比较慢。
  • 代表：seajs

require.JS

require.js概念

requirejs是AMD规范的一个实现，require.js是一个javascript文件，也是一个模块加载器。模块加载器：相当于canvas中封装的图片加载器，只不过一个是加载图片的，一个加载js，文件的类型不一样。

官网地址

github地址

requirejs主要提供两大功能：

• 加载模块：可以加载AMD规范的模块，也可以是普通的模块，异步加载，并且能够管理模块之间的依赖。
• 规范了模块的定义：有助于不同模块之间的共享与依赖。

requirejs的优点：

• 提高了javascript文件的加载速度，避免不必要的堵塞。
• 独特的模块定义方式可以避免全局变量污染。
• 独特的模块定义方式可以在脚本层面声明模块之间的依赖。

requirejs初体验

一、引入js文件

<!--1. 引入require.js文件--><script src="require.js"></script>

二、定义模块

//在a.js文件中console.log("a模块加载了");

三、引用模块

//require会自动找当前目录下的js文件，a是文件名，不能写后缀。require(["a"]);

API详解

requirejs一共对外暴露三个全局变量

1. requirejs - 用于加载模块
2. require - 用于加载模块
3. define - 用于定义模块

require和requirejs是同一个函数，类似于$和jQuery的关系

require加载模块

• 作用：加载模块（amd模块或者是普通模块）
• 加载普通模块，模块加载完是会执行一遍的。

//第一个参数：数组，需要加载的模块，异步加载的//第二个参数：回调函数，在模块都加载完毕之后，回调函数才会执行//require(["js/a", "js/b", "js/c"]);require(["js/a", "js/b", "js/c"],function () {  console.log("我是最后执行的");});

define定义模块

使用define函数可以定义一个AMD规范的模块

//第一个参数：模块的依赖//第二个参数：模块的主体define([], function () {  console.log("a模块加载了");});

好处：require独特的定义方式，避免了全局变量的污染。

模块之间的依赖

在使用define定义一个模块时，如果模块依赖于另一个模块，我们可以通过define的第一个参数去指定。

//第一个参数：本模块依赖的模块列表  路径是以html的路径为基准//第二个参数：模块的主体define(["js/a"], function () {  console.log("a模块依赖与b模块");});

优点：可以在声明模块的时候就可以定义好依赖，那么使用的时候，就不用在管模块之间的依赖了。使用起来会更加的方便。

模块的输出（对外暴露的东西）

如果模块仅仅是执行一些代码实现某个功能，那么直接引入该模块，实现对应的功能即可，不需要返回值。如果该模块的存在是为了提供一些方法、对象或者其他一些内容，那么这个模块需要返回值。

在定义模块的时候，我们通常需要对外返回一些内容，因为使用define定义模块，实质就是一个函数，因此可以使用return返回模块的输出。

define([], function () {  var util = {    sayHello:function (name) {      console.log("大家好，我是"+name);    },    sleep:function () {      console.log("好困啊，我想要睡觉");    }  };  //通过return返回模块的输出  return util;});

想要获取模块的输出，在function中传递形参即可。

//参数1：加载的模块列表//参数2：模块加载完成后，会执行的回调函数,形参就是模块的返回值require(["b"], function (util) {  util.sayHello("张三");  util.sleep();});

如果依赖于多个模块，应该怎么办？

//1. 如果依赖于多个模块，并且多个模块都有输出，那么我们需要使用参数一一对应，//2. 这样就可以获取到多个模块的输出了。//3. 即便某个模块没有输出，我们也要指定一个参数占着位置。//4. 通常我们会把有输出的模块写在前面，没有输出的模块写在后面。这样方便写参数。require(["js/util", "js/common", "js/test"], function (util, demo) {  console.log(util);  console.log(demo);});

配置路径和别名

• 使用require来加载某个模块时，路径会以当前html文件作为参考。
• require可以使用config来配置一些内容，比如基础路径

require.config({  //1. 配置所有模块的基础路径，该路径相对于引入了requirejs的html文件的路径。  //2. 所有的路径都会自动的拼上baseUrl  baseUrl:"js/",  //1. 给模块起别名，方便使用，在依赖的模块中也能使用  paths:{    "common":"common/common",    "util":"util/util",    "test":"login/test"  }});//引入模块时，只需要直接引入模块的别名即可。require(["common", "util", "test"],function (demo, util) {  console.log(demo);  console.log(util);});

加载非AMD规范的模块

requirejs可以通过require函数加载模块。在加载不是AMD规范的模式时，会出现问题，需要做特殊的处理。

市面上有很多模块，并没有实现AMD模块化规范，没有实现模块化的模块也可以使用requirejs去加载，但是require加载时，仅仅会执行这个js文件，并不能帮助这个模块实现依赖的加载，也无法获取到这个模块的输出。

我们可以通过require.config为没实现AMD规范加载依赖项。

require.config({  baseUrl:"js/",  path:{    "base":"base"  },  //垫：配置普通模块的依赖与输出  shim:{    "base":{      //配置普通模块的依赖项      deps:["依赖项1","依赖项2"],      //配置模块的输出      exports: "输出结果"    }  }});

使用模块化加载jquery

想使用模块化加载第三方库的时候，首先需要检查第第三方库是否支持模块化。

{% asset_img jquery.png [模块化] %}

如上图，说明这个第三方库是支持模块化的，可以直接使用require进行加载。

具名模块与匿名模块

define声明时，第一个参数可以是该模块的名字，如果声明了模块名，在配置时，模块别名就不能够调整了。

requireJS的匿名模块和命名模块的差别和最佳实践