JavaScript로 AOP를 구현하는 방법-JS 튜토리얼-php.cn

JavaScript로 AOP를 구현하는 방법

亚连

풀어 주다： 2018-06-19 17:40:49

원래의

2057명이 탐색했습니다.

이제 JavaScript에서 AOP를 구현하는 방법(Aspect-Oriented 프로그래밍, 데코레이터 패턴)을 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

AOP란 무엇인가요?

AOP(Aspect Oriented 프로그래밍)의 주요 기능은 핵심 비즈니스 로직 모듈과 관련이 없는 일부 기능을 추출하는 것입니다. 이러한 기능에는 일반적으로 로그 통계, 보안 제어, 예외 처리 등 이러한 기능을 추출한 후 "동적 위빙"을 통해 비즈니스 로직 모듈에 통합됩니다.

AOP는 우리에게 어떤 이점을 가져다 줄 수 있나요?

AOP의 장점은 첫째로 비즈니스 로직 모듈을 순수하고 응집력 있게 유지할 수 있다는 점, 둘째로 로그 통계와 같은 기능 모듈을 쉽게 재사용할 수 있다는 것입니다.

JavaScript로 AOP를 구현한다는 아이디어?

일반적으로 JavaScript에서 AOP를 구현한다는 것은 함수를 다른 함수에 "동적으로 엮는" 것을 의미합니다. 아래에서는 이를 수행하기 위해 확장된 Function.prototype을 사용합니다. 아래 코드를 봐주세요.

Function.prototype.before = function (beforefn) {
  var _self = this; //保存原函数引用
  return function () { //返回包含了原函数和新函数的"代理函数"
   beforefn.apply(this, arguments); //执行新函数，修正this
   return _self.apply(this, arguments); //执行原函数
  }
 };
 Function.prototype.after = function (afterfn) {
  var _self = this;
  return function () {
   var ret = _self.apply(this, arguments);
   afterfn.apply(this, arguments);
   return ret;
  }
 };
 var func = function () {
  console.log("2")
 }
 func = func.before(function () {
  console.log("1");
 }).after(function () {
  console.log("3");
 } )
 func();

로그인 후 복사

실행 결과는 다음과 같습니다.

AOP를 통해 func 함수에 숫자 1과 숫자 3을 출력하는 두 함수를 동적으로 이식했습니다. 위 코드를 실행하면 콘솔이 실행 결과 1, 2, 3을 성공적으로 반환하는 것을 볼 수 있습니다.

AOP를 사용하여 함수에 책임을 추가하는 방법은 JavaScript 언어의 데코레이터 패턴을 매우 특별하고 영리하게 구현한 것입니다. 다음 코드를 참조하세요.

실행 결과:

앞으로 document.getElementById()에 대해 몇 가지 장식을 만들었습니다. 앞으로는 매번 이 메서드를 호출하기 전에 경고("1") 문을 실행할 예정입니다. document.getElementById() 메소드의 소스 코드에 작성되지 않고 단지 외부에 장식되어 있습니다. 이것의 장점은 원래 메소드의 소스 코드를 변경하지 않고 이를 수행할 수 있다는 것입니다. 그는 몇 가지 새로운 동작을 추가합니다. 예를 들어 국제 연습: