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 ke dalam level dan desain granular, secara konseptual mengabstraksi "inti", "alat", dan "komponen". Setiap fungsi kecil ditempatkan dalam sebuah file Demo yang 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, bahkan perlu memperkenalkan tiga atau empat js mengajukan. 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 kerja yang dimuat secara dinamis.
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 permintaan http nyata setelah file yang dimuat secara dinamis di-cache. Permintaan, kedua, pemuatan dinamis dapat mewujudkan pemuatan sesuai permintaan, dan dapat didasarkan pada file js. Deduplikasi dan penyortiran saling ketergantungan, memuat file js dengan tag tulisan tangan mengharuskan pengembang memberikan perhatian ekstra pada penyortiran, duplikasi, dll. File. Ketiga, pemuatan dinamis kondusif bagi semantik kode halaman, yang membuat pengembang hanya peduli pada "Apa yang Anda butuhkan", bukannya "cara 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 menjadi masalah saat menggunakan kembali kode tersebut. Demikian pula, saat melakukan debug, teknisi juga harus membuka dua jendela untuk fokus pada js dan html, 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, 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.
<!–Segmen kode html yang logis–>
<skrip src="logicA.js" />
<skrip>
$.onDomReady(fungsi(){
___LogikaA.mulai();
});
</skrip>
…
<!–B segmen kode html logis–>
<skrip src="logicB.js" />
<skrip>
$.onDomReady(fungsi(){
___LogikaB.mulai();
});
</skrip>