namespace.js Javascript的命名空間庫(kù)
更新時(shí)間：2011年10月11日 00:09:21 作者：
命名空間的好處已經(jīng)耳熟能詳，但是JS中并沒(méi)有原生態(tài)支持命名空間，這個(gè)庫(kù)就是為js提供命名空間的功能。
github：https://github.com/hirokidaichi/namespace-js
定義Namespace對(duì)象：
var Namespace
現(xiàn)在來(lái)具體看一下Namespace對(duì)象的定義，它是一個(gè)NamespaceDefinition對(duì)象。該對(duì)象是一個(gè)函數(shù)對(duì)象（NamespaceDefinition對(duì)象的構(gòu)造函數(shù)，如果不給參數(shù)的話就默認(rèn)生成一個(gè)main的命名空間），還有三個(gè)屬性，Object，Definition，Proc。其值依次為NamespaceObjectFactory，NamespaceDefinition，createProcedure函數(shù)對(duì)象類。
196 var createNamespace = function(fqn){
197 return new NamespaceDefinition(
198 NamespaceObjectFactory.create(fqn || 'main')
199 );
200 };
201 merge(createNamespace, {
202 'Object' : NamespaceObjectFactory,
203 Definition: NamespaceDefinition,
204 Proc : createProcedure
205 });
NamespaceObjectFactory：根據(jù)fqn生成NamespaceObject對(duì)象。
NamespaceObjectFactory對(duì)象只有一個(gè)create方法，參數(shù)就是命名空間的名字（Fully Qualified Name）。該方法有一個(gè)閉包環(huán)境，該環(huán)境里有一個(gè)cache變量用于緩存所有生成的NamespaceObject對(duì)象。
一個(gè)NamespaceObject對(duì)象包含有三個(gè)屬性，stash(記錄當(dāng)前namespace)，fqn（namespace名字），proc（createProcedure對(duì)象）。方法包括：enqueue，call，valueof，merge，getStash，getExport
74 var NamespaceObject = function _Private_Class_Of_NamespaceObject(fqn){
75 merge(this, {
76 stash: { CURRENT_NAMESPACE : fqn },
77 fqn : fqn,
78 proc : createProcedure()
79 });
80 };
81 merge(NamespaceObject.prototype, {
82 enqueue: function(context) {
83 this.proc.next(context);
84 },
85 call: function(state,callback) {
86 this.proc.call(state, callback);
87 },
88 valueOf: function() {
89 return "#NamespaceObject<" + this.fqn + ">";
90 },
91 merge: function(obj) {
92 merge(this.stash,obj);
93 return this;
94 },
95 getStash: function() {
96 return this.stash;
97 },
98 getExport: function(importName) {
99 if (importName === '*') return this.stash;
100
101 var importNames = importName.split(/,/),
102 retStash = {};
103 for(var i = 0,l=importNames.length;i<l;i++){
104 retStash[ importNames[i] ] = this.stash[ importNames[i] ];
105 }
106 return retStash;
107 }
108 });
109 var NamespaceObjectFactory = (function() {
110 var cache = {};
111 return {
112 create :function(fqn){
113 _assertValidFQN(fqn);
114 return (cache[fqn] || (cache[fqn] = new NamespaceObject(fqn)));
115 }
116 };
117 })();
NamespaceDefinition：
該對(duì)象包括5個(gè)屬性，namespaceObject，requires，useList，stash，defineCallback。并提供了相關(guān)的方法：use，_mergeStashWithNS，loadImport，define，getStash，valueOf，apply
該對(duì)象是namespace庫(kù)的核心，它提供了所有需要的方法。
初始化的時(shí)候，在NamespaceObject的proc的steps隊(duì)列里追加一個(gè)函數(shù)對(duì)象，該函數(shù)將調(diào)用apply方法。
119 var NamespaceDefinition = function _Private_Class_Of_NamespaceDefinition(nsObj) {
120 merge(this, {
121 namespaceObject: nsObj,
122 requires : [],
123 useList : [],
124 stash : {},
125 defineCallback : undefined
126 });
127 var _self = this;
128 nsObj.enqueue(function($c){ _self.apply($c); });
129 };
130 merge(NamespaceDefinition.prototype, {
131 use: function(syntax){
132 this.useList.push(syntax);
133 var splitted = syntax.split(/\s+/);
134 var fqn = splitted[0];
135 var importName = splitted[1];
136 _assertValidFQN(fqn);
137 this.requires.push(function($c){
138 var context = this;
139 var require = NamespaceObjectFactory.create(fqn);
140 require.call(this,function(state){
141 context.loadImport(require,importName);
142 $c();
143 });
144 });
145 return this;
146 },
147 _mergeStashWithNS: function(nsObj){
148 var nsList = nsObj.fqn.split(/\./);
149 var current = this.getStash();
150
151 for(var i = 0,l=nsList.length;i<l-1;i++){
152 if( !current[nsList[i]] ) current[nsList[i]] = {};
153 current = current[nsList[i]];
154 }
155
156 var lastLeaf = nsList[nsList.length-1];
157 current[lastLeaf] = merge(current[lastLeaf] || {}, nsObj.getStash());
158 },
159 loadImport: function(nsObj,importName){
160 if( importName ){
161 merge( this.stash, nsObj.getExport(importName) );
162 }else{
163 this._mergeStashWithNS( nsObj );
164 }
165 },
166 define: function(callback){
167 var nsDef = this, nsObj = this.namespaceObject;
168 this.defineCallback = function($c) {
169 var ns = {
170 provide : function(obj){
171 nsObj.merge(obj);
172 $c();
173 }
174 };
175 merge(ns, nsDef.getStash());
176 merge(ns, nsObj.getStash());
177 callback(ns);
178 };
179 },
180 getStash: function(){
181 return this.stash;
182 },
183 valueOf: function(){
184 return "#NamespaceDefinition<"+this.namespaceObject+"> uses :" + this.useList.join(',');
185 },
186 apply: function(callback){
187 var nsDef = this;
188 createProcedure(nsDef.requires)
189 .next(nsDef.defineCallback)
190 .call(nsDef,function(){
191 callback( nsDef.getStash() );
192 });
193 }
194 });
createProcedure：該對(duì)象是一個(gè)函數(shù)對(duì)象，返回Procedure對(duì)象的next方法的結(jié)果。
Procedure：
Procedure對(duì)象有三個(gè)屬性：state，steps，_status（默認(rèn)為init）。提供一下幾種方法：next，isRunnig，enqueue，dequeue，call，_invoke。
1 var Namespace = (function(){
2 /* utility */
3 var merge = function(target, source){ // 把source的所有自身屬性copy到target中去，并返回target對(duì)象 4 for(var p in source)
5 if(source.hasOwnProperty( p )) target[p] = source[p];
6 return target;
7 };
8 var _assertValidFQN = function(fqn){ // 驗(yàn)證namespace名字的有效性，必須是小寫英數(shù)字，下劃線和點(diǎn)
9 if(!(/^[a-z0-9_.]+/).test(fqn)) throw('invalid namespace');
10 };
11
12 var Procedure = function _Private_Class_Of_Proc(){
13 merge(this, {
14 state : {}, // 狀態(tài)
15 steps : [], // 存儲(chǔ)狀態(tài)的數(shù)組
16 _status: 'init'
17 });
18 };
19 merge(Procedure.prototype, {
20 next: function(state){ // 如果state有值，存入到steps隊(duì)列隊(duì)尾，然后返回this
21 if(state) this.enqueue(state);
22 return this;
23 },
24 isRunning: function(){ // 判定是否為running狀態(tài)
25 return (this._status === 'running');
26 },
27 enqueue: function(state){ // 這里其實(shí)是用數(shù)組steps來(lái)模擬隊(duì)列，enqueue就是從隊(duì)尾入隊(duì)列
28 this.steps.push(state);
29 },
30 dequeue: function(){ // dequeue就是從對(duì)頭出隊(duì)列
31 return this.steps.shift();
32 },
33 call: function(initialState,callback){ //
34 if( this.isRunning() ) throw("do not run twice");
35
36 this.state = initialState || {}; // 保存當(dāng)前state（NamespaceDefinition對(duì)象）
37 this.enqueue(function($c){ // 函數(shù)入隊(duì)列steps
38 $c(); // 執(zhí)行傳進(jìn)來(lái)的函數(shù)
39 if(callback)callback(this); // 如果存在回調(diào)函數(shù)的，執(zhí)行回調(diào)函數(shù)
40 });
41 this._status = 'running'; // 設(shè)置狀態(tài)為running
42 this._invoke(); // 調(diào)用_invoke
43 },
44 _invoke: function(){
45 var _self = this;
46 var step = _self.dequeue(); // 對(duì)象出隊(duì)列(FIFO)
47 if( !step ){
48 _self._status = 'finished'; // 如果隊(duì)列為空，則設(shè)置狀態(tài)為finished
49 return;
50 } // step是數(shù)組的情況下不走這條路徑
51 if( step.call ) { // 如果該對(duì)象是函數(shù)對(duì)象的時(shí)候，則執(zhí)行該call方法，并指定內(nèi)部this為_self.state，回調(diào)函數(shù)里面繼續(xù)調(diào)用_invoke
52 return step.call( _self.state,function _cont(state){
53 if( state ) _self.state = state;
54 _self._invoke();
55 });
56 }
57 var finishedProcess = 0;
58 if( step.length === 0 ) _self._invoke(); // 如果該數(shù)組長(zhǎng)度為0，則調(diào)用_invoke
59 for(var i =0,l=step.length;i<l;i++){ // 針對(duì)數(shù)組里的所有對(duì)象（函數(shù)對(duì)象）調(diào)用各自的call方法，并指定各自函數(shù)的this為_self.state對(duì)象（nsDef對(duì)象）
60 step[i].call(_self.state,function _joinWait(){
61 finishedProcess++;
62 if( finishedProcess == l ){
63 _self._invoke();
64 }
65 });
66 }
67 }
68 });
69
70 var createProcedure = function(state) {
71 return new Procedure().next(state);
72 };
73
74 var NamespaceObject = function _Private_Class_Of_NamespaceObject(fqn){
75 merge(this, {
76 stash: { CURRENT_NAMESPACE : fqn },
77 fqn : fqn,
78 proc : createProcedure()
79 });
80 };
81 merge(NamespaceObject.prototype, {
82 enqueue: function(context) {
83 this.proc.next(context);
84 },
85 call: function(state,callback) {
86 this.proc.call(state, callback);
87 },
88 valueOf: function() {
89 return "#NamespaceObject<" + this.fqn + ">";
90 },
91 merge: function(obj) {
92 merge(this.stash,obj);
93 return this;
94 },
95 getStash: function() {
96 return this.stash;
97 },
98 getExport: function(importName) {
99 if (importName === '*') return this.stash;
100
101 var importNames = importName.split(/,/),
102 retStash = {};
103 for(var i = 0,l=importNames.length;i<l;i++){
104 retStash[ importNames[i] ] = this.stash[ importNames[i] ];
105 }
106 return retStash;
107 }
108 });
109 var NamespaceObjectFactory = (function() {
110 var cache = {};
111 return {
112 create :function(fqn){
113 _assertValidFQN(fqn);
114 return (cache[fqn] || (cache[fqn] = new NamespaceObject(fqn)));
115 }
116 };
117 })();
118
119 var NamespaceDefinition = function _Private_Class_Of_NamespaceDefinition(nsObj) {
120 merge(this, {
121 namespaceObject: nsObj,
122 requires : [],
123 useList : [],
124 stash : {},
125 defineCallback : undefined
126 });
127 var _self = this;
128 nsObj.enqueue(function($c){ _self.apply($c); });
129 };
130 merge(NamespaceDefinition.prototype, {
131 use: function(syntax){ // 使用namespace
132 this.useList.push(syntax); // 該namespace字符串存入數(shù)組useList
133 var splitted = syntax.split(/\s+/); // namespace和它的對(duì)象使用空格分開
134 var fqn = splitted[0]; // 取得namespace
135 var importName = splitted[1]; // 取得namespace中的對(duì)象
136 _assertValidFQN(fqn);
137 this.requires.push(function($c){ // 放一個(gè)函數(shù)到requires數(shù)組中
138 var context = this;
139 var require = NamespaceObjectFactory.create(fqn); // 獲取指定的NamespaceObject對(duì)象，之前生成過(guò)得對(duì)象可以直接從緩存中獲取
140 require.call(this,function(state){ // 調(diào)用NamespaceObject對(duì)象的call方法
141 context.loadImport(require,importName);
142 $c();
143 });
144 });
145 return this;
146 },
147 _mergeStashWithNS: function(nsObj){
148 var nsList = nsObj.fqn.split(/\./);
149 var current = this.getStash();
150
151 for(var i = 0,l=nsList.length;i<l-1;i++){
152 if( !current[nsList[i]] ) current[nsList[i]] = {};
153 current = current[nsList[i]];
154 }
155
156 var lastLeaf = nsList[nsList.length-1];
157 current[lastLeaf] = merge(current[lastLeaf] || {}, nsObj.getStash());
158 },
159 loadImport: function(nsObj,importName){
160 if( importName ){
161 merge( this.stash, nsObj.getExport(importName) );
162 }else{
163 this._mergeStashWithNS( nsObj );
164 }
165 },
166 define: function(callback){
167 var nsDef = this, nsObj = this.namespaceObject;
168 this.defineCallback = function($c) { // 給defineCallback賦值，同時(shí)定義一下該回調(diào)函數(shù)的上下文，nsDef和nsObj兩個(gè)對(duì)象。
169 var ns = {
170 provide : function(obj){
171 nsObj.merge(obj);
172 $c();
173 }
174 };
175 merge(ns, nsDef.getStash());
176 merge(ns, nsObj.getStash());
177 callback(ns);
178 };
179 },
180 getStash: function(){
181 return this.stash;
182 },
183 valueOf: function(){
184 return "#NamespaceDefinition<"+this.namespaceObject+"> uses :" + this.useList.join(',');
185 },
186 apply: function(callback){
187 var nsDef = this;
188 createProcedure(nsDef.requires)
189 .next(nsDef.defineCallback)
190 .call(nsDef,function(){
191 callback( nsDef.getStash() );
192 });
193 }
194 });
195
196 var createNamespace = function(fqn){
197 return new NamespaceDefinition(
198 NamespaceObjectFactory.create(fqn || 'main')
199 );
200 };
201 merge(createNamespace, {
202 'Object' : NamespaceObjectFactory,
203 Definition: NamespaceDefinition,
204 Proc : createProcedure
205 });
206 return createNamespace;
207 })();
追加定義Namespace支持的方法：
Namespace.use
Namespace.fromInternal
Namespace.GET
Namespace.fromExternal
1 Namespace.use = function(useSyntax){ return Namespace().use(useSyntax); }
2 Namespace.fromInternal = Namespace.GET = (function(){
3 var get = (function(){
4 var createRequester = function() {
5 var xhr;
6 try { xhr = new XMLHttpRequest() } catch(e) {
7 try { xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) {
8 try { xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) {
9 try { xhr = new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {
10 try { xhr = new ActiveXObject("Microsoft.XMLHTTP") } catch(e) {
11 throw new Error( "This browser does not support XMLHttpRequest." )
12 }
13 }
14 }
15 }
16 }
17 return xhr;
18 };
19 var isSuccessStatus = function(status) {
20 return (status >= 200 && status < 300) ||
21 status == 304 ||
22 status == 1223 ||
23 (!status && (location.protocol == "file:" || location.protocol == "chrome:") );
24 };
25
26 return function(url,callback){
27 var xhr = createRequester();
28 xhr.open('GET',url,true);
29 xhr.onreadystatechange = function(){
30 if(xhr.readyState === 4){
31 if( isSuccessStatus( xhr.status || 0 )){
32 callback(true,xhr.responseText);
33 }else{
34 callback(false);
35 }
36 }
37 };
38 xhr.send('')
39 };
40 })();
41
42 return function(url,isManualProvide){
43 return function(ns){
44 get(url,function(isSuccess,responseText){
45 if( isSuccess ){
46 if( isManualProvide )
47 return eval(responseText);
48 else
49 return ns.provide( eval( responseText ) );
50 }else{
51 var pub = {};
52 pub[url] = 'loading error';
53 ns.provide(pub);
54 }
55 });
56 };
57 };
58 })();
59
60 Namespace.fromExternal = (function(){
61 var callbacks = {};
62 var createScriptElement = function(url,callback){
63 var scriptElement = document.createElement('script');
64
65 scriptElement.loaded = false;
66
67 scriptElement.onload = function(){
68 this.loaded = true;
69 callback();
70 };
71 scriptElement.onreadystatechange = function(){
72 if( !/^(loaded|complete)$/.test( this.readyState )) return;
73 if( this.loaded ) return;
74 scriptElement.loaded = true;
75 callback();
76 };
77 scriptElement.src = url;
78 document.body.appendChild( scriptElement );
79 return scriptElement.src;
80 };
81 var domSrc = function(url){
82 return function(ns){
83 var src = createScriptElement(url,function(){
84 var name = ns.CURRENT_NAMESPACE;
85 var cb = callbacks[name];
86 delete callbacks[name];
87 cb( ns );
88 });
89 }
90 };
91 domSrc.registerCallback = function(namespace,callback) {
92 callbacks[namespace] = callback;
93 };
94 return domSrc;
95 })();
96
97 try{ module.exports = Namespace; }catch(e){}
具體看一個(gè)例子：
1 Namespace('logtest')
2 .define(function (ns) {
3 console.log(2);
4 ns.provide({
5 log : function () { console.log(3); }
6 });
7 });
8
9 console.log(4);
10
11 Namespace
12 .use('logtest')
13 .apply( function (ns) {
14 console.log(5);
15 ns.logtest.log();
16 });
1：Namespace('logtest') => new NamespaceDefinition(NamespaceObjectFactory.create('logtest'))
即生成一個(gè)NamespaceDefinition對(duì)象，該對(duì)象是由NamespaceObject對(duì)象來(lái)初始化的，該對(duì)象同時(shí)還有三個(gè)屬性，Object，Definition，Proc。其值依次為 NamespaceObjectFactory，NamespaceDefinition，createProcedure函數(shù)對(duì)象類。Namespace('logtest') 返回的結(jié)果就是生成的NamespaceDefinition對(duì)象，然后調(diào)用其define方法，初始化defineCallback。此時(shí)僅僅是定義，不做具體的動(dòng)作。
166 define: function(callback){
167 var nsDef = this, nsObj = this.namespaceObject;
168 this.defineCallback = function($c) { // 給defineCallback賦值，同時(shí)定義一下該回調(diào)函數(shù)的上下文，nsDef和nsObj兩個(gè)對(duì)象。
169 var ns = {
170 provide : function(obj){
171 nsObj.merge(obj);
172 $c();
173 }
174 };
175 merge(ns, nsDef.getStash());
176 merge(ns, nsObj.getStash());
177 callback(ns);
178 };
179 },
2：使用之前定義的namespace里面的對(duì)象，Namespace.use() => Namespace().use() => Namespace('main').use()。調(diào)用use的時(shí)候初始化requires數(shù)組。
131 use: function(syntax){ // 使用namespace
132 this.useList.push(syntax); // 該namespace字符串存入數(shù)組useList
133 var splitted = syntax.split(/\s+/); // namespace和它的對(duì)象使用空格分開
134 var fqn = splitted[0]; // 取得namespace
135 var importName = splitted[1]; // 取得namespace中的對(duì)象
136 _assertValidFQN(fqn);
137 this.requires.push(function($c){ // 放一個(gè)函數(shù)到requires數(shù)組中
138 var context = this;
139 var require = NamespaceObjectFactory.create(fqn); // 獲取指定的NamespaceObject對(duì)象，之前生成過(guò)得對(duì)象可以直接從緩存中獲取
140 require.call(this,function(state){ // 調(diào)用NamespaceObject對(duì)象的call方法
141 context.loadImport(require,importName);
142 $c();
143 });
144 });
145 return this;
146 },
3：調(diào)用main的apply方法?？匆幌戮唧w的apply方法
186 apply: function(callback){
187 var nsDef = this;
188 createProcedure(nsDef.requires)
189 .next(nsDef.defineCallback)
190 .call(nsDef,function(){
191 callback( nsDef.getStash() );
192 });
193 }
取出requires數(shù)組里面的對(duì)象生成Proc對(duì)象，并把該requires數(shù)組里的對(duì)象入隊(duì)列steps中，還有nsDef.defineCallback也入隊(duì)列（此例中為undefined），調(diào)用Proc的call方法。第一個(gè)參數(shù)是nsDef，第二個(gè)參數(shù)是回調(diào)函數(shù)。
具體使用方法：
在定義Namespace的時(shí)候，所有的定義放在define里面，并且以匿名函數(shù)的形式定義。function (ns) { // 具體的實(shí)現(xiàn) // 定義對(duì)外公開的對(duì)象，外部在use該nsName之后，就可以通過(guò)ns.nsName.key()來(lái)調(diào)用它 ns.provide({ key : value});}
使用namespace.js的好處，所有的定義都是在需要的時(shí)候才開始執(zhí)行的，也就是在具體使用的時(shí)候才開始解析定義。
ps：具體內(nèi)部調(diào)用關(guān)系還是沒(méi)有弄明白，今后有時(shí)間再整理，這篇太亂了。
定義Namespace對(duì)象：
var Namespace
現(xiàn)在來(lái)具體看一下Namespace對(duì)象的定義，它是一個(gè)NamespaceDefinition對(duì)象。該對(duì)象是一個(gè)函數(shù)對(duì)象（NamespaceDefinition對(duì)象的構(gòu)造函數(shù)，如果不給參數(shù)的話就默認(rèn)生成一個(gè)main的命名空間），還有三個(gè)屬性，Object，Definition，Proc。其值依次為NamespaceObjectFactory，NamespaceDefinition，createProcedure函數(shù)對(duì)象類。
復(fù)制代碼 代碼如下:
196 var createNamespace = function(fqn){
197 return new NamespaceDefinition(
198 NamespaceObjectFactory.create(fqn || 'main')
199 );
200 };
201 merge(createNamespace, {
202 'Object' : NamespaceObjectFactory,
203 Definition: NamespaceDefinition,
204 Proc : createProcedure
205 });
NamespaceObjectFactory：根據(jù)fqn生成NamespaceObject對(duì)象。
NamespaceObjectFactory對(duì)象只有一個(gè)create方法，參數(shù)就是命名空間的名字（Fully Qualified Name）。該方法有一個(gè)閉包環(huán)境，該環(huán)境里有一個(gè)cache變量用于緩存所有生成的NamespaceObject對(duì)象。
一個(gè)NamespaceObject對(duì)象包含有三個(gè)屬性，stash(記錄當(dāng)前namespace)，fqn（namespace名字），proc（createProcedure對(duì)象）。方法包括：enqueue，call，valueof，merge，getStash，getExport
復(fù)制代碼 代碼如下:
74 var NamespaceObject = function _Private_Class_Of_NamespaceObject(fqn){
75 merge(this, {
76 stash: { CURRENT_NAMESPACE : fqn },
77 fqn : fqn,
78 proc : createProcedure()
79 });
80 };
81 merge(NamespaceObject.prototype, {
82 enqueue: function(context) {
83 this.proc.next(context);
84 },
85 call: function(state,callback) {
86 this.proc.call(state, callback);
87 },
88 valueOf: function() {
89 return "#NamespaceObject<" + this.fqn + ">";
90 },
91 merge: function(obj) {
92 merge(this.stash,obj);
93 return this;
94 },
95 getStash: function() {
96 return this.stash;
97 },
98 getExport: function(importName) {
99 if (importName === '*') return this.stash;
100
101 var importNames = importName.split(/,/),
102 retStash = {};
103 for(var i = 0,l=importNames.length;i<l;i++){
104 retStash[ importNames[i] ] = this.stash[ importNames[i] ];
105 }
106 return retStash;
107 }
108 });
109 var NamespaceObjectFactory = (function() {
110 var cache = {};
111 return {
112 create :function(fqn){
113 _assertValidFQN(fqn);
114 return (cache[fqn] || (cache[fqn] = new NamespaceObject(fqn)));
115 }
116 };
117 })();
NamespaceDefinition：
該對(duì)象包括5個(gè)屬性，namespaceObject，requires，useList，stash，defineCallback。并提供了相關(guān)的方法：use，_mergeStashWithNS，loadImport，define，getStash，valueOf，apply
該對(duì)象是namespace庫(kù)的核心，它提供了所有需要的方法。
初始化的時(shí)候，在NamespaceObject的proc的steps隊(duì)列里追加一個(gè)函數(shù)對(duì)象，該函數(shù)將調(diào)用apply方法。
復(fù)制代碼 代碼如下:
119 var NamespaceDefinition = function _Private_Class_Of_NamespaceDefinition(nsObj) {
120 merge(this, {
121 namespaceObject: nsObj,
122 requires : [],
123 useList : [],
124 stash : {},
125 defineCallback : undefined
126 });
127 var _self = this;
128 nsObj.enqueue(function($c){ _self.apply($c); });
129 };
130 merge(NamespaceDefinition.prototype, {
131 use: function(syntax){
132 this.useList.push(syntax);
133 var splitted = syntax.split(/\s+/);
134 var fqn = splitted[0];
135 var importName = splitted[1];
136 _assertValidFQN(fqn);
137 this.requires.push(function($c){
138 var context = this;
139 var require = NamespaceObjectFactory.create(fqn);
140 require.call(this,function(state){
141 context.loadImport(require,importName);
142 $c();
143 });
144 });
145 return this;
146 },
147 _mergeStashWithNS: function(nsObj){
148 var nsList = nsObj.fqn.split(/\./);
149 var current = this.getStash();
150
151 for(var i = 0,l=nsList.length;i<l-1;i++){
152 if( !current[nsList[i]] ) current[nsList[i]] = {};
153 current = current[nsList[i]];
154 }
155
156 var lastLeaf = nsList[nsList.length-1];
157 current[lastLeaf] = merge(current[lastLeaf] || {}, nsObj.getStash());
158 },
159 loadImport: function(nsObj,importName){
160 if( importName ){
161 merge( this.stash, nsObj.getExport(importName) );
162 }else{
163 this._mergeStashWithNS( nsObj );
164 }
165 },
166 define: function(callback){
167 var nsDef = this, nsObj = this.namespaceObject;
168 this.defineCallback = function($c) {
169 var ns = {
170 provide : function(obj){
171 nsObj.merge(obj);
172 $c();
173 }
174 };
175 merge(ns, nsDef.getStash());
176 merge(ns, nsObj.getStash());
177 callback(ns);
178 };
179 },
180 getStash: function(){
181 return this.stash;
182 },
183 valueOf: function(){
184 return "#NamespaceDefinition<"+this.namespaceObject+"> uses :" + this.useList.join(',');
185 },
186 apply: function(callback){
187 var nsDef = this;
188 createProcedure(nsDef.requires)
189 .next(nsDef.defineCallback)
190 .call(nsDef,function(){
191 callback( nsDef.getStash() );
192 });
193 }
194 });
createProcedure：該對(duì)象是一個(gè)函數(shù)對(duì)象，返回Procedure對(duì)象的next方法的結(jié)果。
Procedure：
Procedure對(duì)象有三個(gè)屬性：state，steps，_status（默認(rèn)為init）。提供一下幾種方法：next，isRunnig，enqueue，dequeue，call，_invoke。
復(fù)制代碼 代碼如下:
1 var Namespace = (function(){
2 /* utility */
3 var merge = function(target, source){ // 把source的所有自身屬性copy到target中去，并返回target對(duì)象 4 for(var p in source)
5 if(source.hasOwnProperty( p )) target[p] = source[p];
6 return target;
7 };
8 var _assertValidFQN = function(fqn){ // 驗(yàn)證namespace名字的有效性，必須是小寫英數(shù)字，下劃線和點(diǎn)
9 if(!(/^[a-z0-9_.]+/).test(fqn)) throw('invalid namespace');
10 };
11
12 var Procedure = function _Private_Class_Of_Proc(){
13 merge(this, {
14 state : {}, // 狀態(tài)
15 steps : [], // 存儲(chǔ)狀態(tài)的數(shù)組
16 _status: 'init'
17 });
18 };
19 merge(Procedure.prototype, {
20 next: function(state){ // 如果state有值，存入到steps隊(duì)列隊(duì)尾，然后返回this
21 if(state) this.enqueue(state);
22 return this;
23 },
24 isRunning: function(){ // 判定是否為running狀態(tài)
25 return (this._status === 'running');
26 },
27 enqueue: function(state){ // 這里其實(shí)是用數(shù)組steps來(lái)模擬隊(duì)列，enqueue就是從隊(duì)尾入隊(duì)列
28 this.steps.push(state);
29 },
30 dequeue: function(){ // dequeue就是從對(duì)頭出隊(duì)列
31 return this.steps.shift();
32 },
33 call: function(initialState,callback){ //
34 if( this.isRunning() ) throw("do not run twice");
35
36 this.state = initialState || {}; // 保存當(dāng)前state（NamespaceDefinition對(duì)象）
37 this.enqueue(function($c){ // 函數(shù)入隊(duì)列steps
38 $c(); // 執(zhí)行傳進(jìn)來(lái)的函數(shù)
39 if(callback)callback(this); // 如果存在回調(diào)函數(shù)的，執(zhí)行回調(diào)函數(shù)
40 });
41 this._status = 'running'; // 設(shè)置狀態(tài)為running
42 this._invoke(); // 調(diào)用_invoke
43 },
44 _invoke: function(){
45 var _self = this;
46 var step = _self.dequeue(); // 對(duì)象出隊(duì)列(FIFO)
47 if( !step ){
48 _self._status = 'finished'; // 如果隊(duì)列為空，則設(shè)置狀態(tài)為finished
49 return;
50 } // step是數(shù)組的情況下不走這條路徑
51 if( step.call ) { // 如果該對(duì)象是函數(shù)對(duì)象的時(shí)候，則執(zhí)行該call方法，并指定內(nèi)部this為_self.state，回調(diào)函數(shù)里面繼續(xù)調(diào)用_invoke
52 return step.call( _self.state,function _cont(state){
53 if( state ) _self.state = state;
54 _self._invoke();
55 });
56 }
57 var finishedProcess = 0;
58 if( step.length === 0 ) _self._invoke(); // 如果該數(shù)組長(zhǎng)度為0，則調(diào)用_invoke
59 for(var i =0,l=step.length;i<l;i++){ // 針對(duì)數(shù)組里的所有對(duì)象（函數(shù)對(duì)象）調(diào)用各自的call方法，并指定各自函數(shù)的this為_self.state對(duì)象（nsDef對(duì)象）
60 step[i].call(_self.state,function _joinWait(){
61 finishedProcess++;
62 if( finishedProcess == l ){
63 _self._invoke();
64 }
65 });
66 }
67 }
68 });
69
70 var createProcedure = function(state) {
71 return new Procedure().next(state);
72 };
73
74 var NamespaceObject = function _Private_Class_Of_NamespaceObject(fqn){
75 merge(this, {
76 stash: { CURRENT_NAMESPACE : fqn },
77 fqn : fqn,
78 proc : createProcedure()
79 });
80 };
81 merge(NamespaceObject.prototype, {
82 enqueue: function(context) {
83 this.proc.next(context);
84 },
85 call: function(state,callback) {
86 this.proc.call(state, callback);
87 },
88 valueOf: function() {
89 return "#NamespaceObject<" + this.fqn + ">";
90 },
91 merge: function(obj) {
92 merge(this.stash,obj);
93 return this;
94 },
95 getStash: function() {
96 return this.stash;
97 },
98 getExport: function(importName) {
99 if (importName === '*') return this.stash;
100
101 var importNames = importName.split(/,/),
102 retStash = {};
103 for(var i = 0,l=importNames.length;i<l;i++){
104 retStash[ importNames[i] ] = this.stash[ importNames[i] ];
105 }
106 return retStash;
107 }
108 });
109 var NamespaceObjectFactory = (function() {
110 var cache = {};
111 return {
112 create :function(fqn){
113 _assertValidFQN(fqn);
114 return (cache[fqn] || (cache[fqn] = new NamespaceObject(fqn)));
115 }
116 };
117 })();
118
119 var NamespaceDefinition = function _Private_Class_Of_NamespaceDefinition(nsObj) {
120 merge(this, {
121 namespaceObject: nsObj,
122 requires : [],
123 useList : [],
124 stash : {},
125 defineCallback : undefined
126 });
127 var _self = this;
128 nsObj.enqueue(function($c){ _self.apply($c); });
129 };
130 merge(NamespaceDefinition.prototype, {
131 use: function(syntax){ // 使用namespace
132 this.useList.push(syntax); // 該namespace字符串存入數(shù)組useList
133 var splitted = syntax.split(/\s+/); // namespace和它的對(duì)象使用空格分開
134 var fqn = splitted[0]; // 取得namespace
135 var importName = splitted[1]; // 取得namespace中的對(duì)象
136 _assertValidFQN(fqn);
137 this.requires.push(function($c){ // 放一個(gè)函數(shù)到requires數(shù)組中
138 var context = this;
139 var require = NamespaceObjectFactory.create(fqn); // 獲取指定的NamespaceObject對(duì)象，之前生成過(guò)得對(duì)象可以直接從緩存中獲取
140 require.call(this,function(state){ // 調(diào)用NamespaceObject對(duì)象的call方法
141 context.loadImport(require,importName);
142 $c();
143 });
144 });
145 return this;
146 },
147 _mergeStashWithNS: function(nsObj){
148 var nsList = nsObj.fqn.split(/\./);
149 var current = this.getStash();
150
151 for(var i = 0,l=nsList.length;i<l-1;i++){
152 if( !current[nsList[i]] ) current[nsList[i]] = {};
153 current = current[nsList[i]];
154 }
155
156 var lastLeaf = nsList[nsList.length-1];
157 current[lastLeaf] = merge(current[lastLeaf] || {}, nsObj.getStash());
158 },
159 loadImport: function(nsObj,importName){
160 if( importName ){
161 merge( this.stash, nsObj.getExport(importName) );
162 }else{
163 this._mergeStashWithNS( nsObj );
164 }
165 },
166 define: function(callback){
167 var nsDef = this, nsObj = this.namespaceObject;
168 this.defineCallback = function($c) { // 給defineCallback賦值，同時(shí)定義一下該回調(diào)函數(shù)的上下文，nsDef和nsObj兩個(gè)對(duì)象。
169 var ns = {
170 provide : function(obj){
171 nsObj.merge(obj);
172 $c();
173 }
174 };
175 merge(ns, nsDef.getStash());
176 merge(ns, nsObj.getStash());
177 callback(ns);
178 };
179 },
180 getStash: function(){
181 return this.stash;
182 },
183 valueOf: function(){
184 return "#NamespaceDefinition<"+this.namespaceObject+"> uses :" + this.useList.join(',');
185 },
186 apply: function(callback){
187 var nsDef = this;
188 createProcedure(nsDef.requires)
189 .next(nsDef.defineCallback)
190 .call(nsDef,function(){
191 callback( nsDef.getStash() );
192 });
193 }
194 });
195
196 var createNamespace = function(fqn){
197 return new NamespaceDefinition(
198 NamespaceObjectFactory.create(fqn || 'main')
199 );
200 };
201 merge(createNamespace, {
202 'Object' : NamespaceObjectFactory,
203 Definition: NamespaceDefinition,
204 Proc : createProcedure
205 });
206 return createNamespace;
207 })();
追加定義Namespace支持的方法：
Namespace.use
Namespace.fromInternal
Namespace.GET
Namespace.fromExternal
復(fù)制代碼 代碼如下:
1 Namespace.use = function(useSyntax){ return Namespace().use(useSyntax); }
2 Namespace.fromInternal = Namespace.GET = (function(){
3 var get = (function(){
4 var createRequester = function() {
5 var xhr;
6 try { xhr = new XMLHttpRequest() } catch(e) {
7 try { xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) {
8 try { xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) {
9 try { xhr = new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {
10 try { xhr = new ActiveXObject("Microsoft.XMLHTTP") } catch(e) {
11 throw new Error( "This browser does not support XMLHttpRequest." )
12 }
13 }
14 }
15 }
16 }
17 return xhr;
18 };
19 var isSuccessStatus = function(status) {
20 return (status >= 200 && status < 300) ||
21 status == 304 ||
22 status == 1223 ||
23 (!status && (location.protocol == "file:" || location.protocol == "chrome:") );
24 };
25
26 return function(url,callback){
27 var xhr = createRequester();
28 xhr.open('GET',url,true);
29 xhr.onreadystatechange = function(){
30 if(xhr.readyState === 4){
31 if( isSuccessStatus( xhr.status || 0 )){
32 callback(true,xhr.responseText);
33 }else{
34 callback(false);
35 }
36 }
37 };
38 xhr.send('')
39 };
40 })();
41
42 return function(url,isManualProvide){
43 return function(ns){
44 get(url,function(isSuccess,responseText){
45 if( isSuccess ){
46 if( isManualProvide )
47 return eval(responseText);
48 else
49 return ns.provide( eval( responseText ) );
50 }else{
51 var pub = {};
52 pub[url] = 'loading error';
53 ns.provide(pub);
54 }
55 });
56 };
57 };
58 })();
59
60 Namespace.fromExternal = (function(){
61 var callbacks = {};
62 var createScriptElement = function(url,callback){
63 var scriptElement = document.createElement('script');
64
65 scriptElement.loaded = false;
66
67 scriptElement.onload = function(){
68 this.loaded = true;
69 callback();
70 };
71 scriptElement.onreadystatechange = function(){
72 if( !/^(loaded|complete)$/.test( this.readyState )) return;
73 if( this.loaded ) return;
74 scriptElement.loaded = true;
75 callback();
76 };
77 scriptElement.src = url;
78 document.body.appendChild( scriptElement );
79 return scriptElement.src;
80 };
81 var domSrc = function(url){
82 return function(ns){
83 var src = createScriptElement(url,function(){
84 var name = ns.CURRENT_NAMESPACE;
85 var cb = callbacks[name];
86 delete callbacks[name];
87 cb( ns );
88 });
89 }
90 };
91 domSrc.registerCallback = function(namespace,callback) {
92 callbacks[namespace] = callback;
93 };
94 return domSrc;
95 })();
96
97 try{ module.exports = Namespace; }catch(e){}
具體看一個(gè)例子：
復(fù)制代碼 代碼如下:
1 Namespace('logtest')
2 .define(function (ns) {
3 console.log(2);
4 ns.provide({
5 log : function () { console.log(3); }
6 });
7 });
8
9 console.log(4);
10
11 Namespace
12 .use('logtest')
13 .apply( function (ns) {
14 console.log(5);
15 ns.logtest.log();
16 });
1：Namespace('logtest') => new NamespaceDefinition(NamespaceObjectFactory.create('logtest'))
即生成一個(gè)NamespaceDefinition對(duì)象，該對(duì)象是由NamespaceObject對(duì)象來(lái)初始化的，該對(duì)象同時(shí)還有三個(gè)屬性，Object，Definition，Proc。其值依次為 NamespaceObjectFactory，NamespaceDefinition，createProcedure函數(shù)對(duì)象類。Namespace('logtest') 返回的結(jié)果就是生成的NamespaceDefinition對(duì)象，然后調(diào)用其define方法，初始化defineCallback。此時(shí)僅僅是定義，不做具體的動(dòng)作。
復(fù)制代碼 代碼如下:
166 define: function(callback){
167 var nsDef = this, nsObj = this.namespaceObject;
168 this.defineCallback = function($c) { // 給defineCallback賦值，同時(shí)定義一下該回調(diào)函數(shù)的上下文，nsDef和nsObj兩個(gè)對(duì)象。
169 var ns = {
170 provide : function(obj){
171 nsObj.merge(obj);
172 $c();
173 }
174 };
175 merge(ns, nsDef.getStash());
176 merge(ns, nsObj.getStash());
177 callback(ns);
178 };
179 },
2：使用之前定義的namespace里面的對(duì)象，Namespace.use() => Namespace().use() => Namespace('main').use()。調(diào)用use的時(shí)候初始化requires數(shù)組。
復(fù)制代碼 代碼如下:
131 use: function(syntax){ // 使用namespace
132 this.useList.push(syntax); // 該namespace字符串存入數(shù)組useList
133 var splitted = syntax.split(/\s+/); // namespace和它的對(duì)象使用空格分開
134 var fqn = splitted[0]; // 取得namespace
135 var importName = splitted[1]; // 取得namespace中的對(duì)象
136 _assertValidFQN(fqn);
137 this.requires.push(function($c){ // 放一個(gè)函數(shù)到requires數(shù)組中
138 var context = this;
139 var require = NamespaceObjectFactory.create(fqn); // 獲取指定的NamespaceObject對(duì)象，之前生成過(guò)得對(duì)象可以直接從緩存中獲取
140 require.call(this,function(state){ // 調(diào)用NamespaceObject對(duì)象的call方法
141 context.loadImport(require,importName);
142 $c();
143 });
144 });
145 return this;
146 },
3：調(diào)用main的apply方法?？匆幌戮唧w的apply方法
復(fù)制代碼 代碼如下:
186 apply: function(callback){
187 var nsDef = this;
188 createProcedure(nsDef.requires)
189 .next(nsDef.defineCallback)
190 .call(nsDef,function(){
191 callback( nsDef.getStash() );
192 });
193 }
取出requires數(shù)組里面的對(duì)象生成Proc對(duì)象，并把該requires數(shù)組里的對(duì)象入隊(duì)列steps中，還有nsDef.defineCallback也入隊(duì)列（此例中為undefined），調(diào)用Proc的call方法。第一個(gè)參數(shù)是nsDef，第二個(gè)參數(shù)是回調(diào)函數(shù)。
具體使用方法：
在定義Namespace的時(shí)候，所有的定義放在define里面，并且以匿名函數(shù)的形式定義。function (ns) { // 具體的實(shí)現(xiàn) // 定義對(duì)外公開的對(duì)象，外部在use該nsName之后，就可以通過(guò)ns.nsName.key()來(lái)調(diào)用它 ns.provide({ key : value});}
使用namespace.js的好處，所有的定義都是在需要的時(shí)候才開始執(zhí)行的，也就是在具體使用的時(shí)候才開始解析定義。
ps：具體內(nèi)部調(diào)用關(guān)系還是沒(méi)有弄明白，今后有時(shí)間再整理，這篇太亂了。
相關(guān)文章
JS中利用FileReader實(shí)現(xiàn)上傳圖片前本地預(yù)覽功能
FileReader 對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容,使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)。下面通過(guò)本文給大家介紹JS中利用FileReader實(shí)現(xiàn)上傳圖片前本地預(yù)覽功能，需要的朋友參考下2018-03-03
這篇文章主要介紹了apicloud拉起小程序并傳遞參數(shù)的方法示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
下面小編就為大家?guī)?lái)一篇原生js獲取元素樣式的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
JavaScript實(shí)現(xiàn)三級(jí)級(jí)聯(lián)特效
這篇文章主要介紹了JavaScript實(shí)現(xiàn)三級(jí)級(jí)聯(lián)特效，選擇省會(huì)出現(xiàn)相應(yīng)的縣下拉框，同時(shí)市的下拉框改變，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
JavaScript實(shí)現(xiàn)商品評(píng)價(jià)五星好評(píng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)商品評(píng)價(jià)五星好評(píng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
js實(shí)現(xiàn)可拖動(dòng)DIV的方法
這篇文章主要介紹了js實(shí)現(xiàn)可拖動(dòng)DIV的方法，有需要的朋友可以參考一下2013-12-12
Javascript中構(gòu)造函數(shù)要注意的一些坑
JavaScript語(yǔ)言是一門面向?qū)ο蟮恼Z(yǔ)言，但JS中并沒(méi)有類的概念的。于是JavaScript采用構(gòu)造函數(shù)的方式來(lái)模擬類的效果，即我們通過(guò)函數(shù)來(lái)創(chuàng)建對(duì)象。這也證明了函數(shù)在JavaScript中具有非常重要的地位。本文主要介紹了Javascript中構(gòu)造函數(shù)的一些坑,需要的朋友可以參考。2017-01-01
淺談nodeName,nodeValue,nodeType,typeof 的區(qū)別
本文主要簡(jiǎn)單介紹了nodeName,nodeValue,nodeType,typeof 的區(qū)別,算是知識(shí)點(diǎn)的一個(gè)小總結(jié)，希望對(duì)小伙伴們有所幫助2015-01-01
js數(shù)組操作學(xué)習(xí)總結(jié)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
uni-app是一個(gè)使用Vue.js開發(fā)跨平臺(tái)應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于UniApp開發(fā)H5接入微信登錄的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08