namespace.js Javascript 名前空間 library_javascript のヒント-jsチュートリアル-php.cn

github: https://github.com/hirokidaichi/namespace-js
Namespace オブジェクトを定義します:
var Namespace
次に、NamespaceDefinition オブジェクトである Namespace オブジェクトの定義を詳しく見てみましょう。。このオブジェクトは関数オブジェクト (NamespaceDefinition オブジェクトのコンストラクター。パラメーターが指定されていない場合、デフォルトでメインの名前空間が生成されます) であり、Object、Definition、および Proc の 3 つの属性があります。その値は、NamespaceObjectFactory、NamespaceDefinition、および createProcedure 関数オブジェクトクラスです。

コードをコピーコードは次のとおりです。

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

 

NamespaceObjectFactory: fqn に基づいて NamespaceObject オブジェクトを生成します。
NamespaceObjectFactory オブジェクトには create メソッドが 1 つだけあり、パラメータはネームスペースの名前 (完全修飾名) です。このメソッドにはクロージャ環境があり、生成されたすべての NamespaceObject オブジェクトをキャッシュするために使用されるキャッシュ変数があります。
NamespaceObject オブジェクトには、stash (現在の名前空間を記録)、fqn (名前空間名)、proc (createProcedure オブジェクト) の 3 つの属性が含まれています。メソッドには、enqueue、call、valueof、merge、getStash、getExport が含まれます。

コードをコピーコードは次のとおりです:

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 
}, 
merge: function(obj) { 
merge(this.stash,obj); 🎜>93 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;i104 retStash[ importNames[i] ] = this.stash[ importNames[i] ]; 
} 
return retStash ; 
} 
}); 
var NamespaceObjectFactory = (function() { 
var queue = {}; 
return { 
作成: function(fqn ){ 
_assertValidFQN(fqn); 
return (cache[fqn] || (cache[fqn] = new NamespaceObject(fqn))); 
} 
} ; 
})(); 

 
NamespaceDefinition: 
このオブジェクトには、namespaceObject、requires、useList、stash、defineCallback の 5 つのプロパティが含まれます。関連メソッドも提供します: use、_mergeStashWithNS、loadImport、define、getStash、valueOf、apply 
 このオブジェクトは、必要なメソッドをすべて提供する名前空間ライブラリの中核です。 
初期化中に、NamespaceObject の proc のステップ キューに関数オブジェクトを追加すると、関数は apply メソッドを呼び出します。 

コードをコピー

コードは次のとおりです:

 
var NamespaceDefinition = function _Private_Class_Of_NamespaceDefinition(nsObj) { 
merge(this, { 
namespaceObject: nsObj, 
Required : [], 
useList : [] 、
スタッシュ : {}、
定義コールバック : 未定義 
}); 
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 = 分割[0]; 
_assertValidFQN(fqn); 
this.requires.push($c); 
var context = this; 
var require = NamespaceObjectFactory.create(fqn); 
require.call(this,function(state){ 
context.loadImport(require,importName) ; 
$c(); 
}); 
}, 
_mergeStashWithNS: function(nsObj) >148 var nsList = nsObj.fqn.split(/./); 
var current = this.getStash(); 

for(var i = 0,l=nsList.length; i152 if( !current[nsList[i]] ) current[nsList[i]] = {}; 
current = current[nsList[i]]; 🎜>154 } 

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 ); 
} 
}, 
定義: function(callback){ 
var nsDef = this, nsObj = this.namespaceObject; 
this.defineCallback = function($c) { 
var ns = { 
提供: function(obj){ 
nsObj.merge(obj); 
$c(); 
} 
}; 
merge(ns, nsDef.getStash()); 
merge(ns, nsObj.getStash()); 
コールバック(ns); 
}; 
}, 
getStash: function(){ 
return this.stash; 
}, 
valueOf: function(){ 
return "#NamespaceDefinition<" this.namespaceObject "> を使用します:" this.useList.join(','); 
}, 
apply: function(callback){ 
var nsDef = this; 
createProcedure(nsDef.requires) 
.next(nsDef.defineCallback) 
.call(nsDef,function(){ 
callback( nsDef.getStash() ); 
}); 
} 
}); 

 
createProcedure: このオブジェクトは関数オブジェクトであり、Procedure オブジェクトの次のメソッドの結果を返します。 
Procedure: 
Procedure オブジェクトには 3 つのプロパティがあります: state、steps、_status(init 

代打

代打以下のように:

 
var Namespace = (function(){ 
/* ユーティリティ */ 
var merge = function(target, source){ // ソースのすべてのプロパティをターゲットにコピーします Go とreturn ターゲット オブジェクト 4 for(var p in source) 
if(source.hasOwnProperty( p )) target[p] = source[p] 
}; 8 var _assertValidFQN = function(fqn){ // 名前空間名の有効性を検証します。名前空間名は小文字の英数字、アンダースコア、ドット 
である必要があります if(!(/^[a-z0-9_.] /) .test (fqn)) throw('無効な名前空間'); 

var Procedure = function _Private_Class_Of_Proc(){ 
merge(this, { 
状態 : { }, // ステータス 
ステップ : [], // ステータスを格納する配列 
_status: 'init' 
}); 
}); prototype, { 
next: function(state){ // state に値がある場合、それをステップ キューの最後に格納し、この 
if(state) this.enqueue(state) を返します。 ; 
return this; 
}, 
isRunning: function(){ // 実行中かどうかを判断します status
return (this._status === 'running'); 🎜>26 }, 
enqueue: function(state){ // ここでは、実際に配列のステップを使用してキューをシミュレートし、enqueue をキューの最後からキューに入れます 
this。 step.push(state); 
} , 
dequeue: function(){ // デキューとは、反対側からのデキューを意味します 
return this.steps.shift(); , 
call: function(initialState,callback) { // 
if( this.isRunning() ) throw("2 回実行しないでください"); 

this.state = InitialState || {}; // 現在の状態を保存します (NamespaceDefinition オブジェクト) 
this.enqueue(function($c){ // 関数はキューに登録されています 
$c(); // 関数を実行しますpass in 
if(callback)callback(this) ; // コールバック関数がある場合は、コールバック関数を実行します。 
}); 
this._status = 'running';実行中のステータス 
this._invoke(); // _invoke を呼び出します 
}, 
_invoke: function(){ 
var _self = this; _self.dequeue(); // オブジェクトのデキュー (FIFO) 
if( !step ){ 
_self._status = 'finished' // キューが空の場合、ステータスを終了に設定します 
return; 
} // step が配列の場合はこのパスをたどらないでください
if( step.call ) { // オブジェクトが関数オブジェクトの場合、call メソッドを実行し、指定します内部の this を _self.state として扱い、コールバック関数で呼び出しを継続します。 
return step.call( _self.state,function _cont(state){ 
if( state ) _self.state = state; 
_self._invoke(); 
}) ; 
} 
var completedProcess = 0; 
if( step.length === 0 ) _self._invoke(); // 配列の長さが 0 の場合、_invoke 
for(var i =0,l=step.length;i63 _invoke(); 
} 
}); 69 
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 "#NamespaceObject90 }, 
マージ: function(obj) { 
merge(this.stash,obj); 
}, 
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 
} 
} ); 
var NamespaceObjectFactory = (function() { 
var queue = {}; 
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, 
Required : [], 
useList : [], 
スタッシュ : {}, 
定義コールバック : 未定義 
}); 
var _self = this; nsObj.enqueue(function($c){ _self.apply($c) ); });; 
merge(NamespaceDefinition.prototype, { 
use: function(syntax){ // 名前空間を使用します 
this.useList.push(syntax); // 名前空間文字列は配列に格納されますuseList 
var splitted = syntax.split(/s /); // 名前空間とそのオブジェクトはスペースで区切られます 
var fqn = splitted[0] // 名前空間を取得します 
var importName = splitted [1]; // 名前空間内のオブジェクトを取得します 
_assertValidFQN(fqn); 
this.requires.push(function($c){ // 関数を require 配列に入れます 
var context = this; 
var require = NamespaceObjectFactory.create(fqn); // 指定された NamespaceObject オブジェクトをキャッシュから直接取得できます。 
require.call(this,function(state) ){ // NamespaceObject オブジェクトの呼び出しメソッドを呼び出します。 
context.loadImport(require,importName) 
}); >145 これを返します; 
}, 
_mergeStashWithNS: function(nsObj){ 
var nsList = nsObj.fqn.split(/./); 
var current = this.getStash () ; 

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

var lastLeaf = nsList.length-1; >157 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 に値を代入し、コールバック関数コンテキスト、2 つのオブジェクト、nsDef と nsObj。 
var ns = { 
提供: function(obj){ 
nsObj.merge(obj); 
$c() } 
}; 
マージ(ns, nsDef.getStash()); 
コールバック(ns); 
} , 
getStash: function(){ 
return this.stash; 
}, 
valueOf: function(){ 
return "#NamespaceDefinition<" > を使用します:" this.useList.join(','); 
}, 
apply: function(callback){ 
var nsDef = this; 
createProcedure(nsDef.必要) 
.next(nsDef.defineCallback) 
.call(nsDef,function(){ 
callback( nsDef.getStash() ); 
}); } 
}); 

var createNamespace = function(fqn){ 
return new NamespaceDefinition( 
NamespaceObjectFactory.create(fqn || 'main') 
); 
}; 
merge(createNamespace, { 
'オブジェクト' : NamespaceObjectFactory, 
定義: NamespaceDefinition, 
Proc : createProcedure 
}); 
return createNamespace; 
})(); 

 
Namespace でサポートされるメソッドを追加で定義します: 
Namespace.use 
Namespace.fromInternal 
Namespace。 GET 
Namespace.fromExternal 




コードをコピー

コードは次のとおりです:

 
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( "このブラウザは XMLHttpRequest をサポートしていません。" ) 
} 
} 
} 
} 
} 
return xhr; 
}; 
var isSuccessStatus = function(status) { 
return (ステータス >= 200 && ステータス 21 ステータス == 304 || 
ステータス == 1223 || 
(!ステータス && (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{ 
コールバック(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 ) ); pub = {}; 
pub[url] = '読み込みエラー' 
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; 69 callback(); 
}; 
scriptElement.onreadystatechange = function(){ 
if( !/^(loaded|complete)$/.test( this.readyState )) return; 🎜>73 if( this.loaded ) return; 
scriptElement.loaded = true; 
scriptElement.src = url; .body.appendChild( scriptElement ); 
return scriptElement.src; 
var domSrc = function(url){ 
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] = コールバック; 
}; 
domSrc を返します。 
})(); 

try{ module.exports = 名前空間; }catch(e){} 

 
 具体的な例: 




复制代幣


 代価次のように: 

 

1 名前空間('logtest')
2 .define(function (ns) {
3 console.log(2);

4 ns.provide({ 5 ログ : function () { console.log(3) } 6 }); 8 9 console.log(4); 10 11 名前空間

12 .use('logtest')

13 .apply( function (ns) { 
14 console.log(5); 
15 ns.logtest .log(); 
16 }); 

1：名前空間('logtest') => new NamespaceDefinition(NamespaceObjectFactory.create('logtest')) 
 つまり、1 つの NamespaceDefinition オブジェクトを生成します。このオブジェクトは、NamespaceObject オブジェクトによって初期化され、同時に 3 つのプロパティ、Object、Definition、Proc も持ちます。その値は、NamespaceObjectFactory に依存します。 ，NamespaceDefinition，createProcedure 関数オブジェクト クラス。Namespace('logtest') が返される結果は生成された NamespaceDefinition オブジェクトであり、その後、その define メソッドを使用して defineCallback が初期化されます。このときのみ、不特定の動作が行われます。 

复制代码

代码如下:

166 定義: function(callback){
167 var nsDef = this、nsObj = this.namespaceObject;
168 this.defineCallback = function($c) { //defineCallback 値を定義し、同時に次の回帰関数の上下文、nsDef と nsObj の 2 つのオブジェクトを定義します。
169 var ns = {
170 は次を提供します: function(obj){
171 nsObj.merge(obj);

172 $c(); 173 } 174 }; 175 merge(ns, nsDef.getStash()); 176 merge(ns, nsObj.getStash()); 177 コールバック(ns); 178 };

179 }、

2: 以前に定義した名前空間、Namespace.use() => Namespace().use() => Namespace('main').use() 内のオブジェクトを使用します。 use を呼び出すときに要件配列を初期化します。

コードをコピーコードは次のとおりです:

 
use: function(syntax ){ // 名前空間を使用します 
this.useList.push(syntax); // 名前空間文字列は配列 useList 
に格納されます var splitted = syntax.split(/s /);そのオブジェクトはスペースで区切って使用されます 
var fqn = splitted[0]; // 名前空間を取得します 
var importName = splitted[1]; // 名前空間内のオブジェクトを取得します 
_assertValidFQN(fqn); 
this.requires.push(function($c){ // 関数を require 配列に入れます 
var context = this; 
var require = NamespaceObjectFactory.create(fqn); //指定された NamespaceObject オブジェクトを取得します。以前に生成されたオブジェクトはキャッシュから直接取得できます
require.call(this,function(state){ // NamespaceObject オブジェクトの call メソッドを呼び出します
context.loadImport(require ,importName); 
$c(); 
}); 
}, 

: main の apply メソッドを呼び出します。具体的な適用メソッドを見てみましょう 

コードをコピーしますコードは次のとおりです: 186 適用: function(callback ){

187 var nsDef = this;

188 createProcedure(nsDef.requires) 
189 .next(nsDef.defineCallback) 
190 .call(nsDef,function() { 
191 callback ( nsDef.getStash() ); 
192 }); 

 
requires 配列内のオブジェクトを取り出して Proc オブジェクトを生成します。 require 配列内のオブジェクトをキューに入れる step 、 nsDef.defineCallback もキューに登録され (この例では未定義)、Proc の call メソッドが呼び出されます。最初のパラメータは nsDef で、2 番目のパラメータはコールバック関数です。 
具体的な使用法: 
名前空間を定義するとき、すべての定義はdefineに配置され、匿名関数の形式で定義されます。 function (ns) { // 特定の実装 // 外部に公開されるオブジェクトを定義します。 nsName を使用した後、外部パーティは ns.nsName.key() ns.provide({ key : value} を介して呼び出すことができます)。 );} 

namespace.js を使用する利点は、すべての定義が必要な場合にのみ実行されること、つまり、定義が実際に使用される場合にのみ解析されることです。

追伸: 具体的な内部呼び出し関係はまだ明確ではありません。今後時間があるときに整理します。