อย่างที่คุณทราบ JavaScript คือภาษาการเขียนโปรแกรมอันดับหนึ่งของโลก มันเป็นภาษาของเว็บ มันเป็นภาษาของแอพไฮบริดบนมือถือ (เช่น PhoneGap หรือ Appcelerator) มันเป็นภาษาของฝั่งเซิร์ฟเวอร์ (เช่น NodeJS หรือ Wakanda) และยังมีการใช้งานอื่นๆ อีกมากมาย ในเวลาเดียวกัน ภาษานี้ยังเป็นภาษาแห่งการรู้แจ้งสำหรับมือใหม่หลายๆ คน เนื่องจากภาษานี้ไม่เพียงแต่สามารถแสดงข้อความแจ้งเตือนง่ายๆ บนเบราว์เซอร์เท่านั้น แต่ยังสามารถใช้เพื่อควบคุมหุ่นยนต์ได้อีกด้วย (โดยใช้ nodebot หรือ nodruino) นักพัฒนาที่เชี่ยวชาญ JavaScript และสามารถเขียนโค้ดที่มีการจัดระเบียบ ได้มาตรฐาน และมีประสิทธิภาพ กลายเป็นที่ต้องการในตลาดผู้มีความสามารถ
ควรสังเกตว่าตัวอย่างโค้ดในบทความนี้ได้รับการทดสอบบน Google Chrome เวอร์ชันล่าสุด (เวอร์ชัน 30) ซึ่งใช้เอ็นจิ้น V8 JavaScript (V8 3.20.17.15)
1 อย่าลืมใช้คีย์เวิร์ด var เมื่อกำหนดค่าให้กับตัวแปรเป็นครั้งแรก
การกำหนดค่าให้กับตัวแปรที่ไม่ได้กำหนดจะทำให้เกิดการสร้างตัวแปรร่วม หลีกเลี่ยงตัวแปรร่วม
2 ใช้ === แทน ==
ตัวดำเนินการ == (หรือ !=) จะทำการแปลงประเภทโดยอัตโนมัติเมื่อจำเป็น การดำเนินการ === (หรือ !==) ไม่ได้ทำการแปลงใดๆ มันเปรียบเทียบค่าและประเภทและถือว่าเร็วกว่า ==
คัดลอกรหัสรหัสดังต่อไปนี้:
[10] === 10 // เป็นเท็จ
[10] == 10 // เป็นจริง
'10' == 10 // เป็นจริง
'10' === 10 // เป็นเท็จ
[] == 0 // เป็นจริง
[] === 0 // เป็นเท็จ
'' == false // เป็นจริง แต่ true == "a" เป็นเท็จ
'' === เท็จ // เป็นเท็จ
3 ใช้การปิดเพื่อใช้ตัวแปรส่วนตัว
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่น บุคคล(ชื่อ อายุ) {
this.getName = function() { ชื่อที่ส่งคืน };
this.setName = function(newName) { ชื่อ = newName; };
this.getAge = function() { อายุคืน };
this.setAge = ฟังก์ชั่น (newAge) { อายุ = newAge;
//คุณสมบัติไม่ได้เตรียมใช้งานในตัวสร้าง
อาชีพที่แตกต่างกัน;
this.getOccupation = function() { กลับอาชีพ;
this.setOccupation = ฟังก์ชั่น (newOcc) { อาชีพ =
ใหม่Occ; };
-
4 ใช้เครื่องหมายอัฒภาคที่ส่วนท้ายของคำสั่ง
แนวทางปฏิบัติที่ดีคือการใช้เครื่องหมายอัฒภาคที่ส่วนท้ายของคำสั่ง คุณจะไม่ได้รับการเตือนหากคุณลืมเขียน เนื่องจากในกรณีส่วนใหญ่ล่าม JavaScript จะเพิ่มเครื่องหมายอัฒภาคให้กับคุณ
5 สร้างคอนสตรัคเตอร์ของวัตถุ
คัดลอกโค้ด รหัสจะเป็นดังนี้: ฟังก์ชัน Person(firstName, LastName){
this.firstName = ชื่อแรก;
this.lastName = นามสกุล;
-
var Saad = บุคคลใหม่ ("Saad", "Mousliki");
6 ใช้ typeof, instanceof และ Constructor อย่างระมัดระวัง
คัดลอกโค้ดดังนี้: var arr = ["a", "b", "c"];
typeof arr; // กลับ "วัตถุ"
arr อินสแตนซ์ของอาร์เรย์ // จริง
arr.ตัวสร้าง(); //[]
7 สร้างฟังก์ชันการโทรด้วยตนเอง (Self-calling Function)
ซึ่งมักเรียกว่าฟังก์ชันที่ไม่เปิดเผยตัวตนที่เรียกใช้ด้วยตนเองหรือนิพจน์ฟังก์ชันที่เรียกใช้ทันที IIFE นี่คือฟังก์ชันที่จะดำเนินการโดยอัตโนมัติทันทีหลังจากสร้าง โดยทั่วไปจะเป็นดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
(การทำงาน(){
// รหัสส่วนตัวบางส่วนที่จะถูกดำเนินการโดยอัตโนมัติ
-
(ฟังก์ชัน(ก,ข){
ผลลัพธ์ var = a+b;
ส่งคืนผลลัพธ์;
})(10,20)
8- รับไอเท็มสุ่มจากอาเรย์
รหัสคัดลอกมีดังนี้: var items = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];
var RandomItem = items[Math.floor(Math.random() * items.length)];[รหัส]
9 รับตัวเลขสุ่มภายในช่วงที่กำหนด
ข้อมูลโค้ดนี้มีประโยชน์เมื่อคุณต้องการสร้างข้อมูลทดสอบ เช่น ค่าเงินเดือนแบบสุ่มระหว่างค่าต่ำสุดและสูงสุด
[รหัส]var x = Math.floor(Math.random() * (สูงสุด - นาที + 1)) + นาที;
10 สร้างอาร์เรย์ของตัวเลขระหว่าง 0 ถึงค่าสูงสุดที่ตั้งไว้
คัดลอกรหัสดังต่อไปนี้: var numberArray = [], สูงสุด = 100;
สำหรับ( var i=1; numberArray.push(i++) <สูงสุด;); // ตัวเลข = [0,1,2,3 ... 100]
11 สร้างสตริงตัวอักษรและตัวเลขแบบสุ่ม
คัดลอกโค้ด โค้ดจะเป็นดังนี้: function GenerateRandomAlphaNum(len) {
var rdmstring = "";
สำหรับ( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
กลับ rdmString.substr (0, len);
-
12 แย่งชิงอาร์เรย์ของตัวเลข
รหัสการคัดลอกมีดังนี้: หมายเลข var = [5, 458, 120, -215, 228, 400, 122205, -85411];
ตัวเลข = number.sort(function(){ return Math.random() - 0.5});
/* หมายเลขอาเรย์จะเท่ากัน เช่น [120, 5, 228, -215, 400, 458, -85411, 122205] */
13 ฟังก์ชั่นตัดแต่งสตริง
มีฟังก์ชันตัดแต่งแบบคลาสสิกใน Java, C#, PHP และภาษาอื่นๆ อีกมากมาย ซึ่งใช้ในการลบช่องว่างในสตริง แต่ไม่มีอยู่ใน JavaScript ดังนั้นเราจึงจำเป็นต้องเพิ่มฟังก์ชันนี้ลงในวัตถุ String
คัดลอกรหัสรหัสดังต่อไปนี้:
String.prototype.trim = function(){return this.replace(/^/s+|/s+$/g, "");};// ลบช่องว่างนำหน้าและต่อท้ายของสตริง ไม่รวมช่องว่างภายในของ เชือก
14 ผนวกอาร์เรย์เข้ากับอาร์เรย์อื่น
คัดลอกโค้ดดังต่อไปนี้: var array1 = [12, "foo", {name: "Joe"}, -2458];
var array2 = ["โด", 555, 100];
Array.prototype.push.apply (array1, array2);
/* array1 จะเท่ากับ [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */
//ในความเป็นจริง concat สามารถเชื่อมต่อสองอาร์เรย์ได้โดยตรง แต่ค่าที่ส่งคืนคืออาร์เรย์ใหม่ นี่คือการเปลี่ยนแปลงโดยตรงไปยัง array1
15 แปลงวัตถุอาร์กิวเมนต์เป็นอาร์เรย์
คัดลอกโค้ดดังต่อไปนี้: var argArray = Array.prototype.slice.call(arguments);
วัตถุอาร์กิวเมนต์เป็นวัตถุที่มีลักษณะคล้ายอาร์เรย์ แต่ไม่ใช่อาร์เรย์จริง
16 ตรวจสอบว่าพารามิเตอร์เป็นตัวเลข (ตัวเลข)
คัดลอกโค้ด รหัสจะเป็นดังนี้: ฟังก์ชัน isNumber(n){
กลับ !isNaN(parseFloat(n)) && isFinite(n);
-
17 ตรวจสอบว่าพารามิเตอร์เป็นอาร์เรย์หรือไม่
คัดลอกโค้ดดังต่อไปนี้: function isArray(obj){
กลับ Object.prototype.toString.call (obj) === '[อาร์เรย์วัตถุ]' ;
-
หมายเหตุ: ถ้าเมธอด toString() ถูกแทนที่ คุณจะไม่ได้ผลลัพธ์ที่ต้องการโดยใช้เทคนิคนี้ หรือคุณสามารถใช้:
คัดลอกรหัสรหัสดังต่อไปนี้:
Array.isArray(obj); // นี่คือวิธีการอาร์เรย์ใหม่
หากคุณไม่ได้ใช้หลายเฟรม คุณยังสามารถใช้เมธอด instanceof ได้ แต่ถ้าคุณมีหลายบริบท คุณจะได้ผลลัพธ์ที่ผิด
คัดลอกโค้ดดังนี้: 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]
// instanceof ทำงานไม่ถูกต้อง myArray สูญเสียตัวสร้างของเขา
// Constructor ไม่ถูกแชร์ระหว่างเฟรม
arr อินสแตนซ์ของอาร์เรย์; // เท็จ
18 รับค่าสูงสุดหรือต่ำสุดในอาร์เรย์ตัวเลข
รหัสการคัดลอกมีดังนี้: หมายเลข var = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(คณิตศาสตร์, ตัวเลข);
var minInNumbers = Math.min.apply (คณิตศาสตร์, ตัวเลข);
//หมายเหตุผู้แปล: เมธอด function.prototype.apply ใช้เพื่อส่งพารามิเตอร์ที่นี่
19 ล้างอาร์เรย์
คัดลอกโค้ดดังนี้: var myArray = [12, 222, 1000];
myArray.length = 0; // myArray จะเท่ากับ []
20 อย่าใช้การลบเพื่อลบรายการออกจากอาร์เรย์
ใช้การประกบกันแทนการลบเพื่อลบรายการออกจากอาร์เรย์ การใช้การลบจะแทนที่รายการต้นฉบับด้วย undefinition เท่านั้น และไม่ได้ลบออกจากอาร์เรย์จริงๆ
อย่าใช้สิ่งนี้:
คัดลอกโค้ดดังนี้: var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
items.length; // กลับ 11
ลบรายการ[3]; // คืนค่าจริง
items.length; // กลับ 11
/* รายการจะเท่ากับ [12, 548, "a", unknown × 1, 5478, "foo", 8852, undefinition × 1, "Doe", 2154, 119] */
ให้ใช้:
คัดลอกโค้ดดังนี้: var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
items.length; // กลับ 11
รายการประกบ(3,1);
items.length; // กลับ 10
/* รายการจะเท่ากับ [12, 548, "a", 5478, "foo", 8852, unknown × 1, "Doe", 2154, 119] */
วิธีการลบควรจะใช้ในการลบคุณสมบัติของวัตถุ
21 ใช้ความยาวเพื่อตัดทอนอาร์เรย์
เช่นเดียวกับวิธีการล้างอาเรย์ด้านบน เราใช้คุณสมบัติ length เพื่อตัดทอนอาเรย์
คัดลอกโค้ดดังนี้: var myArray = [12, 222, 1000, 124, 98, 10];
myArray.length = 4; // myArray จะเท่ากับ [12, 222, 1,000, 124]
นอกจากนี้ หากคุณตั้งค่าความยาวของอาร์เรย์ให้มีค่ามากกว่าค่าปัจจุบัน ความยาวของอาร์เรย์จะเปลี่ยนไปและรายการที่ไม่ได้กำหนดใหม่จะถูกเพิ่มเพื่อชดเชย ความยาวของอาร์เรย์ไม่ใช่คุณสมบัติแบบอ่านอย่างเดียว
คัดลอกโค้ดดังนี้: myArray.length = 10; // ความยาวอาร์เรย์ใหม่คือ 10
myArray[myArray.length - 1]; // ไม่ได้กำหนด
22 ใช้ตรรกะและ/หรือเพื่อตัดสินแบบมีเงื่อนไข
คัดลอกรหัสรหัสดังต่อไปนี้:
วาร์ฟู = 10;
foo == 10 && doSomething(); // เทียบเท่ากับ if (foo == 10) doSomething();
foo == 5 ||. doSomething(); // เทียบเท่ากับ if (foo != 5) doSomething();
ตรรกะ AND ยังสามารถใช้เพื่อตั้งค่าเริ่มต้นสำหรับพารามิเตอร์ฟังก์ชันได้
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่น doSomething (arg1) {
Arg1 = arg1 ||. 10; // หากไม่ได้ตั้งค่า arg1 Arg1 จะถูกตั้งค่าเป็น 10 โดยค่าเริ่มต้น
-
23 ใช้เมธอด map() เพื่อวนซ้ำรายการในอาร์เรย์
คัดลอกโค้ด โค้ดจะเป็นดังนี้: var squares = [1,2,3,4].map(function (val) {
ส่งคืนวาล * วาล;
-
// สี่เหลี่ยมจะเท่ากับ [1, 4, 9, 16]
24 ปัดเศษตัวเลขให้เป็นทศนิยม N ตำแหน่ง
คัดลอกโค้ดดังนี้: var num =2.443242342;
num = num.toFixed(4); // num จะเท่ากับ 2.4432
25 ปัญหาจุดลอยตัว
คัดลอกโค้ดดังนี้ 0.1 + 0.2 === 0.3 // เป็นเท็จ
9007199254740992 + 1 // เท่ากับ 9007199254740992
9007199254740992 + 2 // เท่ากับ 9007199254740994
ทำไมสิ่งนี้ถึงเกิดขึ้น? 0.1+0.2 เท่ากับ 0.30000000000000004 คุณจำเป็นต้องทราบว่าหมายเลข JavaScript ทั้งหมดแสดงภายในเป็นตัวเลขทศนิยมในไบนารี่ 64 บิต ซึ่งเป็นไปตามมาตรฐาน IEEE 754 สำหรับการแนะนำเพิ่มเติม คุณสามารถอ่านโพสต์ในบล็อกนี้ คุณสามารถแก้ไขปัญหานี้ได้โดยใช้เมธอด toFixed() และ toPrecision()
26 เมื่อใช้ for-in เพื่อสำรวจคุณสมบัติภายในของวัตถุ ให้ใส่ใจกับการตรวจสอบคุณสมบัติ
ข้อมูลโค้ดต่อไปนี้จะหลีกเลี่ยงการเข้าถึงคุณสมบัติต้นแบบเมื่อวนซ้ำคุณสมบัติของวัตถุ:
คัดลอกรหัสรหัสดังต่อไปนี้:
สำหรับ (ชื่อ var ในวัตถุ) {
ถ้า (object.hasOwnProperty (ชื่อ)) {
//ทำอะไรสักอย่างด้วยชื่อ
-
-
ตัวดำเนินการลูกน้ำ 27 ตัว
คัดลอกรหัสรหัสดังต่อไปนี้:
วาร์ ก = 0;
วาร์ ข = ( a++, 99 );
console.log(a); // a จะเท่ากับ 1
console.log(b); // b เท่ากับ 99
28 ตัวแปรแคชที่ต้องมีการคำนวณหรือการสืบค้น
สำหรับตัวเลือก jQuery เราควรแคชองค์ประกอบ DOM เหล่านี้ดีกว่า
คัดลอกโค้ดดังนี้: var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');
29 ตรวจสอบพารามิเตอร์ก่อนที่จะเรียก isFinite()
คัดลอกโค้ดดังนี้ isFinite(0/0); // false
isFinite("foo"); // false
isFinite("10"); // จริง
isFinite(10); // จริง
isFinite(ไม่ได้กำหนด); // false
isFinite(); // เท็จ
isFinite(null); // จริง !!!
30 หลีกเลี่ยงดัชนีเชิงลบในอาร์เรย์
คัดลอกรหัสดังต่อไปนี้: var numberArray = [1,2,3,4,5];
var from = numberArray.indexOf("foo" ; // from เท่ากับ -1
numberArray.splice(จาก,2); // จะกลับมา [5]
ตรวจสอบให้แน่ใจว่าพารามิเตอร์เมื่อเรียก indexOf ไม่เป็นค่าลบ
31 การทำให้เป็นอนุกรมและดีซีเรียลไลซ์ตาม JSON (การทำให้เป็นอนุกรมและดีซีเรียลไลซ์)
คัดลอกโค้ดดังนี้: var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify (บุคคล);
/* stringFromPerson เท่ากับ "{"name": Saad","age":26,"department":{"ID":15,"name": "R&D"}} " */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString เท่ากับวัตถุบุคคล */
32 หลีกเลี่ยงการใช้ eval() และตัวสร้างฟังก์ชัน
การใช้ตัวสร้าง eval และตัวสร้างฟังก์ชันเป็นการดำเนินการที่มีราคาแพงมาก เนื่องจากแต่ละครั้งจะเรียกกลไกสคริปต์เพื่อแปลงซอร์สโค้ดให้เป็นโค้ดที่ปฏิบัติการได้
คัดลอกโค้ดดังต่อไปนี้: var func1 = new Function(functionCode);
var func2 = eval(functionCode);
33 หลีกเลี่ยงการใช้ with()
การใช้ with() แทรกตัวแปรโกลบอล ดังนั้นตัวแปรที่มีชื่อเดียวกันจะถูกเขียนทับค่าและทำให้เกิดปัญหาที่ไม่จำเป็น
34 หลีกเลี่ยงการใช้ for-in เพื่อวนซ้ำอาร์เรย์
หลีกเลี่ยงการใช้วิธีการเช่นนี้:
คัดลอกรหัสดังต่อไปนี้: var sum = 0;
สำหรับ (var i ใน arrayNumbers) {
ผลรวม += arrayNumbers [i];
-
วิธีที่ดีกว่าคือ:
คัดลอกรหัสดังต่อไปนี้: var sum = 0;
สำหรับ (var i = 0, len = arrayNumbers.length; i < len; i++) {
ผลรวม += arrayNumbers[i];
-
ประโยชน์เพิ่มเติมคือค่าของตัวแปรทั้งสอง i และ len จะถูกดำเนินการเพียงครั้งเดียว ซึ่งมีประสิทธิภาพมากกว่าวิธีต่อไปนี้:
คัดลอกโค้ดดังต่อไปนี้: for (var i = 0; i < arrayNumbers.length; i++)
ทำไม เนื่องจากมีการคำนวณ arrayNumbers.length ทุกครั้งที่วนซ้ำ
35 ส่งผ่านฟังก์ชันแทนสตริงเมื่อเรียกใช้ setTimeout() และ setInterval()
หากคุณส่งสตริงไปที่ setTimeout() หรือ setInterval() สตริงจะถูกแยกวิเคราะห์ราวกับว่าใช้ eval ซึ่งใช้เวลานานมาก
อย่าใช้:
คัดลอกรหัสรหัสดังต่อไปนี้:
setInterval('doSomethingPeriodically()', 1,000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000)
ให้ใช้:
คัดลอกรหัสรหัสดังต่อไปนี้:
setInterval (ทำบางสิ่งบางอย่างเป็นระยะ, 1,000);
setTimeOut (ทำบางอย่างหลังจากห้าวินาที, 5,000);
36 ใช้คำสั่ง switch/case แทนคำสั่ง if/else แบบยาว
เมื่อตัดสินมากกว่า 2 สถานการณ์ การใช้ switch/case จะมีประสิทธิภาพและสวยงามกว่า (จัดระเบียบโค้ดได้ง่ายกว่า) แต่อย่าใช้สวิตช์/เคสเมื่อมีสถานการณ์ที่ต้องตัดสินมากกว่า 10 สถานการณ์
37 ใช้สวิตช์/เคสเมื่อตัดสินช่วงตัวเลข
ในสถานการณ์ต่อไปนี้ สมเหตุสมผลที่จะใช้สวิตช์/เคสเพื่อกำหนดช่วงค่า:
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่น getCategory (อายุ) {
หมวดหมู่ var = "";
สวิตช์ (จริง) {
กรณีคือNaN(อายุ):
Category = "ไม่ใช่อายุ";
หยุดพัก;
กรณี (อายุ >= 50):
หมวดหมู่ = "เก่า";
หยุดพัก;
กรณี (อายุ <= 20):
หมวดหมู่ = "เด็ก";
หยุดพัก;
ค่าเริ่มต้น:
หมวดหมู่ = "หนุ่ม";
หยุดพัก;
-
ประเภทการส่งคืน;
-
getCategory(5); // จะกลับมา "Baby"
//โดยทั่วไป ในการตัดสินช่วงตัวเลข ควรใช้ if/else มากกว่า switch/case เหมาะสำหรับการตัดสินค่าบางอย่างมากกว่า
38 ระบุวัตถุต้นแบบสำหรับวัตถุที่สร้างขึ้น
เป็นไปได้ที่จะเขียนฟังก์ชันที่สร้างวัตถุด้วยพารามิเตอร์ที่ระบุเป็นแบบต้นแบบ:
คัดลอกโค้ดดังต่อไปนี้: function clone(object) {
ฟังก์ชั่น OneShotConstructor(){};
OneShotConstructor.prototype=วัตถุ;
ส่งคืน OneShotConstructor ใหม่ ();
-
โคลน (อาร์เรย์). ต้นแบบ;
39 ฟังก์ชั่นการหลบหนี HTML
คัดลอกโค้ดดังต่อไปนี้: ฟังก์ชัน EscapeHTML(ข้อความ) {
การเปลี่ยน var= {"<": "<", ">": ">","&": "&", "/"": """};
กลับ text.replace(/[<>&"]/g, ฟังก์ชั่น (ตัวอักษร) {
ส่งคืนการทดแทน [ตัวละคร];
-
-
40 หลีกเลี่ยงการใช้ try-catch-finally ภายในลูป
ณ รันไทม์ แต่ละครั้งที่มีการดำเนินการ catch clause ออบเจ็กต์ข้อยกเว้นที่จับได้จะถูกกำหนดให้กับตัวแปร และในโครงสร้าง try-catch-finally ตัวแปรนี้จะถูกสร้างขึ้นทุกครั้ง
หลีกเลี่ยงการเขียนเช่นนี้:
คัดลอกโค้ดดังต่อไปนี้: var object = ['foo', 'bar'], i;
สำหรับ (i = 0, len = object.length; i <len; i++) {
พยายาม {
// ทำบางสิ่งที่มีข้อยกเว้น
-
จับ (จ) {
//จัดการข้อยกเว้น
-
-
ให้ใช้:
คัดลอกโค้ดดังต่อไปนี้: var object = ['foo', 'bar'], i;
พยายาม {
สำหรับ (i = 0, len = object.length; i <len; i++) {
// ทำบางสิ่งที่มีข้อยกเว้น
-
-
จับ (จ) {
//จัดการข้อยกเว้น
-
41 ตั้งค่าการหมดเวลาสำหรับ XMLHttpRequests
หลังจากที่คำขอ XHR ใช้เวลานาน (เช่น เนื่องจากปัญหาเครือข่าย) คุณอาจต้องยกเลิกการร้องขอ จากนั้นจึงใช้ setTimeout() กับการเรียก XHR ได้
คัดลอกรหัสดังต่อไปนี้: var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = ฟังก์ชั่น () {
ถ้า (this.readyState == 4) {
clearTimeout (หมดเวลา);
// ทำบางอย่างกับข้อมูลการตอบกลับ
-
-
var หมดเวลา = setTimeout( ฟังก์ชั่น () {
xhr.abort(); // โทรกลับผิดพลาด
}, 60*1000 /* หมดเวลาหลังจากหนึ่งนาที */ );
xhr.open('GET', url, true);
xhr.ส่ง();
นอกจากนี้ โดยทั่วไปคุณควรหลีกเลี่ยงการร้องขอ Ajax แบบซิงโครนัสโดยสิ้นเชิง
42 การจัดการการหมดเวลาของ WebSocket
โดยปกติ หลังจากสร้างการเชื่อมต่อ WebSocket เซิร์ฟเวอร์จะหมดเวลาการเชื่อมต่อของคุณหลังจาก 30 วินาทีหากคุณไม่ได้ใช้งาน ไฟร์วอลล์จะตัดการเชื่อมต่อหลังจากไม่มีการใช้งานช่วงระยะเวลาหนึ่ง
เพื่อป้องกันปัญหาการหมดเวลา คุณอาจต้องส่งข้อความเปล่าไปยังเซิร์ฟเวอร์เป็นระยะๆ ในการดำเนินการนี้ คุณสามารถเพิ่มฟังก์ชันสองฟังก์ชันต่อไปนี้ลงในโค้ดของคุณได้: ฟังก์ชันหนึ่งเพื่อรักษาการเชื่อมต่อ และอีกหนึ่งฟังก์ชันเพื่อยกเลิกการระงับการเชื่อมต่อ ด้วยเทคนิคนี้ คุณสามารถควบคุมปัญหาการหมดเวลาได้
ใช้รหัสจับเวลา:
คัดลอกรหัสดังต่อไปนี้: var timerID = 0;
ฟังก์ชั่น KeepAlive() {
ระยะหมดเวลา = 15,000;
ถ้า (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
-
timerId = setTimeout (keepAlive, หมดเวลา);
-
ฟังก์ชั่น cancelKeepAlive() {
ถ้า (รหัสจับเวลา) {
ยกเลิกหมดเวลา (รหัสจับเวลา);
-
-
ควรเพิ่มเมธอด KeepAlive() ที่ส่วนท้ายของเมธอด onOpen() ของการเชื่อมต่อ webSocket และเพิ่ม cancelKeepAlive() ที่ส่วนท้ายของเมธอด onClose()
43 โปรดทราบว่าตัวดำเนินการดั้งเดิมจะมีประสิทธิภาพมากกว่าการเรียกใช้ฟังก์ชันเสมอ ใช้ vanillaJS
ตัวอย่างเช่น อย่าใช้:
คัดลอกโค้ด โค้ดจะเป็นดังนี้: var min = Math.min(a,b);
อ.กด(v);
ให้ใช้:
คัดลอกโค้ดดังนี้ var min = a < b ? ab;
A[ความยาว A] = v;
44 อย่าลืมใช้เครื่องมือจัดระเบียบโค้ดเมื่อเขียนโค้ด ใช้ JSLint และเครื่องมือบีบอัดโค้ด (การลดขนาด) (เช่น JSMin) ก่อนออนไลน์ "เครื่องมือประหยัดเวลา: เครื่องมือตกแต่งโค้ดและการจัดรูปแบบ"
45 JavaScript นั้นยอดเยี่ยมมาก
สรุป
ฉันรู้ว่ายังมีเคล็ดลับ เทคนิค และแนวทางปฏิบัติที่ดีที่สุดอื่นๆ อีกมากมาย ดังนั้นหากคุณมีอะไรเพิ่มเติมที่ต้องการเพิ่ม แสดงความคิดเห็น หรือแก้ไขสิ่งที่ฉันได้แชร์ โปรดแจ้งให้เราทราบในความคิดเห็น