namespace.js Javascript的命名空間庫

更新時間：2011年10月11日 00:09:21 作者：

命名空間的好處已經(jīng)耳熟能詳，但是JS中并沒有原生態(tài)支持命名空間，這個庫就是為js提供命名空間的功能。

github：https://github.com/hirokidaichi/namespace-js
定義Namespace對象：
var Namespace
現(xiàn)在來具體看一下Namespace對象的定義，它是一個NamespaceDefinition對象。該對象是一個函數(shù)對象（NamespaceDefinition對象的構(gòu)造函數(shù)，如果不給參數(shù)的話就默認(rèn)生成一個main的命名空間），還有三個屬性，Object，Definition，Proc。其值依次為NamespaceObjectFactory，NamespaceDefinition，createProcedure函數(shù)對象類。

復(fù)制代碼代碼如下:

 
var createNamespace = function(fqn){ 
return new NamespaceDefinition( 
NamespaceObjectFactory.create(fqn || 'main') 
); 
}; 
merge(createNamespace, { 
'Object' : NamespaceObjectFactory, 
Definition: NamespaceDefinition, 
Proc : createProcedure 
}); 

NamespaceObjectFactory：根據(jù)fqn生成NamespaceObject對象。
NamespaceObjectFactory對象只有一個create方法，參數(shù)就是命名空間的名字（Fully Qualified Name）。該方法有一個閉包環(huán)境，該環(huán)境里有一個cache變量用于緩存所有生成的NamespaceObject對象。
一個NamespaceObject對象包含有三個屬性，stash(記錄當(dāng)前namespace)，fqn（namespace名字），proc（createProcedure對象）。方法包括：enqueue，call，valueof，merge，getStash，getExport

復(fù)制代碼代碼如下:

 
var NamespaceObject = function _Private_Class_Of_NamespaceObject(fqn){ 
merge(this, { 
stash: { CURRENT_NAMESPACE : fqn }, 
fqn : fqn, 
proc : createProcedure() 
}); 
}; 
merge(NamespaceObject.prototype, { 
enqueue: function(context) { 
this.proc.next(context); 
}, 
call: function(state,callback) { 
this.proc.call(state, callback); 
}, 
valueOf: function() { 
return "#NamespaceObject<" + this.fqn + ">"; 
}, 
merge: function(obj) { 
merge(this.stash,obj); 
return this; 
}, 
getStash: function() { 
return this.stash; 
}, 
getExport: function(importName) { 
if (importName === '*') return this.stash; 

var importNames = importName.split(/,/), 
retStash = {}; 
for(var i = 0,l=importNames.length;i<l;i++){ 
retStash[ importNames[i] ] = this.stash[ importNames[i] ]; 
} 
return retStash; 
} 
}); 
var NamespaceObjectFactory = (function() { 
var cache = {}; 
return { 
create :function(fqn){ 
_assertValidFQN(fqn); 
return (cache[fqn] || (cache[fqn] = new NamespaceObject(fqn))); 
} 
}; 
})(); 

NamespaceDefinition：
該對象包括5個屬性，namespaceObject，requires，useList，stash，defineCallback。并提供了相關(guān)的方法：use，_mergeStashWithNS，loadImport，define，getStash，valueOf，apply
該對象是namespace庫的核心，它提供了所有需要的方法。
初始化的時候，在NamespaceObject的proc的steps隊列里追加一個函數(shù)對象，該函數(shù)將調(diào)用apply方法。

復(fù)制代碼代碼如下:

 
var NamespaceDefinition = function _Private_Class_Of_NamespaceDefinition(nsObj) { 
merge(this, { 
namespaceObject: nsObj, 
requires : [], 
useList : [], 
stash : {}, 
defineCallback : undefined 
}); 
var _self = this; 
nsObj.enqueue(function($c){ _self.apply($c); }); 
}; 
merge(NamespaceDefinition.prototype, { 
use: function(syntax){ 
this.useList.push(syntax); 
var splitted = syntax.split(/\s+/); 
var fqn = splitted[0]; 
var importName = splitted[1]; 
_assertValidFQN(fqn); 
this.requires.push(function($c){ 
var context = this; 
var require = NamespaceObjectFactory.create(fqn); 
require.call(this,function(state){ 
context.loadImport(require,importName); 
$c(); 
}); 
}); 
return this; 
}, 
_mergeStashWithNS: function(nsObj){ 
var nsList = nsObj.fqn.split(/\./); 
var current = this.getStash(); 

for(var i = 0,l=nsList.length;i<l-1;i++){ 
if( !current[nsList[i]] ) current[nsList[i]] = {}; 
current = current[nsList[i]]; 
} 

var lastLeaf = nsList[nsList.length-1]; 
current[lastLeaf] = merge(current[lastLeaf] || {}, nsObj.getStash()); 
}, 
loadImport: function(nsObj,importName){ 
if( importName ){ 
merge( this.stash, nsObj.getExport(importName) ); 
}else{ 
this._mergeStashWithNS( nsObj ); 
} 
}, 
define: function(callback){ 
var nsDef = this, nsObj = this.namespaceObject; 
this.defineCallback = function($c) { 
var ns = { 
provide : function(obj){ 
nsObj.merge(obj); 
$c(); 
} 
}; 
merge(ns, nsDef.getStash()); 
merge(ns, nsObj.getStash()); 
callback(ns); 
}; 
}, 
getStash: function(){ 
return this.stash; 
}, 
valueOf: function(){ 
return "#NamespaceDefinition<"+this.namespaceObject+"> uses :" + this.useList.join(','); 
}, 
apply: function(callback){ 
var nsDef = this; 
createProcedure(nsDef.requires) 
.next(nsDef.defineCallback) 
.call(nsDef,function(){ 
callback( nsDef.getStash() ); 
}); 
} 
}); 

createProcedure：該對象是一個函數(shù)對象，返回Procedure對象的next方法的結(jié)果。
Procedure：
Procedure對象有三個屬性：state，steps，_status（默認(rèn)為init）。提供一下幾種方法：next，isRunnig，enqueue，dequeue，call，_invoke。

復(fù)制代碼代碼如下:

 
var Namespace = (function(){ 
/* utility */ 
var merge = function(target, source){ // 把source的所有自身屬性copy到target中去，并返回target對象 4 for(var p in source) 
if(source.hasOwnProperty( p )) target[p] = source[p]; 
return target; 
}; 
var _assertValidFQN = function(fqn){ // 驗證namespace名字的有效性，必須是小寫英數(shù)字，下劃線和點 
if(!(/^[a-z0-9_.]+/).test(fqn)) throw('invalid namespace'); 
}; 

var Procedure = function _Private_Class_Of_Proc(){ 
merge(this, { 
state : {}, // 狀態(tài) 
steps : [], // 存儲狀態(tài)的數(shù)組 
_status: 'init' 
}); 
}; 
merge(Procedure.prototype, { 
next: function(state){ // 如果state有值，存入到steps隊列隊尾，然后返回this 
if(state) this.enqueue(state); 
return this; 
}, 
isRunning: function(){ // 判定是否為running狀態(tài) 
return (this._status === 'running'); 
}, 
enqueue: function(state){ // 這里其實是用數(shù)組steps來模擬隊列，enqueue就是從隊尾入隊列 
this.steps.push(state); 
}, 
dequeue: function(){ // dequeue就是從對頭出隊列 
return this.steps.shift(); 
}, 
call: function(initialState,callback){ // 
if( this.isRunning() ) throw("do not run twice"); 

this.state = initialState || {}; // 保存當(dāng)前state（NamespaceDefinition對象） 
this.enqueue(function($c){ // 函數(shù)入隊列steps 
$c(); // 執(zhí)行傳進(jìn)來的函數(shù) 
if(callback)callback(this); // 如果存在回調(diào)函數(shù)的，執(zhí)行回調(diào)函數(shù) 
}); 
this._status = 'running'; // 設(shè)置狀態(tài)為running 
this._invoke(); // 調(diào)用_invoke 
}, 
_invoke: function(){ 
var _self = this; 
var step = _self.dequeue(); // 對象出隊列(FIFO) 
if( !step ){ 
_self._status = 'finished'; // 如果隊列為空，則設(shè)置狀態(tài)為finished 
return; 
} // step是數(shù)組的情況下不走這條路徑 
if( step.call ) { // 如果該對象是函數(shù)對象的時候，則執(zhí)行該call方法，并指定內(nèi)部this為_self.state，回調(diào)函數(shù)里面繼續(xù)調(diào)用_invoke 
return step.call( _self.state,function _cont(state){ 
if( state ) _self.state = state; 
_self._invoke(); 
}); 
} 
var finishedProcess = 0; 
if( step.length === 0 ) _self._invoke(); // 如果該數(shù)組長度為0，則調(diào)用_invoke 
for(var i =0,l=step.length;i<l;i++){ // 針對數(shù)組里的所有對象（函數(shù)對象）調(diào)用各自的call方法，并指定各自函數(shù)的this為_self.state對象（nsDef對象） 
step[i].call(_self.state,function _joinWait(){ 
finishedProcess++; 
if( finishedProcess == l ){ 
_self._invoke(); 
} 
}); 
} 
} 
}); 

var createProcedure = function(state) { 
return new Procedure().next(state); 
}; 

var NamespaceObject = function _Private_Class_Of_NamespaceObject(fqn){ 
merge(this, { 
stash: { CURRENT_NAMESPACE : fqn }, 
fqn : fqn, 
proc : createProcedure() 
}); 
}; 
merge(NamespaceObject.prototype, { 
enqueue: function(context) { 
this.proc.next(context); 
}, 
call: function(state,callback) { 
this.proc.call(state, callback); 
}, 
valueOf: function() { 
return "#NamespaceObject<" + this.fqn + ">"; 
}, 
merge: function(obj) { 
merge(this.stash,obj); 
return this; 
}, 
getStash: function() { 
return this.stash; 
}, 
getExport: function(importName) { 
if (importName === '*') return this.stash; 

var importNames = importName.split(/,/), 
retStash = {}; 
for(var i = 0,l=importNames.length;i<l;i++){ 
retStash[ importNames[i] ] = this.stash[ importNames[i] ]; 
} 
return retStash; 
} 
}); 
var NamespaceObjectFactory = (function() { 
var cache = {}; 
return { 
create :function(fqn){ 
_assertValidFQN(fqn); 
return (cache[fqn] || (cache[fqn] = new NamespaceObject(fqn))); 
} 
}; 
})(); 

var NamespaceDefinition = function _Private_Class_Of_NamespaceDefinition(nsObj) { 
merge(this, { 
namespaceObject: nsObj, 
requires : [], 
useList : [], 
stash : {}, 
defineCallback : undefined 
}); 
var _self = this; 
nsObj.enqueue(function($c){ _self.apply($c); }); 
}; 
merge(NamespaceDefinition.prototype, { 
use: function(syntax){ // 使用namespace 
this.useList.push(syntax); // 該namespace字符串存入數(shù)組useList 
var splitted = syntax.split(/\s+/); // namespace和它的對象使用空格分開 
var fqn = splitted[0]; // 取得namespace 
var importName = splitted[1]; // 取得namespace中的對象 
_assertValidFQN(fqn); 
this.requires.push(function($c){ // 放一個函數(shù)到requires數(shù)組中 
var context = this; 
var require = NamespaceObjectFactory.create(fqn); // 獲取指定的NamespaceObject對象，之前生成過得對象可以直接從緩存中獲取 
require.call(this,function(state){ // 調(diào)用NamespaceObject對象的call方法 
context.loadImport(require,importName); 
$c(); 
}); 
}); 
return this; 
}, 
_mergeStashWithNS: function(nsObj){ 
var nsList = nsObj.fqn.split(/\./); 
var current = this.getStash(); 

for(var i = 0,l=nsList.length;i<l-1;i++){ 
if( !current[nsList[i]] ) current[nsList[i]] = {}; 
current = current[nsList[i]]; 
} 

var lastLeaf = nsList[nsList.length-1]; 
current[lastLeaf] = merge(current[lastLeaf] || {}, nsObj.getStash()); 
}, 
loadImport: function(nsObj,importName){ 
if( importName ){ 
merge( this.stash, nsObj.getExport(importName) ); 
}else{ 
this._mergeStashWithNS( nsObj ); 
} 
}, 
define: function(callback){ 
var nsDef = this, nsObj = this.namespaceObject; 
this.defineCallback = function($c) { // 給defineCallback賦值，同時定義一下該回調(diào)函數(shù)的上下文，nsDef和nsObj兩個對象。 
var ns = { 
provide : function(obj){ 
nsObj.merge(obj); 
$c(); 
} 
}; 
merge(ns, nsDef.getStash()); 
merge(ns, nsObj.getStash()); 
callback(ns); 
}; 
}, 
getStash: function(){ 
return this.stash; 
}, 
valueOf: function(){ 
return "#NamespaceDefinition<"+this.namespaceObject+"> uses :" + this.useList.join(','); 
}, 
apply: function(callback){ 
var nsDef = this; 
createProcedure(nsDef.requires) 
.next(nsDef.defineCallback) 
.call(nsDef,function(){ 
callback( nsDef.getStash() ); 
}); 
} 
}); 

var createNamespace = function(fqn){ 
return new NamespaceDefinition( 
NamespaceObjectFactory.create(fqn || 'main') 
); 
}; 
merge(createNamespace, { 
'Object' : NamespaceObjectFactory, 
Definition: NamespaceDefinition, 
Proc : createProcedure 
}); 
return createNamespace; 
})(); 

追加定義Namespace支持的方法：
Namespace.use
Namespace.fromInternal
Namespace.GET
Namespace.fromExternal

復(fù)制代碼代碼如下:

 
Namespace.use = function(useSyntax){ return Namespace().use(useSyntax); } 
Namespace.fromInternal = Namespace.GET = (function(){ 
var get = (function(){ 
var createRequester = function() { 
var xhr; 
try { xhr = new XMLHttpRequest() } catch(e) { 
try { xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) { 
try { xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) { 
try { xhr = new ActiveXObject("Msxml2.XMLHTTP") } catch(e) { 
try { xhr = new ActiveXObject("Microsoft.XMLHTTP") } catch(e) { 
throw new Error( "This browser does not support XMLHttpRequest." ) 
} 
} 
} 
} 
} 
return xhr; 
}; 
var isSuccessStatus = function(status) { 
return (status >= 200 && status < 300) || 
status == 304 || 
status == 1223 || 
(!status && (location.protocol == "file:" || location.protocol == "chrome:") ); 
}; 

return function(url,callback){ 
var xhr = createRequester(); 
xhr.open('GET',url,true); 
xhr.onreadystatechange = function(){ 
if(xhr.readyState === 4){ 
if( isSuccessStatus( xhr.status || 0 )){ 
callback(true,xhr.responseText); 
}else{ 
callback(false); 
} 
} 
}; 
xhr.send('') 
}; 
})(); 

return function(url,isManualProvide){ 
return function(ns){ 
get(url,function(isSuccess,responseText){ 
if( isSuccess ){ 
if( isManualProvide ) 
return eval(responseText); 
else 
return ns.provide( eval( responseText ) ); 
}else{ 
var pub = {}; 
pub[url] = 'loading error'; 
ns.provide(pub); 
} 
}); 
}; 
}; 
})(); 

Namespace.fromExternal = (function(){ 
var callbacks = {}; 
var createScriptElement = function(url,callback){ 
var scriptElement = document.createElement('script'); 

scriptElement.loaded = false; 

scriptElement.onload = function(){ 
this.loaded = true; 
callback(); 
}; 
scriptElement.onreadystatechange = function(){ 
if( !/^(loaded|complete)$/.test( this.readyState )) return; 
if( this.loaded ) return; 
scriptElement.loaded = true; 
callback(); 
}; 
scriptElement.src = url; 
document.body.appendChild( scriptElement ); 
return scriptElement.src; 
}; 
var domSrc = function(url){ 
return function(ns){ 
var src = createScriptElement(url,function(){ 
var name = ns.CURRENT_NAMESPACE; 
var cb = callbacks[name]; 
delete callbacks[name]; 
cb( ns ); 
}); 
} 
}; 
domSrc.registerCallback = function(namespace,callback) { 
callbacks[namespace] = callback; 
}; 
return domSrc; 
})(); 

try{ module.exports = Namespace; }catch(e){} 

具體看一個例子：

復(fù)制代碼代碼如下:

 
Namespace('logtest') 
.define(function (ns) { 
console.log(2); 
ns.provide({ 
log : function () { console.log(3); } 
}); 
}); 

console.log(4); 

Namespace 
.use('logtest') 
.apply( function (ns) { 
console.log(5); 
ns.logtest.log(); 
}); 

1：Namespace('logtest') => new NamespaceDefinition(NamespaceObjectFactory.create('logtest'))
即生成一個NamespaceDefinition對象，該對象是由NamespaceObject對象來初始化的，該對象同時還有三個屬性，Object，Definition，Proc。其值依次為 NamespaceObjectFactory，NamespaceDefinition，createProcedure函數(shù)對象類。Namespace('logtest') 返回的結(jié)果就是生成的NamespaceDefinition對象，然后調(diào)用其define方法，初始化defineCallback。此時僅僅是定義，不做具體的動作。

復(fù)制代碼代碼如下:

 
define: function(callback){ 
var nsDef = this, nsObj = this.namespaceObject; 
this.defineCallback = function($c) { // 給defineCallback賦值，同時定義一下該回調(diào)函數(shù)的上下文，nsDef和nsObj兩個對象。 
var ns = { 
provide : function(obj){ 
nsObj.merge(obj); 
$c(); 
} 
}; 
merge(ns, nsDef.getStash()); 
merge(ns, nsObj.getStash()); 
callback(ns); 
}; 
}, 

2：使用之前定義的namespace里面的對象，Namespace.use() => Namespace().use() => Namespace('main').use()。調(diào)用use的時候初始化requires數(shù)組。

復(fù)制代碼代碼如下:

 
use: function(syntax){ // 使用namespace 
this.useList.push(syntax); // 該namespace字符串存入數(shù)組useList 
var splitted = syntax.split(/\s+/); // namespace和它的對象使用空格分開 
var fqn = splitted[0]; // 取得namespace 
var importName = splitted[1]; // 取得namespace中的對象 
_assertValidFQN(fqn); 
this.requires.push(function($c){ // 放一個函數(shù)到requires數(shù)組中 
var context = this; 
var require = NamespaceObjectFactory.create(fqn); // 獲取指定的NamespaceObject對象，之前生成過得對象可以直接從緩存中獲取 
require.call(this,function(state){ // 調(diào)用NamespaceObject對象的call方法 
context.loadImport(require,importName); 
$c(); 
}); 
}); 
return this; 
}, 

3：調(diào)用main的apply方法?？匆幌戮唧w的apply方法

復(fù)制代碼代碼如下:

 
apply: function(callback){ 
var nsDef = this; 
createProcedure(nsDef.requires) 
.next(nsDef.defineCallback) 
.call(nsDef,function(){ 
callback( nsDef.getStash() ); 
}); 
} 

取出requires數(shù)組里面的對象生成Proc對象，并把該requires數(shù)組里的對象入隊列steps中，還有nsDef.defineCallback也入隊列（此例中為undefined），調(diào)用Proc的call方法。第一個參數(shù)是nsDef，第二個參數(shù)是回調(diào)函數(shù)。
具體使用方法：
在定義Namespace的時候，所有的定義放在define里面，并且以匿名函數(shù)的形式定義。function (ns) {　　// 具體的實現(xiàn)　　// 定義對外公開的對象，外部在use該nsName之后，就可以通過ns.nsName.key()來調(diào)用它　　ns.provide({ key : value});}
使用namespace.js的好處，所有的定義都是在需要的時候才開始執(zhí)行的，也就是在具體使用的時候才開始解析定義。

ps：具體內(nèi)部調(diào)用關(guān)系還是沒有弄明白，今后有時間再整理，這篇太亂了。

您可能感興趣的文章: