Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化

一:require.js

1、require.js是什么?为什么要用它?
require.js是一个JavaScript模块载入框架,实现的是AMD规范。使用require.js有以下优点:
① 异步加载,防止js加载阻塞页面渲染,提高了性能。
② 使用程序调用的方式加载js,避免使用传统的标签引入方式。
③ 模块化,便于代码的编写和维护。
④ 按需加载,减少不必要的载入。
2、require.js与传统方式对比
①:传统方式
dom结构:
Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化_第1张图片
a.js源码:
Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化_第2张图片
运行效果:
Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化_第3张图片
总结:这样虽然结构与逻辑分离,a.js这种写法虽然实现了模块化,不会污染全局环境,但是看起来并没有那么优雅,而且可以看到文本test并没有渲染出来,也就是在head中引入js,js的加载会阻塞下边dom的渲染,这是一个同步的过程。
② require.js方式
dom结构:
Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化_第4张图片
a.js源码:
Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化_第5张图片
运行效果:
Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化_第6张图片
总结:可以看到require.js方式head中js的加载并没有阻塞下边dom的渲染,也就是说这是一个异步的过程,通过define定义模块,require加载模块更清晰明了。
3、require.js常用api
(1)define 定义模块
(2)reuqire 加载依赖模块,执行加载完后的回调函数
(3)config 配置信息,常用配置项:
① paths 指定资源别名、设置资源路径
② baseUrl 设置获取资源时的公共前置路径,简化paths中路径的写法
③ waitSeconds 设置加载模块时的最长等待时间
④ shim 设置文件的依赖、输出非AMD模块化文件
4、使用require.js改造昨天的sass demo
(1)目录结构:
Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化_第7张图片
(2) 运行效果:
Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化_第8张图片
(3)源码链接:https://github.com/XieTongXue/demo/tree/master/requirejs-demo

二、r.js

概念:r.js是requireJs的优化工具,能合并压缩js、css。
使用r.js打包以上开发的demo,r.js在github下载
文件目录如下:
Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化_第9张图片
新增build.js,源码如下:
Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化_第10张图片
其中name配置项为打包入口,out为输出,baseUrl为paths前置路径。
新建collect.js,用于收集模块
Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化_第11张图片
进入build 文件夹,命令行运行 node r.js -o build.js,会生成一个app.js,在index.html中引用即可。
Requirejs与r.js打包,AMD、CMD、UMD、CommonJS、ES6模块化_第12张图片
源码链接:https://github.com/XieTongXue/demo/tree/master/r.js-demo

三、AMD|CMD|UMD|CommonJS|ES6

AMD:异步模块定义,异步加载模块,即不堵塞浏览器其他任务,而加载内部是同步的(加载完模块后立即执行回调)。
CMD:与AMD不同的是,AMD一开始要将依赖以数组形式导入,而CMD推崇依赖就近,延迟执行。
UMD:AMD和CommonJS(服务端模块化规范)的结合体,UMD先判断是否支持Node.js的模块(exports)是否存在,存在则使用Node.js模块模式,再判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。
CommonJS:服务端模块化规范,如Nodejs

写法举例:

AMD:(代表:require.js)

// math.js
define(function () {
    var add = function (x, y) {
        return x + y
    }
    return {
        add: add
    }
})

// use.js
require(['math', 'other'], function (math, other) {
    console.log(math.add(1, 2)) // 3
    other.doSomething()  // other
})

CMD:(代表:sea.js)

// CMD
define(function(require, exports, module) {
    var a = require('./a');
    a.doSomething();
    var b = require('./b');
    b.doSomething();
})
// 对应 AMD
define(['a', 'b'], function(a, b) {
    a.doSomething()
    b.doSomething()
    // 模块自己的方法
})

UMD:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['b'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory(require('b'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.b);
    }
}(this, function (b) {
    //use b in some fashion.

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));

CommonJS:

// math.js
exports.add = function (a, b) {
    return a + b
}

// use.js
var math = require('math')
math.add(1, 2)

ES6:

// math.js
export function add (a, b) {
    return a, b
}

// use.js
import {add} from 'math'
add(1, 2)

你可能感兴趣的:(JavaScript,模块化)