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创建的匿名对象作为返回值。
写个小例子验证一下