5分钟学会用requirejs

requirejs的使用场景

在早期，网页的功能非常有限，所以需要的js代码量相对较少。随着网页功能的增加，可能需要引入多个js文件，演示如下：

<script src="a.js"></script>

<script src="b.js"></script>

<script src="c.js"></script>

<script src="d.js"></script>

<script src="e.js"></script>

上面的代码会一次加载每一个js文件，但是具有如下明显的缺点：

1. 造成堵塞，影响页面渲染；
2. 如果文件之间存在依赖，无法保证以正确的顺序加载完成

很难保证页面不会不会出现啥啥js undefined或者啥啥啥is not a function之类的错误。比如一个jquery的插件显然是依赖jquery核心库的，所以jquery核心库文件必须先引入。项目小组建少依赖简单还好，要是项目大组建依赖复杂就糟糕了。

requierjs就可以完美解决上述问题，优点如下：

1. 可以实现js文件的异步加载，防止阻塞；
2. 实现模块之间的相互依赖管理。

加载require

require.js虽然是用来管理其他模块js文件的，它本身也是一个js。

默认情况下也会阻塞网页的渲染，不过可以采用如下措施解决：

1. 将require.js放置于页面的最底部。

<script src="js/require.js"></script>

1. 给<script>标签设置async属性。

<script src="js/require.js" defer async="true" ></script>

这样js文件也会进行异步加载；因为浏览器兼容问题，通常也要添加defer属性。

reqiurejs咋用？

请记住使用requirejs的口诀，两函数一配置一属性

data-main属性（data-main主模块使用）

当require.js文件加载完毕之后，就可以开始它的模块管理工作，看一段代码：

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

require.js在加载的时候会检查data-main属性，当加载完毕，data-main属性规定的js文件会第一个被require.js加载并执行。犹如require.js默认的文件后缀名是js，所以可以把main.js简写成main。main.js是要执行的js的主体。

require.config()配置

参数都是采用的默认配置：

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

main.js的代码如下：

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){   // 代码 });

默认情况下，require.js假定这三个模块与main.js在同一个目录，文件名分别为jquery.js\underscore.js和backbone.js，然后自动加载。我们也可以使用require.config()方法进行配置，代码如下：

require.config({

  paths: {

　  "jquery": "lib/jquery.min",

　　"underscore": "lib/underscore.min",

　　"backbone": "lib/backbone.min"

　}

});

baseUrl——用于加载模块的根路径；

paths——用于映射不存在根路径下面的模块路径；

shims——配置在脚本/模块外面并没有使用requireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim。

特别说明：baseurl规定的路径参照与引入main.js页面的相对路径，因为此时main.js文件已经导入到此页面。避免baseurl生效的方式：

1. 以“.js结束；
2. 以“/”开始
3. 包含url协议，如“http:”or"https:"

代码实例如下：

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

deps——加载依赖关系数组

 

require.config({

  //默认情况下从这个文件开始拉去取资源

 baseUrl:'scripts/app',

  //如果你的依赖模块以pb头，会从scripts/pb加载模块。

 paths:{

  pb:'../pb'

 },

 // load backbone as a shim，所谓就是将没有采用requirejs方式定义

 //模块的东西转变为requirejs模块

 shim:{

  'backbone':{

   deps:['underscore'],

   exports:'Backbone'

  }

 }

});

define()函数 

该函数御用定义模块。形式如下：

//logger.js

 define(["a"], function(a) {

 'use strict';

 function info() {

  console.log("我是私有函数");

 }

 return {

  name:"一个属性",

  test:function(a){

   console.log(a+"你好！");

   a.f();

   info();

  }

 }

});

 define函数就受两个参数。

第一个是一个字符串数组，表示你定义的模块依赖的模块，这里依赖模块a；

第二参数是一个函数，参数是注入前面依赖的模块，顺序同第一参数顺序。在函数中可做逻辑处理，通过return一个对象暴漏模块的属性和方法，不再return中的可以认为是私有方法和私有属性。

requier()函数

该函数用于调用定义好的模块，可以是用define函数定义的，也可以是一个shim。形式如下“：

//app.js

require(['logger'], function (logger) {

logger.test("大熊");

console.log(logger.name);

});

//输出结果：

//大熊你好！

//不确定（取决于a模块的f方法）

//我是私有函数

//一个属性