JavaScript类库D(2)


(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成熟版本的一部分。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdxwjp.html