溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了javascript模塊依賴管理的用法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
模塊模式定義
模塊是'javascript'的一種設計模式，它為函數定義一個包裝函數，并且該包裝函數的返回值與模塊的API保持一致：
function createModule() {
function hello(name) {
console.log(name + '帥哥你好!');
}
return {
hello: hello
}
}
// 這里調用 createModule 來創建一個模塊實例
var foo = createModule();
foo.hello('fayin');單例模塊模式
仔細研究上面的模塊，我們發現每次調用 createModule 都會生成一個實例，很浪費。于是我們簡單的包裝一下，就有了單例模塊模式：
var myModule = (function createModule() {
function hello(name) {
console.log(name + '帥哥你好!');
}
return {
hello: hello
}
})()
// 調用方式
myModule.hello('fayin')模塊依賴管理
現代大多數模塊依賴管理器本質上都是將這種模塊定義封裝進一個友好的API。其核心的方法可以通過下面的例子一窺究竟：
// 通過模塊的單例模式來保存定義的方法
var MyModules = (function() {
var modules = {};
function define(name, deps, impl) {
console.log(deps.length)
for(var i = 0, len = deps.length; i < len; i++) {
// deps[i] 看做是函數名
// modules[deps[i]] 是保存在 modules 對象上的一個屬性為 deps[i] 的方法
// 每次遍歷將對應的方法綁定到函數名上
deps[i] = modules[deps[i]]
}
// 在modules 對象上保存方法，其函數名為 name
// 如函數 bar ，impl 為 bar 的函數體
modules[name] = impl.apply(null, deps);
console.log( modules)
}
function get(name) {
return modules[name]
}
return {
define: define,
get: get
};
})();
// 這里定義一個函數 bar，返回一個對象
MyModules.define('bar', [], function() {
function hello(who) {
return 'Let me introduce: ' + who;
}
return {
hello: hello
}
})
MyModules.define('foo', ['bar'], function(bar) {
var hungry = 'hippo';
function awesome() {
return bar.hello(hungry).toUpperCase()
}
return {
awesome: awesome
}
})
var bar = MyModules.get('bar')
console.log(bar.hello('fay'))
var foo = MyModules.get('foo')
console.log(foo.awesome())模塊模式的缺陷
從上面的案例我們知道，這個模式是基于函數來實現的，它的優勢這里不在贅述（參考jQuery），而它的缺點也非常的明顯。由于函數的上下文環境是在運行時確定的，在編譯期間無法確定它的依賴關系，在運行期間我們可以隨意更改API，這導致基于函數的模塊模式并不穩定。
而相比之下，ES6的模塊API更加的穩定......
看完上述內容，是不是對javascript模塊依賴管理的用法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
