Rumah >hujung hadapan web >tutorial js >45 langkah berjaga-jaga pengaturcaraan JavaScript dan kemahiran_kemahiran javascript

45 langkah berjaga-jaga pengaturcaraan JavaScript dan kemahiran_kemahiran javascript

WBOYasal: 2016-05-16 16:14:241069semak imbas

JavaScript ialah bahasa pengaturcaraan paling popular di dunia dan boleh digunakan untuk pembangunan web, pembangunan aplikasi mudah alih (PhoneGap, Appcelerator), pembangunan sisi pelayan (Node.js dan Wakanda), dll. JavaScript juga merupakan bahasa pertama bagi ramai orang baru untuk memasuki dunia pengaturcaraan. Ia boleh digunakan untuk memaparkan kotak gesaan ringkas dalam penyemak imbas, atau untuk mengawal robot melalui nodebot atau nodruino. Pembangun yang boleh menulis kod JavaScript dengan struktur yang jelas dan prestasi tinggi kini merupakan orang yang paling dicari dalam pasaran pengambilan.

Dalam artikel ini, saya akan berkongsi beberapa petua, rahsia dan amalan terbaik JavaScript yang, dengan beberapa pengecualian, digunakan pada kedua-dua enjin JavaScript penyemak imbas dan jurubahasa JavaScript bahagian pelayan.

Kod sampel dalam artikel ini lulus ujian pada versi terkini Google Chrome 30 (V8 3.20.17.15).

1 Pastikan anda menggunakan kata kunci var apabila memberikan nilai kepada pembolehubah untuk kali pertama

Jika pembolehubah ditetapkan secara langsung tanpa diisytiharkan, ia akan digunakan sebagai pembolehubah global baharu secara lalai Cuba elakkan daripada menggunakan pembolehubah global.

2. Gunakan === bukannya ==

Pengendali

== dan != secara automatik menukar jenis data jika perlu. Tetapi === dan !== jangan, mereka membandingkan nilai dan jenis data pada masa yang sama, yang juga menjadikannya lebih pantas daripada == dan !=.

Salin kod Kod adalah seperti berikut:

[10] === 10 // adalah palsu

[10] == 10 // adalah benar

'10' == 10 // adalah benar

'10' === 10 // adalah palsu

[] == 0 // adalah benar

[] === 0 // adalah palsu

'' == palsu // adalah benar tetapi benar == "a" adalah palsu

'' === palsu // adalah palsu

3 Keputusan logik bagi rentetan terkurang, nol, 0, palsu, NaN dan kosong adalah palsu
4. Gunakan koma bertitik di hujung baris

Secara praktikal, lebih baik menggunakan koma bertitik Tidak kira jika anda terlupa untuk menulisnya Dalam kebanyakan kes, penterjemah JavaScript akan menambahkannya secara automatik. Untuk maklumat lanjut tentang sebab koma bertitik digunakan, sila rujuk artikel The Truth About Semicolons dalam JavaScript.

5. Gunakan pembina objek

Salin kod Kod adalah seperti berikut:

fungsi Orang(Nama depan,Nama akhir){

This.firstName = firstName;

This.lastName = lastName;

}

var Saad = Orang baharu("Saad", "Mousliki");

6. Gunakan typeof, instanceof dan constructor dengan berhati-hati
typeof: JavaScript unary operator, digunakan untuk mengembalikan jenis asal pembolehubah dalam bentuk rentetan yang typeof null juga akan mengembalikan objek (array Array, time Date, dll.) juga akan kembali objek
contructor: sifat prototaip dalaman, boleh ditindih melalui kod
instanceof: Operator JavaScript, akan mencari dalam pembina dalam rantaian prototaip, mengembalikan benar jika dijumpai, jika tidak, kembali palsu

Salin kod Kod adalah seperti berikut:

var arr = ["a", "b", "c"];

typeof arr; // Kembalikan "objek" 

arr instanceof Array // benar

arr.constructor(); //[]

7. Gunakan fungsi panggilan kendiri
Fungsi ini dilaksanakan secara automatik terus selepas penciptaan, biasanya dipanggil fungsi tanpa nama yang dipanggil sendiri (Fungsi Tanpa Nama Yang Diminta Sendiri) atau dipanggil secara langsung ungkapan fungsi (Ungkapan Fungsi Yang Dikenakan Serta-merta). Formatnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

(fungsi(){

//Kod yang diletakkan di sini akan dilaksanakan secara automatik

})(); 

(fungsi(a,b){

hasil var = a b;

Pulangan hasil;

})(10,20)

8 Dapatkan ahli secara rawak daripada tatasusunan

Salin kod Kod adalah seperti berikut:

var item = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];

var randomItem = item[Math.floor(Math.random() * items.length)];

9 Dapatkan nombor rawak dalam julat yang ditentukan
Fungsi ini amat berguna apabila menjana data palsu untuk ujian, seperti gaji dalam julat tertentu.

Salin kod Kod adalah seperti berikut:

var x = Math.floor(Math.random() * (maks - min 1)) min;

10 Hasilkan tatasusunan digital daripada 0 kepada nilai yang ditentukan

Salin kod Kod adalah seperti berikut:

var numbersArray = [] , maks = 100;

for( var i=1; numbersArray.push(i ) < max;); // nombor = [1,2,3 ... 100]

11. Hasilkan rentetan abjad angka rawak

Salin kod Kod adalah seperti berikut:

function generateRandomAlphaNum(len) {

var rdmString = "";

for( ; rdmString.length < len; rdmString = Math.random().toString(36).substr(2));

Kembalikan rdmString.substr(0, len);

12. Mengganggu susunan susunan nombor

Salin kod Kod adalah seperti berikut:

nombor var = [5, 458, 120, -215, 228, 400, 122205, -85411];

nombor = nombor.sort(fungsi(){ return Math.random() - 0.5});

/* Tatasusunan nombor akan kelihatan seperti [120, 5, 228, -215, 400, 458, -85411, 122205] */

Fungsi pengisihan tatasusunan terbina dalam JavaScript digunakan di sini Cara yang lebih baik ialah menggunakan kod khusus untuk melaksanakannya (seperti algoritma Fisher-Yates Anda boleh melihat perbincangan ini di StackOverFlow).

13. Keluarkan ruang daripada rentetan

Java, C#, PHP dan bahasa lain semuanya melaksanakan fungsi penyingkiran ruang rentetan khas, tetapi tiada fungsi sedemikian dalam JavaScript Anda boleh menggunakan kod berikut untuk berfungsi fungsi pemangkasan untuk objek String:

Salin kod Kod adalah seperti berikut:

String.prototype.trim = function(){return this.replace(/^s |s $/g, "");};

Enjin JavaScript baharu sudah mempunyai pelaksanaan asli trim().

14. Tambahkan antara tatasusunan

Salin kod Kod adalah seperti berikut:

var array1 = [12 , "foo" , {name "Joe"} , -2458];

var array2 = ["Doe" , 555 , 100];

Array.prototype.push.apply(array1, array2);

/* Nilai tatasusunan1 ialah [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */

15. Tukar objek kepada tatasusunan

Salin kod Kod adalah seperti berikut:

var argArray = Array.prototype.slice.call(arguments);

16. Sahkan sama ada ia adalah nombor

Salin kod Kod adalah seperti berikut:

fungsi ialahNombor(n){

Kembalikan !isNaN(parseFloat(n)) && isFinite(n);

}

17. Sahkan sama ada ia adalah tatasusunan

Salin kod Kod adalah seperti berikut:

fungsi ialahArray(obj){

Kembalikan Object.prototype.toString.call(obj) === '[Array objek]' ;

}

Tetapi jika kaedah toString() ditindih, ia tidak akan berfungsi. Anda juga boleh menggunakan kaedah berikut:

Salin kod Kod adalah seperti berikut:

Array.isArray(obj); // kaedah Array baharu

Jika bingkai tidak digunakan dalam penyemak imbas, instanceof juga boleh digunakan, tetapi jika konteksnya terlalu rumit, ralat mungkin berlaku.

Salin kod Kod adalah seperti berikut:

var myFrame = document.createElement('iframe');

document.body.appendChild(myFrame);

var myArray = window.frames[window.frames.length-1].Array;

var arr = myArray(a,b,10); // [a,b,10] 

// Pembina myArray telah hilang, dan hasil instanceof akan menjadi tidak normal 

// Pembina tidak boleh dikongsi merentasi bingkai 

arr instanceof Array; // false

18. Dapatkan nilai maksimum dan minimum dalam tatasusunan

Salin kod Kod adalah seperti berikut:

nombor var = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Math, nombor);
var minInNumbers = Math.min.apply(Math, numbers);

19. Kosongkan tatasusunan

Salin kod Kod adalah seperti berikut:

var myArray = [12, 222, 1000]; myArray.length = 0; // myArray akan sama dengan [].

20. Jangan padam atau keluarkan elemen terus daripada tatasusunan

Jika anda terus menggunakan padam pada elemen tatasusunan, ia tidak dipadamkan, tetapi elemen itu ditetapkan kepada tidak ditentukan. Pemadaman elemen tatasusunan harus menggunakan splice.
Jangan:

Salin kod Kod adalah seperti berikut: var item = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // kembalikan 11

padamkan item[3]; // kembalikan benar

items.length; // kembalikan 11 

/* Hasil item ialah [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */

Sebaliknya:

Salin kod

Kod adalah seperti berikut: var item = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // kembalikan 11 item.splice(3,1) ; items.length; // kembalikan 10

/* item hasil ialah [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119]

delete boleh digunakan apabila memadam sifat objek. 

21 Gunakan atribut panjang untuk memotong tatasusunan

Dalam contoh sebelumnya, atribut panjang digunakan untuk mengosongkan tatasusunan Ia juga boleh digunakan untuk memotong tatasusunan:

Salin kod

Kod adalah seperti berikut: var myArray = [12, 222, 1000, 124, 98, 10]; myArray.length = 4; // myArray akan sama dengan [12, 222, 1000, 124]. Pada masa yang sama, jika atribut panjang dijadikan lebih besar, nilai panjang tatasusunan akan meningkat, dan tidak ditentukan akan digunakan sebagai elemen baharu untuk diisi. panjang ialah sifat boleh tulis.

Salin kod

Kod adalah seperti berikut:

myArray.length = 10; // panjang tatasusunan baharu ialah 10 myArray[myArray.length - 1]; // undefined

22 Gunakan logik DAN atau dalam keadaan

Salin kod
Kod adalah seperti berikut:

var foo = 10; foo == 10 && doSomething(); // adalah perkara yang sama seperti (foo == 10) doSomething(); foo == 5 ||. doSomething(); // adalah perkara yang sama seperti (foo != 5) doSomething(); Logik ATAU juga boleh digunakan untuk menetapkan nilai lalai, seperti nilai lalai parameter fungsi.

Salin kod

Kod adalah seperti berikut:

fungsi doSomething(arg1){ 

arg1 = arg1 ||. 10; // arg1 akan mempunyai 10 sebagai nilai lalai jika ia belum ditetapkan

}

23 Jadikan gelung kaedah fungsi map() pada data

Salin kod Kod adalah seperti berikut:

petak var = [1,2,3,4].peta(fungsi (val) { 

Kembalikan val * val;
}); 

// petak sama dengan [1, 4, 9, 16]

24 Kekalkan bilangan tempat perpuluhan yang ditetapkan

Salin kod Kod adalah seperti berikut:

var num =2.443242342;

num = num.toFixed(4); // num akan sama dengan 2.4432

Ambil perhatian bahawa toFixec() mengembalikan rentetan, bukan nombor.

25. Masalah pengiraan titik terapung

Salin kod Kod adalah seperti berikut:

0.1 0.2 === 0.3 // adalah palsu 

9007199254740992 1 // bersamaan dengan 9007199254740992

9007199254740992 2 // bersamaan dengan 9007199254740994

kenapa? Kerana 0.1 0.2 bersamaan dengan 0.30000000000000004. Nombor dalam JavaScript dibina mengikut piawaian IEEE 754 dan secara dalaman diwakili sebagai perpuluhan titik terapung 64-bit Untuk butiran, lihat cara nombor dalam JavaScript dikodkan.

Masalah ini boleh diselesaikan dengan menggunakan toFixed() dan toPrecision().

26 Periksa sifat objek melalui gelung untuk masuk
Penggunaan berikut boleh menghalang kemasukan sifat prototaip objek semasa lelaran.

Salin kod Kod adalah seperti berikut:

untuk (nama var dalam objek) { 

Jika (object.hasOwnProperty(name)) { 

// buat sesuatu dengan nama

}  

}

27. Pengendali koma

Salin kod Kod adalah seperti berikut:

var a = 0;
var b = ( a , 99 );
console.log(a); // a akan sama dengan 1 

console.log(b); // b bersamaan dengan 99

28. Simpan pembolehubah yang digunakan untuk pengiraan dan pertanyaan buat sementara waktu

Dalam pemilih jQuery, keseluruhan elemen DOM boleh disimpan buat sementara waktu.

Salin kod Kod adalah seperti berikut: var navright = document.querySelector('#right'); var navleft = document.querySelector('#left'); var navup = document.querySelector('#up'); var navdown = document.querySelector('#down');

29 Periksa parameter yang dihantar ke isFinite() terlebih dahulu

Salin kod

Kod adalah seperti berikut: isFinite(0/0); // false isFinite("foo"); // false isFinite("10"); // benar isFinite(10); // benar

isFinite(undefined); // palsu

isFinite(); // false

isFinite(null); // benar, perhatian khusus harus diberikan kepada 
 ini

30. Elakkan menggunakan nombor negatif sebagai indeks dalam tatasusunan

Salin kod

Kod adalah seperti berikut: var numbersArray = [1,2,3,4,5]; var from = numbersArray.indexOf("foo") ; // from adalah sama dengan -1 numbersArray.splice(dari,2); // akan kembali [5]

Ambil perhatian bahawa parameter indeks yang dihantar ke splice tidak boleh menjadi nombor negatif Jika ia adalah nombor negatif, elemen akan dipadamkan dari hujung tatasusunan. 

31 Gunakan JSON untuk mensiri dan menyahsiri

Salin kod

Kod adalah seperti berikut:

var person = {name :'Saad', umur : 26, jabatan : {ID : 15, name : "R&D"} };

var stringFromPerson = JSON.stringify(person);

/* Hasil stringFromPerson ialah "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */

var personFromString = JSON.parse(stringFromPerson);

/* Nilai personFromString adalah sama dengan objek orang */

32. Jangan gunakan eval() atau pembina fungsi
eval() dan pembina fungsi (Function consturctor) agak mahal Setiap kali ia dipanggil, enjin JavaScript mesti menukar kod sumber kepada kod boleh laku.

Salin kod Kod adalah seperti berikut:

var func1 = Fungsi baharu(functionCode);

var func2 = eval(functionCode);

33. Elakkan menggunakan dengan()
Menggunakan dengan() boleh menambah pembolehubah pada skop global Oleh itu, jika terdapat pembolehubah lain dengan nama yang sama, ia akan mudah dikelirukan dan nilai akan ditimpa.

34. Jangan gunakan untuk masuk pada tatasusunan
Elakkan:

Salin kod Kod adalah seperti berikut:

var sum = 0;
untuk (var i dalam arrayNumbers) { 

jumlah = arrayNombor[i]; 

}

Sebaliknya:

Salin kod Kod adalah seperti berikut:

var sum = 0;
untuk (var i = 0, len = arrayNumbers.length; i < len; i ) { 

jumlah = arrayNombor[i]; 

}

Faedah lain ialah dua pembolehubah i dan len berada dalam pernyataan pertama bagi gelung for, dan ia hanya akan dimulakan sekali, iaitu lebih pantas daripada cara penulisan berikut:

Salin kod Kod adalah seperti berikut:

untuk (var i = 0; i < arrayNumbers.length; i )

35 Gunakan fungsi dan bukannya rentetan apabila menghantar ke setInterval() dan setTimeout()
Jika anda menghantar rentetan ke setTimeout() dan setInterval(), ia akan ditukar dengan cara yang serupa dengan eval, yang pasti akan menjadi lebih perlahan, jadi jangan gunakan:

Salin kod Kod adalah seperti berikut:

setInterval('doSomethingPeriodically()', 1000); setTimeout('doSomethingAfterFiveSeconds()', 5000);

Sebaliknya gunakan:

Salin kod Kod adalah seperti berikut: setInterval(doSomethingPeriodically, 1000); setTimeout(doSomethingAfterFiveSeconds, 5000);

36 Gunakan suis/sarung dan bukannya timbunan besar if/else

Apabila menilai terdapat lebih daripada dua cawangan, menggunakan suis/case adalah lebih pantas, lebih elegan, dan lebih kondusif untuk penyusunan kod Sudah tentu, jika terdapat lebih daripada 10 cawangan, jangan gunakan suis/case.

37. Gunakan selang nombor dalam suis/kes

Malah, keadaan kes dalam suis/kes juga boleh ditulis seperti ini:

Salin kod

Kod adalah seperti berikut:

fungsi getCategory(umur) { 

var category = ""; 

suis (benar) { 

kes ialahNaN(umur): 

            kategori = "bukan umur";
rehat; 

kes (umur >= 50): 

            kategori = "Lama";
rehat; 

kes (umur <= 20): 

            kategori = "Bayi";
rehat; 

                lalai:                                                              
            kategori = "Muda";
rehat; 

}; 

Kembalikan kategori;
} 

getCategory(5); // akan mengembalikan "Bayi"

38. Gunakan objek sebagai prototaip objek

Dengan cara ini, anda boleh memberikan objek sebagai parameter untuk mencipta objek baharu berdasarkan prototaip ini:

Salin kod

Kod adalah seperti berikut: klon fungsi(objek) { Fungsi OneShotConstructor(){}; OneShotConstructor.prototype = objek Kembalikan OneShotConstructor(); }

klon(Array).prototaip; // []

39. Fungsi penukaran medan HTML

Salin kod
Kod adalah seperti berikut:

function escapeHTML(text) { var replacements= {"<": "<", ">": ">","&": "&", """: """}; Kembalikan text.replace(/[<>&"]/g, fungsi(karakter) { kembalikan penggantian [karakter]; }); }

40. Jangan gunakan try-catch-finally dalam gelung

Bahagian tangkapan try-catch-finally akan memberikan pengecualian kepada pembolehubah semasa pelaksanaan, dan pembolehubah ini akan dibina menjadi pembolehubah baharu dalam skop masa jalan. 

Jangan:

Salin kod

Kod adalah seperti berikut:

objek var = ['foo', 'bar'], i; untuk (i = 0, len = objek.panjang; i Cuba { // lakukan sesuatu yang memberikan pengecualian } tangkap (e) { // mengendalikan pengecualian }

}

Sebaliknya: 

Salin kod

 Kod adalah seperti berikut:

objek var = ['foo', 'bar'], i; cuba {

untuk (i = 0, len = objek.panjang; i // lakukan sesuatu yang memberikan pengecualian } } tangkap (e) { // mengendalikan pengecualian }

41 Beri perhatian kepada menetapkan tamat masa apabila menggunakan XMLHttpRequests

Apabila XMLHttpRequests dilaksanakan, apabila tiada respons untuk masa yang lama (seperti masalah rangkaian, dll.), sambungan harus ditamatkan kerja ini boleh diselesaikan melalui setTimeout(): 

Salin kod

Kod adalah seperti berikut:

var xhr = XMLHttpRequest baharu ( 

xhr.onreadystatechange = fungsi () { 

Jika (this.readyState == 4) { 

                                                                                    ,,,,,,,,,,,,,,,,,,,
// lakukan sesuatu dengan data respons 

}  

} 

var tamat masa = setMasa tamat( fungsi () { 

xhr.abort(); // panggilan balik ralat 

}, 60*1000 /* tamat masa selepas seminit */ );
xhr.open('DAPAT', url, benar);
xhr.send();

Pada masa yang sama, perlu diingatkan bahawa jangan memulakan berbilang permintaan XMLHttpRequests pada masa yang sama.

42. Mengendalikan tamat masa WebSocket

Biasanya, selepas sambungan WebSocket dibuat, jika tiada aktiviti dalam masa 30 saat, pelayan akan tamat masa sambungan Tembok api juga boleh tamat masa sambungan jika tiada aktiviti dalam tempoh unit.

Untuk mengelakkan perkara ini berlaku, anda boleh menghantar mesej kosong kepada pelayan pada selang masa tertentu. Keperluan ini boleh dicapai melalui dua fungsi berikut, satu digunakan untuk memastikan sambungan aktif, dan satu lagi digunakan secara khusus untuk menamatkan keadaan ini.

Salin kod Kod adalah seperti berikut: var timerID = 0; fungsi keepAlive() {

tamat masa var = 15000

Jika (webSocket.readyState == webSocket.OPEN) { 

webSocket.send(''); 

}  

timerId = setTimeout(keepAlive, timeout);
} 

fungsi cancelKeepAlive() { 

Jika (Id pemasa) { 

                                              cancelTimeout(timerId);
}  

}

Fungsi keepAlive() boleh diletakkan pada penghujung kaedah onOpen() sambungan WebSocket, dan cancelKeepAlive() diletakkan pada penghujung kaedah onClose(). 

43 Sila ambil perhatian bahawa pengendali primitif lebih pantas daripada panggilan fungsi, gunakan VanillaJS

Sebagai contoh, biasanya jangan lakukan ini:

Salin kod

Kod adalah seperti berikut: var min = Math.min(a,b); A.tolak(v); Anda boleh menggantikannya dengan:

Salin kod

Kod adalah seperti berikut:

var min = a < a : b; A[A.length] = v; 44 Perhatikan struktur kod semasa membangunkan, dan semak dan mampatkan kod JavaScript sebelum pergi ke dalam talian

Anda boleh menggunakan alatan seperti JSLint atau JSMin untuk memeriksa dan mengecilkan kod anda. 

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Penjelasan terperinci tentang corak fungsi dalam kemahiran JavaScript_javascriptArtikel seterusnya：Penjelasan terperinci tentang corak fungsi dalam kemahiran JavaScript_javascript

Artikel berkaitan

Lihat lagi