JS 체인 호출 의 실현 방법
HTML 요 소 를 대표 하 는 대상 을 만 드 는 공장
이 HTML 요소 에 대해 어떤 조작 을 수행 하 는 방법
체인 의 구조 $함 수 를 호출 하여 체인 호출 을 지원 하 는 대상 을 만 듭 니 다.
(function() {
/*
* class
* @param {Object} els arguments
*/
function _$(els) {
this.elements = []; // HTML
for(var i=0, len=els.length; i var element = els[i];
if(typeof element === 'string') {
element = document.getElementById(element);
}
this.elements.push(element);
}
}
// HTML
_$.prototype = {
each: function() {},
setStyle: function() {},
show: function() {},
addEvent: function() {},
};
//
window.$ = function() {
return new _$(arguments);
};
})();
모든 대상 이 원형 대상 의 속성 과 방법 을 계승 하기 때문에 우 리 는 원형 대상 에 정 의 된 방법 들 을 호출 방법 으로 사용 하 는 인 스 턴 스 대상 의 인용 으로 되 돌려 줄 수 있 습 니 다. 그러면 그 방법 들 을 체인 으로 호출 할 수 있 습 니 다.
(function() {
/*
* class
* @param {Object} els arguments
*/
function _$(els) {
//...
}
// HTML
_$.prototype = {
each: function(fn) { //fn
for(var i=0; i // len ， elements[i]
fn.call(this, this.elements[i]);
}
return this;
},
setStyle: function(prop, value) {
this.each(function(el) {
el.style[prop] = value;
});
return this;
},
show: function() {
var that = this;
this.each(function(el) {
that.setStyle('display', 'block');
});
return this;
},
addEvent: function(type, fn) {
var addHandle = function(el) {
if(document.addEventListener) {
el.addEventListener(type, fn, false);
}else if(document.attachEvent) {
el.attachEvent('on'+type, fn);
}
};
this.each(function(el) {
addHandle(el);
});
return this;
}
};
//
window.$ = function() {
return new _$(arguments);
}
})();
//----------------------- test --------
$(window).addEvent('load', function() {
$('test-1', 'test-2').show()
.setStyle('color', 'red')
.addEvent('click', function() {
$(this).setStyle('color', 'green');
});
})
체인 호출 방법 으로 데이터 획득 리 셋 함 수 를 사용 하여 체인 호출 을 지원 하 는 방법 으로 데 이 터 를 가 져 옵 니 다.체인 호출 은 할당 기 방법 에 적합 하지만, 값 추출 기 방법 에 대해 서 는 this (이 방법 을 호출 하 는 대상) 가 아 닌 데 이 터 를 되 돌려 주 기 를 바 랄 수도 있 습 니 다. 솔 루 션: 리 셋 기술 을 이용 하여 원 하 는 데 이 터 를 되 돌려 줍 니 다.
window.API = window.API || function() {
var name = 'mackxu';
//
this.setName = function(name0) {
name = name0;
return this;
};
this.getName = function(callback) {
callback.call(this, name);
return this;
};
};
//------------- test ---
var obj = new API();
obj.getName(console.log).setName('zhangsan').getName(console.log);
지원 하 는 방법 체인 호출 JS 라 이브 러 리 설계
JS 라 이브 러 리 특징:
이벤트: 이벤트 모니터 추가 및 삭제, 이벤트 대상 계획 화 처리
DOM: 클래스 이름 관리, 스타일 관리
Ajax: XML HttpRequest 규범화 처리
Function.prototype.method = function(name, fn) {
this.prototype[name] = fn;
return this;
};
(function() {
function _$(els) {
//...
}
/*
* Events
* addEvent
* removeEvent
*/
_$.method('addEvent', function(type, fn) {
//...
}).method('removeEvent', function(type, fn) {
})
/*
* DOM
* addClass
* removeClass
* hover
* hasClass
* getClass
* getStyle
* setStyle
*/
.method('addClass', function(classname) {
//...
}).method('removeClass', function(classname) {
//...
}).method('hover', function(newclass, oldclass) {
//...
}).method('hasClass', function(classname) {
//...
}).method('getClass', function(classname) {
//...
}).method('getStyle', function(prop) {
//...
}).method('setStyle', function(prop, val) {
//...
})
/*
* AJAX
* ajax
*/
.method('ajax', function(url, method) {
//...
});
window.$ = function() {
return new _$(arguments);
};
// JS
window.installHelper = function(scope, interface) {
scope[interface] = function() {
return _$(arguments)
}
}
})();
소결:
체인 호출 은 코드 의 작성 작업 을 간소화 하 는 데 도움 이 되 고 어느 정도 코드 를 더욱 간결 하고 쉽게 읽 을 수 있 습 니 다.체인 호출 을 사용 하면 대상 변 수 를 여러 번 반복 해서 사용 하 는 것 을 피하 고 코드 의 양 을 줄 일 수 있 습 니 다.클래스 의 인 터 페 이 스 를 일치 시 키 려 면 할당 기와 수치 추출 기 가 모두 체인 호출 을 지원 하도록 하려 면 수치 추출 기 에서 반전 함 수 를 사용 하여 데이터 문 제 를 해결 할 수 있 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
