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

(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;
};


다른 버전:

코드 복사

코드는 다음과 같습니다. 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从来不打算给takegetCompulatedStyle这样的函数, 与 최근의 현재Style会返回auto，inhert， ' '等让你哭笑不得的值，这还没有算上IE怪癖模式带来的难島呢! 내 취향의 특징:

复代码 代码如下:

function setStyle(el,prop,value){
if (prop == "opacity" && ! "v1"){
//IE7 bug:filter 滤镜要求 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归，最值钱的函数，可以节省多少流流啊。最先由Prototype.js는 那是洪荒时代遗留下来的珍兽，现许多变种。代码如下:

function $() { var elements = []; for (var i = 0; i < 인수.길이; i ) { var 요소 = 인수[i]; if (요소 유형 == '문자열') element = document.getElementById(element);

if (arguments.length == 1)

요소를 반환합니다.
elements.push(요소);
}
요소를 반환합니다.
}