집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript로 AOP를 구현하는 방법

JavaScript로 AOP를 구현하는 방법

亚连원래의: 2018-06-19 17:40:492039검색

이제 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() 메소드의 소스 코드에 작성되지 않고 단지 외부에 장식되어 있습니다. 이것의 장점은 원래 메소드의 소스 코드를 변경하지 않고 이를 수행할 수 있다는 것입니다. 그는 몇 가지 새로운 동작을 추가합니다. 예를 들어 국제 연습:

제 동료가 현재 시간을 출력할 수 있는 함수를 작성했는데 현재 필요한 것은 현재 날씨와 현재 시간을 출력하는 것입니다.

(1) 전통적인 솔루션 방법: 동료의 기능을 가져오고, 시간 출력을 위한 그의 코드를 찾고, 이 코드 앞에 현재 날씨를 출력하는 코드를 추가하세요.

(2) 데코레이터 패턴 솔루션: 소스 코드를 보지 않고 동료의 기능을 가져오면 됩니다. 자신의 기능을 꾸미는데, 그 장식은 현재 날씨를 출력하는 코드입니다.

두 방법 모두 문제를 해결하지만 시작점이 완전히 다릅니다.

(1) 방법은 원래 함수 내부를 변형하는 것이므로 소스 코드를 이해한 후 수정해야 합니다.

(2) 방법은 원래 기능에 코팅 레이어를 추가하므로 원래 기능의 내부 구현에 대해 전혀 걱정할 필요가 없습니다.

이제 새로운 요구 사항이 있습니다. 현재 시간을 출력하기 전에 현재 온도를 먼저 출력하세요.

(1) 방법, 첫 번째 요구 사항에서 동료의 코드를 인식할 수 없을 정도로 변경했으며 이제 우리는 함수 내부를 다시 이해하고 수정해야 합니다(현재 날씨를 출력하는 코드를 삭제하고, 현재 온도를 출력하는 코드를 추가).

(2) 방법은 동료의 원래 기능은 변경되지 않았습니다. 이제 동료의 기능(현재 온도 출력)만 변경하면 됩니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

JavaScript로 AOP를 구현하는 방법

관련 기사