javascript 模塊依賴(lài)管理的本質(zhì)深入詳解
本文實(shí)例講述了javascript 模塊依賴(lài)管理的本質(zhì)。分享給大家供大家參考,具體如下:
模塊模式定義
模塊是'javascript'的一種設(shè)計(jì)模式,它為函數(shù)定義一個(gè)包裝函數(shù),并且該包裝函數(shù)的返回值與模塊的API保持一致:
function createModule() {
function hello(name) {
console.log(name + '帥哥你好!');
}
return {
hello: hello
}
}
// 這里調(diào)用 createModule 來(lái)創(chuàng)建一個(gè)模塊實(shí)例
var foo = createModule();
foo.hello('fayin');
單例模塊模式
仔細(xì)研究上面的模塊,我們發(fā)現(xiàn)每次調(diào)用 createModule 都會(huì)生成一個(gè)實(shí)例,很浪費(fèi)。于是我們簡(jiǎn)單的包裝一下,就有了單例模塊模式:
var myModule = (function createModule() {
function hello(name) {
console.log(name + '帥哥你好!');
}
return {
hello: hello
}
})()
// 調(diào)用方式
myModule.hello('fayin')
模塊依賴(lài)管理
現(xiàn)代大多數(shù)模塊依賴(lài)管理器本質(zhì)上都是將這種模塊定義封裝進(jìn)一個(gè)友好的API。其核心的方法可以通過(guò)下面的例子一窺究竟:
// 通過(guò)模塊的單例模式來(lái)保存定義的方法
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] 看做是函數(shù)名
// modules[deps[i]] 是保存在 modules 對(duì)象上的一個(gè)屬性為 deps[i] 的方法
// 每次遍歷將對(duì)應(yīng)的方法綁定到函數(shù)名上
deps[i] = modules[deps[i]]
}
// 在modules 對(duì)象上保存方法,其函數(shù)名為 name
// 如函數(shù) bar ,impl 為 bar 的函數(shù)體
modules[name] = impl.apply(null, deps);
console.log( modules)
}
function get(name) {
return modules[name]
}
return {
define: define,
get: get
};
})();
// 這里定義一個(gè)函數(shù) bar,返回一個(gè)對(duì)象
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())
模塊模式的缺陷
從上面的案例我們知道,這個(gè)模式是基于函數(shù)來(lái)實(shí)現(xiàn)的,它的優(yōu)勢(shì)這里不在贅述(參考jQuery),而它的缺點(diǎn)也非常的明顯。由于函數(shù)的上下文環(huán)境是在運(yùn)行時(shí)確定的,在編譯期間無(wú)法確定它的依賴(lài)關(guān)系,在運(yùn)行期間我們可以隨意更改API,這導(dǎo)致基于函數(shù)的模塊模式并不穩(wěn)定。
而相比之下,ES6的模塊API更加的穩(wěn)定......
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
動(dòng)態(tài)的改變IFrame的高度實(shí)現(xiàn)IFrame自動(dòng)伸展適應(yīng)高度
動(dòng)態(tài)的改變IFrame的高度,實(shí)現(xiàn)IFrame自動(dòng)伸展,父頁(yè)面也自動(dòng)神縮原理: 在IFrame子頁(yè)面一加載的時(shí)候,調(diào)用父IFrame對(duì)象,改變其高度2012-12-12
JavaScript轉(zhuǎn)換數(shù)據(jù)庫(kù)DateTime字段類(lèi)型方法
下面小編就為大家?guī)?lái)一篇JavaScript轉(zhuǎn)換數(shù)據(jù)庫(kù)DateTime字段類(lèi)型方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
js 打開(kāi)新頁(yè)面在屏幕中間的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 打開(kāi)新頁(yè)面在屏幕中間的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
js彈出層永遠(yuǎn)居中實(shí)現(xiàn)思路及代碼
彈出層永遠(yuǎn)居中的方法有很多,在本文為大家詳細(xì)介紹下使用js是如何輕松實(shí)現(xiàn)的,喜歡的朋友可以參考下2013-11-11
使用forEach和ES6實(shí)現(xiàn)tab切換的示例代碼
tab切換在很多菜單欄中都可以用到,本文主要介紹了使用forEach和ES6實(shí)現(xiàn)tab切換的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
javascript工廠模式和構(gòu)造函數(shù)模式創(chuàng)建對(duì)象方法解析
本文主要對(duì)javascript工廠模式和構(gòu)造函數(shù)模式創(chuàng)建對(duì)象方法進(jìn)行解析,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2016-12-12
基于JS實(shí)現(xiàn)01支付后的10秒倒計(jì)時(shí)
這是一個(gè)通過(guò)js實(shí)現(xiàn)的支付后的頁(yè)面,點(diǎn)擊支付會(huì)跳出一個(gè)彈窗,提示你是否要確定支付,確定后進(jìn)入付后界面,該頁(yè)面有著10秒倒計(jì)時(shí),計(jì)時(shí)結(jié)束后便會(huì)返回原界面,也可以選擇立刻返回,來(lái)返回主頁(yè)面,這篇文章主要介紹了基于JS實(shí)現(xiàn)01支付后的10秒倒計(jì)時(shí),需要的朋友可以參考下2023-03-03

