代码如下:
var app = angular.module('plunker', []);
fungsi createDirective(nama){
kembalikan fungsi(){
kembali {
hadkan: 'E',
compile: function(tElem, tAttrs){
console.log(nama ': compile => ' tElem.html());
kembali {
pra: fungsi(skop, iElem, iAttrs){
console.log(nama ': pra pautan => ' iElem.html());
},
jawatan: fungsi(skop, iElem, iAttrs){
console.log(nama ': pautan siaran => ' iElem.html());
}
}
}
}
}
}
app.directive('levelOne', createDirective('levelOne'));
app.directive('levelTwo', createDirective('levelTwo'));
app.directive('levelThree', createDirective('levelThree'));
Perhatikan output dalam console.log Selain daripada mengeluarkan penanda html asal, pada dasarnya tiada perubahan lain.
Ini seharusnya memperdalam pemahaman kita tentang konteks fungsi ini.
Jalankan kod sekali lagi dan lihat
Output
Berikut ialah tangkapan skrin keluaran konsol
Jika anda masih mahu menjalankannya sendiri untuk melihat kesannya, anda boleh klik plnkr ini, dan kemudian lihat hasil output dalam konsol.
Perhatikan
Hasil pengeluaran dom boleh mendedahkan beberapa perkara yang menarik: kandungan dom berbeza dalam fungsi kompilasi dan pra-pautan
Jadi apa yang berlaku?
Kompilasi
Kami sudah tahu bahawa ng mula memproses dom apabila mendapati pembinaan dom telah siap.
Jadi apabila ng merentasi dom, ia menemui elemen tahap satu dan belajar daripada takrifannya bahawa ia perlu melaksanakan beberapa fungsi yang diperlukan
Oleh kerana fungsi kompil ditakrifkan dalam objek arahan arahan tahap satu, ia akan dipanggil dan lulus objek elemen sebagai parameternya
Jika anda melihat dengan teliti, anda akan melihat bahawa apabila penyemak imbas mencipta objek elemen ini, ia masih merupakan penanda html asal
1. Dalam ng, dom asal biasanya digunakan untuk mengenal pasti elemen templat, jadi saya menggunakan nama tElem semasa mentakrifkan parameter fungsi kompilasi ini menunjuk kepada elemen templat.
Setelah fungsi penyusunan dalam arahan levelone dijalankan, ng akan merentasi nod DOMnya secara rekursif dan kemudian mengulangi operasi ini pada tahap dua dan tahap tiga.
Pautan pasca
Sebelum kita menyelami fungsi prapautan, mari kita lihat fungsi pasca pautan.
2. Jika anda hanya menggunakan satu fungsi pautan semasa mentakrifkan arahan, maka ng akan menganggap fungsi ini sebagai pautan pasca, jadi kita perlu membincangkan fungsi ini terlebih dahulu
Selepas ng telah merentasi semua DOM dan menjalankan semua fungsi kompilasi, ia memanggil fungsi pautan yang berkaitan secara terbalik
Dom kini mula menterbalikkan dan melaksanakan fungsi pasca pautan Oleh itu, panggilan terbalik ini kelihatan agak pelik sebelum ini, tetapi ia sebenarnya masuk akal.
Apabila menjalankan pautan pasca perintah yang mengandungi subperintah, peraturan pautan terbalik boleh memastikan pautan pasca subperintahnya telah dijalankan.
Jadi, apabila menjalankan fungsi pautan pasca arahan tahap satu, kami boleh memastikan pautan pasca tahap dua dan tahap tiga sebenarnya telah dijalankan.
Inilah sebabnya orang berpendapat pautan pasca ialah tempat paling selamat atau lalai untuk menulis logik perniagaan.
Tetapi kenapa elemen di sini berbeza daripada yang dikompilasi?
Sebaik sahaja ng memanggil fungsi penyusunan arahan, ia akan mencipta objek contoh elemen bagi elemen templat dan menyediakannya dengan objek skop ini mungkin tika baharu, atau mungkin sudah wujud, atau mungkin ada subskop juga mungkin skop bebas, yang semuanya bergantung pada nilai atribut skop dalam objek definisi arahan
Jadi apabila pemautan berlaku, elemen contoh dan objek skop ini sudah tersedia dan dihantar sebagai parameter kepada senarai parameter fungsi pasca pautan oleh ng.
1. Secara peribadi, saya sentiasa menggunakan nama iElem untuk mentakrifkan parameter fungsi pautan dan ia menunjuk kepada contoh elemen
Jadi objek parameter elemen fungsi pasca pautan (pra-pautan) ialah tika elemen dan bukannya elemen templat.
Jadi output dalam contoh di atas adalah berbeza
Prapautan
Apabila menulis fungsi pasca pautan, anda boleh memastikan bahawa apabila fungsi pasca pautan dilaksanakan, fungsi pasca pautan semua arahan anaknya telah dilaksanakan.
Dalam kebanyakan kes, ia boleh menjadi lebih baik, jadi kami biasanya menggunakannya untuk menulis kod arahan.
Walau bagaimanapun, ng memberikan kami mekanisme cangkuk tambahan, iaitu fungsi prapautan, yang memastikan bahawa beberapa kod lain dijalankan sebelum fungsi pasca pautan semua subarahan dilaksanakan.
Ayat ini patut dipertimbangkan berulang kali
Fungsi prapautan dijamin akan dilaksanakan sebelum pautan pasca contoh elemen dan semua subarahannya dijalankan.
Jadi adalah masuk akal untuk melaksanakan fungsi pasca pautan secara terbalik, dan ia sendiri adalah pelaksanaan berurutan asal bagi fungsi prapautan
Ini juga bermakna fungsi prapautan berjalan sebelum fungsi prapautan semua subarahannya, jadi sebab lengkapnya ialah:
Fungsi prapautan elemen dijamin akan dilaksanakan sebelum pautan pasca dan prapautan semua sub-perintahnya dilaksanakan Lihat rajah di bawah:
Semak
Jika kita melihat kembali output asal di atas, kita dapat mengenali dengan jelas apa yang berlaku:
// DI SINI ELEMEN MASIH ELEMEN TEMPLAT ASAL
// FASA KOMPIL
// levelOne: fungsi kompilasi dipanggil pada DOM asal
// levelTwo: fungsi penyusunan dipanggil pada DOM asal
// levelThree: fungsi kompil dipanggil pada DOM asal
// SEHINGGA DI SINI, UNSUR-UNSUR TELAH DIINSTANSI DAN
// TERIKAT PADA SKOP
// (Cth. NG-REPEAT AKAN MEMPUNYAI PELBAGAI INSTANS)
// FASA PRA-PAutan
// levelOne: fungsi pra pautan dipanggil pada contoh elemen
// levelTwo: fungsi pra pautan dipanggil pada contoh elemen
// levelThree: fungsi pra pautan dipanggil pada contoh elemen
// FASA POST-LINK (Perhatikan susunan terbalik)
// levelThree: fungsi pautan siaran dipanggil pada contoh elemen
// levelTwo: fungsi pautan siaran dipanggil pada contoh elemen
// levelOne: fungsi pautan siaran dipanggil pada contoh elemen
概要
回顾上面的分析我们可以描述一下这些函数的区别以及使用情况:
Kompilasi 函数
使用compile函数可以改变原始的dom(elemen templat),在ng创建原始dom实例以及创建skop实例之前>.
elemen templat以及相关的属性是做为参数传递给compile函数的,不过这时候scope是不能用的:下面是函数样子：
复制代码
代码如下:
/**
* Fungsi penyusun
*
* @param tElem - elemen templat
* @param tAttrs - atribut elemen templat
*/
fungsi(tElem, tAttrs){
// ...
};
Prapautan 函数
使用pra-pautan函数可以运行一些业务代码在ng执行完 compile函数之后,但是在它扆是在它搀有 pautan-pautan执行之前.
skop对象以及elemen实例将会做为参数传递给pra-pautan函数:
下面是函数样子：
复制代码
代码如下:
/**
* Fungsi prapautan
*
* skop @param - skop yang dikaitkan dengan istance ini
* @param iElem - elemen contoh
* @param iAttrs - atribut elemen contoh
*/
fungsi(skop, iElem, iAttrs){
// ...
};
Pautan pasca 函数
使用post-link函数来执行业务逻辑,在这个阶段,它已经知道它所有的子指令已段子指令已段以及post-link函数已经执行完成.
这就是被认为是最安全以及默认的编写业务逻辑代码的原因.
skop实例以及element实例做为参数传递给post-link函数:
下面是函数样子：
复制代码
代码如下:
/**
* Fungsi pautan pasca
*
* skop @param - skop yang dikaitkan dengan istance ini
* @param iElem - elemen contoh
* @param iAttrs - atribut elemen contoh
*/
fungsi(skop, iElem, iAttrs){
// ...
};
Ringkasan
Kini anda seharusnya mempunyai pemahaman yang jelas tentang perbezaan antara fungsi penyusunan, prapautan dan pasca pautan.
Jika anda belum melakukannya, dan anda seorang pembangun yang serius, maka saya amat mengesyorkan anda membaca artikel ini sekali lagi sehingga anda memahaminya
Adalah sangat penting untuk memahami konsep ini, yang boleh membantu anda memahami cara arahan asli ng berfungsi dan juga boleh membantu anda mengoptimumkan arahan tersuai anda sendiri.
Jika anda masih mempunyai soalan, anda dialu-alukan untuk menambah soalan anda dalam komen di bawah
Saya akan menganalisis dua isu lain dalam arahan pada masa hadapan:
1. Bagaimanakah arahan menggunakan atribut transklusi berfungsi?
2. Bagaimanakah fungsi pengawal arahan berkaitan?
Akhir sekali, jika anda mendapati apa-apa yang salah dengan artikel ini, sila hantar komen kepada saya tepat pada masanya
Terima kasih!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
