javascript(중국어 버전)_javascript 기술에서 가장 일반적으로 사용되는 10가지 사용자 정의 기능-JS 튜토리얼-php.cn

javascript(중국어 버전)_javascript 기술에서 가장 일반적으로 사용되는 10가지 사용자 정의 기능

WBOY

풀어 주다： 2016-05-16 18:47:14

원래의

994명이 탐색했습니다.

(10)addEvent
인터넷에서 가장 인기 있는 버전은 Scott Andrew의 버전입니다. JavaScript 커뮤니티에서 대회를 열거나(Pro Javascript Techniques의 100페이지에서 이 이벤트를 볼 수 있음) PPK 웹사이트를 검색하여 요청한다고 합니다. 이벤트 추가 및 이벤트 제거 기능으로 승리자가 됩니다. 그의 구현은 다음과 같습니다.

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

 
function addEvent( elm, evType , fn, useCapture) { 
if (elm.addEventListener) { 
elm.addEventListener(evType, fn, useCapture);//DOM2.0 
return true; >else if (elm.attachEvent) { 
var r = elm.attachEvent('on' evType, fn);//IE5 
return r 
} 
else { 
elm[ 'on' evType] = fn;//DOM 0 
} 
} 

 
다음은 Dean Edwards 버전 

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

// addEvent/removeEvent 작성자: Dean Edwards, 2005

// Tino Zijdel의 입력 
// http:// dean.edwards.name/weblog/2005/10/add-event/ 
function addEvent(element, type, handler) { 
//각 이벤트 핸들러 함수에 고유 ID 할당 
if ( !handler.$$guid) handler.$$guid = addEvent.guid; 
//if (!element.events) 요소의 이벤트 유형에 대한 해시 테이블을 생성합니다. events = {};//각 "요소/이벤트" 쌍에 ​​대한 이벤트 핸들러의 해시 테이블 생성 
var handlers = element.events[type] 
if (!handlers) { 
 handlers = element .events[type] = {};//기존 이벤트 핸들러 저장(있는 경우) 
if (element["on" type]) { 
handlers[0] = element[" on " type]; 
} 
} 
//이벤트 핸들러 함수를 해시 테이블에 저장 
handlers[handler.$$guid] = handler; 
//전역 이벤트 할당 핸들러 함수는 모든 작업을 수행합니다
element["on" type] = handlerEvent 
//고유 ID를 생성하는 데 사용되는 카운터
addEvent.guid = 1; (요소, 유형, 핸들러) { 
//해시 테이블에서 이벤트 핸들러 함수 삭제 
if (element.events && element.events[type]) { 
delete element.events[type ][handler. $$guid]; 
} 
}; 
function handlerEvent(event) { 
var returnValue = 
//이벤트 객체 캡처(IE에서는 전역 이벤트 객체 사용) 
event = event || fixEvent(window.event); 
//이벤트 처리 함수의 해시 테이블에 대한 참조 가져오기 
var handlers = this.events[event.type]// 각 핸들러 함수 실행 
for (var i in handlers) { 
this.$$handleEvent = handlers[i] 
if (this.$$handleEvent(event) === false) { 
returnValue = false; 
} 
} 
return value; 
} 
//IE의 이벤트 객체에 "누락된" 함수 추가
function fixEvent(event) { 
//표준 W3C 메소드 추가 
event.preventDefault = fixEvent.preventDefault; 
event.stopPropagation = fixEvent.stopPropagation; 
return event; 
fixEvent.preventDefault = function() { 
this.returnValue = false; 
}; 
fixEvent.stopPropagation = function() { 
this.cancelBubble = 
}; 함수는 매우 강력하며 IE의 이러한 포인팅 문제를 해결합니다. 이벤트는 항상 첫 번째 매개변수로 전달되므로 브라우저 간 사용이 쉬워집니다. 
또한 HTML5 워킹 그룹 버전도 소중히 여겼습니다. 




코드 복사


 코드는 다음과 같습니다. 

var addEvent=(function(){
if(document.addEventListener){
return function(el,type,fn){

if(el.length){ for( var i=0;iaddEvent(el[i],type,fn) } }else{ el.addEventListener (type,fn, false); }

};

}else{ 
return function(el,type,fn){ 
if(el.length){ 
for (var i=0 ;iaddEvent(el[i],type,fn) 
} 
}else{ 
el.attachEvent('on' type,function() { 
return fn.call(el,window.event); 
} 
} 
} 

 
(9) addLoadEvent() 
이 기능에 대해서는 자세히 설명하지 않고 약간 느릴 뿐입니다. 주요 라이브러리에서는 기본적으로 이를 무시하고 자체적으로 domReady 버전을 구현합니다. 다음은 Simon Willison의 구현입니다. 




코드 복사 


 코드는 다음과 같습니다. 

 
var addLoadEvent = function( fn) { 

var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload =
}else {

window.onload = function() { oldonload(); fn() } } }

(8) getElementsByClass()
저는 수집하는 습관이 있고 많은 버전을 가지고 있는데, 마침내 스스로 브레인스토밍하고 구현했습니다. 다음은 내 구현입니다.

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

 
var getElementsByClassName = function (searchClass , node,tag) { 
if(document.getElementsByClassName){ 
return document.getElementsByClassName(searchClass) 
}else{ 
node = node || 태그 || "*"; 
var 클래스 = searchClass.split(" "), 
elements = (tag === "*" && node.all)? node.getElementsByTagName(tag) , 
patterns = [], 
returnElements = [], 
current, 
match 
var i =classes.length 
while(--i >= 0) { 
patterns.push(new RegExp("(^|\s)" 클래스[i] "(\s|$)")) 
} 
var j = elements.length; >while( --j >= 0){ 
current = elements[j]; 
match = false 
for(var k=0, kl=patterns.length; kmatch = 패턴[k].test(current.className); 
if (!match) break 
} 
if (match) returnElements.push(current); } 
return returnElements; 
} 
} 

 
(7) cssQuery() 
별칭은 Dean Edwards가 처음 구현한 getElementsBySeletor입니다. JQuery 및 기타 클래스 라이브러리에는 해당 구현이 있으며 그 중 JQuery는 이를 $() 선택기에 통합하고 그 명성은 이전 버전의 명성을 뛰어넘습니다. 그러나 IE8과 같은 최신 브라우저는 이미 querySelector 및 querySelectorAll 메소드를 구현했습니다. IE6 및 IE7이 폐기되면 쓸모가 없게 됩니다. Wuyou는 구현 원칙에 대해 설명했습니다. 너무 길어서 내용이 잘 안 나오네요. 자세한 내용은 원저자 홈페이지에서 확인하시면 됩니다. 

(6) 토글()
은 DOM 요소를 표시하거나 숨기는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다. functionggle(obj) {

var el = document.getElementById(obj);

if ( el.style.display != 'none' ) { 
el.style.display = 'none'' 
} 
else { 
el .style.display = ''; 
} 
} 

 
 (5) insertAfter() 
DOM은 insertBefore만 제공하므로 insertAfter를 구현해야 합니다. 우리 스스로. 하지만 이제 Firefox를 제외한 모든 브라우저에서는 insertAdjacentElement가 더 나은 선택이라고 생각합니다. Jeremy Keith 버전은 다음과 같습니다. 

코드 복사 코드는 다음과 같습니다. function insertAfter( parent, node, referenceNode) {

parent.insertBefore(node, referenceNode.nextSibling)

} 

 
 (4) inArray() 
는 무언가가 존재하는지 확인하는 데 사용됩니다. check 배열 값에서는 Prototype 클래스 라이브러리에서 다음 메서드를 가져옵니다. 

코드 복사 코드는 다음과 같습니다. Array.prototype.inArray = 함수(값 ) {

for (var i=0,l = this.length ; i if (this[i] === value) {
return true; }
}
return false;
};

다른 버전: