ป้ายกำกับ: OOP

Object Oriented Programming with JavaScript I

sitdhใส่ความเห็น

ช่วงนี้ได้ใช้ JavaScript แบบจริงๆ จังๆ กับเขาบ้าง เพราะต้องเอาไปต่อกับ REST ในหน้าเพจที่ทำแต่เห็นว่าบางอย่างมันต้องเขียนโค้ดแบบเดิมซ้ำไปซ้ำมาอยู่เรื่อยก็เลยเกิดความคิดไปหาวิธีใช้งานแบบ OOP สำหรับ JavaScript ซะหน่อยดีกว่า เคยอ่านผ่านๆ ตาหลายรอบแล้วเหมือนกันแต่ไม่ค่อยได้เอาจริงเอาจังกับมันซะเท่าไหร่ครับ ตอนนี้งาน JavaScript เข้าจังๆ ก็เลยมีเหตุจำเป็นให้ต้องลอง นอกจากนั้นก็เป็นข้อดีหลายอย่างของการเขียน OO ที่ผมชอบก็คือ Reusable, Inheritance และ Encapsulation แต่ต้องบอกก่อนว่าการเขียนโปรแกรมแบบนี้ไม่ใช่เรื่องแปลกอะไร เพราะมันก็ทำได้ตั้งนานแล้วครับ blog ตอนนี้ก็คงเป็นการเอามะพร้าวห้าวมาขายสวนอีกตามเคยครับ :)

ความจริง เท่าที่ได้อ่านวิธีการเขียนก็คงไม่ใช้ OOP เหมือน Java หรือ PHP เท่าไหร่ เพราะใช้วิธีการแปลกๆ ของ JavaScript มาช่วยแต่ถึงอย่างไรวิธีการนี้ก็ใช้แนวคิดของ OO มาช่วยพัฒนาเลยหยวนๆ ถือว่าเป็น OOP แล้วกันครับ :)

hello, world

...
<script type="text/javascript" charset="utf-8">
	function HelloWorld(msg) {
		var defaultMessage = "HELLO, WORLD!!!";
		this.message = msg || "สวัสดีชาวโลก";
		
		alert('Let me say');

		this.goodie = function(m) {
			m = m || "?";
			alert(m + " " + good());
		}
		
		var good = function(m) {
			return "good day";
		}
	}
	
	function sayHi(m) {
		var hi = new HelloWorld();
		hi.goodie(m);
		hi.goodie(hi.message);
		hi.goodie(hi.defaultMessage);
		hi.good("Goodbye");
	}
</script>
	
</head>

<body id="index" onload="sayHi('สวัสดี')">
...

ด้านบนก็เป็นตัวงอย่างของการเขียน JavaScript แบบ OO ครับ ในที่นี้ “HelloWorld” จะทำหน้าที่เป็นคลาสจะ ให้ function sayHi เรียกใช้งาน โดยที่แนบตัวแปร message ไปให้ด้วย ใน script นี้จะมี alert message ให้เราเห็นทั้งหมด 4 หน้าต่างครับ ตามนี้เลยครับ แต่ก่อนเริ่มอาจจะต้องอธิบายกันนิดหน่อยเพื่อว่าจะมีคนไม่รู้ เครื่องหมาย “||” นี้ผมไม่รู้ชื่อวิธีเรียกมันอย่างเป็นทางการนะครับ แต่วิธีการทำงานก็คือโปรแกรมจะเปรียบเทียบว่าตัวแปรที่อยู่ด้านซ้ายเป็นค่าว่าง (null) หรือเปล่าถ้าใช้จะนำค่าที่อยู่ด้านซ้ายมาให้โดยอัตโนมัติ

Constructor

Constructor
Constructor

เป็น Constructor ของคลาส HelloWorld คิดง่ายๆ ก็คือ ทุกอย่างที่ไม่ได้ครอบไว้ด้วย function จะเป็น Constructor ของคลาสทั้งหมด

Assign

Assign
Assign

ตัวอย่างของการส่งค่าให้กับฟังก์ชั่น goodie ที่เป็น method ที่อยู่ภายในคลาส HelloWorld

Public Access

Public Variable
Public Variable

ตัวอย่างการเข้าถึง Public variable ของคลาส “HelloWorld” สังเกตุได้ที่ตัวแปร “message” ที่อยู่ภายในคลาส “HelloWorld” ด้านบนที่นำหน้าด้วย this มีค่าเหมือนกับการใส่ “public”

Private Access

Private Access
Private Access

เป็นการเข้าถึงตัวแปรที่เป็นระบุไว้ว่าเป็น private ผลที่ได้คือไม่สามารถเข้าถึงได้เห็นได้จากค่าทีไ่ด้ออกมาจะเป็น ‘?’

ส่วนหน้าต่างสุดท้ายจะไม่ปรากฎให้เห็นเนื่องจากฟังก์ชั่น ‘good’ ถูกระบุให้มีชนิดการเข้าถึงแบบ private

นอกจากนี้ยังเขียนให้คลาสสามารถสืบทอดคุณสมบัติกันได้เหมือนภาษา OOP ทั่วไป แต่ยังไงก็ขอติดไว้ตอนหน้าแล้วกันครับ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>hello, world</title>
<script type="text/javascript" charset="utf-8">
	function HelloWorld(msg) {
		var defaultMessage = "HELLO, WORLD!!!";
		this.message = msg || "สวัสดีชาวโลก";
		
		alert('let me say');
		
		this.goodie = function(m) {
			m = m || "?";
			alert(m + " " + good());
		}
		
		var good = function(m) {
			return "good day";
		}
	}
	
	function sayHi(m) {
		var hi = new HelloWorld();
		hi.goodie(m);
		hi.goodie(hi.message);
		hi.goodie(hi.defaultMessage);
		hi.good("Sayonara");
	}
</script>
	
</head>

<body id="index" onload ="sayHi('สวัสดี')">
	
</body>
</html>