javascript 命名空間的執行個體應用

標籤：

/*** 建立全域對象MYAPP* @module MYAPP* @title MYAPP Global*/var MYAPP = MYAPP || {};/*** 返回指定的命名空間，如果命名空間不存在則建立命名空間。* 備忘：命名時需小心，注意保留關鍵字，可能在一些瀏覽器無法使用。** @method namespace* @param {String *} 至少需要建立一個命名空間* @return {Object} 最後一個命名空間建立的對象的引用*/MYAPP.namespace = function(str){    var parts = str.split("."),    parent = MYAPP,    i=0,    l=0;    if(parts[0]==="MYAPP"){        parts = parts.slice(1);    }    for(i=0,l=parts.length; i<l;i++){        if(typeof parent[parts[i]] === "undefined"){            parent[parts[i]] = {};        }        parent = parent[parts[i]];    }    return parent;}/*** bfun是Basic Functions Extended的縮寫* 作用：包括數組、字串等等數功能擴充** @module bfun*/MYAPP.bfun = {    array:(function(){        return {            /**            * @method isArray 判斷是否為數組            * @param {Array} 數組            * @return {Boolean} 真返回true，否則返回false            */            isArray: function(){                return Object.prototype.toString.call(arguments[0])  === ‘[object Array]‘;             },            /**            * @method inArray 檢查值是否在數組中            * @param {value，Array} 值，數組            * @return {Boolean} 真返回true，否則返回undefined            */            inArray: function(val,arr){                for(var i=0,l=arr.length;i<l;i++){                    if(arr[i] === val){                        return true;                    }                }            }        }    })(),    string:(function(){        return {            /**            * @method trim 過濾字串兩邊多餘的空格            * @param {String} 字串            * @return {String} 字串            */            trim: function(){                return arguments[0].replace(/(^\s*)|(\s*$)/g, "");            },            /**            * @method ltrim 過濾字串左邊多餘的空格            * @param {String} 字串            * @return {String} 字串            */            ltrim: function(){                return arguments[0].replace(/^s+/g, "");            },            /**            * @method rtrim 過濾字串右邊多餘的空格            * @param {String} 字串            * @return {String} 字串            */            rtrim: function(){                return arguments[0].replace(/s+$/g, "");            }        }    })()}// 測試MYAPP.test = {    init: function(){        // 使用對應的模組先引用        var marray = MYAPP.namespace("MYAPP.bfun.array");        var mstring = MYAPP.namespace("MYAPP.bfun.string");        var arr =  ["a","b"];        var str = "   abc  ";        console.log("判斷是否為數組：" + marray.isArray(arr));        console.log("值是否在數組中：" + marray.inArray("a",arr));        console.log("過濾左右空格：" + mstring.trim(str));    }}MYAPP.test.init();

 

寫幾個有用的函數

querySelector和querySelectorAll是W3C提供的新的查詢介面，但是名字好長，自己寫個簡單的，innerHTML 屬性也常用到，寫個簡單版仿jQuery的html方法

(function () {            var _NS = function () {                          }                     _NS.prototype.select = function (selector,context) {                var context = context || document;                return context.querySelectorAll(selector);            }            _NS.prototype.isArrayLike=function(obj){                if(obj instanceof Array){                    return true;                }                var length=obj.length;                if ( obj.nodeType === 1 && length ) {                    return true;                }                return false;            }            _NS.prototype.html = function (obj,value) {                var isArray=this.isArrayLike(obj), i=0;                if (typeof value == ‘string‘) {                    if (!isArray) {                        obj.innerHTML = value;                    } else {                        var length = obj.length;                        while (i < length) {                            obj[i].innerHTML = value;                            i += 1;                        }                    }                } else {                    if (!isArray) {                        return obj.innerHTML;                    } else {                        return obj[0].innerHTML;                    }                }            }            window.NS = new _NS();        })();

 

建構函式的一些知識

想要做到上面幾點除了prototype等基本知識，還需要瞭解一些關於JavaScript建構函式的知識。

1.什麼樣的函數是建構函式

在JavaScript的世界裡建構函式並不神秘，也不特殊，任何函數通過new 操作符調用都可以變為建構函式，不使用new 操作符就不是建構函式，而是直接按普通函數調用。

2.建構函式返回什麼樣的結果

建構函式的傳回值分為兩種情況，當function沒有return語句或者return回一個基本類型（bool,int,string,undefined,null）的時候，返回new 建立的一個匿名對象，該對象即為函數執行個體；如果function體內return一個參考型別對象（Array,Function,Object等）時，該對象會覆蓋new建立的匿名對象作為傳回值。

寫個小例子驗證一下

 

javascript 命名空間的執行個體應用