JavaScript แนวทางที่ดีที่สุด

หลีกเลี่ยงตัวแปรทั่วไปและnew、=====、eval()

หลีกเลี่ยงตัวแปรทั่วไป

ใช้ตัวแปรทั่วไปให้น้อยที่สุด

มีการรวมทั้งทุกชนิดของข้อมูล ออบเจกต์และฟังก์ชัน

ตัวแปรทั่วไปและฟังก์ชันสามารถถูกทำรุกโดยสคริปต์อื่น

ใช้ตัวแปรท้องถิ่นแทน และเรียนรู้วิธีการใช้โคลบ。

ประกาศตัวแปรท้องถิ่นเสมอ

ตัวแปรที่ใช้ในฟังก์ชันควรประกาศเป็นตัวแปรท้องถิ่นท้องถิ่นตัวแปร

ตัวแปรท้องถิ่นจำเป็นผ่าน var ใช้คำเรียกในการประกาศ ไม่เช่นนั้นนั้นจะกลายเป็นตัวแปรทั่วไป

โมดูลกำหนดความหมายที่ไม่ได้ประกาศไม่อนุญาต

ประกาศด้านบน

ประสบการณ์ที่ดีในการเขียนรหัสคือประกาศทุกอย่างที่ด้านบนของแต่ละบล็อคหรือฟังก์ชัน

ข้อดีของการกระทำนี้คือ:

  • ได้รับรหัสที่เรียบร้อยขึ้น
  • ให้ที่ดีสำหรับหาตัวแปรท้องถิ่น
  • ง่ายต่อการป้องกันตัวแปรทั่วไปที่ไม่จำเป็น
  • ลดโอกาสการประกาศใหม่ที่ไม่จำเป็น
// ประกาศด้านบน
var firstName, lastName, price, discount, fullPrice;
// ใช้ในภายหลัง
firstName = "Bill";
lastName = "Gates";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;

ยังสามารถใช้สำหรับตัวแปรวนรอบ:

// ประกาศด้านบน
var i;
// ใช้ในภายหลัง
for (i = 0; i < 5; i++)  {

โดยมาตรฐาน JavaScript จะย้ายการประกาศทุกอย่างขึ้นไปด้านบน (JavaScript hoisting)

เริ่มต้นตัวแปร

มันเป็นข้อดีที่คุณจะกำหนดตัวแปรในขณะที่คุณประกาศตัวแปร

ข้อดีของการกระทำนี้คือ:

  • รหัสที่เรียบร้อย
  • กำหนดตัวแปรในตำแหน่งที่แยกต่างกัน
  • หลีกเลี่ยงค่าที่ไม่มีความหมาย
// ประกาศและกำหนดตัวแปรในต้น
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

การกำหนดตัวแปรให้เริ่มต้นเป็นทางเลือกที่ช่วยเราในการตระหนักถึงการใช้งานคาดหวังและประเภทข้อมูลที่คาดหวัง

โปรดไม่ใช้กำหนดตัวเลข ตัวอักษร หรือตัวเลขปริมาณเป็นวัตถุ

โปรดมองให้ตัวเลข ตัวอักษร หรือตัวเลขปริมาณเป็นข้อมูลปริมาณ ไม่ใช่วัตถุ

ถ้ากำหนดประเภทข้อมูลเป็นวัตถุ อาจทำให้การทำงานเร่งเร้นและมีผลข้างเคียงที่ไม่พึงประสงค์:

ตัวอย่าง

var x = "Bill";             
var y = new String("Bill");
(x === y) // ผลลัพธ์คือ false ตรงที่ x คือตัวอักษร และ y คือวัตถุ

ลองด้วยตัวเอง

หรือแม้กระทั่งแย่กว่านั้น:

ตัวอย่าง

var x = new String("Bill");             
var y = new String("Bill");
(x == y) // ผลลัพธ์คือ false ตรงที่คุณไม่สามารถเปรียบเทียบวัตถุได้

ลองด้วยตัวเอง

โปรดไม่ใช้ new Object()

  • โปรดใช้ {} แทน new Object()
  • โปรดใช้ "" แทน new String()
  • โปรดใช้ 0 แทน new Number()
  • โปรดใช้ false แทน new Boolean()
  • โปรดใช้ [] แทน new Array()
  • โปรดใช้ /()/ แทน new RegExp()
  • โปรดใช้ function (){} แทน new Function()

ตัวอย่าง

var x1 = {};           // ก่อตั้งวัตถุใหม่
var x2 = "";           // ก่อตั้งตัวเลขแอคตูเริ่มใหม่
var x3 = 0;            // ก่อตั้งตัวเลขจำนวนใหม่
var x4 = false;        // ก่อตั้งตัวเลขปริมาณเปลี่ยนใหม่
var x5 = [];           // ก่อตั้งวัตถุแอร์เรย์ใหม่
var x6 = /()/;         // ก่อตั้งแอ็คทูเริ่มใหม่
var x7 = function(){}; // ก่อตั้งวัตถุฟังก์ชันใหม่

ลองด้วยตัวเอง

ตระหนักถึงการเปลี่ยนแปลงประเภทข้อมูลอัตโนมัติ

โปรดตระหนักว่าตัวเลขอาจถูกเปลี่ยนเป็นตัวอักษรโดยอุบัติเหตุหรือ NaN（Not a Number）。

JavaScript มีชนิดที่เปิดด่วน。ตัวแปรสามารถบรรจุข้อมูลประเภทต่าง ๆ และตัวแปรสามารถเปลี่ยนประเภทข้อมูลของตัวเองได้:

ตัวอย่าง

var x = "Hello";     // typeof x คือ string
x = 5;               // แปลง typeof x ให้เป็น numeric

ลองด้วยตัวเอง

ถ้าทำการคำนวณทาง matematic JavaScript สามารถแปลงตัวเลขเป็นข้อความ

ตัวอย่าง

var x = 5 + 7;       // x.valueOf() คือ 12, typeof x คือ numeric
var x = 5 + "7";     // x.valueOf() คือ 57, typeof x คือ string
var x = "5" + 7;     // x.valueOf() คือ 57, typeof x คือ string
var x = 5 - 7;       // x.valueOf() คือ -2, typeof x คือ numeric
var x = 5 - "7";     // x.valueOf() คือ -2, typeof x คือ numeric
var x = "5" - 7;     // x.valueOf() คือ -2, typeof x คือ numeric
var x = 5 - "x";     // x.valueOf() คือ NaN, typeof x คือ numeric

ลองด้วยตัวเอง

การหักข้อความจากข้อความ จะไม่ทำให้เกิดข้อผิดพลาดแต่จะคืน NaN（Not a Number）：

ตัวอย่าง

"Hello" - "Dolly"    // คืน NaN

ลองด้วยตัวเอง

ใช้ === สำหรับเปรียบเทียบ

== ตัวอักษรเปรียบเทียบจะทำการแปลงประเภทก่อนที่จะเปรียบเทียบ (เพื่อที่จะตรงกับประเภท)

===== ตัวอักษรที่ใช้เปรียบเทียบจะบังคับทำการเปรียบเทียบค่าและประเภทของตัวแปร

ตัวอย่าง

0 == "";        // true
1 == "1";       // true
1 == true;      // true
0 === "";       // false
1 === "1";      // false
1 === true;     // false

ลองด้วยตัวเอง

ใช้ Parameter Defaults

ถ้าขาดตัวแปรในการเรียกฟังก์ชัน ค่าของตัวแปรที่ขาดจะถูกตั้งค่าเป็น undefined。

undefined ค่าจะทำลายรหัสที่คุณเขียน。มีข้อดีในการกำหนดค่าเริ่มต้นสำหรับตัวแปร

ตัวอย่าง

function myFunction(x, y) {
    if (y ยังไม่ถูกกำหนด) {
        y = 0;
    }
}

ลองด้วยตัวเอง

โปรดใช้พารามิเตอร์ฟังก์ชันอ่านบทดังกล่าวเพื่อได้รับรายละเอียดเกี่ยวกับพารามิเตอร์ฟังก์ชัน

default ที่จะสิ้นสุด switch

ใช้ default ใช้เพื่อที่จะสิ้นสุด switch ประโยค ถึงแม้ว่าคุณจะคิดว่าไม่จำเป็นต้องมีมันเช่นนั้น

ตัวอย่าง

switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
         break;
    case 2:
        day = "Tuesday";
         break;
    case 3:
        day = "Wednesday";
         break;
    case 4:
        day = "Thursday";
         break;
    case 5:
        day = "Friday";
         break;
    case 6:
        day = "Saturday";
         break;
    default:
        day = "Unknown";
}

ลองด้วยตัวเอง

หลีกเลี่ยงการใช้ eval()

eval() ฟังก์ชันใช้ในการใช้ตัวอักษรเป็นรหัส ในหลายๆ ครั้งมันไม่จำเป็นต้องใช้

เพราะมันอนุญาตให้รันรหัสอย่างไม่จำกัด มันยังหมายความว่ามันมีปัญหาความปลอดภัยด้วย