Kompilasi soalan temu bual Angular8: analisis mata pengetahuan asas

Artikel ini akan berkongsi dengan anda beberapa soalan temu bual berdasarkan Angular8, dan memberi anda pemahaman yang mendalam tentang mata pengetahuan asas Angular8. Saya harap ia akan membantu anda.

Cadangan berkaitan: Ringkasan Soalan Temuduga Besar Hadapan 2022 (Koleksi)

Mengenai CLI Sudut

Angular CLI, juga dikenali sebagai Angular scaffolding, digunakan untuk menjana rangka kerja projek atau komponen dengan cepat untuk meningkatkan kecekapan. Apl sudut, komponen, perkhidmatan, dsb. boleh dijana dengan mudah dan boleh dibuat mengikut keperluan anda sendiri melalui parameter. Ia boleh dikatakan sebagai alat yang sangat diperlukan untuk pembangunan sudut. [Cadangan tutorial berkaitan: "tutorial sudut"]
Rujukan: https://cli.angular.io/

• ng menjana: cipta komponen baharu, perkhidmatan, paip , kelas dsb.
• ng baharu: Cipta apl sudut baharu
• kemas kini: Naik taraf sudut itu sendiri dan versi dependensinya
• ng: Paparkan versi global cli anuglar dan cli sudut tempatan, Versi kod sudut, dsb.
• ng tambah: Tambahkan pustaka pihak ketiga. Ia akan melakukan 2 perkara, 1) memasang node_modules berdasarkan npm, 2) menukar fail konfigurasi secara automatik untuk memastikan kebergantungan baharu berfungsi dengan betul

Mengenai suntikan kebergantungan sudut (suntikan kebergantungan)

Suntikan kebergantungan ialah corak reka bentuk aplikasi yang dilaksanakan oleh Angular dan merupakan salah satu konsep teras Angular.

Pergantungan ialah perkhidmatan dengan siri fungsi Pelbagai komponen dan arahan (dericive) dalam aplikasi mungkin memerlukan fungsi perkhidmatan. Angular menyediakan mekanisme yang lancar di mana kami boleh menyuntik kebergantungan ini ke dalam komponen dan arahan kami. Jadi kami hanya membina kebergantungan yang boleh disuntik antara semua komponen aplikasi.

Menggunakan suntikan kebergantungan juga mempunyai faedah berikut,

1. Tidak perlu membuat instantiate (contoh baharu). Anda tidak perlu risau tentang parameter yang diperlukan dalam pembina kelas
2. disuntik sekali (modul apl disuntik melalui Penyedia), dan semua komponen boleh digunakan. Selain itu, contoh perkhidmatan yang sama (Singleton) digunakan, yang bermaksud bahawa data dalam perkhidmatan dikongsi dan boleh digunakan untuk pemindahan data antara komponen.

Mengenai kompilasi sudut, perbezaan antara AOT dan JIT

Setiap aplikasi Angular mengandungi komponen yang tidak dapat difahami oleh penyemak imbas dan templat. Oleh itu, semua aplikasi Angular perlu disusun sebelum dijalankan di dalam penyemak imbas.

Angular menyediakan dua jenis kompilasi:

• Kompilasi JIT(Just-in-Time)
• Kompilasi AOT(Ahead-of-Time)

Perbezaannya ialah dalam kompilasi JIT, aplikasi disusun di dalam penyemak imbas pada masa jalanan, manakala dalam kompilasi AOT, aplikasi disusun semasa masa binaan.
Jelas sekali, kompilasi AOT mempunyai banyak faedah, jadi ia adalah kaedah kompilasi lalai Angular. Faedah Utama

• Oleh kerana aplikasi disusun sebelum dijalankan di dalam penyemak imbas, penyemak imbas memuatkan kod boleh laku dan memaparkan aplikasi serta-merta, menghasilkan pemaparan yang lebih pantas.
• Dalam kompilasi AOT, pengkompil akan menghantar fail HTML dan CSS luaran bersama-sama dengan aplikasi, menghapuskan permintaan AJAX yang berasingan untuk fail sumber tersebut, sekali gus mengurangkan permintaan ajax.
• Pembangun boleh mengesan dan mengendalikan ralat semasa fasa binaan, yang membantu meminimumkan ralat.
• Pengkompil AOT menambahkan HTML dan templat pada fail JS sebelum menjalankannya dalam penyemak imbas. Oleh itu, tiada fail HTML berlebihan untuk dibaca, memberikan keselamatan yang lebih baik kepada aplikasi.

Ikatan dua hala sudut

Prinsip pengikatan dua hala Sudut

Dua sudut -cara mengikat, melalui pemeriksaan kotor dilaksanakan.

• Prinsip asas pengesanan nilai kotor adalah untuk menyimpan nilai lama dan membandingkan nilai baharu pada saat semasa dengan nilai lama apabila mengesan. Jika mereka sama, tiada perubahan Jika tidak, perubahan dikesan dan paparan perlu dikemas kini.

• Zone.js disertakan dalam angular2. Untuk setTimeout, addEventListener, promise, dsb. semuanya dilaksanakan dalam ngZone (dengan kata lain, ia dikapsulkan dan ditulis semula oleh zone.js Angular menyediakan cangkuk yang sepadan dalam ngZone, memberitahu angular2 untuk melakukan pemprosesan semakan kotor yang sepadan dan). kemudian mengemas kini DOM.

Masalah kecekapan pengikatan dua hala sudut

Untuk situasi di mana sejumlah besar elemen DOM perlu terikat dalam halaman (kepada Ratusan atau ribuan), anda pasti akan menghadapi masalah kecekapan. (Khususnya juga bergantung pada prestasi PC dan penyemak imbas). Selain itu, sekiranya semakan kotor melebihi 10 kali ganda (nilai pengalaman?), ia dianggap terdapat masalah dengan program dan tiada lagi semakan akan dilakukan.
Anda boleh mengelakkan perkara ini dengan cara berikut:

• Untuk data yang hanya digunakan untuk paparan, gunakan pengikatan sehala dan bukannya pengikatan dua hala;

• Aliran data Angular adalah dari atas ke bawah, mengalir dalam satu arah daripada komponen induk kepada komponen anak. Aliran data satu arah memastikan pengesanan perubahan yang cekap dan boleh diramal. Oleh itu komponenisasi juga merupakan satu cara untuk meningkatkan prestasi.

• Jangan tulis logik terlalu kompleks dalam ungkapan (dan fungsi yang dipanggil dengan ungkapan)

• Jangan sambungkan paip terlalu panjang ( Selalunya paip akan merentasi dan menjana tatasusunan baharu. Paip dipanggil penapis dalam anglarJS (v1))

• strategi pengesanan perubahan onPush. Lalai ialah strategi pengesanan perubahan lalai Angular, iaitu semakan kotor yang disebutkan di atas (semak semua nilai selagi ia berubah). Pembangun boleh menyediakan kaedah pengesanan perubahan yang lebih cekap mengikut senario: onPush. Strategi onPush bermaksud bahawa komponen hanya akan melakukan pengesanan perubahan apabila rujukan kepada data input berubah atau peristiwa dicetuskan.

• NgFor harus digunakan dengan persamaan trackBy. Jika tidak, NgFor akan mengemas kini DOM untuk setiap item dalam senarai semasa setiap proses pengesanan nilai kotor.

Tiga cara pengikatan data sudut

<div>
    <span>Name {{item.name}}</span>  <!-- 1. 直接绑定 -->
    <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
    <span>Classes {{classes(item)}}</span><!-- 3.绑定方法调用的结果 -->
</div>

• Pengikatan langsung: Dalam kebanyakan kes, ini ialah cara prestasi terbaik.

• Hasil panggilan kaedah mengikat: Semasa setiap proses pengesanan nilai kotor, persamaan kelas mesti dipanggil sekali. Sekiranya tiada keperluan khas, kaedah penggunaan ini hendaklah dielakkan seboleh-bolehnya.

• kaedah paip: Ia serupa dengan fungsi mengikat Setiap kali kelas pengesanan nilai kotor dipanggil. Walau bagaimanapun, Angular telah mengoptimumkan paip dan menambah caching Jika item itu sama dengan kali terakhir, hasilnya akan dikembalikan secara langsung.

Untuk lebih banyak petua pengoptimuman, rujuk kepada petua pengoptimuman prestasi tentang pengikatan sudut (pemeriksaan kotor)

Mengenai Modul sudut

Apakah itu Angular’s ​​​​Module

Modul ialah tempat di mana kita boleh mengumpulkan komponen, perkhidmatan dan paip. Modul memutuskan sama ada modul lain boleh menggunakan komponen, arahan, dsb. dengan mengeksport atau menyembunyikan elemen ini. Setiap modul ditakrifkan menggunakan penghias @NgModule.

Perbezaan antara Modul Root dan Modul Ciri.

Setiap aplikasi Sudut hanya boleh mempunyai satu modul akar (Modul Root), dan ia boleh mempunyai satu atau lebih modul ciri (Modul Ciri). Modul akar mengimport BrowserModule, manakala modul fungsi mengimport CommonModule.

Modul Lazy-loading

Apabila projek besar, untuk meningkatkan kelajuan pemuatan skrin pertama, anda boleh melepasi Lazy -memuatkan, apabila URL tertentu tertentu diakses, hanya modul ciri yang tidak biasa tersebut dimuatkan.

Pelaksanaan: Cipta modul ciri seperti biasa dan ubah suai konfigurasi penghalaan. Contohnya:

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];

Dengan cara ini, selepas penyusunan, modul ciri ini akan menjadi js bebas Hanya apabila pengguna mengakses url (~/pelanggan), js bebas ini akan diminta daripada pelayan . Kemudian muatkan dan laksanakan.

Rujukan https://angular.io/guide/lazy-loading-ngmodules

Apakah Arahan

Arahan digunakan untuk menambah gelagat kepada yang sedia ada? elemen (DOM) atau komponen (Komponen).
Pada masa yang sama, berbilang arahan boleh digunakan pada elemen atau komponen.

Perbezaan antara Promise dan Observable

Pertama sekali, versi baharu anuglar mengesyorkan menggunakan Observable (milik RxJS Kedua, untuk objek Observable, anda boleh menggunakan .toPromise() to menukarnya menjadi objek Janji.

• Janji, tidak kira sama ada dipanggil. Janji dilaksanakan serta-merta; yang boleh diperhatikan hanya dibuat dan dilaksanakan apabila dipanggil (langgan).

• Promise mengembalikan nilai; Observable mengembalikan 0 kepada N nilai. Jadi operator yang sepadan dengan Promise ialah .then(), dan operator yang sepadan dengan Observable ialah .subscribe

• Observable Ia juga menyokong operator peta, penapis, pengurangan dan serupa

• Boleh diperhatikan boleh dibatalkan, tetapi Janji tidak boleh

Jika anda meningkatkan prestasi Angular

Angular juga aplikasi web, jadi Teknik umum untuk meningkatkan prestasi halaman web adalah universal. Untuk Angular, terdapat beberapa teknik pengoptimuman khas:

• Kompilasi AOT. Seperti yang dinyatakan sebelum ini, jangan kompilkan pada bahagian klien
• Aplikasi telah diminimumkan (uglify dan gegar pokok)
• Alih keluar pernyataan import yang tidak perlu. Jika ada lebihan, ia juga akan dimasukkan semasa mengemas.
• Pastikan perpustakaan pihak ketiga yang tidak digunakan telah dialih keluar daripada aplikasi. Sama seperti di atas.
• Apabila projek besar, pertimbangkan memuatkan malas (Lazy Loading) untuk memastikan kelajuan memuatkan halaman utama.

Cara menaik taraf versi Angular

Angular CLI menyediakan arahan naik taraf (ng kemas kini Pada masa yang sama, tapak web rasmi (https://update.angular.io /) juga mempunyai panduan naik taraf. Selepas memilih versi mana untuk dinaik taraf, arahan naik taraf langkah demi langkah akan diberikan, cuma laksanakannya secara langsung.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Belajar Pengaturcaraan! !

Atas ialah kandungan terperinci Kompilasi soalan temu bual Angular8: analisis mata pengetahuan asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!