JavaScript ライブラリ D_javascript スキル-jsチュートリアル-php.cn

これは補助クラスライブラリであるため、他のすべてのフレームワークおよびクラスライブラリと互換性を持たせるために、ラッパーを使用してオブジェクトを拡張します。 D クラスライブラリの主なコンテンツは、String、Number、Array、Date など、js で一般的に使用される組み込みオブジェクトの拡張です。これらの拡張は、String に拡張された Trim メソッドなど、特定のビジネスロジックに焦点を当てています。メソッドなどは、オブジェクト自体ではサポートされておらず、フレームワーククラスライブラリでもサポートされていないか不完全にサポートされているいくつかの一般的に使用される関数の拡張です。同時に、対応するラッパーのパッケージ化を通じて、チェーンメソッドを通じてオブジェクトを操作できます。最後に、各ラッパーはボックス化解除 (つまり、ネイティブオブジェクトへの復元) メソッドを提供します。したがって、パッケージャーが提供する本質は、梱包、操作、および開梱のプロセスです。

名前空間:

コードをコピーコードは次のとおりです:

var D = {};

いくつかの関数は次のとおりです:

。文字列ラッパー

コードをコピーします。 🎜> コードは次のとおりです。

(function(){

//パッケージ化文字列 
D.str = function(s){ 
if(! (y.str のこのインスタンス)) 新しい y.str(s) を返します。 
this.val = (s!==unknown) : ""; .str.prototype = { 
//文字列の両側の空白を削除します 
trim : function(type){ 
var type = {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; iadder.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(){ //パッケージ化配列 D.arr = function(arr){ if(!(D.arr のこのインスタンス))return new D.arr(arr); D.arr.prototype = { each : function(fn){ for (var i=0,len=this.val.length;iif(fn.call(this.val[i ])===false){

これを返す;
}
}
これを返す;
},
map : function(fn){
var copy = [ ];
for(var i=0,len = this .val.length;icopy.push(fn.call(this.val[i])); }
this.val = copy;
return this ;
},
filter : function(fn){
var copy = []; len=this.val.length;ifn.call(this.val[i]) && copy.push(this.val[i]);
}
this .val = コピー;
これを返します;
} 、
削除 : function(obj,fn){
fn = fn ||
return m== =n;
};
for(var i =0,len = this.val.length;iif(fn.call(this.val[i],obj) )===true){
this.val.splice (i,1);
}
}
これを返します;
},
unique : function(){
var o = {}, arr = [];
for(var i=0,len = this.val.length;ivar itm = this.val[i] ;
(!o[itm] || (o[ itm]!==itm) )&& (arr.push(itm),o[itm] = itm);
}
this.val = arr;
これを返します;
},
indexOf : function(obj,start){
var len = this.val.length,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 = argument.length === 2 ? ~~start : <🎜; >start = start < (開始 len) : (start> ;=len?(len-1):start);
for(;start>-1;start--); .val[start] === obj)return start;
}
return -1;
unBox : function(){
return this.val;
};
//alert(D.arr (["123",123]).unique().unBox());
//alert([1,2, 3]).map(function(i){return i;} ).filter(function(i){return i>2;}).remove(3).unBox())();

.Number ラッパー

コードをコピーコードは次のとおりです。

 
(function( ){ 
//パック番号 
D.num = function(num){ 
if(!(このインスタンスの D.num))return new D.num(num); = 数値 (数値) || 
}; 
D.num.prototype = { 
padZore : function(len){ 
var = this.val.toString(); >if (val.length>=len)return this; 
for(var i=0,l = len-val.length;ival = "0" val; >} 
戻り値 
}, 
floatRound : function(n){ 
n = n || 0; 
var temp(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()); 
})();日付パッケージング デバイス





コードをコピー

コードは次のとおりです。

(function( ){ //パッケージング日付 D.date = function(date){ if(!(D.date のインスタンス))return new D.date(date); if(! (date instanceof Date) ){ var d = new Date(date); this.val = (d == "無効な日付" || d == "NaN") : new Date() ?日付(日付);

}else{

this.val = 日付>} 
}; 
D.date.prototype = { 
toStr : function(tpl); 🎜>var date = this.val,tpl = tpl || "yyyy-MM-dd hh:mm:ss"; 
var v = [date.getFull Year(),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;ikv [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]); tpl; 
 }, 
unBox : function(){ 
return this.val; 
}//alert("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;ifnQueue[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;inodes[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成熟版本的一部分。