Perbincangan tentang idea pengaturcaraan rangka kerja kelas MVW untuk pengetahuan pengenalan AngularJS_AngularJS

Dengan melaksanakan dua keperluan perniagaan yang mudah, artikel ini meneroka perbezaan antara AngularJS dan pelaksanaan DOM kawalan JavaScript tradisional dan cuba memahami idea pengaturcaraan rangka kerja seperti MVW dalam pembangunan bahagian hadapan Web yang popular.

Keperluan ini sangat biasa Contohnya, dalam menu dua peringkat, apabila item menu peringkat pertama diklik, item submenu yang sepadan harus dipaparkan atau disembunyikan.

Pelaksanaan jQuery:

Salin kod Kod adalah seperti berikut:

• 
  Perkara 1
           
  
                                                                                                                                                                                                                                                                                            
  • Item child 1
  
                                                                                                                                                                                                                               
  
  
  //javascript

  $('li.parent_item').klik(function(){
  $(ini).kanak-kanak('ul.kanak-kanak').togol();
  })
  
  

Pelaksanaan AngularJS:

Salin kod Kod adalah seperti berikut:

• 
  Perkara 1
           
  
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
  
  
  
  
  
  Cara tradisional pengendalian DOM tidak akan diterangkan lagi. Pelaksanaan AngularJS jauh lebih halus daripada kod, dan hanya versi HTML yang mencukupi. Kod di atas menggunakan titik pengetahuan AngularJS ini:

1.

Arahan

2.Ungkapan

ng-click

dan

ng-hide ialah Arahan yang disertakan dengan rangka kerja yang sama dengan menyediakan Pengendali Peristiwa pada tag li ) Apabila diklik, Ungkapan (ungkapan) hide_child = !hide_child akan dilaksanakan. Mari kita lihat arahan ng-hide dahulu, yang mengawal sama ada elemen HTML perlu dipaparkan berdasarkan hasil ungkapan yang diberikan (nilai Boolean) (dilaksanakan melalui CSS). Dalam erti kata lain, jika pembolehubah hide_child adalah benar, maka ul akan disembunyikan, jika tidak, hasilnya akan menjadi sebaliknya. Hide_child di sini sebenarnya pembolehubah pada $scope

Menukar nilainya juga boleh dicapai dengan membungkus kaedah dalam pengawal pengawal Walau bagaimanapun, pernyataan semasa adalah agak mudah dan boleh ditulis secara langsung dalam penugasan arahan.

Melalui analisis kod ringkas di atas, kita boleh melihat dua ciri jelas AngularJS:

1 Operasi DOM dimeterai melalui arahan dan ungkapan, dan hanya kod mudah boleh menyimpan kod JavaScript tambahan

2. Aplikasi arahan dan ungkapan hanya bersarang secara langsung dalam HTML, yang agak bertentangan dengan gaya kod JavaScript Tidak mengganggu yang dipromosikan oleh jQuery

Mari kita lihat keperluan lain dahulu, dan kemudian terangkan kesimpulan di atas secara terperinci.

Keperluan 2: Dengan mengklik pada div, cetuskan pemilihan butang radio dalam borang

Elemen Borang HTML tradisional tidak begitu mesra untuk beroperasi pada peranti mudah alih hari ini. Sebagai contoh, butang radio butang Radio memerlukan kedudukan yang tepat pada skrin sentuh untuk mengawal komponen ini, tetapi kedudukan jari adalah sangat kasar. Pendekatan biasa ialah menambah kawalan Label yang sepadan, tetapi nisbah skrin teks itu sendiri tidak sesuai, dan ia tidak mempunyai kesan penghantaran maklumat yang jelas. Oleh itu, tag div atau li dengan kawasan yang agak besar biasanya dikendalikan secara tidak langsung.

Pelaksanaan jQuery:

Salin kod Kod adalah seperti berikut:

   
• 
                      id="option1" />
          option 1
     

// javascript
$('li.selection').klik(function(){
    $(this).kanak-kanak('input[type="radio"]').klik();
})

AngularJS的实现：

复制代码 代码如下:

   
•         ng-click="model.option = option.value"
          ng-class="{active: model.option == option.value}" >
                      ng-model="model.option"
              value="{{option.value}}"
              id="option1" />
          option 1
     

Dalam penyelesaian ini, kami juga tidak melibatkan kod JavaScript tambahan dan menggunakan beberapa arahan lagi. Untuk perbandingan dan rujukan, kami hanya mengambil berat tentang ungkapan dua arahan ng-click dan ng-model.

Mari kita lihat pada arahan ng-model bagi elemen input Tugasan di sini bermakna kita mengaitkan input pada templat dengan atribut pilihan objek $scope.model untuk mendapatkan masuk. -pemahaman mendalam tentang data untuk pengikatan, sila rujuk Pengikatan Data. Perkaitan yang ditentukan ini membolehkan kawalan templat diikat terus ke Model data dan pengikatan ini adalah dua arah. Ini bermakna apabila pengguna mengubah suai nilai dalam kawalan (semak input radio), objek Model yang sepadan akan ditetapkan semula (model.option pada masa yang sama, jika nilai objek Model berubah, kawalan input dalam templat juga akan sepadan dengan perubahan Reflect. Ini sebenarnya tidak dicapai dalam pelaksanaan jQuery di atas.

Jadi, melalui pengikatan data AngularJS, proses mencetuskan input secara tidak langsung dengan mengklik pada elemen li adalah seperti berikut:

1. Klik tag li dan tetapkan nilai kepada model.option
2. Ubah suai objek Model dan cari kawalan input yang sepadan (nilai nilai adalah salah satu model.option); 3. Aktifkan atribut kawalan input
yang ditandai

Melalui dua kes di atas, kami mempunyai pemahaman baharu tentang pengendalian bahagian hadapan Web.

Pertama sekali, dari segi pelaksanaan teknikal, dengan memperkenalkan arahan baharu, ungkapan, pengikatan data dan konsep lain, kami boleh mengendalikan DOM dengan cara baharu sepenuhnya, bukan hanya kod JavaScript yang terhad kepada interaksi antara pengguna dan komponen HTML. Perubahan pemikiran ini sangat besar.

Sejak kebangkitan pengaturcaraan web dinamik pada awal abad ini, teknologi pengaturcaraan sebelah pelayan telah bertambah baik. Dari awal CGI/PHP/ASP, bahasa dan platform menimbulkan .NET vs. Java, kecekapan pembangunan dan proses perisian mempromosikan rangka kerja MVC/ORM/AOP, dsb., dan prestasi serta data besar membawa NodeJS/NoSQL/ Hadoop, dsb. , dan keperluan teknikal untuk bahagian hadapan penyemak imbas nampaknya tidak begitu radikal. Di satu pihak, kebanyakan keperluan perniagaan model B/S boleh dipenuhi melalui pelayan dan pangkalan data sebaliknya, pelayar itu sendiri mempunyai perbezaan antara platform yang berbeza, tidak serasi dengan piawaian bahasa skrip dan rendering; teknologi, dan mempunyai had dalam kuasa pengkomputeran dan pertimbangan keselamatan.

Dalam kes ini, keperluan pada bahagian penyemak imbas pada kebanyakan masa hanya perlu mempertimbangkan untuk memaparkan halaman dan interaksi pengguna yang mudah. HTML/DOM ditambah JavaScript/CSS dengan itu mencapai kerja utama bahagian hadapan. Oleh itu, tidak ada pekerja hadapan pada masa lalu, hanya pereka web diperlukan. Secara beransur-ansur, terdapat lebih banyak keperluan untuk bahagian hadapan, dan jQuery telah menjadi perpustakaan pakej yang paling banyak digunakan untuk JavaScript untuk mengendalikan DOM. Pada peringkat ini, tugas utama jQuery/JavaScript masih hanya sebagai alat untuk persembahan terminal pelayar pengguna dan interaksi.

Memahami asal usul jQuery, tidak sukar untuk mendapati bahawa beberapa peraturan yang kami lakukan sebelum ini, seperti JavaScript Tidak Menganggu, terhad kepada cara dan kaedah pelaksanaan Untuk memisahkan logik kod DOM dan JavaScript, kami memberi keutamaan kepada yang lebih boleh diselenggara. Selepas permintaan bahagian hadapan untuk JavaScript meningkat, banyak rangka kerja bahagian hadapan MVC/MVP muncul, serta apa yang dipanggil

MVW (Model-View-Whatever) AngularJS, dan satu saiz-sesuai- semua pendekatan kepada JavaScript dan DOM telah berubah. Pada asalnya, kami menganggap operasi langsung paparan antara muka dan interaksi pengguna Kini kami mempunyai pengikatan data sisi pelanggan, arahan yang kaya dan suntikan pergantungan Apa yang menanti kami ialah model pengaturcaraan dan cara berfikir.