Javascript的命名空间库namespace.js

命名空间的好处已经耳熟能详，但是JS中并没有原生态支持命名空间，这个库就是为js提供命名空间的功能。

github：https://github.com/hirokidaichi/namespace-js

定义Namespace对象：

var Namespace

现在来具体看一下Namespace对象的定义，它是一个NamespaceDefinition对象。该对象是一个函数对象（NamespaceDefinition对象的构造函数，如果不给参数的话就默认生成一个main的命名空间），还有三个属性，Object，Definition，Proc。其值依次为NamespaceObjectFactory，NamespaceDefinition，createProcedure函数对象类。

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：根据fqn生成NamespaceObject对象。

NamespaceObjectFactory对象只有一个create方法，参数就是命名空间的名字（Fully Qualified Name）。该方法有一个闭包环境，该环境里有一个cache变量用于缓存所有生成的NamespaceObject对象。

一个NamespaceObject对象包含有三个属性，stash(记录当前namespace)，fqn（namespace名字），proc（createProcedure对象）。方法包括：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：

该对象包括5个属性，namespaceObject，requires，useList，stash，defineCallback。并提供了相关的方法：use，_mergeStashWithNS，loadImport，define，getStash，valueOf，apply

该对象是namespace库的核心，它提供了所有需要的方法。

初始化的时候，在NamespaceObject的proc的steps队列里追加一个函数对象，该函数将调用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：该对象是一个函数对象，返回Procedure对象的next方法的结果。

Procedure：

Procedure对象有三个属性：state，steps，_status（默认为init）。提供一下几种方法：next，isRunnig，enqueue，dequeue，call，_invoke。

var Namespace = (function(){
    /* utility */
    var merge = function(target, source){ // 把source的所有自身属性copy到target中去，并返回target对象

        for(var p in source)
            if(source.hasOwnProperty( p )) target[p] = source[p];
        return target;
    };
    var _assertValidFQN = function(fqn){ // 验证namespace名字的有效性，必须是小写英数字，下划线和点
        if(!(/^[a-z0-9_.]+/).test(fqn)) throw('invalid namespace');
    };

    var Procedure = function _Private_Class_Of_Proc(){
        merge(this, {
            state  : {}, // 状态
            steps  : [], // 存储状态的数组
            _status: 'init'
        });
    };
    merge(Procedure.prototype, {
        next: function(state){ // 如果state有值，存入到steps队列队尾，然后返回this
            if(state) this.enqueue(state);
            return this;
        },
        isRunning: function(){ // 判定是否为running状态
            return (this._status === 'running');
        },
        enqueue: function(state){ // 这里其实是用数组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 || {}; // 保存当前state（NamespaceDefinition对象）
            this.enqueue(function($c){ // 函数入队列steps
                $c(); // 执行传进来的函数
                if(callback)callback(this); // 如果存在回调函数的，执行回调函数
            });
            this._status = 'running'; // 设置状态为running
            this._invoke(); // 调用_invoke
        },
        _invoke: function(){
            var _self = this;
            var step  = _self.dequeue(); // 对象出队列(FIFO)
            if( !step ){
                _self._status = 'finished'; // 如果队列为空，则设置状态为finished
                return;
            }

                // step是数组的情况下不走这条路径
            if( step.call ) { // 如果该对象是函数对象的时候，则执行该call方法，并指定内部this为_self.state，回调函数里面继续调用_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(); // 如果该数组长度为0，则调用_invoke
            for(var i =0,l=step.length;i<l;i++){ // 针对数组里的所有对象（函数对象）调用各自的call方法，并指定各自函数的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字符串存入数组useList
            var splitted   = syntax.split(/\s+/); // namespace和它的对象使用空格分开
            var fqn        = splitted[0]; // 取得namespace
            var importName = splitted[1]; // 取得namespace中的对象
            _assertValidFQN(fqn);
            this.requires.push(function($c){ // 放一个函数到requires数组中
                var context = this;
                var require = NamespaceObjectFactory.create(fqn); // 获取指定的NamespaceObject对象，之前生成过得对象可以直接从缓存中获取
                require.call(this,function(state){ // 调用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赋值，同时定义一下该回调函数的上下文，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

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){}

具体看一个例子：

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函数对象类。Namespace('logtest') 返回的结果就是生成的NamespaceDefinition对象，然后调用其define方法，初始化defineCallback。此时仅仅是定义，不做具体的动作。

166         define: function(callback){
167             var nsDef = this, nsObj = this.namespaceObject;
168             this.defineCallback = function($c) { // 给defineCallback赋值，同时定义一下该回调函数的上下文，nsDef和nsObj两个对象。
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里面的对象，Namespace.use() => Namespace().use() => Namespace('main').use()。调用use的时候初始化requires数组。

131         use: function(syntax){ // 使用namespace
132             this.useList.push(syntax); // 该namespace字符串存入数组useList
133             var splitted   = syntax.split(/\s+/); // namespace和它的对象使用空格分开
134             var fqn        = splitted[0]; // 取得namespace
135             var importName = splitted[1]; // 取得namespace中的对象
136             _assertValidFQN(fqn);
137             this.requires.push(function($c){ // 放一个函数到requires数组中
138                 var context = this;
139                 var require = NamespaceObjectFactory.create(fqn); // 获取指定的NamespaceObject对象，之前生成过得对象可以直接从缓存中获取
140                 require.call(this,function(state){ // 调用NamespaceObject对象的call方法
141                     context.loadImport(require,importName);
142                     $c();
143                 });
144             });
145             return this;
146         },

3：调用main的apply方法。看一下具体的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数组里面的对象生成Proc对象，并把该requires数组里的对象入队列steps中，还有nsDef.defineCallback也入队列（此例中为undefined），调用Proc的call方法。第一个参数是nsDef，第二个参数是回调函数。

具体使用方法：

在定义Namespace的时候，所有的定义放在define里面，并且以匿名函数的形式定义。

function (ns) {

　　// 具体的实现

　　// 定义对外公开的对象，外部在use该nsName之后，就可以通过ns.nsName.key()来调用它

　　ns.provide({ key : value});

}

使用namespace.js的好处，所有的定义都是在需要的时候才开始执行的，也就是在具体使用的时候才开始解析定义。

ps：具体内部调用关系还是没有弄明白，今后有时间再整理，这篇太乱了。