JavaScript 라이브러리 D_javascript 기술-JS 튜토리얼-php.cn

보조 클래스 라이브러리이기 때문에 다른 모든 프레임워크 및 클래스 라이브러리와 호환되기 위해 래퍼를 사용하여 개체를 확장합니다. D 클래스 라이브러리의 주요 콘텐츠는 문자열, 숫자, 배열, 날짜 등과 같이 js에서 일반적으로 사용되는 내장 개체의 확장입니다. 이러한 확장은 문자열로 확장된 트림 메서드와 같은 특정 비즈니스 논리에 중점을 둡니다. 및 toStr 확장된 Date 메서드 등은 객체 자체에서 지원되지 않고 프레임워크 클래스 라이브러리에서 지원되지 않거나 불완전하게 지원되는 일부 일반적으로 사용되는 함수에 대한 확장입니다. 동시에 해당 래퍼의 패키징을 통해 체인 방식을 통해 객체를 작동할 수 있습니다. 마지막으로 각 래퍼는 언박싱(즉, 네이티브 객체로 복원) 방식을 제공합니다. 따라서 패키저가 제공하는 본질은 포장하고, 운영하고, 개봉하는 과정이다.

네임스페이스:

코드 복사 코드는 다음과 같습니다.

var D = {};

일부 함수는 다음과 같습니다:

.문자열 래퍼

코드 복사 코드는 다음과 같습니다.

 
(function(){ 
//Packaging String 
D.str = function(s){ 
if(! (이 인스턴스의 y.str ))return new y.str(s); .str.prototype = { 
//문자열 양쪽 공백 제거 
trim : function(type){ 
var type = {0:"(^\s )|(\s $ )",1:"^\s " ,2:"\s $"}; 
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 || 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) 
; , 
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(){ //Packaging Array D.arr = function(arr){ if(!(이 D.arr 인스턴스))return new D.arr(arr)

this.val = arr ||

}
D.arr.prototype = {
각 : 함수(fn){
for (var i=0,len=this.val.length;iif(fn.call(this.val[i ])===false){
return this;
}
}
return this
},
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 = []
for(var i=0, len=this.val.length;ifn.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;iif(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;ivar 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 =args.length === 2 ~~start : len-1; >start = 시작 < 0 ? (시작 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())
})();

.번호 래퍼

코드 복사 코드는 다음과 같습니다.

 
(function( ){ 
//팩 번호 
D.num = function(num){ 
if(!(D.num의 이 인스턴스))return new D.num(num) 
this.val; = 숫자(숫자) || 
}; 
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;ival = "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()) 
})(); 날짜 포장 장치





코드 복사

코드는 다음과 같습니다.

(기능( ){ //패키징 날짜 D.date = function(date){ if(!(D.date의 이 인스턴스))return new D.date(date) if(! (날짜 인스턴스of Date) ){ var d = new Date(date); this.val = (d == "잘못된 날짜" || d == "NaN") ? new Date() : new 날짜(날짜);

}else{

this.val = 날짜; 
} 
} 
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;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]) 
} 
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(!(D.dom의 이 인스턴스))return new D .dom(노드); 
5 if(typeof 노드 === "정의되지 않음"){ 
6 node = document.body 
7 }else if(typeof 노드 == "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 ? || "",this.val.innerHTML = 값) : (값 = 값 || 0,this.val.value = 값) 
return this 
}, 
attr : function(k ,v){ 
if(typeof k == "객체"){ 
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. 클래스명 " "; 
(clsName.indexOf(" " cls " ")==-1) && (clsName = (clsName cls).replace(/^s /,"")); 
this.val.className = clsName; 
이것을 돌려주세요; 
}, 
removeClass : function(cls){ 
var clsName = " " this.val.className " "; 
this.val.className = clsName.replace(new RegExp(" " cls " ","g"),"").replace(/(^s )|(s $)/,""); 
이것을 돌려주세요; 
}, 
addEvent : function(evType,fn){ 
var that = this, typeEvent = this.val["on" evType]; 
if(!typeEvent){ 
(this.val["on" evType] = function(){ 
var fnQueue = 인수.callee.funcs; 
for(var i=0;i< ;fnQueue.length;i ){ 
fnQueue[i].call(that.val) 
} 
}).funcs =[fn]; 
}else{ 
typeEvent.funcs.push(fn); 
} 
이것을 반환하세요. 
}, 
delEvent : function(evType,fn){ 
if(fn===undefine){ 
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) ; 
휴식; 
} 
} 
fnQueue.length==0 && (this.val["on" evType] = null); 
} 
이것을 반환하세요. 
}, 
unBox : function(){ 
return this.val; 
} 
}; 
//静态방법 
var __ = D.dom; 
__.$ = function(id){ 
반환 유형 id == "string" ? document.getElementById(id) : id; 
}; 
__.$$ = function(tag,box){ 
return (box===undefine?document:box).getElementsByTagName(tag); 
}; 
__.$cls = function(cls,tag,node){ 
node = node === 정의되지 않음 ? 문서: 노드; 
cls = cls.replace(/(.)|(^s )|(s $)/g,""); 
if(node.getElementsByClassName)return node.getElementsByClassName(cls); 
태그 = 태그 === 정의되지 않음 ? "*" : 태그; 
var filter = [], 노드 = (tag==="*" && node.all) ? node.all : node.getElementsByTagName(태그); 
for(var i=0,j=nodes.length;inodes[i].nodeType==1 && ((" " 노드[i].className " "). indexOf(" " cls " ")!=-1) && filter.push(nodes[i]); 
} 
반환 필터; 
}; 
//静态方法结束 
alert(D.dom.$cls(".abc").length); 
})(); 

 
Dom包装器的实例对象负责当前dom节点的自身操작품 🎜>
以上就是D类库的初级版本, 其中的要要part——对内置对象的扩展目前只有较少象的物話，比如对Numberally 扩件中，到当多数字操작품,其中有一些是常可以将其添加入Number包装器，好处也是显而易见的。 

最后如果你看到了这篇文章，有足够的想法，我希望你能尽你所能来给于包装더 많은 방법을 확장하면, 이 부분이 주요 의미로 사용됩니다.