Analisis ringkas tentang perbezaan antara jQuery dan AngularJS

Saya telah mempelajari angularjs baru-baru ini. Perasaan terbesar ialah ia benar-benar berbeza daripada jQuery sebelumnya dan pelbagai konsep reka bentuk perpustakaan berdasarkan jQuery Jika anda tidak dapat menyedari ini dan pengaturcara yang telah melakukan pembangunan jQuery sebelum ini, pergi dan pelajari angularjs secara langsung jika begitu, mungkin setelah lama mengkajinya, anda masih tidak tahu untuk apa benda ini boleh digunakan, bagaimana untuk menggunakannya, bagaimana untuk menggabungkannya dengan UI, dan lain-lain, saya jumpa satu artikel. tentang perkara ini di stackoverflow, dan ia sangat memuaskan selepas membacanya Atas dasar ini Terjemahkannya ke dalam bahasa Cina supaya semua orang boleh belajar daripadanya.

Soalan asal: Jika saya sudah biasa menggunakan jQuery untuk membangunkan aplikasi klien, maka bagaimana saya boleh memulakan dengan angularjs Bolehkah anda menerangkan perubahan paradigma yang diperlukan? Soalan berikut boleh membantu anda memberikan jawapan:

1. Apakah perbezaan semasa mereka bentuk aplikasi web pelanggan?

2. Teknologi manakah yang harus saya hentikan penggunaan dan teknologi manakah yang harus saya gunakan sebagai pengganti?

3. Adakah terdapat apa-apa atau sekatan yang perlu dipertimbangkan di bahagian pelayan?

Jawapan:

1 Jangan reka halaman anda dahulu dan kemudian ubah suainya melalui manipulasi DOM

Dalam jQuery, anda mula-mula mereka bentuk halaman, dan kemudian mengubah suai kandungannya secara dinamik Ini kerana jQuery direka untuk mengembangkan dan meningkatkan serta mengubah suai kandungan dengan ketara di bawah premis ini, tetapi dalam angularjs , anda mesti mereka struktur anda dalam fikiran anda terlebih dahulu. ,

Dari awal, anda perlu meninggalkan "Saya mempunyai elemen DOM dan saya mahu ia melakukan sesuatu" dan menggantikannya dengan "Apakah tugas yang perlu saya selesaikan, dan kemudian mereka bentuk aplikasi anda, dan akhirnya mereka bentuk anda Lihat paparan lapisan".

2. Jangan gunakan angularjs untuk melanjutkan jQuery

Oleh itu, tidak mempunyai idea untuk membiarkan jQuery melakukan perkara tertentu, dan kemudian menambah fungsi angularjs untuk membenarkannya mengurus model dan pengawal. Jadi saya secara amnya tidak mengesyorkan pembangun AngularJS untuk menggunakan jQuery pada masa yang sama, sekurang-kurangnya sehingga mereka telah menyesuaikan diri dengan model pembangunan AngularJS Tetapi apabila anda benar-benar mula menyesuaikan diri dengan cara AngularJS, anda akan mendapati bahawa ini sangat menggoda .

Saya telah melihat banyak pembangun merangkumkan pemalam jQuery dengan 150 hingga 200 baris kod menggunakan panggilan balik angularjs dan kaedah $apply Kaedah ini menjadikan kod itu kelihatan sangat rumit, tetapi sebenarnya mereka membiarkan pemalam ini dijalankan. Masalahnya ialah dalam kebanyakan kes pemalam jQuery boleh ditulis semula dalam angularjs dan mungkin hanya menggunakan jumlah kod yang sangat kecil Pada masa yang sama, penulisan semula ini menjadikan kod intuitif dan mudah difahami, yang jelas lebih baik daripada melakukan. Kod jQuery secara langsung.

Jadi pada akhirnya, apabila anda menghadapi masalah, anda mesti berfikir terlebih dahulu dari segi angularjs Jika anda tidak dapat mencari penyelesaian, anda boleh meminta bantuan komuniti Jika tiada siapa yang boleh memberikan penyelesaian yang mudah pertimbangkan ia. Gunakan jQuery, jangan biarkan jQuery menjadi tongkat anda, jika tidak, anda tidak akan pernah menguasai AngularJS.

3. Fikirkan berpaksikan seni bina

Pertama sekali, anda perlu tahu bahawa aplikasi satu halaman adalah aplikasi web ia bukan laman web berbilang halaman tradisional, jadi kita perlu berfikir sebagai pelayan dan pembangun pelanggan pada masa yang sama bagaimana untuk membahagikan aplikasi kami kepada bahagian Bebas, boleh diperluas dan boleh diuji.

Jadi bagaimana kita menggunakan pemikiran AngularJS untuk berfungsi seterusnya. Berikut ialah beberapa garis panduan asas selepas membandingkannya dengan jQuery:

Berikut ialah lapisan paparan aplikasi:

Dalam jQuery, kami mengubah suai paparan ini secara dinamik Kami menggunakan ul untuk mentakrifkan menu lungsur

Salin kod Kod adalah seperti berikut:

                                                                                                                                                                                                                                           
Dalam jQuery, kami menggunakan Menu lungsur ini menggunakan logik berikut

Salin kod

Kod adalah seperti berikut:

$('.main-menu').dropdownMenu(); Mari lihat kembali pandangan ini. Anda akan mendapati bahawa fungsinya tidak begitu mudah Untuk aplikasi kecil, ini OK, tetapi untuk aplikasi yang besar, pendekatan ini akan mengelirukan dan sukar untuk dikekalkan; Dalam angularjs, pandangan ini sebenarnya adalah fungsi berasaskan pandangan, kita boleh mentakrifkan ul seperti ini

Salin kod

Kod adalah seperti berikut:

Kedua-dua kaedah ini sebenarnya melakukan perkara yang sama, tetapi dalam kaedah AngularJS sesiapa sahaja yang melihat templat paparan ini akan tahu apa yang perlu dilakukan seterusnya. Setiap kali ahli baharu menyertai pasukan pembangunan, dia boleh melihat di sini dan mendapati terdapat arahan yang dipanggil dropdownMenu untuk mengendalikan paparan Dia tidak perlu meneka jawapan yang betul atau menyemak kod lain, pandangan itu terus memberitahu kami Apa yang dilakukannya. ia lebih mudah daripada jQuery.

Sesetengah orang baru AngularJS sering bertanya soalan ini: Bagaimanakah saya boleh mencari semua pautan jenis tertentu dan menambah arahan berdasarkannya, tetapi apabila kami menjawab "Anda tidak sepatutnya melakukannya dengan cara ini, anda adalah idea Half jQuery half angularjs ", mereka akan terkejut. 

Masalahnya ialah mereka cuba melakukan sesuatu dengan jQuery dalam konteks AngularJS, yang secara amnya bukan cara yang baik untuk melakukannya Anda tidak perlu melakukan sebarang manipulasi dom di luar arahan, yang ditambah terus ke pandangan , jadi niat sudah jelas. Ingat, jangan reka bentuknya dahulu dan kemudian ubah suainya, tetapi sediakan struktur dahulu dan kemudian reka bentuknya dalam rangka kerja ini.

Pengikatan Data

Ini adalah ciri yang paling menarik perhatian AngularJS Dari segi pengikatan data, ia meninggalkan operasi DOM, dan semua ini dilakukan oleh AngularJS untuk mengemas kini paparan secara automatik. Anda tidak perlu menulis kod mengendalikan dom , dalam jQuery, kami sering bertindak balas kepada acara dan mengubah suai pandangan dengan cara berikut:

Salin kod

Kod adalah seperti berikut:

$.ajax({ url: '/myEndpoint.json', Kejayaan: fungsi (data, status) { $('ul#log').append('

Data Diterima!

'); } });

Berbanding dengan pandangan sedemikian

Salin kod

Kod adalah seperti berikut:

Selain masalah kekeliruan, kita juga ada masalah yang saya sebutkan tadi iaitu bagaimana hendak menunjukkan niat. Tetapi yang lebih penting, kita mesti merujuk dan mengemas kini nod DOM ini secara manual Jika kita ingin memadamkan salah satu daripadanya, kita mesti mengendalikan elemen DOM itu secara pemrograman Jadi dalam kes ini, bagaimanakah kita menguji nod DOM? adakah kita mahu menukar kaedah paparan?

Kod di atas kelihatan kemas dan rapuh, tetapi dalam AngularJS, kita boleh melakukan ini:

Salin kod Kod adalah seperti berikut:

$http( '/myEndpoint.json' ).then( function ( response ) {

$scope.log.push( { msg: 'Data Diterima!' } );

});

Pandangan kami sepatutnya kelihatan seperti ini

Salin kod Kod adalah seperti berikut:

{{ entry.msg }}

Dalam kes itu, pandangan kami juga boleh kelihatan seperti ini

Salin kod Kod adalah seperti berikut:

Sekarang kami tidak menggunakan ul, tetapi menggunakan kotak timbul Bootstrap, tetapi kami tidak perlu mengubah suai kod dalam pengawal Lebih penting lagi, tidak kira bagaimana data diubah suai, lapisan paparan akan berubah secara automatik sewajarnya, yang sangat mudah!

Walaupun saya tidak akan melakukan demonstrasi di sini, anda perlu tahu bahawa pengikatan data adalah dua hala, anda boleh mengedit data dengan menambahkan arahan , dan terdapat banyak lagi tempat menarik.

Lapisan model perbezaan

Dalam jQuery, DOM adalah serupa dengan model, tetapi dalam AngularJS, kami mempunyai lapisan model yang berbeza daripada jQuery supaya kami boleh mengurusnya dalam apa jua cara yang kami mahukan. Pendekatan ini membantu kami melaksanakan pengikatan data dan mengekalkan pengasingan kebimbangan, dan membolehkan kebolehujian yang lebih baik.

Pengasingan kebimbangan

Semuanya berkaitan dengan topik keseluruhan ini: Biarkan anda menumpukan pada pemisahan, lapisan paparan anda memaparkan rekod, lapisan model anda mewakili data dan anda mempunyai lapisan perkhidmatan untuk melaksanakan tugasan boleh guna semula ini. Anda menggunakan arahan untuk melaksanakan operasi DOM dan memanjangkan pandangan anda dan menyambungkannya kepada pengawal, itulah sebabnya saya menyebut di tempat lain tentang meningkatkan kebolehujian.

Suntikan Kebergantungan

Apa yang membantu kami menyelesaikan pengasingan kebimbangan ialah suntikan pergantungan (DI) Jika anda seorang pembangun bahagian pelayan (Java atau PHP), anda mungkin sudah biasa dengan konsep ini, tetapi jika anda terlibat dalam bahagian klien. pembangunan, Anda akan berfikir bahawa konsep ini mungkin agak berlebihan dan semata-mata bergaya, tetapi sebenarnya tidak.

Dari perspektif yang luas, DI bermaksud bahawa anda boleh mengisytiharkan komponen secara bebas dan kemudian membuat instantiat daripada komponen tersebut, yang diberikan. Anda tidak perlu mengetahui susunan pemuatan, lokasi fail, perkara semacam itu, keajaiban tidak serta-merta kelihatan, tetapi saya akan memberikan contoh: ujian.

Kami mengatakan bahawa dalam aplikasi, kami memerlukan perkhidmatan yang bergantung pada keadaan aplikasi dan storan setempat untuk melaksanakan storan sisi pelayan melalui API rehat Apabila kami menguji pengawal kami, kami tidak perlu berkomunikasi dengan pelayan, selepas itu semua Hanya menguji pengawal. Kami hanya menambah perkhidmatan olok-olok yang sama dengan komponen asal kami. Penyuntik memastikan bahawa pengawal kami mendapat perkhidmatan palsu Pengawal itu sendiri tidak perlu mengetahui perbezaannya.

Mari bincang tentang ujian.

4. Pembangunan dipacu ujian

Bahagian ini adalah bahagian ketiga seni bina, tetapi ia sangat penting sehingga saya perlu meletakkannya pada kedudukan yang paling penting.

Dari semua pemalam jQuery yang telah kami lihat, gunakan dan tulis, berapa banyakkah yang mempunyai komponen ujian? Sebenarnya, tidak banyak ini kerana jQuery tidak mudah dikawal semasa ujian, tetapi AngularJS berbeza daripada ini.

Dalam jQuery, satu-satunya cara untuk menguji ialah menggunakan halaman demo untuk mencipta komponen bebas supaya ujian kami boleh melaksanakan operasi DOM. Seterusnya, kami perlu membangunkan komponen yang berasingan dan menyepadukannya ke dalam aplikasi kami. Betapa menyusahkan ini! Dalam banyak kes, apabila kami menggunakan jQuery untuk membangunkan, kami sebenarnya melakukan banyak pembangunan berulang dan bukannya pembangunan yang didorong oleh ujian Bolehkah anda menyalahkan kami?

Tetapi dalam AngularJS kita boleh menumpukan pada titik pemisah, jadi kita boleh melakukan beberapa pembangunan dipacu ujian. Sebagai contoh, kami mempunyai arahan untuk menerangkan laluan semasa kami dalam menu. Kami boleh mengisytiharkannya dalam paparan seperti ini:

Salin kod Kod adalah seperti berikut:

Hello

Baiklah, sekarang kita boleh menulis ujian untuk menguji arahan yang tidak wujud ini apabila aktif

Salin kod Kod adalah seperti berikut:

it( 'harus menambah "aktif" apabila laluan berubah', inject(function() {
var elm = $compile( 'Hello' )( $scope );

$location.path('/not-matching');
Expect( elm.hasClass('active') ).toBeFalsey();

$location.path( '/hello' );
Expect( elm.hasClass('active') ).toBeTruthy();
}));

Kami menjalankan kes ujian secara langsung, dan anda akan mendapati ia gagal Pada masa ini, anda perlu mencipta arahan ini, seperti berikut:

Salin kod Kod adalah seperti berikut:

.directive( 'whenActive', function ( $location ) {

Kembali {

skop: benar,

pautan: fungsi (skop, elemen, attrs) {

skop.$on( '$routeChangeSuccess', fungsi () {

Jika ( $location.path() == element.attr( 'href' ) ) {

                       elemen.addClass( 'aktif' );

                }

                   lain {

element.removeClass( 'aktif' );

                }

            });

}

};

});

Jalankan kes ujian ini sekali lagi, anda akan mendapati ia lulus dan menu dipaparkan seperti yang diminta Pembangunan kami adalah berulang dan boleh diuji, yang sangat keren!

5 Dari segi konsep, arahan tidak dibungkus jQuery

Anda sering mendengar bahawa operasi DOM hanya boleh dilakukan dalam arahan Ini adalah satu kemestian dan anda mesti mengambilnya dengan serius.

Jom selami,

Sesetengah arahan hanya menghiasi pandangan kami (seperti ngClass), jadi kadangkala tidak mengapa untuk memanipulasi dom secara langsung, tetapi apabila arahan adalah serupa dengan widget dan mempunyai templatnya sendiri, maka ia harus dianggap sebagai kebimbangan yang berasingan Maksudnya, ini bermakna templatnya perlu diasingkan daripada logik pelaksanaan dalam pautan dan fungsi pengawal lain.

AngularJS mempunyai set alat lengkap yang boleh memudahkan pemisahan ini Menggunakan arahan ngClass, kami boleh mengemas kini kelas secara dinamik, menggunakan ngBind kami boleh melakukan pengikatan data dua hala, dan menggunakan ngShow dan ngHide kami

Anda boleh menunjukkan dan menyembunyikan elemen secara pengaturcaraan, termasuk banyak arahan yang kami tulis sendiri. Dalam erti kata lain, kita boleh melakukan semua kerja tanpa operasi DOM Lebih sedikit operasi DOM, lebih mudah untuk menguji arahan, lebih mudah untuk menentukan atribut gaya mereka, lebih mudah untuk menukarnya pada masa hadapan dan lebih mudah untuk digunakan semula dan diedarkan.

Saya telah melihat ramai pemula AngularJS menggunakan arahan untuk merangkum urutan besar kod jQuery Dalam erti kata lain, kerana saya tidak dapat melaksanakan operasi dom dalam pengawal, saya boleh meletakkannya dalam arahan, walaupun ini lebih baik daripada. secara langsung mengendalikan dom , tetapi masih salah.

Lihat rekod kami di atas, walaupun kami meletakkannya dalam arahan, kami masih perlu mengendalikannya dengan cara Sudut, yang tidak melakukan operasi dom! Terdapat banyak masa apabila manipulasi DOM diperlukan, tetapi keadaan ini lebih jarang daripada yang anda fikirkan. Apabila kita perlu melakukan operasi DOM, kita mula-mula bertanya kepada diri sendiri sama ada kita mesti melakukan ini di sini.

Berikut ialah contoh mudah untuk menggambarkan corak yang sering saya lihat, di mana kita memerlukan butang togol:

Salin kod Kod adalah seperti berikut:

.directive( 'myDirective', function () {
Kembali {
Templat: 'Togol saya!',
         pautan: fungsi (skop, elemen, attr) {
var on = palsu;

$(elemen).klik( fungsi () {
pada = !on;
                       $(elemen).toggleClass('aktif', hidup);
            });
}
};
});

Dalam contoh di atas terdapat ralat berikut:

1. Pertama sekali, jQuery tidak diperlukan, jQuery tidak diperlukan sama sekali untuk berfungsi di sini!

2. Kedua, walaupun kami telah memperkenalkan jQuery ke dalam halaman, tetapi kami tidak mempunyai sebab untuk menggunakannya, kami boleh menggunakan angular.element dan komponen kami akan dapat dijalankan, walaupun jQuery tidak diperkenalkan dalam projek ini .

3. Dengan mengandaikan jquery diperlukan dalam arahan kami, kami boleh menggunakan jqLite untuk menggantikannya Hanya memperkenalkan jQuery, jadi kami tidak perlu menggunakan $ tetapi menggunakan angular.element;

4. Keempat, dan berkait rapat dengan titik ketiga, elemen jqLite tidak perlu dibalut dengan $

5. Seperti yang kami katakan sebelum ini, mengapa tidak mencampurkan templat dan logik kami?

Arahan di atas boleh ditulis semula seperti berikut, menjadikannya kelihatan begitu mudah walaupun dalam kes yang paling kompleks.

Salin kod Kod adalah seperti berikut:

.directive( 'myDirective', function () {

Kembali {
skop: benar,
Templat: 'Togol saya!',
pautan: fungsi (skop, elemen, attr) {
skop.on = palsu;

scope.toggle = fungsi () {
scope.on = !scope.on;
};
}
};
});

Elemen templat berada dalam atribut templat, anda boleh menggantikan gayanya dengan mudah dan logiknya tidak perlu diubah sama sekali, mencapai penggunaan semula sepenuhnya!

Terdapat faedah lain, seperti ia mudah untuk diuji, dan arahan API tidak akan berubah tidak kira apa yang ada dalam templat, jadi mudah untuk memfaktorkannya semula. Anda boleh menukar templat anda seberapa banyak kali yang anda mahu tanpa mengubah arahan, dan tidak kira bagaimana anda mengubahnya, ujian anda akan sentiasa lulus!

Jadi arahan itu bukan koleksi kod jQuery, seperti fungsi, dsb., tetapi lanjutan kod HTML Jika kod HTML tidak dapat mencapai fungsi yang anda perlukan, anda boleh menulis arahan untuk melaksanakannya, dan kemudian gunakannya seperti HTML Gunakannya.

Secara lain, jika AngularJS tidak melakukan perkara tambahan, fikirkan bagaimana kita boleh menggunakan arahan ngClick dan ngClass?

Ringkasan

Jangan selalu gunakan jquery, jangan rujukkannya, ia akan menghalang anda dalam jejak anda, apabila kami kembali kepada masalah - anda tahu bagaimana anda menyelesaikan masalah dalam AngularJS dengan cara jquery, tetapi apabila anda menggunakan pemilih seperti $ dsb. , anda perlu memikirkan bagaimana mereka sebenarnya memenjarakan AngularJS Jika anda tidak tahu cara melaksanakannya tanpa jQuery, kemudian tanya orang lain dan tanya lagi dan lagi Cara terbaik adalah dengan tidak menggunakan jQuery hanya akan menyebabkan kerja anda meningkat.