為什么要使用模塊化衡创?
- 解決命名沖突勘高,避免全局污染
- 解決依賴(lài)管理
- 提高代碼可讀性
- 代碼解耦峡蟋,提高復(fù)用性
CMD、AMD华望、CommonJS 規(guī)范分別指什么蕊蝗?有哪些應(yīng)用
- CMD即是Common Module Definition 通用模塊定義,主要是sea.js在推廣過(guò)程中對(duì)模塊化定義的規(guī)范化產(chǎn)出,中它推崇一個(gè)文件一個(gè)模塊,經(jīng)常用文件名做為模塊ID,以及推崇依賴(lài)就近,主要應(yīng)用為sea.js 赖舟,例子:
define(function(require,exports,module){
var $ = require('jquery.js')
$('div').addClass('active');
});
//cmd推崇就近依賴(lài)蓬戚,所以依賴(lài)寫(xiě)在函數(shù)中,require是一個(gè)方法建蹄,exports是一個(gè)對(duì)象碌更,提供對(duì)外接口裕偿,module是一個(gè)對(duì)象洞慎,存儲(chǔ)與當(dāng)前模塊相關(guān)的屬性和方法痛单。
- AMD即是Asynchronous Module Definition 異步模塊定義,主要是require.js在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出劲腿,它解決了多個(gè)js文件的依賴(lài)問(wèn)題和加載js文件較多時(shí)的頁(yè)面等待問(wèn)題旭绒,推崇依賴(lài)前置,主要應(yīng)用為require.js焦人,例子:
define('modal',['jQuery'],function($){
$('modal').show();
})
//define為定義關(guān)鍵字挥吵,modal為定義的模塊名字,一般可以省略花椭,[]內(nèi)為要加載的依賴(lài)模塊忽匈,緊跟回調(diào)函數(shù)。
- CommonJS主要指的是運(yùn)行在瀏覽器端的模塊規(guī)范矿辽,主要應(yīng)用是node.js丹允。
- 一個(gè)文件對(duì)應(yīng)一個(gè)模塊,每一個(gè)模塊都是單獨(dú)的作用域袋倔,加載模塊是同步加載的雕蔽。
- 在一個(gè)模塊中只有一個(gè)出口,moudle.exports對(duì)象宾娜,將模塊希望輸出的對(duì)象放入該模塊批狐。
- 加載模塊使用require方法。例子:
//模塊定義 myMode.js
var name = 'jiuyi';
function printName(){
console.log(name);
}
functionprintFullName(firstName){
consoele.log(firstName+name);
}
module.erports = {
printName: printName,
printFullName: printFullName
}
//加載模塊
var nameModule = require('./myMode.js')
nameModule.printName();
如下requirejs配置中, baseUrl 有什么作用前塔?以什么作為基準(zhǔn)? paths 的作用和用法是什么?
requirejs.config({
baseUrl: "src/js",
paths: {
'jquery': 'lib/bower_components/jquery/dist/jquery.min'
}
});
baseUrl的作用是設(shè)置require加載JS文件的基礎(chǔ)路徑嚣艇,以html所在的路徑為基準(zhǔn),paths作用是設(shè)置baseUrl基礎(chǔ)路徑之外华弓,設(shè)置某些特定文件的路徑食零,以baseUrl路徑為基準(zhǔn)。
如下 r.js 的打包配置中 baseUrl 是什么? name 是什么
({
baseUrl: "./src/js",
paths: {
'jquery': 'lib/bower_components/jquery/dist/jquery.min'
},
name: "main",
out: "dist/js/merge.js"
})
- 在這里baseUrl指的是以自身文件路徑為基準(zhǔn)该抒,尋找require.js的配置文件的baseUrl
- name指的是入口的主模塊名字
- out指的是打包輸出的路徑
- 本博客版權(quán)歸羞澀的澀和饑人谷所有慌洪,轉(zhuǎn)載請(qǐng)注明出處