JavaScript类库D


Posted in Javascript onOctober 24, 2010

因为是辅助类库,所以为了兼容所有其他框架和类库,采用了包装器的方式对对象进行扩展。D类库的最主要的内容是针对js常用内置对象的扩展,比如:String,Number,Array,Date等,这些扩展偏于具体的业务逻辑,比如对String扩展的trim方法、对Date扩展的toStr方法等,都是对一些常用但对象本身不支持且框架类库也不支持或不完整支持的功能扩展。同时通过对应包装器的包装我们可以通过链式方法来操作对象,最后每个包装器都提供了拆箱(即还原为原生对象)方法。故包装器提供的实质是一个装箱、操作、拆箱的过程。

命名空间:

var D = {};

部分功能如下:

. String包装器

(function(){ 
//包装String 
D.str = function(s){ 
if(! (this instanceof y.str))return new y.str(s); 
this.val = (s!==undefined) ? s.toString() : ""; 
}; 
D.str.prototype = { 
//删除字符串两边空白 
trim : function(type){ 
var types = {0:"(^\\s+)|(\\s+$)",1:"^\\s+",2:"\\s+$"}; 
type = type || 0; 
this.val = this.val.replace(new RegExp(types[type],"g"),""); 
return this; 
}, 
//重复字符串 
repeat : function(n){ 
this.val = Array(n+1).join(this.val); 
return this; 
}, 
//字符串两边补白 
padding : function(len,dire,str){ 
if(this.val.length>=len)return this; 
dire = dire || 0; //[0代表左边,1代表右边] 
str = str || " "; //默认为一个空白字符 
var adder = []; 
for(var i=0,l = len - this.val.length; i<l;i++){ 
adder.push(str); 
} 
adder = adder.join(""); 
this.val = dire ? (this.val + adder) : (adder + this.val); 
return this; 
}, 
reverse : function(){ 
this.val = this.val.split("").reverse().join(""); 
return this; 
}, 
byteLen : function(){ 
return this.val.replace(/[^\x00-\xff]/g,"--").length; 
}, 
unBox : function(){ 
return this.val; 
} 
}; 
//alert(D.str(" 123 ").trim().repeat(2).padding(10,0,"x").reverse().unBox()); 
})();

.Array包装器
(function(){ 
//包装Array 
D.arr = function(arr){ 
if(!(this instanceof D.arr))return new D.arr(arr); 
this.val = arr || []; 
}; 
D.arr.prototype = { 
each : function(fn){ 
for(var i=0,len=this.val.length;i<len;i++){ 
if(fn.call(this.val[i])===false){ 
return this; 
} 
} 
return this; 
}, 
map : function(fn){ 
var copy = []; 
for(var i=0,len = this.val.length;i<len;i++){ 
copy.push(fn.call(this.val[i])); 
} 
this.val = copy; 
return this; 
}, 
filter : function(fn){ 
var copy = []; 
for(var i=0,len=this.val.length;i<len;i++){ 
fn.call(this.val[i]) && copy.push(this.val[i]); 
} 
this.val = copy; 
return this; 
}, 
remove : function(obj,fn){ 
fn = fn || function(m,n){ 
return m===n; 
}; 
for(var i=0,len = this.val.length;i<len;i++){ 
if(fn.call(this.val[i],obj)===true){ 
this.val.splice(i,1); 
} 
} 
return this; 
}, 
unique : function(){ 
var o = {},arr = []; 
for(var i=0,len = this.val.length;i<len;i++){ 
var itm = this.val[i]; 
(!o[itm] || (o[itm]!==itm) )&& (arr.push(itm),o[itm] = itm); 
} 
this.val = arr; 
return this; 
}, 
indexOf : function(obj,start){ 
var len = this.val.length,start = ~~start; 
start < 0 && (start+= len); 
for(;start<len;start++){ 
if(this.val[start]===obj)return start; 
} 
return -1; 
}, 
lastIndexOf : function(obj,start){ 
var len = this.val.length,start = arguments.length === 2 ? ~~start : len-1; 
start = start < 0 ? (start+len) : (start>=len?(len-1):start); 
for(;start>-1;start--){ 
if(this.val[start] === obj)return start; 
} 
return -1; 
}, 
unBox : function(){ 
return this.val; 
} 
}; 
//alert( D.arr(["123",123]).unique().unBox()); 
//alert(D.arr([1,2,3]).map(function(i){return ++i;}).filter(function(i){return i>2;}).remove(3).unBox()); 
})();

.Number包装器
(function(){ 
//包装Number 
D.num = function(num){ 
if(!(this instanceof D.num))return new D.num(num); 
this.val = Number(num) || 0; 
}; 
D.num.prototype = { 
padZore : function(len){ 
var val = this.val.toString(); 
if(val.length>=len)return this; 
for(var i=0,l = len-val.length;i<l;i++){ 
val = "0" + val; 
} 
return val; 
}, 
floatRound : function(n){ 
n = n || 0; 
var temp = Math.pow(10,n); 
this.val = Math.round(this.val * temp)/temp; 
return this; 
}, 
unBox : function(){ 
return this.val; 
} 
}; 
//alert(D.num(3.1235888).floatRound(3).unBox()); 
})();

.Date包装器
(function(){ 
//包装Date 
D.date = function(date){ 
if(!(this instanceof D.date))return new D.date(date); 
if(!(date instanceof Date)){ 
var d = new Date(date); 
this.val = (d == "Invalid Date" || d == "NaN") ? new Date() : new Date(date); 
}else{ 
this.val = date; 
} 
}; 
D.date.prototype = { 
toStr : function(tpl){ 
var date = this.val,tpl = tpl || "yyyy-MM-dd hh:mm:ss"; 
var v = [date.getFullYear(),date.getMilliseconds(),date.getMonth()+1,date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds()]; 
var k = "MM,M,dd,d,hh,h,mm,m,ss,s".split(","); 
var kv = {"yyyy":v[0],"yy":v[0].toString().substring(2),"mmss":("000"+v[1]).slice(-4),"ms":v[1]}; 
for(var i=2;i<v.length;i++){ 
kv[k[(i-2)*2]] = ("0" + v[i]).slice(-2); 
kv[k[(i-2)*2+1]] = v[i]; 
} 
for(var k in kv){ 
tpl = tpl.replace(new RegExp( k,"g"),kv[k]); 
} 
return tpl; 
}, 
unBox : function(){ 
return this.val; 
} 
}; 
//alert(D.date("2017-123-12").toStr("yyyy-MM-dd hh:mm:ss ms-mmss")); 
// alert(D.date("2017").unBox()); 
})();

.最后为了在脱离其他框架类库的情况下D也可以承担dom操作方面的任务,实现了Dom包装器,如下:
(function(){ 
2 //包装Dom 
3 D.dom = function(node){ 
4 if(!(this instanceof D.dom))return new D.dom(node); 
5 if(typeof node === "undefined"){ 
6 node = document.body; 
7 }else if(typeof node == "string"){ 
8 node = document.getElementById(node); 
9 !node && (node = document.body); 
}else{ 
!node.getElementById && (node = document.body); 
} 
this.val = node; 
}; 
D.dom.prototype = { 
inner : function(value){ 
this.val.innerHTML ? (value = value || "",this.val.innerHTML = value) : (value = value || 0,this.val.value = value); 
return this; 
}, 
attr : function(k,v){ 
if(typeof k == "object"){ 
for(var m in k){ 
this.val[m] = k[m]; 
} 
}else{ 
this.val[k] = v; 
} 
return this; 
}, 
css : function(k,v){ 
var style = this.val.style; 
if(typeof k == "object"){ 
for(var m in k){ 
style[m] = k[m]; 
} 
}else{ 
style[k] = v; 
} 
return this; 
}, 
addClass : function(cls){ 
var clsName = " " + this.val.className + " "; 
(clsName.indexOf(" " + cls + " ")==-1) && (clsName = (clsName + cls).replace(/^\s+/,"")); 
this.val.className = clsName; 
return this; 
}, 
removeClass : function(cls){ 
var clsName = " " + this.val.className + " "; 
this.val.className = clsName.replace(new RegExp(" "+cls+ " ","g"),"").replace(/(^\s+)|(\s+$)/,""); 
return this; 
}, 
addEvent : function(evType,fn){ 
var that = this, typeEvent = this.val["on"+evType]; 
if(!typeEvent){ 
(this.val["on"+evType] = function(){ 
var fnQueue = arguments.callee.funcs; 
for(var i=0;i<fnQueue.length;i++){ 
fnQueue[i].call(that.val); 
} 
}).funcs =[fn]; 
}else{ 
typeEvent.funcs.push(fn); 
} 
return this; 
}, 
delEvent : function(evType,fn){ 
if(fn===undefined){ 
this.val["on"+evType] = null; 
}else{ 
var fnQueue = this.val["on"+evType].funcs; 
for(var i=fnQueue.length-1;i>-1;i--){ 
if(fnQueue[i] === fn){ 
fnQueue.splice(i,1); 
break; 
} 
} 
fnQueue.length==0 && (this.val["on"+evType] = null); 
} 
return this; 
}, 
unBox : function(){ 
return this.val; 
} 
}; 
//静态方法 
var __ = D.dom; 
__.$ = function(id){ 
return typeof id == "string" ? document.getElementById(id) : id; 
}; 
__.$$ = function(tag,box){ 
return (box===undefined?document:box).getElementsByTagName(tag); 
}; 
__.$cls = function(cls,tag,node){ 
node = node === undefined ? document : node; 
cls = cls.replace(/(\.)|(^\s+)|(\s+$)/g,""); 
if(node.getElementsByClassName)return node.getElementsByClassName(cls); 
tag = tag === undefined ? "*" : tag; 
var filter = [], nodes = (tag==="*" && node.all) ? node.all : node.getElementsByTagName(tag); 
for(var i=0,j=nodes.length;i<j;i++){ 
nodes[i].nodeType==1 && ((" " + nodes[i].className + " ").indexOf(" "+cls+ " ")!=-1) && filter.push(nodes[i]); 
} 
return filter; 
}; 
//静态方法结束 
alert(D.dom.$cls(".abc").length); 
})();

Dom包装器的实例对象负责当前dom节点的自身操作。而"静态方法"部分则是提供了dom选择器的基本实现。

以上就是D类库的初级版本,其中的重要部分——对内置对象的扩展目前只有较少的方法扩展,比如对Number的扩展,在基于web的财务软件中,用到相当多的数字操作,其中有一些是常用处理,就可以将其添加入Number包装器,好处也是显而易见的。

最后如果你看到了这篇文章,也有足够的想法,我希望你能尽你所能来给于包装器更多的方法扩展,你的其中的一些主意可能会成为D成熟版本的一部分。

Javascript 相关文章推荐
JS实现可改变列宽的table实例
Jul 02 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 #Javascript
Javascript 类型转换方法
Oct 24 #Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 #Javascript
JavaScript arguments 多参传值函数
Oct 24 #Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 #Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 #Javascript
javascript textContent与innerText的异同分析
Oct 22 #Javascript
You might like
生成缩略图
2006/10/09 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
php 保留字列表
2012/10/04 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python网页正文转换语音文件的操作方法
2018/12/09 Python
python读取xlsx的方法
2018/12/25 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
幼儿园家长评语大全
2014/04/16 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP