Javascript aop (pengaturcaraan berorientasikan aspek) sekitar kemahiran analysis_javascript

Aop juga dipanggil pengaturcaraan berorientasikan aspek, di mana "pemberitahuan" ialah pelaksanaan khusus aspek, yang dibahagikan kepada sebelum (pra-pemberitahuan), selepas (pemberitahuan selepas), dan sekitar (pemberitahuan sekeliling). yang telah menggunakan spring mesti biasa dengannya, tetapi dalam js, AOP adalah perkara teknikal yang diabaikan. Walau bagaimanapun, menggunakan aop boleh meningkatkan logik kod js dengan berkesan Contohnya, dalam rangka kerja bahagian hadapan dojo dan yui3, AOP dinaikkan pangkat kepada mekanisme dalaman acara tersuai, yang boleh dilihat di mana-mana dalam kod sumber. Terima kasih kepada abstraksi ini, acara tersuai Dojo sangat berkuasa dan fleksibel. Pelaksanaan aop dalam dojo adalah dalam modul dojo/aspek Terdapat tiga kaedah utama: sebelum, selepas, dan sekitar Artikel ini akan membawa anda langkah demi langkah untuk melaksanakan kaedah sekitar sistem struktur modul dojo/aspek.

Untuk melaksanakan pemberitahuan sekeliling dalam js, cara yang paling mudah dan paling merangsang pemikiran ialah menggunakan panggilan balik

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

Hasil:

sebelum berfungsi
foo
selepas fungsi　
Haha, ia terlalu mudah. ​​Bolehkah anda tidur semula? . . .

Tetapi, bukankah ia terlalu kasar? . . . Persekitaran yang dijanjikan. . . . Sekurang-kurangnya panggilan seterusnya ke obj.foo sepatutnya mempunyai hasil ini, bukannya "foo" kering; untuk ini kita perlu membuat beberapa perubahan dan menggunakan penutupan

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()

Output:

sebelum berfungsi

selepas fungsi

Nampaknya kesan sekeliling telah dicapai, tetapi ke mana perginya nama yang dijanjikan? . . .

Dalam penutupan yang dikembalikan melalui nasihat, kami juga perlu menangani isu skop

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);

Nampaknya masalah skop diselesaikan dengan menggunakan panggilan. Mari jalankan dan lihat:

Alamak, adakah ini gelung legenda yang tidak berkesudahan? . . .

Nampaknya kita masih perlu membuat beberapa perubahan dan menggunakan pembolehubah perantaraan untuk menghapuskan gelung tak terhingga

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();

Output:

sebelum berfungsi
obj
selepas fungsi　

Haha, dunia tiba-tiba menjadi tempat yang indah. . . .
Tetapi adakah kumpulan kod ini kelihatan terlalu rendah?

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();

Kaedah sekitar memisahkan proses pemprosesan daripada objek tertentu selagi nasihat ditulis dalam format berikut, kesan sekeliling boleh dicapai

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

Haha, anda sangat tinggi dan sejuk dalam sekelip mata, sangat keren. . . .

　

Kemudian soalan datang: Apakah yang perlu saya lakukan jika saya secara tidak sengaja memanggil kaedah sekitar sekali lagi? . . . dahi. . . . Ini ialah soalan Sekiranya kita membiarkan kembali pemegang dengan kaedah alih keluar untuk menghapuskan pengikatan, sama seperti mengikat/mengalih keluar acara.

Maksud alih keluar ialah apabila fungsi tersebut dilaksanakan seterusnya, ia tidak lagi akan melaksanakan kaedah sekitar yang sepadan, tetapi hanya menjalankan kaedah Func asal

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();

Output:

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

Ini. . Bukan sahaja ia menjadi agak kucar-kacir. . . Juga melaporkan ralat. . . . Boleh tahan, tapi pakcik tak tahan, tapi adik ipar tak tahan!

Ah, penutupan. . . Tolong berikan saya kekuatan!

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');

Output:

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

Selepas pertarungan, sebut satu hari!

Pertama kali berjaga semalaman untuk berblog, mabuk juga pukul dua, saya dengar pukul empat saya dengar burung gagak Kicauan burung yang tidak diketahui Pada pukul lima, terdapat ramai orang berkicauan. . . .

Artikel rujukan:

Gunakan AOP untuk menambah baik kod javascript

AOP (pengaturcaraan berorientasikan aspek) dan OOP (pengaturcaraan berorientasikan objek) yui3

Pemahaman tentang pengaturcaraan berorientasikan aspek (AOP)