분석_javascript 기술을 중심으로 한 Javascript AOP(관점 지향 프로그래밍)

Aop는 측면 지향 프로그래밍이라고도 하는데, 여기서 "알림"은 측면의 구체적인 구현으로 이전(사전 알림), 이후(사후 알림), 주변(서라운드 알림)으로 구분됩니다. Spring을 사용해본 사람이라면 매우 익숙할 것입니다. 그러나 js에서 AOP는 심각하게 무시되는 기술적 사항입니다. 그러나 aop를 사용하면 js 코드 로직을 효과적으로 향상시킬 수 있습니다. 예를 들어 프론트 엔드 프레임워크 dojo 및 yui3에서 AOP는 소스 코드의 모든 곳에서 볼 수 있는 사용자 정의 이벤트의 내부 메커니즘으로 승격됩니다. 이러한 추상화 덕분에 Dojo의 사용자 정의 이벤트는 매우 강력하고 유연합니다. Dojo에서 Aop의 구현은 dojo/aspect 모듈에 있습니다. 이전, 이후, 주변의 세 가지 주요 방법이 있습니다. 이 기사에서는 around 방법을 구현하는 방법을 단계별로 안내할 것입니다. 도장/측면 모듈의 구조 시스템.

JS에서 서라운드 알림을 구현하는 가장 간단하고 생각을 자극하는 방법은 콜백을 사용하는 것입니다

advice = function(originalFunc){
 console.log("before function");
 originalFunc();
 console.log("after function");
}
var obj = {
 foo: function(){
 console.log('foo');
 }
}
advice(obj.foo)

결과:

기능 전
푸
기능 이후　
하하, 너무 간단해서 다시 자도 될까요? . . . ​

근데 좀 너무 거친거 아닌가요? . . . 약속된 환경. . . . 최소한 다음 obj.foo 호출에서는 이 결과가 나와야 합니다. 이를 위해서는 무미건조한 "foo" 대신 몇 가지 변경 작업을 수행하고 클로저를 사용해야 합니다.

advice = function(originalFunc){
 return function() {
 console.log("before function");
 originalFunc();
 console.log("after function");
 }
}
var obj = {
 foo: function(){
 console.log(this.name);
 },
 name: "obj"
}
obj.foo = advice(obj.foo)
obj.foo()

출력:

기능 전

기능 후

서라운드 효과를 이룬 것 같은데, 약속한 이름은 어디로 갔나요? . . .

조언에 의해 반환된 클로저에서는 범위 문제도 처리해야 합니다

advice = function(originalFunc){
 return function() {
 console.log("before function");
 originalFunc();
 console.log("after function");
 }
}
var obj = {
 foo: function(){
 console.log(this.name);
 },
 name: "obj"
}

keepContext = function() {
 return obj['foo'].call(obj);
}

obj.foo = advice(keepContext);

call을 사용하면 범위 문제가 해결된 것 같습니다.

젠장, 이게 전설의 무한루프냐? . . .

무한 루프를 제거하려면 여전히 약간의 변경이 필요하고 중간 변수를 사용해야 할 것 같습니다

advice = function(originalFunc){
 return function() {
 console.log("before function");
 originalFunc();
 console.log("after function");
 }
}
var obj = {
 foo: function(){
 console.log(this.name);
 },
 name: "obj"
}

var exist = obj.foo;

keepContext = function() {
 return exist.call(obj);
}

obj.foo = advice(keepContext);
obj.foo();

출력:

기능 전
객체
기능 이후　

하하, 세상이 갑자기 아름다운 곳이 되었네요. . . .
그런데 이 코드 묶음이 너무 낮은 것 같나요? 좀 더 높은 수준의 추상화를 생각해 내야 할까요? 제 생각에도 그렇습니다.

function around(obj, prop, advice){
 var exist = obj[prop];
 var advised = advice(function(){
 return exist.call(obj, arguments);
 });
 obj[prop] = advised;
}

advice = function(originalFunc){
 return function() {
 console.log("before function");
 originalFunc();
 console.log("after function");
 }
}
var obj = {
 foo: function(){
 console.log(this.name);
 },
 name: "obj"
}

around(obj, 'foo', advice);

obj.foo();

around 메소드는 특정 객체에서 처리 프로세스를 분리합니다. 조언이 다음 형식으로 작성되는 한 around 효과를 얻을 수 있습니다.

advice = function(originalFunc){
 return function() {
 //before
 originalFunc();
 //after
 }
}

하하, 키가 너무 크고 순간적으로 멋있으시네요. . . .

　

그러면 다음과 같은 질문이 생깁니다. 실수로 around 메소드를 한 번 더 호출하면 어떻게 해야 합니까? . . . 이마. . . . 이것은 이벤트 바인딩/제거와 마찬가지로 바인딩을 제거하기 위해 제거 메소드를 사용하여 핸들을 반환하도록 해야 하는지에 대한 질문입니다.

제거의 의미는 다음에 함수가 실행될 때 더 이상 해당 around 메소드를 실행하지 않고, originalFunc 메소드만 실행한다는 것입니다.

function around(obj, prop, advice){
 var exist = obj[prop];
 var previous = function(){
 return exist.call(obj, arguments);
 };
 var advised = advice(previous);
 obj[prop] = advised;
 
 return {
 remove: function(){
 obj[prop] = exist;
 advice = null;
 previous = null;
 exist = null;
 obj = null;
 }
 }
}
var count = 1;
advice = function(originalFunc){
 var current = count++;
 return function() {
 console.log("before function " + current);
 originalFunc(arguments);
 console.log("after function " + current);
 }
}
var obj = {
 foo: function(arg){
 console.log(this.name + " and " + arg);
 },
 name: "obj"
}

h1 = around(obj, 'foo', advice);
h2 = around(obj, 'foo', advice);
obj.foo();
h1.remove();
obj.foo();
h2.remove();
obj.foo();

출력:

before function 2
before function 1
obj and [object Arguments]
after function 1
after function 2
obj and undefined
before function 1

이것. . 약간 지저분해질 뿐만 아니라. . . 또한 오류가 보고되었습니다. . . . 네, 견딜 수 있지만 삼촌은 견딜 수 없지만 삼촌은 견딜 수 없습니다.

아, 종료되었습니다. . . 저에게 힘을 주세요!

function around(obj, prop, advice){
 var exist = obj[prop];
 var previous = function(){
 return exist.apply(obj, arguments);
 };
 var advised = advice(previous);
 obj[prop] = function(){
 //当调用remove后，advised为空
 //利用闭包的作用域链中可以访问到advised跟previous变量，根据advised是否为空可以来决定调用谁
 return advised ? advised.apply(obj, arguments) : previous.apply(obj, arguments);
 };
 
 return {
 remove: function(){
 //利用闭包的作用域链，在remove时将advised置空，这样执行过程中不会进入本次around
 //这几个不能删
 //obj[prop] = exist;
 advised = null;
 advice = null;
 //previous = null;
 //exist = null;
 //obj = null;
 }
 }
}
var count = 1;
advice = function(originalFunc){
 var current = count++;
 return function() {
 console.log("before function " + current);
 originalFunc.apply(this, arguments);
 console.log("after function " + current);
 }
}
var obj = {
 foo: function(arg){
 console.log(this.name + " and " + arg);
 },
 name: "obj"
}

h1 = around(obj, 'foo', advice);
h2 = around(obj, 'foo', advice);
obj.foo('hello world');
h1.remove();
obj.foo('hello world');
h2.remove();
obj.foo('hello world');

출력:

before function 2
before function 1
obj and hello world
after function 1
after function 2
before function 2
obj and hello world
after function 2
obj and hello world

싸움이 끝나면 오늘로 미뤄보세요!

처음 블로그를 하려고 밤을 새웠을 때도 술에 취해 2시에 옆집에서 좆같은 소리가 들렸다. 알 수 없는 새들의 지저귀는 소리. 5시가 되자 새들이 지저귀는 소리가 났다. . . .

참고기사:

AOP를 사용하여 자바스크립트 코드 개선

yui3의 AOP(관점 지향 프로그래밍)와 OOP(객체 지향 프로그래밍)

AOP(Aspect 지향 프로그래밍)의 이해