학습 노트 4:자바 script 대상 프로그램 디자인 체인 호출 사례 분석
3556 단어 Javascript대상 을 향 하 다체인 호출
1.체인 호출:
jquery 는 현재 여러분 이 가장 많이 사용 하 는 js 프레임 워 크 일 수도 있 고 다음 과 같은 호출 방식 에 익숙 해 졌 습 니 다.
$('.someclass').show().css('xxx','xxxx').click(function(){}).xxx……
이런 호출 방식 을 체인 호출 이 라 고 한다.즉,하나의 방법 을 호출 한 후에 방법의 반환 값 을 사용 하여 방법 호출 을 계속 할 수 있다 는 것 이다.2.체인 호출 을 어떻게 실현 합 니까?
체인 호출 이 무엇 인지 알 게 되 었 습 니 다.우 리 는 체인 호출 을 어떻게 실현 하 는 지 다시 보 겠 습 니 다.1 에서 말 한 바 와 같이 우 리 는 체인 호출 의 관건 은 방법의 반환 값 에 있다 는 것 을 알 아야 합 니 다.방법의 반환 값 이 모두 이 방법 을 호출 하 는 대상 이 라면 우 리 는 체인 호출 을 실현 할 수 있 습 니 다.우 리 는 jquery 를 모방 하여$를 대상 으로 하 는 선택 기 를 사용 할 수 있 습 니 다.
(function(){
function _$(els){
this.elements = [];
for(var i=0, len=els.length;i<len;i++){
var elements = els[i];
if(typeof element = ‘string'){
element = document.getElementByIdx_x_x(element);
}
}
this.elements.push(element);
}
_$.prototype = {
each:function(fn){
for(var i=0,len=this.elements.length;i<len;i++){
fn.call(this, this.elements[i]);
}
return this;
},
setStyle: function(prop, val){
……
},
show:function(){
……
},
……
}
window.$ = function(){
return new _$(arguments);
}
})();
위의 코드 는 간단 한 체인 호출 대상 을 실현 하고 $를 사용 합 니 다.$의 별명 으로$가 다른 코드 에 의 해 바 뀌 어 전체 대상 의 정 의 를 잃 어 버 리 는 것 을 방지 합 니 다.첨부:간단 한 체인 호출 예제:
/*
map()
items
*/
var arr = [1,2,3];
var num = arr.map(function(items){
return items + 1;
});
console.log(num);//[2,3,4 var arr = [1,2,3];
var num = arr.map(function (items) {
return items+1;
}).reduce(function (a,b) {//[2,3,4].reduce()
return a+b;
})
console.log(num);//0 --- 2+3+4 = 9]
/*
reduce ,
reduce(function(a,b){
return a+b;
},a)--a
*/
var arr = [1,2,3];
var num_1 = arr.reduce(function (a,b) {
return a+b;
})
console.log(num_1);//6
/*
*/
var arr = [1,2,3];
var num = arr.map(function (items) {
return items+1;
}).reduce(function (a,b) {//[2,3,4].reduce()
return a+b;
})
console.log(num);//0 --- 2+3+4 = 9
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,javascript 대상 입문 강좌,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화과JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript에서 Math.max와 Math.max.apply의 차이점과 용법 상세 설명최근에 작은 사례를 만들 때 Math를 만났어요.max.apply라는 용법은 이전에 보기 드물게 재미있게 느껴졌으니 기록해 보세요. 1Math.max 문법:Math.max(n1,n2,n3,...,nX)반환값:max(...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.