JS Chain call_javascript 기술 구현 방법

체인콜
체인콜은 사실 문법적인 속임수일 뿐입니다. 초기 작업을 재사용하여 적은 양의 코드로 복잡한 작업을 표현할 수 있습니다. 이 기술은 두 부분으로 구성됩니다.

HTML 요소를 나타내는 객체를 생성하는 팩토리입니다.

이 HTML 요소에 대해 특정 작업을 수행하는 일련의 메서드입니다.

콜 체인의 구조
$ 함수는 체인 호출을 지원하는 객체 생성을 담당합니다

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

(function() {
/ *
* 프라이빗 클래스 생성
* @param {Object} els 인수 모든 매개변수로 구성된 클래스 배열
*/
function _$(els) {
this.elements = [ ]; // HTML 요소 저장
for(var i=0, len=els.length; i var element = els[i];
if(typeof element == = 'string' ) {
                요소 = document.getElementById(element);                                                HTML 요소가 수행할 수 있는 작업
_$.prototype = {
각각: 함수() {},
setStyle: 함수 () {},
표시: function() {},
addEvent: function() {},
} );



모든 객체는 프로토타입 객체의 속성과 메서드를 상속하므로 프로토타입 객체에 정의된 해당 메서드가 메서드를 호출하는 데 사용된 인스턴스 개체에 대한 참조를 반환하도록 만들어 해당 메서드를 체인으로 호출할 수 있습니다. .





코드 복사

코드는 다음과 같습니다.

(function() {
/*
* 프라이빗 클래스 생성
* @param {Object} els 인수 모든 매개변수로 구성된 클래스 배열
*/
function _$(els) {
//...
}
//HTML 요소에서 수행할 수 있는 작업
_$.prototype = {
각각: function(fn) { / /fn 콜백 함수
for(var i=0; i //요소[i]를 매개변수로 전달할 때마다 len번 실행
fn.call(this, this.elements[i]);
           }
                 return this; {
           el.style[prop] = value;
             > > this.each(function(el) {
that.setStyle('display', 'block');
});
return this;
},
addEvent: 함수( type, fn) {
var addHandle = function(el) {
if(document.addEventListener) {
el.addEventListener(type, fn, false);
            }else if(document.attachEvent ) {
el.attachEvent('on' 유형, fn);
}
};
this.each(function(el) {
                 addHandle(el);
} );
                     이것을 돌려주세요 🎜> }

})();

//--------- 테스트 --------
$(window).addEvent('load' , 함수 () {
$('test-1', 'test-2').show()
.setStyle('color', 'red')
.addEvent('click', function( ) {
          $(this).setStyle('color', 'green');
      });
})



연쇄 호출 방법을 사용하여 데이터 가져오기
콜백 함수를 사용하여 연결 호출을 지원하는 방법에서 데이터를 가져옵니다. 연결 호출은 할당자 메서드에 적합하지만 getter 메서드의 경우 이 대신 원하는 데이터(메서드가 호출되는 개체)를 반환하도록 할 수 있습니다. 해결 방법: 콜백 기술을 사용하여 원하는 데이터를 반환하세요.

코드 복사


코드는 다음과 같습니다.

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;
} ;
};
//------------- 테스트 ---
var obj = new API();
obj.getName(console.log) .setName('zhangsan').getName(console.log);

메서드 체인 호출을 지원하는 JS 라이브러리 설계
JS 라이브러리 기능:

이벤트: 이벤트 리스너 추가 및 삭제, 이벤트 객체 계획

DOM: 클래스 이름 관리, 스타일 관리

Ajax: XMLHttpRequest 정규화

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

Function.prototype.method = function(name , fn) {
this.prototype[name] = fn;
return this;
};
(function() {
function _$(els) {
// ...
}
/*
* 이벤트
* addEvent
* RemoveEvent
*/
_$.method('addEvent', function(type, fn) {
 > *RemoveClass
*Hover
*Hasclass
*getClass
*getstyle
*setstyle
*/
.method ('addclass' e) {> ~ >                               ) {
//...
})
/*
* AJAX
* * ajax
*/
.method('ajax', function(url, method ) {
          //...
                   ); 명명 충돌 문제
window.installHelper = function(scope, 인터페이스) {
범위[인터페이스] = function() {
return _$(arguments)
}
}
} )();



요약:

연쇄 호출은 코드 작성을 단순화하고 어느 정도 코드를 더 간결하고 읽기 쉽게 만드는 데 도움이 됩니다. 많은 경우 연결 호출을 사용하면 개체 변수를 여러 번 재사용하는 것을 방지하여 코드 양을 줄일 수 있습니다. 클래스의 인터페이스를 일관되게 유지하고 할당자와 평가자 모두 체인 호출을 지원하도록 하려면 평가자에서 콜백 함수를 사용하여 데이터 획득 문제를 해결할 수 있습니다.