Cara menulis kod JS berkualiti tinggi_Pengetahuan asas

Saya mahu menulis pustaka JavaScript yang cekap tetapi tidak tahu bagaimana untuk memulakan

Saya cuba membaca perpustakaan kelas orang lain, tetapi saya tidak faham sama sekali

Saya bercadang untuk mengkaji fungsi lanjutan js, tetapi kandungan dalam buku berwibawa terlalu berselerak,

Walaupun saya masih ingat "penggunaan", saya tidak memikirkan "kaedah" apabila "menggunakan"nya.

Mungkin anda seperti saya, nampaknya ada satu kuasa ghaib yang menghalang rancangan kita, membuatkan kita berulang kali memikirkan keterbatasan ilmu, menyebabkan kita terdiam dan sukar untuk maju ke hadapan.

Dalam tempoh ini, tekanan meningkat dua kali ganda disebabkan oleh pelbagai tugasan, reka bentuk kursus dan laporan percubaan. Jarang untuk memerah sedikit masa, tidak pernah tidur, menyusun dan meringkaskan buku yang saya baca pada masa lalu, hanya untuk lebih dekat dengan menulis perpustakaan kelas saya sendiri.

Artikel ini merujuk kepada "Javascript Language Essence" dan "Effective JavaScript". Contoh telah dinyahpepijat, dan selepas memahaminya, saya ingin membuat beberapa prinsip "mendalam" sedikit lebih mudah.

1. Skop pembolehubah

Skop adalah seperti oksigen kepada pengaturcara. Ia ada di mana-mana, dan anda sering tidak memikirkannya. Tetapi apabila ia tercemar (cth. menggunakan objek global), anda boleh berasa sesak nafas (cth. aplikasi menjadi kurang responsif). Peraturan skop teras JavaScript adalah mudah, direka bentuk dengan baik dan berkuasa. Menggunakan JavaScript dengan berkesan memerlukan penguasaan beberapa konsep asas skop pembolehubah dan memahami beberapa kes kelebihan yang boleh membawa kepada masalah sukar difahami dan buruk.

1.1 Gunakan pembolehubah global sesedikit mungkin

Javascript memudahkan untuk mencipta pembolehubah dalam ruang nama global. Mencipta pembolehubah global adalah mudah kerana ia tidak memerlukan sebarang bentuk pengisytiharan dan diakses secara automatik oleh semua kod sepanjang program.

Bagi pemula seperti kami, apabila kami menghadapi keperluan tertentu (contohnya, data yang dihantar direkodkan, digunakan semasa menunggu fungsi tertentu dipanggil pada masa tertentu; atau fungsi tertentu sering digunakan), kami tidak teragak-agak untuk memikirkan fungsi global, atau bahkan Bahasa C yang saya pelajari pada tahun pertama saya terlalu berakar umbi dalam pemikiran berorientasikan proses, dan sistem ini penuh dengan fungsi. Mentakrifkan pembolehubah global mencemarkan ruang nama awam yang dikongsi dan boleh membawa kepada konflik penamaan yang tidak dijangka. Pembolehubah global juga memudaratkan modulariti kerana ia membawa kepada gandingan yang tidak perlu antara komponen bebas dalam program. Secara serius, terlalu banyak global (termasuk helaian gaya, mentakrifkan secara langsung gaya div atau a) akan menjadi ralat bencana apabila disepadukan ke dalam proses pembangunan berbilang orang. Itulah sebabnya semua kod jQuery dibalut dengan ungkapan tanpa nama yang dilaksanakan serta-merta - fungsi tanpa nama panggilan sendiri. Apabila penyemak imbas memuatkan fail jQuery, fungsi tanpa nama panggilan sendiri serta-merta mula melaksanakan dan memulakan setiap modul jQuery untuk mengelak daripada merosakkan dan mencemarkan pembolehubah global serta menjejaskan kod lain.

Salin kod Kod adalah seperti berikut:

(fungsi(tetingkap, tidak ditentukan){
var jQuery = ...
//...
​ window.jQuery = window.$ = jQuery;
})(tetingkap);

Selain itu, anda mungkin berfikir bahawa lebih mudah untuk "menulis bagaimana anda mahu dahulu dan menyusunnya kemudian", tetapi pengaturcara yang baik akan sentiasa memberi perhatian kepada struktur program, terus mengklasifikasikan fungsi yang berkaitan dan memisahkan komponen yang tidak berkaitan . dan masukkan tingkah laku ini sebagai sebahagian daripada proses pengaturcaraan.

Memandangkan ruang nama global ialah satu-satunya cara untuk komponen bebas dalam program JavaScript berinteraksi, penggunaan kawalan yang dinamakan secara global tidak dapat dielakkan. Komponen atau perpustakaan perlu menentukan beberapa pembolehubah global. untuk digunakan oleh bahagian lain program. Jika tidak, lebih baik menggunakan pembolehubah tempatan.

Salin kod Kod adalah seperti berikut:

this.foo ;//undefined
foo = "foo global";
this.foo ;//"foo global"
var foo = "foo global";
this.foo = "berubah";
foo ;//berubah

Ruang nama global JavaScript juga terdedah kepada objek global yang boleh diakses dalam skop global program, yang berfungsi sebagai nilai awal kata kunci ini. Dalam pelayar web, objek global terikat pada pembolehubah tetingkap global. Ini bermakna anda mempunyai dua cara untuk mencipta pembolehubah global: mengisytiharkannya menggunakan var dalam skop global, atau menambahnya pada objek global. Kelebihan menggunakan perisytiharan var ialah ia dapat menyatakan dengan jelas kesan pembolehubah global dalam skop program.

Memandangkan rujukan kepada pembolehubah global terikat boleh menyebabkan ralat masa jalan, memastikan skop yang jelas dan ringkas akan memudahkan pengguna kod anda memahami pembolehubah global yang diisytiharkan oleh program.

Memandangkan objek global menyediakan mekanisme tindak balas dinamik untuk persekitaran global, anda boleh menggunakannya untuk menanyakan persekitaran yang sedang berjalan dan mengesan ciri yang tersedia pada platform ini.

cth.ES5 memperkenalkan objek JSON global untuk membaca dan menulis data dalam format JSON.

Salin kod Kod adalah seperti berikut:

jika(!this.JSON){
This.JSON = {
           huraikan: ..,
         stringify: ...                         }  
}

Jika anda menyediakan pelaksanaan JSON, anda sudah tentu boleh menggunakan pelaksanaan anda sendiri dengan mudah dan tanpa syarat. Tetapi pelaksanaan terbina dalam yang disediakan oleh persekitaran pengehosan hampir lebih sesuai kerana ia ditulis dalam C ke dalam penyemak imbas. Kerana ia diperiksa dengan teliti untuk ketepatan dan ketekalan terhadap piawaian tertentu, dan secara amnya memberikan prestasi yang lebih baik daripada pelaksanaan pihak ketiga.

Reka bentuk asal kursus struktur data mensimulasikan operasi asas rentetan, yang memerlukan kaedah yang disediakan oleh bahasa itu sendiri tidak boleh digunakan. JavaScript melaksanakan operasi asas pada tatasusunan dengan sangat baik Jika ia hanya untuk keperluan pembelajaran umum, idea untuk mensimulasikan kaedah yang disediakan oleh bahasa itu sendiri adalah baik, tetapi jika anda benar-benar melabur dalam pembangunan, tidak perlu. pertimbangkan untuk menggunakan kaedah terbina dalam JavaScript di tempat pertama.

1.2 Elakkan menggunakan dengan

Pernyataan dengan memberikan sebarang "kemudahan" yang menjadikan aplikasi anda tidak boleh dipercayai dan tidak cekap. Kita perlu memanggil satu siri kaedah pada satu objek dalam urutan. Menggunakan pernyataan dengan boleh mengelakkan rujukan berulang pada objek dengan mudah:

Salin kod Kod adalah seperti berikut:

status fungsi(maklumat){
var widget = Widget baharu();
dengan(widget){
             setLatar Belakang("biru");
            setForeground("putih");
             setText("Status : " maklumat);
tunjukkan();
}  
}

Ia juga menggoda untuk "mengimport" pembolehubah daripada objek modul menggunakan pernyataan dengan.

Salin kod Kod adalah seperti berikut:

fungsi f(x,y){
dengan(Matematik){
           pulangan min(bulat(x),sqrt(y));//Rujukan abstrak
}
}

Malah, JavaScript melayan semua pembolehubah sama. JavaScript mencari pembolehubah bermula dari skop paling dalam dan berfungsi ke luar. Bahasa dengan memperlakukan objek seolah-olah ia mewakili skop pembolehubah, jadi dalam blok dengan, carian pembolehubah bermula dengan mencari sifat nama pembolehubah yang diberikan. Jika harta itu tidak ditemui dalam objek ini, carian diteruskan dalam skop luar. Setiap rujukan kepada pembolehubah luaran dalam blok dengan secara tersirat menganggap bahawa tiada harta dengan nama yang sama dalam objek dengan (dan mana-mana objek prototaipnya). Mencipta atau mengubah suai objek dengan atau objek prototaipnya di tempat lain dalam program tidak semestinya mengikut andaian ini. Sudah tentu, enjin JavaScript tidak akan membaca kod tempatan untuk mengetahui pembolehubah tempatan yang anda gunakan. Skop JavaScript boleh diwakili sebagai struktur data dalaman yang cekap, dan carian berubah boleh menjadi sangat pantas. Walau bagaimanapun, kerana blok kod dengan perlu mencari rantai prototaip objek untuk mencari semua pembolehubah dalam kod dengan, kelajuan lariannya jauh lebih perlahan daripada blok kod biasa.

Sebaliknya dengan bahasa, cara mudah ialah mengikat objek kepada nama pembolehubah pendek.

Salin kod Kod adalah seperti berikut:

status fungsi(maklumat){
var w = Widget baharu();
 
w.setBackground("biru");
          w.setForeground("putih");
              w.setText("Status : " maklumat);
w.show();

}

Dalam kes lain, pendekatan terbaik ialah mengikat pembolehubah setempat secara eksplisit pada harta yang berkaitan.

Salin kod Kod adalah seperti berikut:

fungsi f(x,y){
var min = Math.min,
bulat = Math.round,
          sqrt   = Math.sqrt;                                         Kembalikan min(bulat(x),sqrt(y));
}

1.3 Mahir dalam penutupan

Terdapat satu konsep untuk memahami penutupan:

a) JavaScript membenarkan anda merujuk pembolehubah yang ditakrifkan di luar fungsi semasa.

Salin kod Kod adalah seperti berikut:

function makeSandwich(){
var magicIngredient = "mentega kacang";
fungsi membuat(mengisi){
         kembalikan bahan ajaib " dan " pengisian;
}
Return make("jeli");
}
makeSandwich();// "mentega kacang dan jeli"

b) Walaupun fungsi luaran telah kembali, fungsi semasa masih boleh merujuk pembolehubah yang ditakrifkan dalam fungsi luaran

Salin kod Kod adalah seperti berikut:

function makeSandwich(){
var magicIngredient = "mentega kacang";
fungsi membuat(mengisi){
         kembalikan bahan ajaib " dan " pengisian;
}
Pulangan buat; }
var f = sandwichMaker();
f ("jeli"); f("pisang");                         // "mentega kacang dan pisang"
f("mallow");                          // "mentega kacang dan mallow"



Nilai fungsi javascriptd mengandungi lebih banyak maklumat daripada kod yang diperlukan untuk dilaksanakan apabila ia dipanggil. Tambahan pula, nilai fungsi JavaScript juga menyimpan pembolehubah dalaman yang mungkin mereka rujuk yang ditakrifkan dalam skop lampirannya. Fungsi yang menjejaki pembolehubah dalam skop yang diliputinya dipanggil penutupan.

Fungsi make ialah penutupan, dan kodnya merujuk kepada dua pembolehubah luaran: magicIngredient dan filling. Setiap kali fungsi make dipanggil, kodnya boleh merujuk kedua-dua pembolehubah ini kerana penutupan menyimpan kedua-dua pembolehubah ini.

Fungsi boleh merujuk mana-mana pembolehubah dalam skopnya, termasuk parameter dan pembolehubah fungsi luaran. Kita boleh memanfaatkan ini untuk menulis fungsi pembuat sandwic yang lebih umum.

Salin kod Kod adalah seperti berikut: fungsi membuatSandwich(Bahan ajaib){

fungsi membuat(mengisi){

         kembalikan bahan ajaib " dan " pengisian;
}
Pulangan buat; }
var f = sandwichMaker("ham");
f("keju");                                   // "ham dan keju"
f("mustard");                                      // "ham dan mustard"

Penutupan ialah salah satu ciri JavaScript yang paling elegan dan ekspresif dan merupakan nadi kepada banyak simpulan bahasa.

c) Penutupan boleh mengemas kini nilai pembolehubah luaran. Malah, penutupan menyimpan rujukan kepada pembolehubah luaran, bukan salinan nilainya. Oleh itu, kemas kini boleh dibuat untuk sebarang penutupan yang mempunyai akses kepada pembolehubah luaran ini.

Salin kod Kod adalah seperti berikut:

kotak fungsi(){
var val = tidak ditentukan;
Kembali {
​​​​​ set: function(newval) {val = newval;},
Dapatkan: function (){return val;},
         type: function(){return typeof val;}
};
}
var b = kotak();
b.type(); //undefined
b.set(98.6);
b.get();//98.6
b.type();//nombor

Contoh ini menghasilkan objek yang mengandungi tiga penutupan. Tiga penutupan ini ditetapkan, taip dan dapatkan sifat Mereka semua berkongsi akses kepada pembolehubah val. Penutupan set mengemas kini nilai val. Kemudian panggil dapatkan dan taip untuk melihat hasil yang dikemas kini.

1.4 Memahami penambahbaikan pengisytiharan berubah

Javascript menyokong kaedah skop ini (rujukan kepada pembolehubah foo akan terikat pada skop yang paling hampir dengan pengisytiharan pembolehubah foo), tetapi tidak menyokong skop peringkat blok (skop definisi pembolehubah bukanlah skop lampiran terdekat) pernyataan atau blok kod).

Tidak memahami ciri ini akan membawa kepada beberapa pepijat halus:

Salin kod Kod adalah seperti berikut:

fungsi ialahPemenang(pemain,lain-lain){
var tertinggi = 0;
for(var i = 0,n = others.length ;i            pemain var = yang lain[i];
Jika(pemain.skor > tertinggi){
                                                                                                                                                                                                                                                                     tertinggi = pemain. skor;           }
}
Pulangan pemain.skor > }

1.5 Berhati-hati dengan skop yang janggal bagi ungkapan fungsi bernama

Salin kod Kod adalah seperti berikut:

fungsi double(x){ return x*2; var f = fungsi(x){ kembalikan x*2;

Kod fungsi yang sama juga boleh digunakan sebagai ungkapan, tetapi ia mempunyai makna yang berbeza sama sekali. Perbezaan rasmi antara fungsi tanpa nama dan ungkapan fungsi bernama ialah yang terakhir terikat kepada pembolehubah dengan nama fungsi yang sama seperti pembolehubah tempatan fungsi. Ini boleh digunakan untuk menulis ungkapan fungsi rekursif.

Salin kod

Kod adalah seperti berikut: var f = cari fungsi(pokok,kunci){ //....

Cari kembali(pohon.kiri, kunci) ||                     cari (pokok.kanan, kunci);                                                    }

Perlu diperhatikan bahawa skop carian pembolehubah hanya dalam fungsinya sendiri Tidak seperti pengisytiharan fungsi, ungkapan fungsi yang dinamakan tidak boleh dirujuk secara luaran melalui nama fungsi dalaman mereka.

Salin kod

Kod adalah seperti berikut: find(myTree,"foo");//error : find tidak ditakrifkan; var constructor = function(){ return null; var f= function(){ Kembalikan pembina(); }; f();//{}(dalam persekitaran ES3)

Program ini kelihatan seperti akan menjana null, tetapi ia sebenarnya akan menjana objek baharu.

Oleh kerana skop pembolehubah fungsi yang dinamakan mewarisi Object.prototype.constructor (iaitu, pembina Object), sama seperti pernyataan with, skop ini akan dipengaruhi oleh perubahan dinamik Object.prototype. Cara untuk mengelakkan objek mencemarkan skop ungkapan fungsi dalam sistem anda adalah untuk mengelak daripada menambah sifat pada Object.prototype pada bila-bila masa dan untuk mengelak daripada menggunakan sebarang pembolehubah tempatan dengan nama yang sama dengan sifat Object.prototype standard.

Satu lagi kelemahan dalam enjin JavaScript yang popular ialah promosi pengisytiharan ungkapan fungsi yang dinamakan.

Salin kod Kod adalah seperti berikut:

var f = fungsi g(){return 17;}
g(); //17 (dalam persekitaran tidak selaras)

Sesetengah persekitaran JavaScript malah menganggap kedua-dua fungsi f dan g sebagai objek berbeza, mengakibatkan peruntukan memori yang tidak diperlukan.

1.6 Berhati-hati dengan pengisytiharan skop yang janggal untuk fungsi blok tempatan

Salin kod Kod adalah seperti berikut:

fungsi f() {kembali "global" ; ujian fungsi(x){
Fungsi f(){return "local";}
hasil var = [];
Jika(x){
          result.push(f());
}  
result.push(f());
keputusan keputusan;
}
test(true); //["local","local"]
test(false); //["tempatan"]

Salin kod Kod adalah seperti berikut:

fungsi f() {kembali "global" ; ujian fungsi(x){
hasil var = [];
Jika(x){
           fungsi f(){return "local";}
          result.push(f());
}  
result.push(f());
keputusan keputusan;
}
test(true); //["local","local"]
test(false); //["tempatan"]

Javascript tidak mempunyai skop peringkat blok, jadi skop fungsi dalaman f hendaklah keseluruhan fungsi ujian. Ini benar untuk sesetengah persekitaran JavaScript, tetapi tidak semua persekitaran JavaScript melaporkan fungsi tersebut sebagai ralat dalam mod ketat (program dalam mod ketat dengan pengisytiharan fungsi blok tempatan akan melaporkannya sebagai ralat sintaks -kod mudah alih dan memberikan semantik yang lebih waras dan boleh dipercayai kepada pengisytiharan fungsi blok tempatan untuk versi standard masa hadapan. Untuk situasi ini, anda boleh mempertimbangkan untuk mengisytiharkan pembolehubah tempatan dalam fungsi ujian yang menunjuk kepada fungsi global f.