為什么要使用模塊化？
- 解決命名沖突，避免全局污染
- 解決依賴(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)注明出處
