JavaScript类库D_javascript技巧
因为是辅助类库,所以为了兼容所有其他框架和类库,采用了包装器的方式对对象进行扩展。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
}
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
return this;
}
}
return this;
},
map : function(fn){
var copy = [];
for(var i=0,len = this.val.length;i
}
this.val = copy;
return this;
},
filter : function(fn){
var copy = [];
for(var i=0,len=this.val.length;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
this.val.splice(i,1);
}
}
return this;
},
unique : function(){
var o = {},arr = [];
for(var i=0,len = this.val.length;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 for(;start
}
return -1;
},
lastIndexOf : function(obj,start){
var len = this.val.length,start = arguments.length === 2 ? ~~start : len-1;
start = 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
}
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
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
}
}).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
}
return filter;
};
//静态方法结束
alert(D.dom.$cls(".abc").length);
})();
Dom包装器的实例对象负责当前dom节点的自身操作。而"静态方法"部分则是提供了dom选择器的基本实现。
以上就是D类库的初级版本,其中的重要部分——对内置对象的扩展目前只有较少的方法扩展,比如对Number的扩展,在基于web的财务软件中,用到相当多的数字操作,其中有一些是常用处理,就可以将其添加入Number包装器,好处也是显而易见的。
最后如果你看到了这篇文章,也有足够的想法,我希望你能尽你所能来给于包装器更多的方法扩展,你的其中的一些主意可能会成为D成熟版本的一部分。

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

本教程演示了创建通过Ajax加载的动态页面框,从而可以即时刷新,而无需全页重新加载。 它利用jQuery和JavaScript。将其视为自定义的Facebook式内容框加载程序。 关键概念: Ajax和JQuery

10款趣味横生的jQuery游戏插件,让您的网站更具吸引力,提升用户粘性!虽然Flash仍然是开发休闲网页游戏的最佳软件,但jQuery也能创造出令人惊喜的效果,虽然无法与纯动作Flash游戏媲美,但在某些情况下,您也能在浏览器中获得意想不到的乐趣。 jQuery井字棋游戏 游戏编程的“Hello world”,现在有了jQuery版本。 源码 jQuery疯狂填词游戏 这是一个填空游戏,由于不知道单词的上下文,可能会产生一些古怪的结果。 源码 jQuery扫雷游戏

此JavaScript库利用窗口。名称属性可以管理会话数据,而无需依赖cookie。 它为浏览器中存储和检索会话变量提供了强大的解决方案。 库提供了三种核心方法:会话

本教程演示了如何使用jQuery创建迷人的视差背景效果。 我们将构建一个带有分层图像的标题横幅,从而创造出令人惊叹的视觉深度。 更新的插件可与JQuery 1.6.4及更高版本一起使用。 下载
