位置：首页>> 网络编程>> JavaScript>> 第一类工厂与哈希对象（2）

第一类工厂与哈希对象（2）

　来源：Ruby's Louvre　发布时间：2009-12-28 13:14:00　

标签：工厂,哈希,对象,mootools,JavaScript

哈希正是本文要说的，虽然javascript的Object什么都是，但显然力不从心嘛，像mootools,Prototype与Base2都搞了一个Hash类，我觉得jQuery也应该有一个，起码它来构建jQuery.data比较爽一些。

一些测试代码：

<!doctype html><html dir="ltr" lang="zh-CN" > <head id="head"> <meta charset="utf-8"/> <title>哈希对象 by司徒正美</title> <script type="text/javascript" charset="utf-8"> var dom = {},//命名空间 slice = Array.prototype.slice; dom.mixin = function (obj, bag) { if (arguments.length === 1) { bag = obj; obj = this; }; if (obj && bag && typeof bag === 'object') { for (var p in bag) { if(bag.hasOwnProperty(p)) obj[p] = bag[p]; } }; if (!+"\v1") {//IE不能在for...in循环中遍历toString与valueOf属性，需要单独处理 var t = bag.toString,v = bag.valueOf,op = Object.prototype; if (bag.hasOwnProperty("toString") && typeof t === "function" && t !== op.toString) obj.toString = t; if (bag.hasOwnProperty("valueOf") && typeof v === "function" && v !== op.valueOf) obj.valueOf = v; } return obj; }; dom.factory = function(obj){//第一类工厂 var init = obj.init, klass = function() { //如果传入一个超级数组对象，则不做任何处理，直接返回 if(arguments.length === 1 && arguments[0] instanceof klass) return arguments[0]; return new klass.fn.init(arguments); } klass.fn = klass.prototype = { init :init, constructor: klass }; klass.fn.init.prototype = klass.fn; delete obj.klass;delete obj.init; dom.mixin(klass.fn, obj); //用于扩展原型方法 klass.mixin = function(bag){ dom.mixin(this.fn,bag); return this; }; klass.alias = function(oldName, newName){ var bag = {}; if (dom.isString(oldName) && dom.isString(newName)){ var method = this.fn[oldName] if (!!method){ bag[newName] = method; return this.mixin(bag); }; }; //如果是一个属性包，如Hash.alias({keyOf: 'indexOf', hasValue: 'contains'}); bag = oldName; for (var name in bag) if(bag.hasOwnProperty(name)) this.alias(name,bag[name]); return this; }; klass.staticizeWithout = function(arr){ var conditions = {},keys = arr || [],me = this; for(var i=0,n = keys.length;i<n;i++){ conditions[keys[i]] = 1; } dom.each(me.fn,function(method, name){ if(!conditions[name] && dom.isFunction(me.fn[name]) && dom.isUndefined(me[name])&& name !== 'init' && name !== 'toString' && name !== 'valueOf' ){ me[name] = function () { var args = dom.toArray(arguments), caller = args.shift(); method.name = name; //为其泛化方法添加一个name属性 return method.apply(me(caller), args); } } }); return me; } return klass; }; dom.mixin(new function(){ var _toString = Object.prototype.toString, _slice = Array.prototype.slice, _push = Array.prototype.push, is = function(obj,type) { return _toString.call(obj).match(/^\[object\s(.*)\]$/)[1] === type; } return { isArray: function (obj) { return is(obj,"Array"); }, isFunction: function (obj) { return is(obj,"Function") ; }, isNumber: function (obj) { return is(obj,"Number") ; }, isString: function (obj) { return is(obj,"String") ; }, isUndefined: function (obj) { return obj === void(0); }, each: function (obj, fn, bind) { for (var key in obj) //只遍历本地属性 if (obj.hasOwnProperty(key)) fn.call(bind, obj[key], key, obj); }, isArrayLike : function (obj) {//包括Array if(dom.isArray(obj) || obj.callee) return true; if(is(obj,'NodeList')) return true; if(is(obj,'HTMLCollection')) return true; //不能为字符串,不能为window,具有length属性 if(dom.isNumber(obj.length) && !dom.isString(obj) && !obj.eval){ if(obj.nextNode || obj.item) return true; var n = obj.length - 1 < 0 ? 0 : obj.length - 1 ; //如果是具有数字键或length属性的对象,如jQuery对象 if(obj.hasOwnProperty(n) && obj.hasOwnProperty(0)) return true return false; } return false; }, toArray : function (arr) { //把普通对象变成原生数组对象 if(arguments.length === 0 || arr === null){ return []; }else if(arr.callee){//如果是Arguments对象 return _slice.call(arr); }else if(dom.isArray(arr)){//如果Array对象返回一个克隆 return arr.concat(); }else if(dom.isArrayLike(arr)){ try{//jQuery对象，dom对象，el.getElementsByTagName得到的HTMLCollection //与el.childNodes得到的NodeList return _slice.call(arr); }catch(e){//IE用slice处理元素或节点集合会出错，只能慢慢拷贝 var ret = [], i = arr.length; while (i) ret[--i] = arr[i]; //Clone数组 return ret; } }else {//普通函数，单个元素节点，字符串，数字，window对象 return [arr]; } }, setArray: function (els) { //把普通对象变成类数组对象 this.length = 0; _push.apply(this, els); return this; } } }); var hash = dom.factory({ //支持多种创建方式 //[1]传入一个普通对象 //hash({ key: "val" }) ==> { key: "val" } //[2]传入两个参数，第一个必须是字符串 //hash("key", nasami) ==> { key: nasami } //[3]传入一个以逗号隔开的字符串 //hash("key,a,key2,b") ==> { key: "a", key2: "b" } //[4]传入一个以空白隔开的字符串 //hash(" key a key2 b") ==> { key: "a", key2: "b" } //[5]传入一个数组 //hash([aa,bb,cc]) ==> { 1:aa,2:bb,3:cc } init: function(obj) { var key = obj[0], value = obj[1], core = {}, i = 0; if(obj.length === 2){//如果有两个参数 core[key] = value; }else{ if(dom.isString(key)){ key = key.replace( /^\s+|\s+$/g, "");//进行trim操作 var arr = key.indexOf(",") !== -1 ? key.split(",") : key.split(/\s+/g); while ((value = arr[i++])) core[value] = arr[i++]; }else if(dom.isArray(key)){ for(var i= 0,n=key.length;i<n;i++) core[i] = key[i] }else{ core = key; } }; this.empty(); if(core) this.update(core); }, empty: function() { this._hash = {}; this.length = 0; return this; }, //用于初始化hash //把普通对象的键值利用put方法传入_hash中,不考虑其prototype的成员 update: function(obj) { for(var prop in obj) if(obj.hasOwnProperty(prop)) this.put(prop, obj[prop]); return this; }, contains: function(key) { return this.get(key) !== void(0); }, put: function(key, value) { if(!this.contains(key)) {//如果没包含则 this.length++; } this._hash[key] = value; return value; }, //取得相应的值 get: function(key) { return this._hash[key]; }, //移除一个键值对 remove: function(key) { delete this._hash[key]; this.length--; return this; }, //移除指定的键值对，并返回对应的值 pop: function(key) { var results = this.get(key); this.remove(key); return results; }, //取得所有的键，以数组形式返回 keys: function() { var keys = [],obj = this._hash; for(var prop in obj) if(obj.hasOwnProperty(prop)) keys.push(prop); return keys; }, //取得所有的值，以数组形式返回 values: function() { var values = [],obj = this._hash; for(var prop in obj) if(obj.hasOwnProperty(prop)) values.push(obj[prop]); return values; }, //取得所有的键值对，以数组形式返回 items: function() { var items = [],obj = this._hash; for(var prop in obj) if(obj.hasOwnProperty(prop)) items.push([prop, obj[prop]]); return items; }, //变成普通对象 toObject: function() { return this._hash; }, //仅当此键不存在时才添加， ensure: function(key, value) { var results = this.get(key); if(results === void(0)) return this.put(key, value); return results; }, forEach: function(fn, bind){ var pairs = this.items(); for(var i=0,n=pairs.length;i<n;i++){ fn.call(bind, pairs[i][1], pairs[i][0]); } }, map: function(fn, bind){ var results = hash({}); this.each(function(value, key){ results.put(key, fn.call(bind, value, key)); }); return results; }, filter: function(fn, bind){ var results = hash({}); this.each(function(value, key){ if (fn.call(bind, value, key)) results.put(key, value); }); return results; }, index: function(val) {//与get方法相反，取得其key var obj = this._hash; for(var prop in obj) if(obj.hasOwnProperty(prop) && obj[prop] === val) return prop; return null; }, toString:function(){ var pairs = this.items(),results = []; for(var i=0,n=pairs.length;i<n;i++){ results[i] = pairs[i][0]+":"+pairs[i][1] } return "{ "+results.join(", ")+" }"; } }); hash.alias("forEach","each"); hash.staticizeWithout(); dom.hash = hash; window.onload = function(){ var assert = document.getElementById("assert"); if(!assert){ assert = document.createElement("ul"); assert.i = 0; var item = document.createElement("li"); document.body.insertBefore(assert,null); } var test = function(str){ var li = item.cloneNode(false); assert.appendChild(li); li.innerHTML = str; assert.i++; li.style.backgroundColor = assert.i％2 === 1? "#e6e6e6" : "#D0E4FC"; }; test("[1]传入一个普通对象") test(hash({ key: "value" })) test("[2]传入两个参数，第一个必须是字符串") test(hash('body',document.body)) test("[3]传入一个以逗号隔开的字符串") test(hash("key1,val1,key2,val2")) test("[4]传入一个以空白隔开的字符串") test(hash("司徒正美")) test("[5]传入一个数组") test(hash(['aa','bb','cc'])) var h = hash([1,2,3,4,5]); test("测试contains") test(h.contains(4)) test("测试get") test(h.get(4)) test("测试put") test(h.put(5,"新加的")) test("测试remove") test(h.remove(0)) test("测试pop") test(h.pop(5)) test("测试keys") test(h.keys()) test("测试values") test(h.values()) test("测试items") test(h.items()) test("测试toObject") test(h.toObject()) test("测试ensure，只有此键不存在时才添加") test(h.ensure(10,'qq')) test("测试ensure，存在时返回此键对应的值") test(h.ensure(2,'ww')) test("测试forEach") h.forEach(function(v){ test(v+10) }) test("测试map") test(h.map(function(v){ return v+20 })) test("测试filter") test(h.filter(function(v,k){ return dom.isNumber(v) })); test("测试index") test(h.index("qq")) test("测试each") h.each(function(v){ test(v+5) }) test('测试静态方法') test(hash.index({1:2,3:4},4)) test(hash.get({1:2,3:4},1)) } </script> </head> <body> </body></html>

对于某些人看来，第一类工厂也有太过臃肿，为生成一个对象太劳师动众了(我一并写出来是为了方便我测试类工厂)，下面是一个精简版。不需要类工厂，自行构建哈希，不过少了一些静态方法：

<!doctype html><html dir="ltr" lang="zh-CN" > <head id="head"> <meta charset="utf-8"/> <title>哈希对象 by司徒正美</title> <script type="text/javascript" charset="utf-8"> window.onload = function(){ var hash = function(obj) { if(obj instanceof arguments.callee) return obj; return new arguments.callee.fn.init(arguments); }; hash.fn = hash.prototype= { init: function(obj) { var key = obj[0], value = obj[1], core = {}, toString = Object.prototype.toString, i = 0; if(obj.length === 2){//如果有两个参数 core[key] = value; }else{ if(toString.call(key) === '[object String]'){ key = key.replace( /^\s+|\s+$/g, "");//进行trim操作 var arr = key.indexOf(",") !== -1 ? key.split(",") : key.split(/\s+/g); while ((value = arr[i++])) core[value] = arr[i++]; }else if(toString.call(key) === '[object Array]'){ for(var i= 0,n=key.length;i<n;i++) core[i] = key[i] }else{ core = key; } }; this.empty(); if(core) this.update(core); }, empty: function() { this._hash = {}; this.length = 0; return this; }, //用于初始化hash //把普通对象的键值利用put方法传入_hash中,不考虑其prototype的成员 update: function(obj) { for(var prop in obj) if(obj.hasOwnProperty(prop)) this.put(prop, obj[prop]); return this; }, contains: function(key) { return this.get(key) !== void(0); }, put: function(key, value) { if(!this.contains(key)) {//如果没包含则 this.length++; } this._hash[key] = value; return value; }, //取得相应的值 get: function(key) { return this._hash[key]; }, //移除一个键值对 remove: function(key) { delete this._hash[key]; this.length--; return this; }, //移除指定的键值对，并返回对应的值 pop: function(key) { var results = this.get(key); this.remove(key); return results; }, //取得所有的键，以数组形式返回 keys: function() { var keys = [],obj = this._hash; for(var prop in obj) if(obj.hasOwnProperty(prop)) keys.push(prop); return keys; }, //取得所有的值，以数组形式返回 values: function() { var values = [],obj = this._hash; for(var prop in obj) if(obj.hasOwnProperty(prop)) values.push(obj[prop]); return values; }, //取得所有的键值对，以数组形式返回 items: function() { var items = [],obj = this._hash; for(var prop in obj) if(obj.hasOwnProperty(prop)) items.push([prop, obj[prop]]); return items; }, //变成普通对象 toObject: function() { return this._hash; }, //仅当此键不存在时才添加， ensure: function(key, value) { var results = this.get(key); if(results === void(0)) return this.put(key, value); return results; }, forEach: function(fn, bind){ var pairs = this.items(); for(var i=0,n=pairs.length;i<n;i++){ fn.call(bind, pairs[i][1], pairs[i][0]); } }, map: function(fn, bind){ var results = hash({}); this.each(function(value, key){ results.put(key, fn.call(bind, value, key)); }); return results; }, filter: function(fn, bind){ var results = hash({}); this.each(function(value, key){ if (fn.call(bind, value, key)) results.put(key, value); }); return results; }, index: function(val) {//与get方法相反，取得其key var obj = this._hash; for(var prop in obj) if(obj.hasOwnProperty(prop) && obj[prop] === val) return prop; return null; }, toString:function(){ var pairs = this.items(),results = []; for(var i=0,n=pairs.length;i<n;i++){ results[i] = pairs[i][0]+":"+pairs[i][1] } return "{ "+results.join(", ")+" }"; }, each:this.forEach } hash.fn.init.prototype = hash.fn; var assert = document.getElementById("assert"); if(!assert){ assert = document.createElement("ul"); assert.i = 0; var item = document.createElement("li"); document.body.insertBefore(assert,null); } var test = function(str){ var li = item.cloneNode(false); assert.appendChild(li); li.innerHTML = str; assert.i++; li.style.backgroundColor = assert.i％2 === 1? "#e6e6e6" : "#D0E4FC"; }; test("[1]传入一个普通对象") test(hash({ key: "value" })) test("[2]传入两个参数，第一个必须是字符串") test(hash('body',document.body)) test("[3]传入一个以逗号隔开的字符串") test(hash("key1,val1,key2,val2")) test("[4]传入一个以空白隔开的字符串") test(hash("司徒正美")) test("[5]传入一个数组") test(hash(['aa','bb','cc'])) var h = hash([1,2,3,4,5]); test("测试contains") test(h.contains(4)) test("测试get") test(h.get(4)) test("测试put") test(h.put(5,"新加的")) test("测试remove") test(h.remove(0)) test("测试pop") test(h.pop(5)) test("测试keys") test(h.keys()) test("测试values") test(h.values()) test("测试items") test(h.items()) test("测试toObject") test(h.toObject()) test("测试ensure，只有此键不存在时才添加") test(h.ensure(10,'qq')) test("测试ensure，存在时返回此键对应的值") test(h.ensure(2,'ww')) test("测试forEach") h.forEach(function(v){ test(v+10) }) test("测试map") test(h.map(function(v){ return v+20 })) test("测试filter") test(h.filter(function(v,k){ return dom.isNumber(v) })); test("测试index") test(h.index("qq")) test("测试each") h.each(function(v){ test(v+5) }); } </script> </head> <body> </body></html>

哈希对象
empty	清空hash。
contains	检测hash是否包含此键值对，参数为key
put	向hash增加一个键值对，参数两个，key与value
get	根据key取得相应的value
remove	根据key移除相应的键值对，返回修改后的hash
pop	根据key移除相应的键值对，返回被移除的value
keys	取得所有的键，以数组形式返回
values	取得所有的值，以数组形式返回
items	取得所有的键值对，以数组形式返回
toObject	变成普通对象
ensure	仅当此键不存在时才添加新的键值对
forEach或each	类似Array.forEach，迭代执行传入函数
map	类似Array.map，迭代执行传入函数，把执行结果放到一个新hash返回
filter	类似Array.filter，迭代执行传入函数，把符合条件的键值对放到一个新hash返回
toString	没什么好说的

第一页上一页 1

投稿

第一类工厂与哈希对象（2）

猜你喜欢