Artikel ini mengeksplorasi perbedaan dalam implementasi AngularJS dan DOM kontrol javascript tradisional dengan menerapkan dua persyaratan bisnis sederhana, dan mencoba memahami ide pemrograman kerangka kerja seperti MVW dalam pengembangan front-end web populer.
Persyaratan ini sangat umum. Misalnya, menu dua tingkat, ketika item menu tingkat pertama diklik, item submenu yang sesuai harus ditampilkan atau disembunyikan.
Implementasi jQuery:
Salinan kode adalah sebagai berikut:
<!-html->
<ul>
<li>
Item 1
<ul>
<li> Item anak 1 </li>
</ul>
</li>
</ul>
// JavaScript
$ ('li.parent_item'). Klik (function () {
$ (ini) .Children ('Ul.Child'). Toggle ();
})
Implementasi AngularJS:
Salinan kode adalah sebagai berikut:
<!-html->
<ul>
<li ng-click = "hide_child =! hide_child">
Item 1
<ul ng-hide = "hide_child">
<li> Item anak 1 </li>
</ul>
</li>
</ul>
Cara tradisional pengoperasian DOM tidak akan dijelaskan secara rinci. Implementasi AngularJS membutuhkan banyak penyempurnaan kode, hanya versi HTML yang sudah cukup. Kode di atas menggunakan titik -titik pengetahuan AngularJS ini:
1. Direktif
2. Ekspresi
NG-klik dan NG-hide keduanya arahan (instruksi) yang datang dengan kerangka kerja. Yang pertama setara dengan memberikan penangan acara untuk tag LI. Ketika elemen HTML (LI) diklik, ekspresi Hide_Child =! Hide_Child akan dieksekusi. Pertama-tama mari kita lihat arahan NG-hide, yang akan mengontrol apakah elemen HTML akan ditampilkan (diimplementasikan melalui CSS) berdasarkan hasil ekspresi penugasan (nilai Bolean). Dengan kata lain, jika variabel Hide_Child benar, maka UL akan disembunyikan, jika tidak hasilnya akan sebaliknya.
Di sini Hide_Child sebenarnya adalah variabel pada $ SCOPE. Perubahan nilainya juga dapat diimplementasikan menggunakan pengontrol pengontrol untuk membungkus metode, tetapi pernyataan saat ini relatif sederhana dan ditulis langsung dalam penugasan instruksi.
Melalui analisis kode sederhana di atas, kita dapat melihat dua fitur yang lebih jelas dari AngularJS:
1. Operasi DOM diblokir melalui instruksi dan ekspresi, dan kode JavaScript tambahan disimpan hanya dengan menggunakan kode sederhana.
2. Penerapan arahan dan ekspresi hanya secara langsung bersarang di HTML, yang agak bertentangan dengan gaya kode javascript tidak mencolok yang didorong oleh jQuery.
Pertama -tama mari kita lihat persyaratan lain dan kemudian jelaskan kesimpulan di atas secara rinci.
Persyaratan 2: Dengan mengklik Div, memicu pemilihan tombol radio di formulir
Elemen bentuk HTML tradisional tidak terlalu ramah untuk beroperasi di perangkat seluler saat ini. Misalnya, kotak radio tombol radio memerlukan penentuan posisi yang tepat pada layar sentuh untuk mengontrol komponen ini, tetapi posisi manual yang ditunjuk sangat kasar. Praktik umum adalah menambahkan kontrol label yang sesuai, tetapi rasio teks-menempati teks itu sendiri tidak ideal, dan tidak memiliki efek komunikasi informasi yang jelas. Oleh karena itu, tag div atau li dengan area yang lebih besar biasanya dioperasikan secara tidak langsung.
Implementasi jQuery:
Salinan kode adalah sebagai berikut:
<!-html->
<ul>
<li>
<input type = "radio"
id = "option1" />
<label untuk = "option1"> Opsi 1 </label>
</li>
</ul>
// JavaScript
$ ('li.selection'). Klik (function () {
$ (ini) .Children ('input [type = "Radio"]'). Klik ();
})
Implementasi AngularJS:
Salinan kode adalah sebagai berikut:
<!-html->
<ul>
<li ng-repeat = "opsi dalam opsi"
ng-klik = "model.option = option.value"
ng-class = "{Active: model.option == option.value}">
<input type = "radio"
ng-model = "model.option"
value = "{{option.value}}"
id = "option1" />
<label untuk = "option1"> Opsi 1 </label>
</li>
</ul>
Dalam solusi ini, kami juga tidak melibatkan kode JavaScript tambahan dan menggunakan beberapa instruksi tambahan. Untuk perbandingan dan referensi, kami hanya peduli dengan ekspresi dari dua instruksi klik dan model NG.
Pertama-tama mari kita lihat arahan NG-model dari elemen input. Tugas di sini berarti bahwa kami mengaitkan input pada templat dengan atribut opsi dari objek $ scope.model. Untuk pemahaman yang lebih dalam tentang pengikatan data, Anda dapat merujuk pada pengikatan data. Asosiasi yang ditentukan ini membuat kontrol template secara langsung mengikat ke model data, dan ikatan ini adalah dua arah. Ini berarti bahwa begitu pengguna memodifikasi nilai dalam kontrol (periksa input radio), objek model yang sesuai akan ditanyai (model.Option); Pada saat yang sama, jika nilai objek model berubah, kontrol input dalam templat juga akan mencerminkan perubahan yang sesuai. Dan ini sebenarnya tidak dicapai dalam implementasi jQuery yang disebutkan di atas.
Oleh karena itu, melalui pengikatan data AngularJS, mengklik elemen LI untuk secara tidak langsung menyelesaikan proses pemicu input adalah sebagai berikut:
1. Klik tag LI untuk menetapkan nilai ke Model.Option;
2. Ubah objek model dan temukan kontrol input yang sesuai (nilai nilai adalah model.option);
3. Aktifkan properti yang diperiksa dari kontrol input
Melalui dua kasus di atas, kami memiliki pemahaman baru tentang pengoperasian front-end web.
Pertama -tama, dalam hal implementasi teknis, dengan memperkenalkan konsep -konsep baru seperti instruksi, ekspresi, pengikatan data, dll., Kami dapat mengoperasikan DOM dengan cara yang sama sekali baru, daripada hanya implementasi kode JavaScript yang dapat dioperasikan dengan pengguna dan komponen HTML. Perubahan pemikiran semacam ini sangat besar.
Sejak awal abad ini, munculnya pemrograman web yang dinamis, teknologi pemrograman sisi server telah membaik. Sejak awal, CGI/PHP/ASP menghasilkan .NET vs Java dari bahasa dan platform. Efisiensi pengembangan dan proses perangkat lunak mempromosikan kerangka kerja MVC/ORM/AOP, dll., Dan kinerja dan data besar membawa NodeJs/NoSQL/Hadoop, dll., Sementara persyaratan teknis dari front-end browser tampaknya tidak begitu radikal. Di satu sisi, melalui sisi server dan database, sebagian besar kebutuhan bisnis model B/S dapat dipenuhi; Di sisi lain, browser itu sendiri memiliki perbedaan antara platform yang berbeda, ketidakcocokan dengan standar bahasa skrip dan teknologi rendering, serta kurangnya daya komputasi dan pertimbangan keamanan.
Dalam hal ini, sebagian besar waktu, browser hanya perlu mempertimbangkan rendering halaman dan interaksi pengguna yang sederhana. HTML/DOM Plus Javasript/CSS dengan demikian menyelesaikan pekerjaan utama front-end. Jadi, tidak ada pekerja front-end di masa lalu, hanya perancang web yang diperlukan. Secara bertahap, persyaratan untuk front-end telah meningkat, dan jQuery telah menjadi perpustakaan paket yang paling banyak digunakan untuk JavaScript Operating DOM. Pada tahap ini, tugas utama JQuery/JavaScript masih hanya alat untuk menyajikan dan berinteraksi dengan terminal browser pengguna.
Setelah memahami asal usul jQuery, tidak sulit untuk menemukan bahwa beberapa aturan yang dikejar di masa lalu, seperti JavaScript yang tidak mencolok, terbatas pada sarana dan metode implementasi pada waktu itu. Untuk memisahkan logika kode DOM dan JavaScript, kami lebih suka metode dengan pemeliharaan yang lebih tinggi. Setelah permintaan front-end untuk JavaScript meningkat, banyak kerangka kerja front-end MVC/MVP muncul, serta apa yang disebut MVW (model-view-apa pun) dari AngularJS, dan pendekatan satu ukuran untuk semua Javascript dan DOM telah berubah. Awalnya, kami mempertimbangkan pengoperasian langsung tampilan antarmuka dan interaksi pengguna, tetapi sekarang kami memiliki pengikatan data klien, instruksi yang kaya, dan injeksi ketergantungan. Apa yang menunggu kita akan menjadi model pemrograman baru dan cara berpikir.