1. Kelancaran antarmuka
Antarmuka yang baik halus dan mudah dimengerti, dan terutama mencerminkan aspek -aspek berikut:
1. Sederhana
Untuk mengoperasikan atribut CSS dari elemen tertentu, berikut ini adalah metode asli:
document.queryselectorall ('#id'). style.color = 'red';Setelah pengemasan
fungsi a (selector, color) {document.queryselectorAll (selector) []. style.color = color} a ('#a', 'red');Dari garis panjang dengan lusinan huruf ke panggilan fungsi sederhana, API sederhana dan mudah digunakan
2. Keterbacaan
A ('#a', 'Red') adalah fungsi yang baik yang membantu kita mengubah elemen secara sederhana dan praktis, tetapi masalahnya adalah jika Anda menggunakan perubahan fungsi untuk pertama kalinya, itu akan lebih bingung. Tidak ada yang akan memberitahunya apa fungsi A. Penting untuk mengetahui satu hal tentang pengembangan antarmuka: orang malas. Dari perspektif fungsi penugasan warna, meskipun lebih sedikit kode ditulis, itu meningkatkan biaya memori. Setiap kali Anda melakukan ini, Anda harus memiliki hubungan pemetaan. A ----> Warna. Jika beberapa yang sederhana, itu tidak masalah, tetapi biasanya satu set kerangka kerja memiliki lusinan atau bahkan ratusan API, dan peningkatan biaya pemetaan akan menyebabkan programmer runtuh. Yang kita butuhkan adalah membuat antarmuka bermakna. Mari kita tulis ulang fungsi A:
fungsi letsomeelementChangeColor (selector, color) {document.queryselectorall (selector, color);}LetsomeelementChangecolor diberikan makna linguistik relatif terhadap A, dan siapa pun akan tahu artinya.
3. Mengurangi biaya memori
Fungsi yang baru saja kita lakukan seperti ini. Itu terlalu panjang. Meskipun LetsomeElementChangecolor mengurangi biaya pemetaan, itu meningkatkan biaya memori. Anda harus tahu bahwa tidak ada seorang pun, termasuk master akademis, suka secara verbal. API yang secara asli memperoleh DOM juga memiliki dokumen masalah ini.getElementsByClassName; document.getElementsbyname; Document.QuerySelectorall; API ini memberi orang perasaan bahwa kata -kata itu terlalu lama. Meskipun makna yang mereka berikan sangat jelas, pendekatan ini didasarkan pada pengorbanan kesederhanaan. Jadi kami menulis ulang fungsi sebelumnya lagi
fungsi setColor (selector, color) {xxxxxxxxxxxxx}Kurangi nama fungsi tanpa perubahan yang signifikan. Membuatnya mudah dibaca, diingat, dan digunakan;
4. Diperpanjang
Perpanjangan yang disebut berarti bahwa penggunaan fungsi dieksekusi dalam urutan penulisan seperti air yang mengalir untuk membentuk rantai eksekusi:
document.geteLementById ('id'). style.color = 'red'; document.geteLementById ('id'). style.fontsize = 'px'; document.geteLementById ('id'). style.backgourdcolor = 'pink';Metode sebelumnya yang kami gunakan adalah merangkum dua fungsi SetFontSize, SetbackgroundColor lagi; dan kemudian jalankan mereka setColor ('id', 'red'); setFontSiez ('id', '12px'); setbackgroundColor ('id', 'pink'); Jelas, pendekatan ini tidak malas untuk melampaui ranah; Elemen ID perlu diperoleh kembali setiap saat, mempengaruhi kinerja, dan gagal; Setiap kali perlu menambahkan metode baru, gagal, metode ini masih dipanggil setiap kali, atau gagal. Di bawah ini kami menulis ulang menjadi fungsi yang diperluas. Pertama, merangkum metode ID yang diperoleh ke dalam suatu objek, dan kemudian mengembalikan objek ini di setiap metode objek:
function getElement (selector) {this.style = document.queryselecoTrall (selector) .style;} getElement.prototype.color = function (color) {this.style.color = color; return this;} getelement.prototype.background = function (bg) {this.stye.style.selement.prototype.background = function (bg) {this.stye.style.selement.prototype this;} getElement.prototype.fontsize = function (size) {this.style.fontsize = size; kembalikan ini;} // panggil var el = baru getElement ('#id') el.color ('red'). latar belakang ('pink'). fontSize ('px');Sederhana, halus dan mudah dibaca nanti, kita akan berbicara tentang cara terus mengoptimalkan parameter. Oleh karena itu, semua orang lebih suka menggunakan jQuery API. Meskipun simbol $ tidak mewakili signifikansi praktis, simbol sederhana bermanfaat untuk penggunaan kita. Ini mewujudkan prinsip-prinsip di atas: sederhana, mudah dibaca, mudah diingat, penulisan rantai, dan pemrosesan multi-parameter.
Nightware:
document.geteLementById ('id'). style.color = 'red'; document.geteLementById ('id'). style.fontsize = 'px'; document.geteLementById ('id'). style.backgourdcolor = 'pink';mimpi:
$ ('id'). css ({color: 'red', fontsize: '12px', backgroundColor: 'pink'})2. Konsistensi
1. Konsistensi antarmuka
Antarmuka yang relevan mempertahankan gaya yang konsisten. Satu set API lengkap akan sangat mengurangi kemampuan beradaptasi pengembang terhadap alat baru jika menyampaikan rasa keakraban dan kenyamanan. Menamai hal ini: baik pendek dan jelas, dan yang paling penting, mempertahankan konsistensi. "Hanya ada dua sakit kepala di komunitas ilmu komputer: kegagalan cache dan masalah penamaan" - Phil Karlton memilih kata yang Anda sukai dan menggunakannya terus menerus. Pilih gaya dan simpan.
Nightware:
setColor,
Letbackground
ChangeFontsize
Makedisplay
mimpi:
setColor;
kemunduran;
SetFontSize
mengatur.........
Cobalah untuk mempertahankan gaya kode dan gaya penamaan sehingga orang dapat membaca kode Anda seolah -olah mereka membaca artikel yang ditulis oleh orang yang sama.
3. Pemrosesan Parameter
1. Jenis parameter
Tentukan jenis parameter untuk memberikan jaminan yang stabil untuk program Anda
// Kami menetapkan warna itu menerima fungsi string type setColor (warna) {if (typeof color! == 'string') return; dosomething}2. Gunakan JSON untuk melewati parameter
Ada banyak manfaat dari nilai yang lewat di JSON. Ini dapat memberi nama parameter, mengabaikan lokasi parameter tertentu, memberikan nilai default, dll. Misalnya, situasi buruk berikut:
fungsi fn (param1, param2 ............ paramn)
Anda harus melewati setiap parameter agar sesuai, jika tidak, metode Anda akan dieksekusi dengan cara yang berbeda dari yang Anda harapkan. Metode yang benar adalah sebagai berikut.
Function fn (json) {// Atur nilai default untuk parameter yang diperlukan var default = extend ({param: 'default', param: 'default' ......}, json)}Kode fungsi ini akan diharapkan berjalan bahkan jika Anda tidak melewati parameter apa pun di dalamnya. Karena ketika menyatakan, Anda akan memutuskan nilai default parameter berdasarkan bisnis tertentu.
4. Skalabilitas
Salah satu prinsip terpenting dari desain perangkat lunak: Jangan pernah memodifikasi antarmuka, itu berarti memperluasnya! Skalabilitas juga membutuhkan tanggung jawab tunggal untuk antarmuka, dan antarmuka tanggung jawab berganda sulit diperluas. Ambil kastanye:
// Font dan latar belakang suatu elemen perlu diubah pada saat yang sama // nightware: set fungsi (selector, warna) {document.queryselectroall (selector) .style.color = color; document.queryselectroall (selector) .style.backgroundColor = color;} // fungsinya tidak dapat diekspand. Jika Anda perlu mengubah ukuran font lagi, Anda hanya dapat memodifikasi fungsi ini dan mengisi kode untuk mengubah ukuran font setelah fungsi // set DreamFunction (selector, color) {var el = document.queryselectroall (selector); eL.Style, color = the lacky, dan function, dan colorain, dan colorain, dan colorain, dan colorain, EL.STYLE.BackgroundColor = color; color,} color; px) {var el = set (selector, color) el.style.fontsize = px; return el;}Di atas hanyalah tambahan warna sederhana. Bisnisnya rumit dan kodenya tidak saat Anda menulisnya. Anda harus membaca kode sebelumnya dan memodifikasinya. Jelas, itu tidak sesuai dengan prinsip tertutup terbuka. Fungsi yang dimodifikasi mengembalikan objek elemen, sehingga lain kali Anda perlu berubah, Anda akan mendapatkan nilai pengembalian lagi untuk diproses.
2. Penggunaan ini
Skalabilitas juga mencakup penggunaan yang fleksibel dari ini, panggilan dan terapkan metode:
Fungsi SaysboNJour () {waspada (this.a)} obj.a =; obj.say = SaybOnjour; obj.say (); /// orsayboNJour.call || berlaku (obj); //5. Penanganan kesalahan
1. Kesalahan Peramalan
Anda dapat menggunakan TypeOf atau mencoba ... Tangkap untuk mendeteksi. Tipeof memaksa objek deteksi untuk tidak melempar kesalahan, dan sangat berguna untuk variabel yang tidak ditentukan.
2. Lemparkan kesalahan
Sebagian besar pengembang tidak ingin melakukan kesalahan dan perlu menemukan kode yang sesuai sendiri. Cara terbaik adalah dengan mengeluarkannya secara langsung di konsol untuk memberi tahu pengguna apa yang terjadi. Kita dapat menggunakan output API browser: console.log/warn/error. Anda juga dapat meninggalkan jalan keluar untuk program Anda: Coba ... Tangkap.
kesalahan fungsi (a) {if (typeof a! == 'string') {console.error ('param a harus tipe string')}} kesalahan fungsi () {coba {// beberapa kode ucas di sini mungkin melempar salah} catch (ex) {console.wran (ex);}}6. Foresight
Antarmuka program bau yang dapat diprediksi memberikan ketahanan, dan untuk memastikan kelancaran eksekusi kode Anda, itu harus memperhitungkan harapan yang tidak normal. Mari kita lihat perbedaan antara kode yang tidak terduga dan kode yang dapat diperkirakan menggunakan setColor sebelumnya
// NighWarefunction Set (selector, color) {document.geteLementById (selector) .style.color = color;} // dreamzepto.init = function (selector, konteks) {var dom // jika tidak ada yang diberikan, kembalikan zepto collection (! selector) mengembalikan zepto zepto.z () // Optimize {mype collection {mype collection (! selector.trim () // Jika itu adalah fragmen html, buat node dari itu // Catatan: baik di chrome dan firefox, dom error // dilemparkan jika fragmen tidak dimulai dengan <if (selector [] == '<' && fragmentre.test (selector)) dom = zepto.fragment (selector, regex. konteks pertama, dan pilih // node dari sana if (konteks! == tidak terdefinisi) mengembalikan $ (konteks) .find (selector) // Jika itu pemilih css, gunakan untuk memilih node.else dom = zepto.qsa (dokumen)}} // Jika fungsi diberikan, panggilnya ketika dom adalah readyelse if (documor). Koleksi Zepto diberikan, cukup kembalikan itelse if (zepto.isz (selector)) mengembalikan selectorelse {// normalisasi array jika array node diberikan (isArray (selector)) dom = compact (selector) // wrap node.else if (isObject (selector)) dom = [selector], selector = nodes nodes. (fragmentre.test (selector)) dom = zepto.fragment (selector.trim (), regexp. $, konteks), selector = null // jika ada konteks, buat koleksi pada konteks itu terlebih dahulu, dan select // node -nya untuk tidak ada (konteks! == tidak terdefinisi) mengembalikan $ (konteks). Bahkan (seleksi), dan selector if no contect! nodes.else dom = zepto.qsa (dokumen, pemilih)} // Buat koleksi zepto baru dari node foundreturn zepto.z (dom, selector)}Di atas adalah kode sumber Zepto. Anda dapat melihat bahwa penulis telah melakukan banyak pemrosesan saat meramalkan parameter yang masuk. Bahkan, prediktabilitas menyediakan beberapa pintu masuk untuk program ini, tidak lebih dari beberapa penilaian logis. Zepto menggunakan banyak penilaian yang benar dan salah di sini, yang juga mengarah pada panjang kode dan tidak cocok untuk dibaca. Singkatnya, prediktabilitas benar -benar mengharuskan Anda untuk menulis lebih banyak parameter untuk objek fisik di lokasi. Ubah deteksi eksternal ke deteksi internal. Ya, orang yang menggunakannya nyaman dan senang menggunakannya. Sekarang! Hal terpenting dalam hidup adalah Heisen.
7. Komentar dan dokumen keterbacaan
Antarmuka terbaik adalah bahwa kita akan menggunakannya tanpa dokumentasi, tetapi seringkali, setelah jumlah antarmuka lebih banyak dan bisnis meningkat, itu akan sedikit sulit digunakan. Oleh karena itu, dokumen dan komentar antarmuka perlu ditulis dengan cermat. Komentar mengikuti prinsip sederhana dan keringkasan, dan bagi mereka yang datang bertahun -tahun kemudian untuk menunjukkannya:
// Antarmuka anotasi, untuk mendemonstrasikan PPT, gunakan komentar fungsi () {// Jika Anda mendefinisikan variabel tanpa makna literal, yang terbaik adalah menulis komentar untuk itu: A: variabel yang tidak berguna, Anda dapat menghapus var a; // menulis komentar dalam kunci dan ambiguitas, seperti sentuhan finishing: Bersihkan semua data setelah rute ke antarmuka hash. Return go.navigate ('hash', function () {data.clear ();});}akhirnya
Disarankan untuk menandai dokumen API Penjelas Markdown dan Sintaks Penulisan Dokumen Royal Github. Sederhana dan cepat, kodenya disorot, dan Anda tidak banyak bicara.
Di atas adalah deskripsi lengkap dari prinsip -prinsip desain API JavaScript yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!