JS 디자인 패턴에서 체인콜을 사용하는 방법

php中世界最好的语言
풀어 주다: 2018-06-02 10:04:47
원래의
1319명이 탐색했습니다.

이번에는 연쇄 호출에서 JS 디자인 패턴 을 사용하는 방법과 JS 디자인 패턴을 연쇄 호출에서 사용할 때 주의 사항 이 무엇인지 보여 드리겠습니다. 다음은 실제 사례입니다.

jquery를 작성해 본 분들은 다음 코드를 jquery에서 쉽게 사용할 수 있다는 것을 아실 겁니다.

// 不使用链式调用
const element = $(ele);
element.addClass('red');
element.removeClass('green');
element.show();
// 链式调用
$(ele)
 .addClass('red')
 .removeClass('green')
 .show();
로그인 후 복사

jquery의 호출 방법은 체인 호출입니다. 위 코드에서 볼 수 있듯이 체인 호출을 사용하지 않으면 반복되는 코드가 많이 추가되고 특히 중복될 것입니다. 호출을 연결하면 많은 코드를 절약할 수 있고 코드가 더욱 우아하고 깔끔하게 보입니다. 그럼 다음으로는 Chain Call을 지원하는 라이브러리를 구현하는 방법에 대해 알아보겠습니다.

프로토타입 체인을 아는 사람은 모두 생성자가 생성한 인스턴스가 프로토타입 개체의 속성 및 메서드에 액세스할 수 있다는 것을 알고 있습니다. 따라서 프로토타입 개체에 정의된 메서드가 마지막에 이를 반환하도록 합니다. 메서드 인스턴스 호출) 프로토타입 메서드에 대한 호출을 연결할 수 있습니다.

// 通过立即执行函数,声明了一个_$函数,并且将一个$函数挂载到window上,并且每次调用$()的时候,返回的其实是个_$实例,由于原型对象方法里,执行最后都会返回一个this,因此就可以执行链式调用。
(function () {
 // 构造函数
 function _$(selector) {
  // ...
 }
 _$.prototype = {
  addClass: function (className) {
   // ...
   return this;
  },
  removeClass: function (className) {
   // ...
   return this;
  },
  show: function () {
   // ...
   return this;
  }
 };
 _$.prototype.constructor = _$;
 // 每次调用$()的时候,返回的其实是个_$实例
 window.$ = function () {
  return new _$(arguments);
 }
})();
// 通过这种方式,我们就可以直接使用$的链式调用
$(ele)
 .addClass('red')
 .removeClass('green')
 .show();
로그인 후 복사

물론, 위의 코드는 실제로 최적화될 수 있습니다. 왜냐하면 누군가 이미 소개한 라이브러리에 $ 함수를 정의했다고 가정하면 이름 충돌 문제에 직면하게 되기 때문입니다. 따라서 설치 프로그램을 추가할 수 있습니다

(function () {
 // 构造函数
 function _$(selector) {
  // ...
 }
 _$.prototype = {
  addClass: function (className) {
   // ...
   return this;
  },
  removeClass: function (className) {
   // ...
   return this;
  },
  show: function () {
   // ...
   return this;
  }
 };
 _$.prototype.constructor = _$;
 // 增加一个安装器
 window.installHelper = function (scope, interface) {
  scope[interface] = function () {
   return new _$(arguments);
  }
 }
})();
// 而用户就可以这样使用它来自定义挂载对象以及其命名
installHelper(window, '$');
$(ele).show();
로그인 후 복사

물론 때로는 연결 호출이 좋은 생각이 아닐 때도 있습니다. 연결된 호출은 할당자 메서드에 적합하지만 게터 메서드에는 그다지 친숙하지 않습니다. 때때로 우리는 메소드가 이것을 반환하는 대신 일부 데이터를 반환하기를 원하기 때문입니다. 이 상황에 대한 두 가지 주요 해결 방법이 있습니다. 하나는 값 getter 메서드에 대해 이를 반환하지 않고 데이터를 직접 반환하는 것입니다. 다른 방법은 콜백 메서드를 통해 데이터를 처리하는 것입니다.

// 第一种方法,当遇到取值器,则直接返回数据
(function () {
 // 构造函数
 function _$(selector) {
  this.ele = document.querySelector(selector);
  // ...
 }
 _$.prototype = {
  addClass: function (className) {
   // ...
   return this;
  },
  // 取值器
  getClass: function () {
   // ...
   return this.ele.className;
  }
 };
 _$.prototype.constructor = _$;
})();
// 第二种方式,通过回调的方式来处理数据
(function () {
 // 构造函数
 function _$(selector) {
  this.ele = document.querySelector(selector);
  // ...
 }
 _$.prototype = {
  addClass: function (className) {
   // ...
   return this;
  },
  getClass: function (cb) {
   // ...
   cb.call(this, this.ele.className);
   return this;
  }
 };
 _$.prototype.constructor = _$;
})();
로그인 후 복사

체인 호출을 통해 코드를 단순화하고 더 간결하고 읽기 쉽게 만들 수 있습니다. 그리고 클래스의 모든 메서드가 이 값을 반환하도록 만들기만 하면 클래스가 메서드 체인 호출을 지원하는 클래스로 변환될 수 있습니다. 그리고 평가자 메서드가 연결된 호출도 지원하도록 하려면 평가자에서 콜백을 사용하여 이 문제를 해결할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue를 사용하여 드래그 앤 드롭 효과를 얻는 방법

Node.js+콘솔 출력 로그 파일 예제 분석

위 내용은 JS 디자인 패턴에서 체인콜을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿