RequireJS解决代码依赖问题,异步加载js,避免页面失去相应

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。
RequireJS以一个相对于baseUrl的地址来加载所有的代码。页面顶层<script>标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。

加载

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

这里的mian是脚本的入口，相当于c语言的main()主函数, 所有的模块都要集中在这里被解析. 默认加载的都是js文件,所以就不用加.js

<script src="js1.js""></script>
<script src="js2.js""></script>
<script src="js3.js""></script>
<script src="js4.js""></script>

之前我们引用js代码就会是这样, 依赖顺序不能颠倒, 这样就非常麻烦,

AMD规范

 //AND规范的写法
require(['依赖一', '依赖二', '依赖三'], function(依赖一的别名, 依赖三的别名, 依赖三的别名){
    //code
    })

require很好的解决了这个代码依赖的问题,它采用AMD(异步模块加载)规范加载脚本文件.

比如:


require(['jquery', 'underscore', 'bankbone'], function($, _, Backbone) {
    //code
    })

配置

有的模块肯定是不符合AMD规范的,那么我们就需要配置一下,shim属性就是配置不符合AMD规范的代码的,require.config()参数是一个对象,写在页面的最顶部.

require.config({
    baseUrl: '路径', // 设置js文件的根目录,默认是main.js的目录,这里写相对与main.js的相对路径
    paths: {
        jquery: '路径' // 为每个文件单独指定路径, 也可以是网络地址
    }
    shim: {
        '模块名': {
            exports: '模块别名',
            deps: ['依赖一', '依赖二']
        }
    }
})

AMD模块的写法

define(['依赖'], function(依赖别名) {
    //code
    
    })

define(function(a, b) {
    var add = function(a, b) {
        return a + b;
    }
    return add
});
//这样写只能返回一个方法
//在main.js里用该模块的名字(a,b)调用

还可以用下面的方法写

define(function(a, b) {
    var add = function(a, b) {
        return a + b;
    }
    var x = function(a, b) {
        return a * b
    }
    return {
        add: add,
        x: x
    }
});
//这样写只能返回多个方法
//在main.js里用该模块的名字.add(a,b)或者模块名字.x(a,b)调用

模块的压缩合并

模块化的写法肯定会增加文件数量, 从而增加请求次数, 放慢加载速度, require有自带的压缩工具r.js, 可以合并所有模块为一个js文件. 可以去官网下载也可以使用bower下载

bower install r.js

下载完后在main.js的目录新建一个build.js文件(配置如下)
在build.js的文件目录下执行node r.js -o build.js
构建完后会有一个main-built.js文件

这里有一篇详细介绍打包的文章

({
appDir: './', 　　 //项目根目录
out: 'main-build.js',　　//输出文件名
dir: './outdir',　　 //输出目录，全部文件打包后要放入的文件夹（如果没有会自动新建的）
　　　　/* 有了dir，就不能使用out配置项了，你在编译时它有非常明确的提示 */
baseUrl: './js/pages', 　　 //相对于appDir，代表要查找js文件的起始文件夹，下文所有文件路径的定义都是基于这个baseUrl的
modules: [
　　　　//要优化的模块 —— 里面的配置项即各页面的 相对baseUrl路径的 省略后缀“.js”的 入口文件(入口文件 ---- 即加载页面时引入require.js的script标签上data-main属性所指定的文件)
　　　　//该属性必不可少，因为一个程序至少需要有一个入口
    { name:'main'},
    { name:'index'} 
],
　　fileExclusionRegExp: /^(r|build).js|.*.scss$/,　　 //正则匹配过滤文件，匹配到的文件将不会被输出到输出目录去，这里过滤掉的是 r.js、build.js、*.scss三类文件
　　optimizeCss: 'standard',
　　removeCombined: true, //如果为true，优化器将从输出目录中删除已合并的文件
　　paths: { //各模块相对baseUrl的路径，直接从require.config的path配置中烤取即可
    "underscore": "../libs/underscore/underscore-min",
    "backbone": "../libs/backbone/backbone-min",
　　},
shim:{// 配置不符合AMD规范的模块，直接从require.config的shim配置中烤取即可
    "underscore": {
　　        exports: "_"
    },
    "backbone": {
　　        deps: ["underscore", "jquery"],
　　        exports: "Backbone"
    },
} 
})