jQuery 체인 연산을 구현하는 방법과 체인 연산을 사용하는 이유_jquery

두 가지 질문
1. jQuery의 체인 연산은 어떻게 구현되나요?
2. 체인 연산을 사용하는 이유는 무엇인가요?
두 질문 중 어느 질문에 답하기가 더 쉽다고 생각하시나요? 객체를 대체합니다. 반환 후에도 객체는 계속해서 메서드를 호출할 수 있으므로 체인 작업을 수행할 수 있습니다. 그런 다음
간단히 을 구현하세요.


코드를 복사하세요.

코드는 다음과 같습니다. //JS 클래스 정의 function Demo() { } //프로토타입 확장

Demo.prototype ={

setName:function (name) {
this.name = 이름;
return this;
},
getName:function() {
return this.name>},
setAge:function(나이)
this.age = age;
return this;
}
}
////Factory function
function D() {
return new Demo();
}
//연결 가능한 호출을 구현하려면
D().setName("CJ").setAge(18).setName()


그런데... 왜? 무엇을 사용하나요?

일반 설명
:
코드 양을 절약하면 코드가 더 우아해 보입니다.
예를 들어 연결이 없는 경우 다음과 같이 코드를 작성해야 할 수도 있습니다.

코드 복사


코드는 다음과 같습니다:

document.getElementById("ele").dosomething(); document.getElementById("ele").dootherthing() 이 코드는 두 번 호출됩니다. document.getElementById는 DOM 트리의 요소를 가져오는 데 사용되며 이는 많은 비용을 소모하고 두 줄을 작성해야 합니다. 그러나 체인 메서드는 한 줄만 작성하면 코드가 절약됩니다. .

하지만 캐시된 요소를 사용할 수도 있습니다. 예:

코드 복사


코드는 다음과 같습니다.

var ele = document.getElementById ("엘레" ; . 가장 나쁜 점은 모든 객체 메서드가 객체 자체를 반환한다는 점인데, 이는 반환 값이 없다는 의미이므로 어떤 환경에도 적합하지 않을 수 있습니다. 예를 들어 매우 큰 정수 BigInteger(Javascript의 Number를 사용하여 저장하면 오버플로될 수 있는 정수를 의미)를 생성하려고 하는데 그 연산 방식을 확장하여 체인 연산을 사용하는 것이 적합한가요? 예를 들어 연산이 31415926535 * 4 - 271828182인 경우 체인 스타일로 설계하면 메소드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.


var result = (new BigInteger("31415926535")).multiply(new BigInteger("4")). subtract(new BigInteger("271828182")) .val();
console.log("result == " result)

우아해 보이지만 중간 결과를 원한다면 어떻게 될까요? ? 아마도 다음과 같이 작성될 것입니다: 코드 복사

코드는 다음과 같습니다:

var bigInteger = new BigInteger(" 31415926535");
var result1 = bigInteger.multiply(new BigInteger("4")).val();
var result2 = bigInteger.subtract(new BigInteger("271828182") ).val();

console.log("result1 == " result1 ", result2 == " result2);
전혀 우아해 보이지 않습니다. 체인 연산을 사용하지 않는 것과 다르지 않습니다!
원래 BigInteger를 변경할 수 없다는 요구사항이 있는 경우에는 어떻게 되나요? 글쎄, 체인 운영은 이 요구 사항을 충족할 수 없는 것 같습니다.

그렇다면 왜 체인 연산을 사용해야 할까요?
더 나은 비동기 경험을 위해
자바스크립트는 비차단 언어이므로 차단하지 않는 것이 아니라 차단할 수 없으므로 이벤트에 의해 구동되고 일부 작업을 비동기적으로 완료해야 합니다. 프로세스를 차단해야 합니다.

근데 비동기 프로그래밍은 미친짓이군요... 실행할때는 분리해도 상관없지만, 코드작성할때도 분리되는군요...
일반적인 비동기 프로그래밍이 뭔가요? 프로그래밍 모델?
•콜백 함수
콜백 함수라 함은 먼저 시스템 어딘가에 함수를 등록하여 시스템에 이 함수의 존재를 알리고, 이후에 함수를 등록하는 것을 의미합니다. , 누군가 이벤트가 발생하면 이 함수를 호출하여 이벤트에 응답합니다.

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

function f(num, callback){
if (numalert("저수준 함수 처리를 호출합니다!")
alert("점수는 음수가 될 수 없습니다. 입력 오류입니다!"); ==0){
alert("저수준 함수 처리를 호출하세요!");
alert("학생이 시험에 응시하지 않았을 수 있습니다!")
}else{
alert( "고수준 함수 처리 호출!");
setTimeout(function(){callback();}, 1000)
}
}

여기서 콜백은 콜백 함수. 콜백은 num이 음수가 아닌 숫자일 때만 호출된다는 것을 알 수 있습니다.
하지만 문제는 함수 내부를 살펴보지 않으면 콜백이 언제, 어떤 상황에서 호출될지 알 수 없다는 점입니다. 코드 간에 어느 정도의 혼동이 있을 수 있습니다. 과정.

콜백 함수는 비동기 구현을 위한 간단하고 배포하기 쉬운 방법이지만 프로그래밍 경험 측면에서는 충분하지 않습니다.
•
이벤트 모니터링 즉, 이벤트 중심이며, 이벤트 순서에 따라 실행 순서가 달라집니다.

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

function EventTarget(){
이것 .handlers = {};
}
EventTarget.prototype = {
생성자: EventTarget,
addHandler: function(type, handler){
this.handlers[type] = [];
},
fire: function(){
if(!event.target){
event.target = this
}
if(this.handlers[event.type) 인스턴스 오브 배열] ){
var handlers = this.handlers[event.type];
for(var i = 0, len = handlers.length, i handlers[i ](event );
}
}
},
removeHandler: function(type, handler){
if(this.handlers[type] instanceof Array){
var handlers = this.handlers[type];
for(var i = 0, le = handlers.length; i if(handlers[i] === handler){
break;
}
}
handlers.splice(i, 1);
}
}
}; 고급 프로그래밍" 사용자 정의 이벤트 구현. 따라서 addHandler를 통해 이벤트 처리 함수를 바인딩하고, fire를 사용하여 이벤트를 트리거하고, RemoveHandler를 사용하여 이벤트 처리 함수를 삭제할 수 있습니다.

이벤트를 통해 분리되기는 하지만, 진행 순서는 더욱 혼란스럽습니다.

•
연쇄 비동기

개인적으로 연쇄 연산의 가장 칭찬할 만한 점은 비동기 프로그래밍 모델의 불명확한 실행 과정 문제를 해결했다는 점입니다. jQuery의 $(document).ready는 이 개념을 매우 잘 보여줍니다. DOMCotentLoaded는 이벤트입니다. 대부분의 jQuery 작업은 DOM이 로드되기 전에는 작동하지 않습니다. 그러나 jQuery 디자이너는 이를 이벤트로 처리하지 않고 "객체 선택 및 선택 작업"으로 전환했습니다. 아이디어. $는 문서 개체를 선택하고 준비는 해당 작업 방법입니다. 이런 방식으로 프로세스 문제는 매우 명확하며 체인의 뒷부분에 있는 메서드는 나중에 실행됩니다.


코드 복사

코드는 다음과 같습니다.

(function(){
var isReady=false; // onDOMReady 메소드가 실행되었는지 확인
var ReadyList= []; // 실행해야 할 메소드를 임시로 저장
var 타이머;//타이머 핸들
ready=function(fn) {
if (isReady)
fn.call( document)
else
readyList.push 내부의 배열 ( function() { return fn.call(this);});
return this;
}
var onDOMReady=function(){
for(var i=0;ireadyList[i].apply(document);
}
readyList = null;
}
var binReady = function(evt){
if(isReady ) return;
isReady=true;
if(document.removeEventListener){
document.removeEventListener("DOMContentLoaded", binReady, false); else if(document.attachEvent){
document.detachEvent("onreadystatechange", binReady);
if(window == window.top){
clearInterval(timer)
timer = null;
}
}
};
if(document.addEventListener){
document.addEventListener("DOMContentLoaded", binReady, false)
}else if(document.attachEvent) {
document.attachEvent("onreadystatechange", function(){
if((/loaded|complete/).test(document.readyState))
bindReady();
}); 🎜 >if(window == window.top){
timer = setInterval(function(){
try{
isReady||document.documentElement.doScroll('left');//IE에서 사용 doScroll을 실행하여 dom이 로드되었는지 확인할 수 있나요?
return;
}
bindReady()
},5)
}
})();


위 코드는 $(document).ready를 사용할 수 없지만 window.ready여야 합니다.
•
Promise

CommonJS의 비동기 프로그래밍 모델도 이 아이디어를 이어갑니다. 각 비동기 작업은 콜백 함수를 지정할 수 있는 then 메서드가 있는 Promise 개체를 반환합니다.

그래서 를 다음과 같이 작성할 수 있습니다: f1().then(f2).then(f3)
이 방법에서는 너무 많은 주의를 기울일 필요가 없습니다. 비동기식은 함수를 통해 객체를 선택하고 작동하는 방법만 알면 비동기 프로그래밍을 수행할 수 있습니다.