HTML5: HTML5 : javascript enum

ถ้าพูดถึง enum หลายท่านอาจจะรู้จักดีอยู่แล้วในภาษาอื่นครับ

enum WeekDay = {MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY, SUNDAY};

ผมยกตัวอย่างเป็นของ java ครับ

Enum หน้าที่หลักคือเป็น user define type คือ type ที่สร้างขึ้นมาเองเพื่อใช้ในการเปรียบเทียบต่างๆ ครับ

WeekDay today = WeekDay.MONDAY;

If(today == WeekDay.MONDAY){
System.out.println(“Today is Monday”);
}else{
   System.out.println(“Today is Other day”);
}

ก็จะแสดงว่า Today is Monday นั่นเองครับ

-----------------------------------------------------------------------------------
Java Script Enum

โอเค หวังว่าคงจะคุ้นเคยกันมาบ้างแล้วนะครับ แล้วใน Javascript เราหละเขียนยังไงมาดูครับ

var SizeEnum = {
SMALL: 1,
MEDIUM: 2,
LARGE: 3,
properties: {
    1: {name: "small", value: 1, code: "S"},
    2: {name: "medium", value: 2, code: "M"},
    3: {name: "large", value: 3, code: "L"}
}
};

ในการสร้าง enum แม้ว่าค่าที่เราเอามากำหนดให้จะสามารถใส่เป็น object ได้แต่ก็จะมีปัญหาในการ serialize แล้วทำให้ค่าเปลี่ยนไปได้ จึงควรที่จะใช้เป็น primitive type เช่นตัวเลข ครับ ส่วนใครที่อยากจะได้คำอธิบายเพิ่มเติมของค่านั้นๆ ก็สามารถใช้ properties มาช่วยในจุดนี้ได้ตามตัวอย่างข้างบนครับ

var mySize = SizeEnum.MEDIUM; // กำหนดให้ mySize เป็น SizeEnum.MEDIUM
var myCode = SizeEnum.properties[mySize].code; // ดึงค่า code ของ properties ค่า 2 ได้ myCode == "M"

ต่อไป มาพบกับพระเอกครับ หากไม่มีตัวนี้ enum เราจะไม่สมบูรณ์ นั่นก็คือการทำให้ enum เป็นค่าคงที่ ไม่สามารถแก้ไขได้นั่นเองครับ โอ้ของแบบนี้มีด้วยหรอ ต้องมีสิซาร่า

Object.freeze ใช้เพื่อทำให้ object ใดๆ ไม่สามารถเพิ่ม ลบ หรือแก้ไข property ได้ มันสุดยอดมาก

if (Object.freeze)
Object.freeze(SizeEnum);

ใช้ง่ายๆ ครับ if(Object.freeze) เพื่อตรวจสอบว่า browser เราสามารถใช้ได้รึเปล่า หากใช้ได้ก็ freeze เลย หาก freeze แล้วเมื่อเราแก้ไขค่าจะพบว่าไม่มีฟ้อง error ใดๆ ทั้งสิ้นแต่ค่าจะไม่สามารถแก้ไขได้ครับ

ตัวอย่างโค้ดไปลองรันเล่นดูครับ
// enum_test.php
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>Javascript Enumeration</title>

</head>
<body>
<script type="text/javascript">
    var SizeEnum = {
SMALL: 1,
MEDIUM: 2,
LARGE: 3,
properties: {
    1: {name: "small", value: 1, code: "S"},
    2: {name: "medium", value: 2, code: "M"},
    3: {name: "large", value: 3, code: "L"}
}
};

// freeze data
if (Object.freeze)
Object.freeze(SizeEnum);

var mySize = SizeEnum.MEDIUM;
var myCode = SizeEnum.properties[mySize].code;

document.write("var mySize = SizeEnum.MEDIUM;");
document.write("<br/>var myCode = SizeEnum.properties[mySize].code; ");

document.write("<br/><br/>");

document.write("mySize = " + mySize);
document.write("<br/>myCode = " + myCode);

document.write("<br/>mySize == SizeEnum.MEDIUM -> " + (mySize == SizeEnum.MEDIUM));
document.write("<br/>mySize == SizeEnum.SMALL -> " + (mySize == SizeEnum.SMALL));

</script>

</body>
</html>

อ้างอิงเนื้อหา http://stijndewitt.wordpress.com/2014/01/26/enums-in-javascript/
อ้างอิงเนื้อหา http://kangax.github.io/compat-table/es5/

HTML5

วันจันทร์ที่ 12 พฤษภาคม พ.ศ. 2557

HTML5 : javascript enum

ไม่มีความคิดเห็น:

แสดงความคิดเห็น