一：require.js

1、require.js是什么？為什么要用它？
require.js是一個(gè)JavaScript模塊載入框架，實(shí)現(xiàn)的是AMD規(guī)范。使用require.js有以下優(yōu)點(diǎn)：
① 異步加載，防止js加載阻塞頁面渲染，提高了性能。
② 使用程序調(diào)用的方式加載js，避免使用傳統(tǒng)的標(biāo)簽引入方式。
③ 模塊化，便于代碼的編寫和維護(hù)。
④ 按需加載，減少不必要的載入。
2、require.js與傳統(tǒng)方式對比
①：傳統(tǒng)方式
dom結(jié)構(gòu)：

a.js源碼：

運(yùn)行效果：

總結(jié)：這樣雖然結(jié)構(gòu)與邏輯分離，a.js這種寫法雖然實(shí)現(xiàn)了模塊化，不會(huì)污染全局環(huán)境，但是看起來并沒有那么優(yōu)雅，而且可以看到文本test并沒有渲染出來，也就是在head中引入js，js的加載會(huì)阻塞下邊dom的渲染，這是一個(gè)同步的過程。
② require.js方式
dom結(jié)構(gòu)：

a.js源碼：

運(yùn)行效果：

總結(jié)：可以看到require.js方式head中js的加載并沒有阻塞下邊dom的渲染，也就是說這是一個(gè)異步的過程，通過define定義模塊，require加載模塊更清晰明了。
3、require.js常用api
（1）define 定義模塊
（2）reuqire 加載依賴模塊，執(zhí)行加載完后的回調(diào)函數(shù)
（3）config 配置信息，常用配置項(xiàng)：
① paths 指定資源別名、設(shè)置資源路徑
② baseUrl 設(shè)置獲取資源時(shí)的公共前置路徑，簡化paths中路徑的寫法
③ waitSeconds 設(shè)置加載模塊時(shí)的最長等待時(shí)間
④ shim 設(shè)置文件的依賴、輸出非AMD模塊化文件
4、使用require.js改造昨天的sass demo
（1）目錄結(jié)構(gòu)：

(2) 運(yùn)行效果：

（3）源碼鏈接：https://github.com/XieTongXue/demo/tree/master/requirejs-demo

二、r.js

概念：r.js是requireJs的優(yōu)化工具，能合并壓縮js、css。
使用r.js打包以上開發(fā)的demo，r.js在github下載
文件目錄如下：

新增build.js，源碼如下：

其中name配置項(xiàng)為打包入口，out為輸出，baseUrl為paths前置路徑。
新建collect.js，用于收集模塊

進(jìn)入build 文件夾，命令行運(yùn)行 node r.js -o build.js，會(huì)生成一個(gè)app.js，在index.html中引用即可。

源碼鏈接：https://github.com/XieTongXue/demo/tree/master/r.js-demo

三、AMD|CMD|UMD|CommonJS|ES6

AMD：異步模塊定義，異步加載模塊，即不堵塞瀏覽器其他任務(wù)，而加載內(nèi)部是同步的（加載完模塊后立即執(zhí)行回調(diào)）。
CMD：與AMD不同的是，AMD一開始要將依賴以數(shù)組形式導(dǎo)入，而CMD推崇依賴就近，延遲執(zhí)行。
UMD：AMD和CommonJS（服務(wù)端模塊化規(guī)范)的結(jié)合體，UMD先判斷是否支持Node.js的模塊（exports）是否存在，存在則使用Node.js模塊模式，再判斷是否支持AMD（define是否存在），存在則使用AMD方式加載模塊。
CommonJS：服務(wù)端模塊化規(guī)范，如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)) // 3other.doSomething() // other })

CMD：(代表：sea.js)

// CMD define(function(require, exports, module) {var a = require('./a');a.doSomething();var b = require('./b');b.doSomething(); }) // 對應(yīng) 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)

總結(jié)

以上是生活随笔為你收集整理的Requirejs与r.js打包，AMD、CMD、UMD、CommonJS、ES6模块化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。