溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了JavaScript模塊化開發的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
JS開發的問題
沖突
依賴
JS引入的文件,產生依賴.
使用命名空間解決：
命名空間的弊端
調用的時候 名字比較長.
只能減低沖突，不能完全避免
引入sea.js的庫
如何變成模塊？ define
如何調用模塊？ exports 和 seajs.use
如何依賴模塊？ require
//html：
<script src="js/sea.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// console.log( seajs );
seajs.use('./js/main.js',function ( main ) {
main.show();
});
</script>//main.js
define(function ( require,exports,module ) {
var header = require('./header.js');
function show () {
alert(123);
}
exports.show = show;
});加載一個或多個模塊
// 加載一個模塊
seajs.use('./main.js');
// 加載一個模塊，在加載完成時，執行回調
seajs.use('./main.js', function ( main ) {
});
// 加載多個模塊，在加載完成時，執行回調
seajs.use(['./main.js', './b'], function(a, b) {
a.doSomething();
b.doSomething();
});seajs.use 與 DOM ready 事件沒有任何關系。如果某些操作要確保在 DOM ready 后執行，需要使用 jquery 等類庫來保證。
seajs.use(['jquery','./main'],function ( $,main ) {
$(function () {
main.init();
})
});use方法第一個參數一定要有，但是可以是null，也可以是一個變量
var app = ['app.js', 'header.css', 'header.js'];
seajs.use(app, function( app ) {
//do something
});seajs.use() 只用于加載啟動， 不應該出現在define的模塊代碼中，如果模塊代碼里需要加載其它模塊時，使用 require() ，需要加載異步其它異步模塊時，使用 require.async()
seajs.use 是模塊加載器必備的一個接口
當傳遞一個參數時候，那么這個參數就是一個模塊，參數可以是任意類型
傳遞一個字符串，那么這個模塊就是一個字符串模塊
傳遞一個對象的時候，那么這個模塊就是一個對象模塊
傳遞一個函數（最常用的方式）
這函數自帶三個參數
Require：引用其他模塊的工廠方法
Exports：返回的接口對象
Module：模塊module屬性
當傳遞過參數時（兩個，或者三個）
如果傳遞兩個參數的時候，第一個該模塊依賴的模塊數組集合，最后一個參數是function
如果傳遞三個參數的時候，第一個表示該模塊的名稱，第二個參數表示該模塊依賴的模塊集合，第三個
//第一個參數，當前模塊的ID，也就是當前模塊的地址
//第二個參數，以來模塊的地址的數組
define('./main.js',['./drag.js'],function( require,exports,moduels ){
});三個參數解釋
require
require不能簡寫
require不能被重定義
不能賦值：var req = require
不能定義函數：function require
不能被子函數當成參數
不能在子函數作用域內重定義
// 錯誤 - 重命名 "require"！
var req = require, mod = req("./mod");
// 錯誤 - 重定義 "require"!
require = function() {};
// 錯誤 - 重定義 "require" 為函數參數！
function F(require) {}
// 錯誤 - 在內嵌作用域內重定義了 "require"！
function F() {
var require = function() {};
}
require的參數只能是完整的字符串 require(‘abc' + ‘bcd')是不允許的
exports
模塊的接口
第一種，直接對exports添加屬性，如exports.color = 'red'
第二種，通過module來定義，module.exports.color = 'red'
第三種，通過module來定義，module.exports = {color: 'orange'}
第四種，通過return來定義， return {color: 'green'}
在一個模塊中定義接口時候要用一種方式，不能混用
注意，不可以直接對exports賦值新對象
module
模塊的屬性
id：表示模塊的id
uri：表示該模塊文件對應的url
exports：表示模塊返回的接口集合
dependencies：表示依賴模塊集合（數組表示形式）
deps：表示依賴模塊集合（對象表示形式）
一個模塊就是一個文件
define 是一個全局函數， 用來定義模塊
facotry可以是一個函數，也可以是一個對象或字符串
definde( { color: 'tan' } );當參數為 函數時。 默認會有三個參數 ：require，exports，module
definde( function ( require,exports,module ) {
} );define 也可以接受兩個以上的參數，字符串id表示模塊標識。deps是模塊依賴。
define('main',['mina.js'],function ( require,exports,module ) {
//模塊代碼
});id ,deps 參數省略，可以通過構建工具自動生成。
id和 deps 參數， 不屬于CMD規范。
require 是一個方法，接受 模塊標識 作為唯一參數，用來獲取其他模塊提供的接口。
deifne(function ( requrie,exports ) {
//獲取模塊 main 的接口
var main = require('./main');
//調用 模塊 main 中的定義方法
main.init();
});require.async(id,[cb]);
模塊內部異步加載模塊，并在加載完成后執行指定的回調函數。
require.async('./a',function(){});
//加載多個異步模塊
require.async(['./a','./b'],function(){}); //異步加載 所需要的模塊
define(function ( require,expotrs,module ) {
var loadSync = false;
if ( loadSync ) {
var skin = require.async('./skin');
} else {
var header = require.async('./header');
}
});exports , 用來向外提供模塊接口
define(function ( require, exports,module ) {
// 對外提供 foo 屬性
exports.color = 'pink';
// 對外提供 doSomething 方法
exports.doSomething = function() {};
});通過return 提供接口
define(function () {
//通過 return 直接提供接口
return {
color: 'deeppink',
sayName: function () {}
}
});CMD模塊中，經常使用的API 有：define，require,require.async,exports,module.expotrs
定義模塊別名
當引用一些基礎庫的時候，涉及到基礎庫升級，在alias中定義這個模塊時，修改只需要修改這個別名配置。
seajs.config({
alias: {
jquery: 'lib/jquery.1.10.1'
}
});模塊中使用
require('jquery');定義模塊路徑
一些模塊創建目錄結構很深的時候，可以將這個層級定義成一個簡寫的path， 引用這個模塊的時候，直接通過 pathName+模塊名稱。
seajs.config({
paths: {
hd: './modules/header'
}});
模塊中使用
require('hd/header.js');在某些情況下，模塊路徑在運行時才能確定，可以使用 vars 變量來配置。
seajs.config({
vars: {
skin: 'header/skin'
}
});模塊中使用
require('{skin}/skin.js'); //需要使用 {} 來標識映射配置,匹配文件，做映射處理
開發完一些模塊時候，需要打包或壓縮處理，此時文件名可能會不同，可以通過map映射，來找到這個文件，修改成對應的文件名
seajs.config({
map: [
['main.js','main-min.js']
]
});
seajs.use(['main'],function ( main ) {
// do ...
});設置模塊的根目錄
有時候開發用seajs不一定在當前頁面目錄下，此時想引用這個模塊比較麻煩，可以通過base來重定義該頁面模塊文件根目錄。
設置模塊的編碼格式
seajs.config({
charset: 'utf-8'
});seajs.config({
charset: function(url) {
// xxx 目錄下的文件用 gbk 編碼加載
if (url.indexOf('http://example.com/js/xxx') === 0) {
return 'gbk';
}
// 其他文件用 utf-8 編碼
return 'utf-8';
}
});常用的配置項： alias，paths，base
<script type="text/javascript" src="js/lib/seajs-preload.js"></script>
加載js文件
seajs.config({
//預加載jquery文件
preload: ['jquery.js']
});
模塊中文件使用
definde(function ( require,exports,module ) {
$(document).css('background','tan');
});加載css文件
<script type="text/javascript" src="js/seajs-css.js"></script>
definde(function ( require,expotrs,module ) {
require('../css/css.css');
});引入模塊文件時候，requirejs是根據引用了require文件的script標簽中data-main屬性對應的文件所在的目錄
傳遞一個對象可以
傳遞一個函數(commonjs規范的實現)
區別 在于module
id表示模塊的id，id沒有后綴名(注意：seajs有后綴名)
沒有依賴的模塊集合
config配置屬性
在AMD規范定義的模塊中，沒有exports參數，只能通過return將接口暴露出來。
return 對象，這種方式可以將模塊內部多個屬性多個方法暴露出來。
return 方法，這種方式將一個方法返回出來，引用這個模塊就是引用這個接口方法，在它父模塊(引用它的模塊中)可以直接調用該方法。是在自己模塊的作用域中。
設置根目錄
用途：有時候啟動文件不在預期的位置，可以通過baseUrl來設置根目錄
require.config({
baseUrl: 'lib'
});簡寫路徑
require.config({
paths: {
hd: 'module/header'
}
});當存在多個頁面，可能每個頁面引用代碼庫不一樣，可以通過map進行配置，對每個文件配置不同的代碼庫文件。
require.config({
map: {
//modules 模塊下的dom模塊引用的是lib/dom
'modules': {
'dom': 'lib/dom'
},
//modules-new 模塊下的dom模塊引用的是lib/dom.2.0
'modules-new': {
'dom': 'lib/dom.2.0'
}
}
});使用css插件
requireJs 加載css 插件
//配置
require.config({
map: {
'*': {
'css': 'lib/css'
}
}
});
//使用
define(['css!css/index.css'],function () {
});表示配置模塊依賴關系
對于一些定義在全局作用域下的代碼庫，常常獲取不到這類庫的模塊，此時通過定義shim的莫開依賴關系，可以在模塊中獲取到這類代碼庫。
require.config({
shim: {
'lib/jquery': {
//依賴的模塊集合
deps: [],
expotrs: '$'
}
}
});看完上述內容，是不是對JavaScript模塊化開發的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
