Saya percaya bahwa setiap insinyur front-end memiliki kerangka kerja JavaScript favoritnya, apakah itu emosi atau keyakinan. Kerangka kerja JavaScript tidak hanya menghadirkan pengembangan yang mudah, tetapi juga keindahan logis yang murni, apakah itu kesederhanaan jquery yang anggun, Atau keajaiban Yui. kotak pasir, semuanya memberi kita imajinasi tanpa akhir. Namun, kerangka js pasti tidak dapat mencapai kesempurnaan menyeluruh. Misalnya, konsesi jquery dalam OO dan pengorbanan yui dalam performa semuanya menyampaikan semacam keindahan yang tidak sempurna dan realisme ideal kepada orang-orang. Hari ini, mari kita lihat pengorbanan dan konsesi yang dibuat oleh yui3 dalam desain kerangka kerja, sehingga kita dapat memiliki pemahaman lebih dalam tentang gambaran keseluruhan yui3 dan memaksimalkan keuntungannya.
1. Satu tahap atau granulasi biji
Yang disebut penyemaian satu langkah berarti Anda hanya perlu memasukkan tag skrip dari file benih di halaman, seperti prototipe dan jquery, dan cukup memasukkan prototype.js atau jquery.js.Mereka akan merangkum operasi DOM dan peristiwa, dll. ke dalam sebuah file dan usahakan membuatnya sekecil mungkin. Manfaat dari melakukannya sangat jelas. Namun, Yui telah membagi fungsi-fungsi ini menjadi desain hierarki dan granular, secara konseptual mengabstraksi "inti", "alat", dan "komponen". Setiap fungsi kecil ditempatkan dalam sebuah file dan harus direferensikan sendiri saat diperlukan diberikan dalam dokumentasi yui mengadopsi metode ini. Desain ini jelas tidak ramah bagi pemula seperti jquery, dan tidak cukup bodoh untuk digunakan. Untuk mengimplementasikan fungsi kecil, tiga atau empat file js harus diperkenalkan. Ada dua alasan mengapa yui melakukan ini. Pertama, yui terlalu besar, dan agak tidak dapat diandalkan untuk memasukkan semua fungsi ke dalam satu file. Kedua, ini membuka jalan bagi desain kerangka pemuatan dinamisnya.
2. Pengenalan manual atau pemuatan dinamis
Metode tradisional untuk menulis js ke dalam halaman adalah dengan langsung menulis file js di halaman sebagai jalur tag skrip. Anda juga dapat memperkenalkan halaman dengan cara ini menggunakan yui, tetapi yui merekomendasikan penggunaan loader untuk pemuatan dinamis. Asal usul skrip yang dimuat secara dinamis sangat rumit. Saat ini, ada tiga alasan utama. Pertama, tag js tulisan tangan di halaman akan tetap menggunakan permintaan http untuk memulai permintaan http nyata setelah di-cache. Kedua, pemuatan dinamis dapat mewujudkan pemuatan sesuai permintaan, dan dapat menghapus duplikat dan mengurutkan berdasarkan ketergantungan antara file js dengan tag tulisan tangan mengharuskan pengembang untuk memberikan perhatian ekstra penyortiran, duplikasi, dll. file. Ketiga, pemuatan dinamis kondusif bagi semantik kode halaman, yang memungkinkan pengembang hanya peduli pada "apa yang dibutuhkan" tanpa mengkhawatirkan "bagaimana mendapatkannya". Ketika proyek menjadi semakin membengkak dan biaya pemeliharaan semakin tinggi, teknik skala kecil dan menengah ini akan memberikan manfaat yang besar.
3. Pintu masuk tunggal atau kotak pasir untuk startup logis
Saat kita memulai logika js di sebuah halaman, kita biasanya memasukkannya ke dalam metode seperti onDomReady. Bagaimana jika ada banyak logika di halaman tersebut? Misalnya a mengimplementasikan logika A, dan kode halamannya seperti ini
<skrip src="logicA.js" />
<skrip>
$.onDomReady(fungsi(){
___LogikaA.mulai();
});
</skrip>
Kode ini biasanya ditulis di akhir halaman. Kode html yang menyertai logika ini terkubur di suatu tempat di halaman. Saat ini, b perlu menambahkan logika B ke halaman akhir, lalu Ubah menjadi seperti ini:
<skrip src="logicA.js" />
<skrip src="logicB.js" />
<skrip>
$.onDomReady(fungsi(){
___LogikaA.mulai();
___LogikaB.mulai();
});
</skrip>
Demikian pula, kode html yang menyertai logika B juga terkubur di suatu tempat di halaman. Tampaknya logika js dan kode html yang menyertainya sangat terpisah sehingga ketika harus menghapus fungsinya, html sering kali terhapus tetapi js dilupakan. ., atau menghapus js dan lupa menghapus html juga akan menimbulkan masalah saat menggunakan kembali kode. Demikian pula, saat melakukan debug, teknisi harus membuka dua jendela dan fokus pada js dan html masing-masing, meskipun kedua potongan kode tersebut berada dalam file yang sama. Dalam hal ini, lebih baik menulis kode seperti ini:
Metode pengkodean ini persis seperti yang dianjurkan Yui, yaitu apa yang disebut kotak pasir. Setiap logika terdapat dalam kotak pasir, dan masing-masing melakukan tugasnya sendiri tanpa mengganggu satu sama lain. Ketika pihak ketiga menelusuri kode tersebut, mereka segera memahami bahwa ini adalah blok fungsional independen, termasuk struktur HTML tipikal dan logika startup js.
<!–Cuplikan kode html yang logis–>
<skrip src="logicA.js" />
<skrip>
$.onDomReady(fungsi(){
___LogikaA.mulai();
});
</skrip>
…
<!–B cuplikan kode html logis–>
<skrip src="logicB.js" />
<skrip>
$.onDomReady(fungsi(){
___LogikaB.mulai();
});
</skrip>