Biasanya ketika Anda menggunakan instruksi di NG, fungsi tautan yang sebagian besar digunakan adalah atribut tautan. Artikel berikut akan memberi tahu Anda penggunaan dan perbedaan antara Compli, Pre-Link, dan Post-Link.
Instruksi dalam AngularJs sangat ajaib, memungkinkan Anda untuk membuat komponen yang sangat semantik dan sangat dapat digunakan kembali, yang dapat dipahami sebagai pelopor komponen web.
Sudah ada banyak artikel dan buku terkait di internet yang memperkenalkan cara menggunakan instruksi. Jika Anda membandingkannya, Anda jarang memperkenalkan perbedaan antara kompilasi dan tautan, apalagi pra-tautan dan pasca-tautan.
Sebagian besar tutorial hanya mengatakan bahwa kompilasi akan digunakan di dalam NG, dan disarankan agar Anda hanya menggunakan atribut tautan, yang merupakan kasus dalam sebagian besar instruksi.
Ini sangat disayangkan, karena memahami perbedaan antara fungsi -fungsi ini dengan benar akan meningkatkan pemahaman Anda tentang mekanisme internal NG dan membantu Anda mengembangkan instruksi khusus yang lebih baik.
Jadi ikuti saya untuk melihat konten berikut langkah demi langkah untuk memahami apa fungsi -fungsi ini dan kapan mereka harus digunakan
Artikel ini mengasumsikan bahwa Anda memiliki pemahaman tertentu tentang instruksi tersebut. Jika tidak, sangat disarankan agar Anda membaca bagian ini bagian panduan pengembang angularjs tentang arahan
Cara memproses instruksi di ng
Sebelum memulai analisis, mari kita lihat bagaimana NG-Chinese menangani instruksi.
Ketika browser membuat halaman, pada dasarnya membaca identitas HTML, kemudian membuat node DOM, dan menyiarkan acara kepada kami setelah pohon DOM dibuat.
Saat Anda menggunakan tag skrip untuk memuat kode aplikasi NG di halaman, NG mendengarkan acara penyelesaian DOM di atas dan menemukan elemen dengan atribut NG-App.
Setelah menemukan elemen seperti itu, NG mulai memproses DOM dengan titik awal elemen ini, jadi jika NG-App ditambahkan ke elemen HTML, NG akan mulai memproses DOM dengan elemen HTML.
Mulai dari titik awal ini, NG mulai secara rekursif mencari semua elemen anak, yang sesuai dengan aturan instruksi yang ditentukan dalam aplikasi.
Cara menangani instruksi NG sebenarnya tergantung pada sifat objek yang ditentukannya. Anda dapat mendefinisikan fungsi kompilasi atau tautan, atau menggunakan fungsi pra-link dan pasca-tautan alih-alih tautan.
Jadi apa perbedaan antara fungsi -fungsi ini? Mengapa menggunakannya? Dan kapan?
Dengan pertanyaan -pertanyaan ini, ikuti saya langkah demi langkah untuk menjawab misteri ini
Sepotong kode
Untuk menjelaskan perbedaan antara fungsi-fungsi ini, saya akan menggunakan contoh sederhana dan mudah dipahami di bawah ini
1. Jika Anda memiliki pertanyaan, jangan ragu untuk menambahkan komentar Anda di bawah ini.
Lihat kode tag HTML berikut
Salinan kode adalah sebagai berikut:
<level-one>
<level-two>
<Level-Tree>
Halo
</level-three>
</level-two>
</level-one>
Lalu ada sepotong kode JS
Salinan kode adalah sebagai berikut:
var app = angular.module ('plunker', []);
Function createDirective (name) {
return function () {
kembali {
Batasi: 'e',
Compile: function (telem, tattrs) {
console.log (name + ': compile');
kembali {
pre: function (scope, ielem, iattrs) {
console.log (name + ': pre link');
},
POST: FUNGSI (SCOPE, IELEM, IATTRS) {
console.log (name + ': post link');
}
}
}
}
}
}
app.directive ('levelOne', createDirective ('levelOne'));
app.directive ('levelTwo', createDirective ('levelTwo'));
app.directive ('LevelTheRe', CreateDirective ('LevelThree'));
Hasilnya sangat sederhana: Biarkan NG menangani tiga instruksi bersarang, dan setiap instruksi memiliki fungsi lengkap, pra-tautan, dan pasca-tautan. Setiap fungsi akan mencetak baris di konsol untuk mengidentifikasi dirinya.
Contoh ini memungkinkan kita untuk secara singkat memahami proses internal NG saat memproses instruksi
Output kode
Di bawah ini adalah tangkapan layar dari hasil output di konsol
Jika Anda ingin mencoba contoh ini sendiri, silakan klik PLNKR ini dan kemudian lihat hasilnya di konsol.
Kode Analisis
Hal pertama yang perlu diperhatikan adalah urutan panggilan fungsi -fungsi ini:
Salinan kode adalah sebagai berikut:
// Kompilasi fase
// levelOne: fungsi kompilasi disebut
// leveltwo: fungsi kompilasi disebut
// LevelThree: Fungsi kompilasi disebut
// fase pra-tautan
// LevelOne: Fungsi pra tautan dipanggil
// leveltwo: fungsi tautan pra disebut
// LevelThree: Fungsi pra tautan dipanggil
// Fase pasca-tautan (perhatikan urutan terbalik)
// LevelThree: Fungsi tautan pos disebut
// leveltwo: Fungsi tautan pos disebut
// LevelOne: Fungsi tautan pos disebut
Contoh ini dengan jelas menunjukkan bahwa NG mengkompilasi semua instruksi sebelum tautan, dan kemudian tautan dibagi menjadi tahap pra-tautan dan pasca-tautan.
Perhatikan bahwa urutan eksekusi kompilasi dan pra-link dieksekusi secara berurutan, tetapi pasca-tautan justru sebaliknya.
Jadi di atas telah mengidentifikasi berbagai tahap yang berbeda, tetapi apa perbedaan antara kompilasi dan pra-tautan? Keduanya berada dalam urutan eksekusi yang sama, jadi mengapa kita harus membaginya menjadi dua fungsi yang berbeda?
Dom
Untuk menggali lebih dalam, mari kita cukup modifikasi kode di atas, yang juga akan mencetak variabel elemen dalam daftar parameter di setiap fungsi
Salinan kode adalah sebagai berikut:
var app = angular.module ('plunker', []);
Function createDirective (name) {
return function () {
kembali {
Batasi: 'e',
Compile: function (telem, tattrs) {
console.log (name + ': compile =>' + telem.html ());
kembali {
pre: function (scope, ielem, iattrs) {
console.log (name + ': pre link =>' + ielem.html ());
},
POST: FUNGSI (SCOPE, IELEM, IATTRS) {
console.log (name + ': post link =>' + ielem.html ());
}
}
}
}
}
}
app.directive ('levelOne', createDirective ('levelOne'));
app.directive ('levelTwo', createDirective ('levelTwo'));
app.directive ('LevelTheRe', CreateDirective ('LevelThree'));
Perhatikan output di Console.log, kecuali untuk output dari tag HTML asli, pada dasarnya tidak ada perubahan lain.
Ini harus memperdalam pemahaman kita tentang konteks fungsi -fungsi ini.
Jalankan kode lagi untuk melihat
Keluaran
Di bawah ini adalah tangkapan layar dari hasil output di konsol
Jika Anda masih ingin menjalankannya sendiri untuk melihat efeknya, Anda dapat mengklik PLNKR ini dan kemudian melihat hasil output di konsol.
mengamati
Output dari hasil DOM dapat mengekspos beberapa hal menarik: konten DOM berbeda dalam dua fungsi yang dikompilasi dan pra-tautan
Jadi apa yang terjadi?
Menyusun
Kita sudah tahu bahwa ketika NG menemukan bahwa DOM build selesai, kami mulai memproses DOM.
Jadi ketika NG melintasi DOM, ia menemukan elemen level-one dan belajar dari definisi bahwa beberapa fungsi yang diperlukan perlu dieksekusi
Karena fungsi kompilasi didefinisikan dalam objek instruksi dari instruksi level-one, itu akan dipanggil dan melewati objek elemen sebagai parameternya
Jika Anda melihat lebih dekat, Anda akan melihat bahwa ketika browser membuat objek elemen ini, itu masih merupakan tag HTML yang paling asli.
1. Di ng, DOM asli biasanya digunakan untuk mengidentifikasi elemen templat, jadi saya menggunakan nama telem saat mendefinisikan parameter fungsi kompilasi, dan variabel ini menunjuk ke elemen template.
Setelah fungsi kompilasi dalam instruksi LevelOne dijalankan, NG akan secara rekursif melintasi node DOM-nya secara mendalam, dan kemudian ulangi operasi ini pada level-dua dan level-tiga.
Pasca-tautan
Sebelum kita masuk ke fungsi pra-tautan, mari kita lihat fungsi pasca-tautan.
2. Jika Anda hanya menggunakan satu fungsi tautan saat mendefinisikan instruksi, maka NG akan memperlakukan fungsi ini sebagai pasca-tautan, jadi kami perlu membahas fungsi ini terlebih dahulu.
Setelah NG melintasi semua DOM dan menjalankan semua fungsi kompilasi, fungsi pasca-tautan terkait disebut terbalik.
DOM sekarang mulai membalikkan dan menjalankan fungsi pasca-tautan. Oleh karena itu, panggilan terbalik ini tampak agak aneh sebelumnya, tetapi sebenarnya masuk akal untuk melakukannya.
Saat menjalankan instruksi pasca-tautan yang berisi sub-instruksi, aturan pasca-tautan terbalik dapat memastikan bahwa pasca-tautan sub-instruksi telah dijalankan.
Oleh karena itu, ketika menjalankan fungsi pasca-tautan dari instruksi level-one, kami dapat memastikan bahwa pasca-tautan level-dua dan level-tiga sebenarnya telah dijalankan.
Inilah sebabnya mengapa orang berpikir pasca-tautan adalah tempat teraman atau default untuk menulis logika bisnis.
Tetapi mengapa elemen di sini berbeda dari yang ada di kompilasi?
Setelah NG memanggil fungsi kompilasi dari instruksi, objek instance elemen elemen templat akan dibuat dan objek lingkup disediakan untuk itu. Lingkup ini mungkin merupakan instance baru, atau mungkin sudah ada, mungkin merupakan ruang lingkup sub, atau mungkin ruang lingkup independen. Ini semua tergantung pada nilai atribut lingkup dalam objek definisi instruksi.
Jadi ketika menghubungkan terjadi, elemen instan ini dan objek lingkup ini sudah tersedia, dan dilewatkan sebagai parameter oleh NG ke daftar parameter fungsi pasca-tautan.
1. Saya pribadi selalu menggunakan nama Ielem untuk menentukan parameter fungsi tautan, dan menunjuk ke instance elemen
Oleh karena itu, objek parameter elemen dari fungsi pasca-link (pra-link) adalah instance elemen alih-alih elemen template.
Jadi output dalam contoh di atas berbeda
Pra-tautan
Saat menulis fungsi pasca-tautan, Anda dapat memastikan bahwa ketika menjalankan fungsi pasca-tautan, fungsi pasca-tautan dari semua instruksi anaknya telah dieksekusi.
Dalam kebanyakan kasus, itu bisa lebih baik, jadi kami biasanya menggunakannya untuk menulis kode instruksi.
Namun, NG memberi kami mekanisme kait tambahan, yaitu fungsi pra-tautan, yang dapat memastikan bahwa beberapa kode lain dijalankan sebelum menjalankan fungsi pasca-tautan dari semua sub-instruksi.
Kalimat ini layak untuk dipertimbangkan
Fungsi pra-tautan dapat memastikan bahwa ia dieksekusi pada instance elemen dan sebelum pasca-tautan sub-instruksi berjalan.
Jadi masuk akal untuk membalikkan fungsi pasca-tautan, ia mengeksekusi fungsi pra-tautan dalam urutan asli.
Ini juga berarti bahwa fungsi pra-tautan berjalan sebelum fungsi pra-tautan dari semua sub-instruksi, jadi alasan lengkapnya adalah:
Fungsi pra-tautan suatu elemen dapat dijamin akan dieksekusi sebelum pasca-tautan dan pra-tautan semua sub-instruksi dijalankan. Lihat gambar di bawah ini:
tinjauan
Jika kita melihat kembali output asli di atas, kita dapat dengan jelas mengenali apa yang sedang terjadi:
Salinan kode adalah sebagai berikut:
// Di sini elemen masih merupakan elemen template asli
// Kompilasi fase
// LevelOne: Fungsi kompilasi dipanggil pada DOM asli
// leveltwo: Fungsi kompilasi dipanggil pada DOM asli
// LevelThree: Fungsi kompilasi dipanggil pada DOM asli
// Sampai di sini, elemen -elemennya telah dipakai dan
// terikat pada ruang lingkup
// (mis.
// fase pra-tautan
// LevelOne: Fungsi pra tautan dipanggil pada instance elemen
// leveltwo: Fungsi tautan pra dipanggil pada instance elemen
// LevelThree: Fungsi pra tautan dipanggil pada instance elemen
// Fase pasca-tautan (perhatikan urutan terbalik)
// LevelThree: Fungsi tautan POST dipanggil pada instance elemen
// leveltwo: fungsi tautan pos disebut instance elemen
// LevelOne: Fungsi tautan POST dipanggil pada instance elemen
ringkasan
Melihat kembali analisis di atas, kita dapat menggambarkan perbedaan dan penggunaan fungsi -fungsi ini:
Fungsi Kompilasi
Gunakan fungsi kompilasi untuk mengubah DOM asli (elemen template), sebelum NG membuat instance DOM asli dan instance lingkup.
Ini dapat diterapkan pada situasi di mana beberapa instance elemen perlu dihasilkan dan hanya ada satu elemen templat. NG-Repeat adalah contoh terbaik. Ini mengubah DOM asli pada tahap fungsi kompilasi untuk menghasilkan beberapa node DOM asli, dan kemudian masing -masing menghasilkan instance elemen. Karena kompilasi hanya akan berjalan sekali, itu dapat meningkatkan kinerja ketika Anda perlu menghasilkan beberapa instance elemen.
Elemen template dan atribut terkait dilewatkan sebagai parameter ke fungsi kompilasi, tetapi ruang lingkup tidak dapat digunakan saat ini:
Inilah fungsinya seperti:
Salinan kode adalah sebagai berikut:
/**
* Kompilasi fungsi
*
* @param telem - elemen template
* @param tattrs - atribut elemen template
*/
fungsi (telem, tattrs) {
// ...
};
Fungsi pra-tautan
Gunakan fungsi pra-tautan untuk menjalankan beberapa kode bisnis setelah NG telah mengeksekusi fungsi kompilasi, tetapi sebelum fungsi pasca-tautan dari semua sub-instruksi akan akan dieksekusi.
Objek lingkup dan instance elemen akan diteruskan sebagai parameter ke fungsi pra-tautan:
Inilah fungsinya seperti:
Salinan kode adalah sebagai berikut:
/**
* Fungsi pra-tautan
*
* @param scope - Lingkup yang terkait dengan isticance ini
* @param ielem - elemen instance
* @param iattrs - atribut elemen instance
*/
fungsi (SCOPE, IELEM, IATTRS) {
// ...
};
Fungsi pasca-tautan
Gunakan fungsi pasca-tautan untuk menjalankan logika bisnis. Pada tahap ini, ia sudah tahu bahwa semua sub-instruksi telah dikompilasi dan bahwa fungsi pra-tautan dan pasca-tautan telah dieksekusi.
Inilah yang dianggap sebagai kode logika bisnis penulisan teraman dan default.
Instance lingkup dan instance elemen dilewatkan sebagai parameter ke fungsi pasca-tautan:
Inilah fungsinya seperti:
Salinan kode adalah sebagai berikut:
/**
* Fungsi pasca-tautan
*
* @param scope - Lingkup yang terkait dengan isticance ini
* @param ielem - elemen instance
* @param iattrs - atribut elemen instance
*/
fungsi (SCOPE, IELEM, IATTRS) {
// ...
};
Meringkaskan
Sekarang Anda harus memiliki pemahaman yang jelas tentang perbedaan antara kompilasi, pra-link, pasca-tautan, dan fungsi ini.
Jika Anda belum melakukannya, dan Anda adalah pengembang NG yang serius, maka saya sangat menyarankan Anda membaca artikel ini lagi sampai Anda memahaminya
Memahami konsep -konsep ini sangat penting, yang dapat membantu Anda memahami cara kerja instruksi asli NG, dan juga dapat membantu Anda mengoptimalkan instruksi khusus Anda sendiri.
Jika Anda memiliki pertanyaan, silakan tambahkan pertanyaan Anda di komentar di bawah
Di masa depan, kami akan terus menganalisis dua pertanyaan lain tentang instruksi:
1. Bagaimana cara kerja atribut transclusion menggunakan arahan?
2. Bagaimana fungsi pengontrol dari instruksi yang terkait?
Akhirnya, jika Anda menemukan sesuatu yang salah dengan artikel ini, harap komentar saya tepat waktu
Terima kasih!