JavaScript类库D

因为是辅助类库,所以为了兼容所有其他框架和类库,采用了包装器的方式对对象进行扩展。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成熟版本的一部分。

时间: 2010-10-22

javascript拖拽上传类库DropzoneJS使用方法

用法 1. add js and css style 复制代码 代码如下: <link href="~/Dropzone/css/basic.css" rel="stylesheet" /> <link href="~/Dropzone/css/dropzone.css" rel="stylesheet" /> <script src="~/Dropzone/dropzone.min.j

JavaScript 应用类库代码

/* $ 获取指定对象 @element 对象名 可以使用对象名集合,返回值为对象的集合 如果您使用了 Prototype 类库, 请把该函数注释掉 Sams_object.Get() 中同样实现该函数的所有功能 */ function $(element) {   if (arguments.length > 1) {     for (var i = 0, elements = [], length = arguments.length; i < length; i++)       el

用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载

IE7 loads and parses all style sheets into a form that Explorer can understand. You can then use most CSS2/CSS3 selectors without having to resort to CSS hacks. The lightweight script is a single-line inclusion in your HTML/XML document. No alteratio

Moment.js 不容错过的超棒Javascript日期处理类库

使用这个类库,可以帮助你有效的处理相关日期.希望大家喜欢! 主要特性: 3.2kb超轻量级 独立类库,意味这你不需要倒入一堆js 日期处理支持UNIX 时间戳,String,指定格式的Date 日期处理:加,减日期 日期显示:包括相对时间显示的日期显示选项 其它内建的功能,例如,保存,timezone offset和i18n支持 可以作为node.js的一个模块 完整的文档介绍 如何使用? 复制代码 代码如下: var now = moment(); console.log(now.format

AppBaseJs 类库 网上常用的javascript函数及其他js类库写的

复制代码 代码如下: /*----------------------------------- Web Application JavaScript Library 2009.11 janchie ------------------------------------*/ //String原生对象扩展 置空左右端空格 String.prototype.trim = function(){ return this.replace(/(^[\s\n\t\r]*)|([\s\n\r\t]*$)/g

JavaScript页面模板库handlebars的简单用法

Handlebars 是一个 JavaScript 页面模板库,帮助你轻松的构建语义化模板. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>handlebars</title> <meta http-equiv="keywords" content=&quo

5个最佳的Javascript日期处理类库分享

在大家日常网站开发和web应用开发中,我们往往需要有效的调用Javascript处理日期和时间格式相关的函数,在Javascript中已经包含了部分最基本的内建处理方法.当然如果大家有时间的话,完全可以自己开发和编写需要的方法,但是有效的使用别人已经开发好的类库肯定是一个更好的处理方式,没有必要什么都原创吧,君子善假于物也.今天这里我们收集了5个最佳的日期处理函数类库,希望对于大家有帮助,如果你喜欢我们的文章,请大家给我们留言,谢谢! 1. XDate 这个类库是javascript本地日期对象

stream.js 一个很小、完全独立的Javascript类库

<script src='stream-min.js'></script> 下载 stream.js 2Kb minified streams是什么? Streams 是一个操作简单的数据结构,很像数组或链接表,但附加了一些非凡的能力. 它们有什么特别之处? 跟数组不一样,streams是一个有魔法的数据结构.它可以装载无穷多的元素.是的,你没听错.他的这种魔力来自于具有延后(lazily)执行的能力.这简单的术语完全能表明它们可以加载无穷多的元素. 入门 如果你愿意花10分钟的时

Javascript类库的顶层对象名用户体验分析

由于顶级对象是使用类库几乎所有功能的入口,在编码中会频繁地输入这几个字符,因此在设计类库时,顶级对象名输入的简便性也是相当重要的. 在此将从对象名称的长度.输入对象名称的按键顺序这两个方面对三个类库进行重点比较,同时力求照顾到一些特别的点,从而得出一个较为全面的评测结果. 名称长度 jQuery共有6个字符组成,从长度上而言是三个类库中最长的一个,同时包含了一个大写字母Q,在输入过程中需要加入一次SHIFT键,因此长度值给定为7. Ext共有3个字符组成,在长度上是最有优势的,由于首字母为大写字

一实用的实现table排序的Javascript类库

一个Javascript 的类库,用于table内容排序.使用很方便,不用每次都去调用数据库了. 特别适合多表查询的排序.加上<tbody>的style.display 切换,也可以实现分页. 效果演示 用法: 1.添加JS <SCRIPT src="sorttable.js" type="text/javascript"></SCRIPT> 2.添加TABLE,注意的是:一定要有ID,class为"sortable&q

javascript面向对象包装类Class封装类库剖析

javascript是个入门门槛很低的语言,甚至一个从来没有接触过javascript的技术人员,几小时内就可以写出一个简单有用的程序代码. 但是如果因此你就下结论:javascript是门简单的语言.那你就大错特错了.想写出高性能的代码,同样需要具备一个高级程序员的基本素养. 一个java或者c++程序员,不一定能写出高性能的javascript代码,但更容易写出高性能的javascript代码. javascript的简单是基于它"胸襟广阔"的包容性.它声明时,不需要指定类型,甚至

javascript 面向对象全新理练之数据的封装

今天主要讨论如何在 JavaScript 脚本中实现数据的封装(encapsulation).数据封装说的简单点就是把不希望调用者看见的内容隐藏起来.它是面向对象程序设计的三要素之首,其它两个是继承和多态,关于它们的内容在后面再讨论. 关于数据封装的实现,在 C++.Java.C# 等语言中是通过 public.private.static 等关键字实现的.在 JavaScript 则采用了另外一种截然不同的形式.在讨论如何具体实现某种方式的数据封装前,我们先说几个简单的,大家所熟知却又容易忽略

深入剖析JavaScript面向对象编程

二. Javascript 面向对象编程:构造函数的继承 本节主要介绍,如何生成一个"继承"多个对象的实例. 比如,现在有一个"动物"对象的构造函数, function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数, function Cat(name,color){ this.name = name; this.color = color; } 怎样才能使"猫&qu

Javascript 面向对象编程(一) 封装

学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大家学习这个部分有所帮助.我主要参考了以下两本书籍: <面向对象的Javascript>(Object-Oriented JavaScript) <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd

javascript 面向对象编程基础:封装

很长一段时间以来(这里本人要幸灾乐祸地说),js是"一种点缀的作用,完成很有限的功能,诸如表单验证之类,其语言本身也一直被当作过程化的语言使用,很难完成复杂的功能.".但是(这里本人要苦大仇深.痛心疾首地说),"而Ajax的出现使得复杂脚本成为必需的组成部分,这就对 JavaScript 程序设计提出了新的要求,很多Ajax应用开始利用JavaScript面向对象的性质进行开发,使逻辑更加清晰.事实上,JavaScript 提供了完善的机制来实现面向对象的开发思想."

javascript 面向对象封装与继承

整理一下js面向对象中的封装和继承. 1.封装 js中封装有很多种实现方式,这里列出常用的几种. 1.1 原始模式生成对象 直接将我们的成员写入对象中,用函数返回. 缺点:很难看出是一个模式出来的实例. 代码: 复制代码 代码如下: function Stu(name, score) {             return {                 name: name,                 score: score             }         }    

Javascript 面向对象编程(coolshell)

这两天有个前同事总在问我Javascript面向对象的东西,所以,索性写篇文章让他看去吧,这里这篇文章主要想从一个整体的角度来说明一下Javascript的面向对象的编程.(成文比较仓促,应该有不准确或是有误的地方,请大家批评指正) 另,这篇文章主要基于 ECMAScript 5, 旨在介绍新技术.关于兼容性的东西,请看最后一节. 初探 我们知道Javascript中的变量定义基本如下: 复制代码 代码如下: var name = 'Chen Hao';; var email = 'haoel(

Javascript面向对象编程

Javascript的重要性 使用率 1.在web应用中,涉及到前端界面编程基本上都要用到javascript语言: 2.Web2.0及Ajax推动了javascript语言. 3.随着大量的c/s应用转向b/s,富客户端技术的不断推广,javascript语言的应用范围还将不断加大: javascript的特点 简单 动态 基于对象(面向对象) Javascript面向对象概述 Javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDri

浅谈javascript 面向对象编程

感叹是为了缓解严肃的气氛并引出今天要讲的话题,"javascript面向对象编程",接下来,我们围绕面向对象的几大关键字:封装,继承,多态,展开. 封装:javascript中创建对象的模式中,个人认为通过闭包才算的上是真正意义上的封装,所以首先我们先来简单介绍一下闭包,看下面这个例子: 复制代码 代码如下: <script type="text/javascript"> function myInfo(){ var name ="老鱼&quo

Javascript 面向对象 (声明篇)

由于才疏学浅,我不得不将<Javascript 高级程序设计>中的部分内容摘抄过来,这些同时也算是我的读书笔记吧.由于 Javascript 面向对象机制及其的重要,而且内容非常的繁多,在这里就分篇章逐个介绍. 使用对象首先就是声明它(内置的对象当然就不需要了).该死的 Javascript 总是会让我们死去很多的脑细胞,这篇文章主要说明下声明 Javascript 类的几种方法. 工厂模式 工厂模式可能是很多开发人员使用的一种模式,简单的说这种方法先定义"地基",然后在往