javascript 10 가장 일반적으로 사용되는 사용자 정의 함수 [권장]_javascript 기술

(10)addEvent
인터넷에서 가장 인기 있는 버전은 Scott Andrew의 버전입니다. 자바스크립트 커뮤니티에서 한때 대회를 열었다고 합니다(이 이벤트는 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

// with 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) element.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;
function RemoveEvent(element, type, handler) {
//해시 테이블에서 이벤트 핸들러 함수 제거
if (element.events && element.events[type]) {
delete element.events[ type][handler.$$guid];
}
};
function handlerEvent(event) {
var returnValue = true
//이벤트 객체 캡처(IE는 전역 이벤트를 사용함) object)
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 returnValue;
}
//IE의 이벤트 객체에 "누락된" 함수 추가
function fixEvent(event ) {
//표준 W3C 메서드 추가
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
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. attachmentEvent('on' type,function(){
return fn.call(el,window.event);
})
}
}; ();



(9) addLoadEvent()

이 기능은 이전에 자세히 설명하지 않았지만 기본적으로 약간 느립니다. Version을 자체적으로 구현합니다. 다음은 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입니다. Prototype.js, 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()

은 판단에 사용됩니다. 배열에 특정 값이 있는지 확인합니다. 다음 메서드는 Prototype 클래스 라이브러리에서 가져옵니다.

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

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


다른 버전:

코드 복사

코드는 다음과 같습니다. var inArray = function (arr,value) { for (var i=0,l = arr.length ; i if (arr[i] === value) {

return
}
}
return false



(3) getCookie(), setCookie(), deleteCookie()

BBS나 상업용 웹사이트에서 자주 사용되어야 하는 기능이므로 사용자에게 로그인 시 비밀번호를 입력하라고 요구할 이유가 없습니다. 매번. 자동 로그인 기능을 구현하려면 쿠키를 사용해야 합니다.

코드 복사

코드는 다음과 같습니다.

function getCookie( name ) {
var start = document.cookie.indexOf( name "=" );
var len = 시작 이름.길이 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
return null;
}
if ( start == -1 ) 반환 null;
var end = document.cookie.indexOf( ';', len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}
function setCookie( 이름, 값, 만료, 경로, 도메인, 보안 ) {
var today = new Date();
today.setTime( today.getTime() );
if (만료) {
만료 = 만료 * 1000 * 60 * 60 * 24;
}
varexpires_date = new Date( today.getTime() (expires) );
document.cookie = name '=' escape( value )
( ( 만료 ) ? ';expires='expires_date.toGMTString() : '' ) //expires.toGMTString()
( ( 경로 ) ? ';path=' 경로 : '' )
( ( 도메인 ) ? ';domain=' 도메인 : '' )
( ( 보안 ) ? ';보안' : '' );
}
function deleteCookie( 이름, 경로, 도메인 ) {
if ( getCookie( 이름 ) ) document.cookie = name '='
( ( 경로 ) ? ';path=' 경로: '')
( ( 도메인 ) ? ';domain=' 도메인 : '' )
';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

(2)getStyle()与setStyle()
所有UI控件道应该存재적函数，动态设置样式与获取样式。这个可以写得很短，也可以写得很长，但要精确取得样式，一个字：难!但我发现许多问题都是发端于IE，微软的开发人员好image从来不打算给流getComputedStyle这样的函数，与esis近的currentStyle会返回auto，inhert, ''等让你哭笑不得的值，这还没有算上IE怪癖模式带来的难島呢！各类库的实现是不常长与难分离以来的，下face是我实现적 특징:

复代代码 代码如下:

function setStyle(el,prop,value ){
if(prop == "불투명도" && ! "v1"){
//IE7 버그:필터 滤镜要求 hasLayout=true 方可执行（否则没有效果）
if (!el .currentStyle || !el.currentStyle.hasLayout) el.style.zoom = 1;
prop = "필터";
if(!!window.XDomainRequest){
value ="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=" value*100 ")";
}else{
value ="alpha(opacity=" value*100 ")"
}
}
el.style.cssText = ';' (prop ":" 값);
}
function getStyle(el, style){
if(! "v1"){
style = style.replace(/-(w)/g, function(all, letter){
return letter.toUpperCase()
});
el.currentStyle[스타일]을 반환합니다.
}else{
return document.defaultView.getCompulatedStyle(el, null).getPropertyValue(style)
}
}

有关setStyle还可以看我另一篇博文，毕竟现在设置的样式city是内联样式，与html混杂在一起。
（1)$()
实至name归，最值钱的函数，可以节省많은 양의 흐름이 있습니다. 🎜>

代码如下: function $() { var elements = []; for (var i = 0; i < 인수.길이; i ) { var 요소 = 인수[i];

if (요소 유형 == '문자열')

element = document.getElementById(element);
if (arguments.length == 1)
요소를 반환합니다.
elements.push(요소);
}
요소를 반환합니다.
}

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.