Unobtrusive JavaScript

Unobtrusive JavaScript

Unobtrusive JavaScript ก็คือหลัการ(principle) ช่วยจัดการ code ที่จะทำให้ เอกสาร markup HTML ของเรานั้น ไร้ซึ่ง logic จาก code JavaScript

หลักการนี้ก็คล้ายๆกับการที่เราเอา style ออกจากเอกสาร markup HTML ได้โดยเขียน CSS นั้นเอง

ดูตัวอย่างกันเลยดีกว่า

ตัวอย่าง markup HTML ก่อนใช้ Unobtrusive JavaScript

ข้างล่างนี้เป็น code ใน file เอกสาร markup HTML ของ App น่ารักๆชิ้นหนึ่ง

App น่ารักๆ ทำงานง่ายๆ คือเมื่อผู้ใช้กรอกข้อมูลใน textbox แล้วกดปุ่ม  Alert Si! ก็จะทำให้เกิด event onclick ไปเรียก  function alertSi ที่จะเอาข้อความที่ผู้ใช้กรอกไว้ใน textbox แล้ว alert ขึ้นมาที่ browser ก็แค่นั้น

//file alertSi.html

<!DOCTYPE html>
<html lang=”en”>

<head>

<title>Alert Si!</title>

<script src=”alertSi.js”></script>

</head>
<body onload=”wireUp()”>

<input id=”txt-message” type=”text” />
<input id=”cmd-alert-si” type=”button” value=”Alert Si!” onclick=”alertSi()”/>

</body>

</html>

จุดที่ผมได้ highlight สีแดงไว้นั้นคือ code  javascript ที่รวมอยู่ในเอกสาร markup HTML นั่นเอง ข้างล่างนี้เป็น code javascript ส่วนของ logic งาน init และ alertSi 

//file alertSi.js

(function () {

var txtMessage;
this.wireUp = function () {

txtMessage = document.getElementById(“txt-message”);

};
this.alertSi = function () {

alert(txtMessage.value);

};

})();

เอาละครับเรามาเริ่มใช้หลักการของ Unobtrusive JavaScript กันเลย

ล้าง markup HTML ให้สะอาดด้วย Unobtrusive JavaScript

1. เอา code javascript ที่ผม highlight สีแดง ไว้ออกจาก file alertSi.html ครับ จะได้ เอกสาร markup HTML ใหม่แบบนี้

<html lang=”en”>

<body>

<input id=”txt-message” type=”text” />
<input id=”cmd-alert-si” type=”button” value=”Alert Si!” />

</body>

</html>

2. ขั้นตอนนี้ผมจะต้องทำการผูก event ให้เอกสาร markup HTML  ได้แก่ onload และ onclick ที่ได้ลบออกไปแล้ว และเพื่อทำให้ App น่ารักๆนี้ ทำงานได้เหมือนเดิม ผมจะเขียน code JavaScript เพื่อผูก event onload และ onclick เพิ่มเติมลงไปใน  file alertSi.js แบบนี้

(function () {

var txtMessage;
var cmdAlertSi;

this.wireUp = function () {

txtMessage = document.getElementById(“txt-message”);

cmdAlertSi = document.getElementById(“cmd-alert-si”);

//Binding event กับ command
cmdAlertSi.onclick = function () {

alertSi();

};

};

this.alertSi = function () {

alert(txtMessage.value);

};

})();

window.onload = wireUp;

เพียงเท่านี้เราก็จะได้ เอกสาร markup HTML ที่สะอาดๆ ไร้ซึ่ง logic JavaScript แล้วด้วยการใช้หลักการ Unobtrusive JavaScript ครับ 😉 …

ขอบคุณครับ

–#:P–

Advertisements

#javascript