Bagi saya yang merupakan pemula murni di ujung depan, JavaScript masih sedikit jelas tentang hal itu. Jika Anda ingin memulai dengan Angular JS secara langsung, sebenarnya ada banyak perlawanan. Tetapi saya percaya bahwa selama Anda bekerja keras, bahkan desain anti-manusia tidak akan menjadi masalah besar.
Oke, jangan katakan banyak omong kosong. Untuk mencari tahu apa itu Angular JS, saya mulai dengan ruang lingkup. Jadi apa itu ruang lingkup? Meminjam bagian dari dokumen resmi:
Salinan kode adalah sebagai berikut:
"Lingkup adalah objek yang mengacu pada model aplikasi. Ini adalah konteks eksekusi untuk ekspresi. Lingkup diatur dalam struktur hierarkis yang meniru struktur DOM aplikasi. Lingkup dapat menonton ekspresi dan menyebarkan peristiwa."
Setelah membacanya, saya membandingkannya dengan bahasa pemrograman lain dan merasa bahwa ruang lingkup seperti ruang lingkup model data, memberikan konteks untuk pelaksanaan ekspresi. Mari kita pahami seperti ini untuk saat ini.
Fitur ruang lingkup
Selanjutnya, mari kita lihat fitur apa yang dimiliki ruang lingkup?
SCOPE menyediakan metode $ watch untuk memantau perubahan dalam model.
SCOPE menyediakan metode $ Apply untuk menyebarkan perubahan dalam model.
Lingkup dapat diwarisi dan mengisolasi komponen aplikasi yang berbeda dan izin akses atribut.
Lingkup menyediakan konteks untuk perhitungan ekspresi.
Untuk keempat fitur ini, karena saya telah mempelajari ActionScript, C ++, dan Java sebelumnya, tidak sulit untuk memahami poin pertama, ketiga dan keempat, tetapi poin kedua terasa agak membingungkan. Berdasarkan prinsip memecahkan casserole dan menanyakan akhir, saya masih menemukan beberapa hal melalui Google. Untuk veteran berpengalaman, tolong tepuk batu bata!
Asal JavaScript
Pertama -tama, pada pandangan pertama, scope.apply () tampaknya menjadi metode biasa untuk membuat pembaruan binding. Tapi pikirkan sedikit lagi, mengapa kita membutuhkannya? Kapan biasanya Anda menggunakannya? Untuk memahami dua masalah ini, kita harus mulai dengan JavaScript. Dalam kode JavaScript, mereka dieksekusi dalam urutan tertentu. Ketika pergantian cuplikan kode untuk dieksekusi, browser hanya akan menjalankan cuplikan saat ini dan tidak akan melakukan hal lain. Jadi terkadang beberapa halaman web yang tidak dibuat dengan baik akan macet saat mengklik sesuatu. Javascript berfungsi sebagai salah satu alasan mengapa fenomena ini disebabkan! Di sini kita memiliki sepotong kode untuk mengalaminya:
Salinan kode adalah sebagai berikut:
var button = document.getElementById ('clickme');
function buttonClicked () {
peringatan ('tombol diklik');
}
Button.AddeventListener ('klik', ButtonClicked);
function timerComplete () {
alert ('timer complete');
}
setTimeout (TimerComplete, 5000);
Saat memuat kode JavaScript, pertama -tama temukan tombol dengan ID yang disebut "ClickMe", lalu tambahkan pendengar, lalu atur batas waktu. Tunggu 5 detik dan kotak dialog akan muncul. Jika Anda menyegarkan halaman dan segera klik tombol ClickMe, kotak dialog akan muncul. Jika Anda tidak mengklik OK, fungsi TimerComplete tidak akan pernah memiliki kesempatan untuk mengeksekusi.
Cara memperbarui binding
Oke, setelah berbicara tentang sesuatu yang tampaknya tidak relevan, mari kita kembali ke topik. Bagaimana JS Angular tahu kapan data berubah dan halaman perlu diperbarui? Kode perlu diketahui kapan data telah dimodifikasi, tetapi sekarang tidak ada cara untuk secara langsung menginformasikan data tentang objek yang telah berubah (meskipun Ecmascript 5 sedang mencoba untuk menyelesaikan masalah ini, itu masih dalam tahap eksperimen). Saat ini, ada dua solusi untuk strategi yang lebih utama. Salah satunya adalah menggunakan objek khusus sehingga semua data hanya dapat diatur dengan memanggil metode objek, daripada secara langsung menentukannya melalui properti. Dengan cara ini, semua modifikasi dapat direkam dan Anda akan tahu kapan halaman perlu diperbarui. Kerugian dari melakukan ini adalah bahwa kita harus mewarisi objek khusus. Untuk penugasan, itu hanya dapat dilakukan oleh Object.set ('Key', 'Value') alih -alih Object.key = nilai. Dalam kerangka kerja, inilah yang dilakukan Emberjs dan KnockoutJ (walaupun saya belum pernah menyentuhnya sebelumnya). Metode lain adalah metode yang diadopsi oleh Angular JS, yang memeriksa apakah ada perubahan data setelah setiap urutan eksekusi kode JavaScript dijalankan. Ini tampaknya tidak efisien dan bahkan secara serius mempengaruhi kinerja. Namun, Angular JS menggunakan beberapa cara pintar untuk menyelesaikan masalah ini (belum dipelajari, dan belum jelas). Keuntungan melakukan ini adalah bahwa kita dapat menggunakan objek apa pun sesuka hati, tidak ada batasan metode penugasan, dan kita juga dapat menyadari perubahan data.
Untuk solusi ini yang diadopsi oleh Angular JS, kami peduli kapan data berubah, dan di situlah scope.apply () berguna. Memeriksa apakah data terikat telah berubah, itu sebenarnya dilakukan oleh scope.gigest (), tetapi kami hampir tidak pernah menyebut metode ini secara langsung, tetapi sebaliknya disebut metode scope.apply () karena dalam metode scope.apply (), ia akan memanggil metode scope.gigest (). Metode Scope.Amply () mengambil fungsi atau ekspresi, kemudian menjalankannya, dan akhirnya memanggil metode SCOPE.GIGEST () untuk memperbarui binding atau pengamat.
Kapan Menggunakan $ Apply ()
Pertanyaan yang sama adalah, jadi kapan kita perlu memanggil metode Apply ()? Ada sangat sedikit kasus. Faktanya, hampir semua kode kami dibungkus dengan scope.Amply (), seperti klik ng, inisialisasi pengontrol, fungsi panggilan balik HTTP, dll. Dalam kasus ini, kita tidak perlu menyebut diri kita sendiri, dan pada kenyataannya kita tidak dapat memanggil diri kita sendiri, jika tidak memanggil metode Apply () dalam metode Apply () akan melempar kesalahan. Jika kita perlu menjalankan kode dalam urutan eksekusi baru, kita benar -benar perlu menggunakannya, dan jika dan hanya jika urutan eksekusi baru tidak dibuat oleh metode perpustakaan JS Angular, kita perlu membungkus kode di Scope.Apply (). Berikut adalah contoh untuk dijelaskan:
Salinan kode adalah sebagai berikut:
<Div ng: app ng-controller = "ctrl"> {{message}} </div>
Salinan kode adalah sebagai berikut:
functionCtrl ($ scope) {
$ scope.message = "menunggu 2000ms untuk pembaruan";
setTimeout (function () {
$ scope.message = "Timeout Called!";
// angularjs tidak menyadari pembaruan untuk $ scope
}, 2000);
}
Setelah kode di atas dijalankan, halaman akan ditampilkan: Menunggu 2000ms untuk pembaruan. Jelas, pembaruan data tidak terdeteksi oleh Angular JS.
Selanjutnya, kami sedikit memodifikasi kode JavaScript dan membungkusnya dengan scope.apply ().
Salinan kode adalah sebagai berikut:
functionCtrl ($ scope) {
$ scope.message = "menunggu 2000ms untuk pembaruan";
setTimeout (function () {
$ scope. $ apply (function () {
$ scope.message = "Timeout Called!";
});
}, 2000);
}
Perbedaan kali ini adalah bahwa halaman pertama akan ditampilkan: menunggu 2000ms untuk pembaruan. Setelah menunggu selama 2 detik, konten akan diubah menjadi: Timeout dipanggil! . Jelas, pembaruan data terdeteksi oleh Angular JS.
Catatan: Kita tidak boleh melakukan ini, tetapi gunakan metode batas waktu yang disediakan oleh Angular JS, sehingga akan secara otomatis dibungkus dengan metode Apply.
Sains adalah pedang bermata dua
Akhirnya, mari kita lihat metode scope.apply () dan scope.apply (fungsi) lagi! Meskipun Angular JS melakukan banyak hal untuk kami, kami juga kehilangan beberapa peluang. Anda dapat melihat dari pseudocode berikut:
Salinan kode adalah sebagai berikut:
fungsi $ apply (expr) {
mencoba {
mengembalikan $ eval (expr);
} catch (e) {
$ ExceptionHandler (E);
} Akhirnya {
$ root. $ digest ();
}
}
Ini akan menangkap semua pengecualian dan tidak akan melemparkannya lagi, dan pada akhirnya akan memanggil metode $ digest ().
Mari kita ringkas
Metode $ Apply () dapat menjalankan ekspresi JS sudut di luar kerangka sudut, seperti: Acara DOM, SetTimeout, XHR atau perpustakaan pihak ketiga lainnya. Ini baru permulaan, airnya masih dalam, selamat datang untuk menyelam bersama!