การใช้ jQuery ร่วมกับ library อื่นๆ ด้วยโหมด no-conflict

ในบางครั้งท่านผู้อ่านอาจจะมีปัญหา ในการนำ jQuery ไปใช้กับ ร่วมสคริปต์อื่นๆ หรือแม้กระทั่งพวก css framework ที่บางตัวจะมีการฝัง script ไว้ข้างในด้วย  ซึ่งอาจทำให้ script ของท่านทำงานผิดเพี้ยนไปจากที่ควรเป็น  วันนี้จะขอแนะนำเทคนิคในการแก้ปัญหาดังกล่าว นั่นก็คือ การปรับ jQuery ไปใช้งานในโหมด no-conflict นั่นเองค่ะ

 

สิ่งที่พึงระวังสำหรับมือใหม่ก็คือ ตัว jquery เองนั้นจะใช้ตัวแปร $  อ้างถึงฟังก์ชั่น jQuery  ดังนั้น ถ้ามีสคริปต์ตัวอื่นที่ใช้ตัวแปร $ นี้เหมือนกันล่ะก็  เกิดปัญหาขึ้นแน่นอนค่ะ

วิธีแก้ปัญหา

 วิธีที่ 1 คือให้สร้างตัวแปรเพิ่มขึ้นมาอีกตัวเพื่อใช้แทนเครื่องหมาย $

ตัวอย่างพร้อมคำอธิบาย

<script src="other_library.js"></script>

<script src="jquery.js"></script>

<script>

//ในที่นี้เราประกาศตัวแปร $j แทนตัว $

var $j = jQuery.noConflict();

$j(document).ready(function(){

$j("div").hide();

});


// ถึงตรงนี้ตัวแปร $ จะหมายถึงตัวแปรจากสคริปต์ other_library.js

// mainDiv ดังนั้นคำสั่งข้างล่างนี้ $('main') จึงหมายถึงการเรียกฟังก์ชั่น

// จาก other_library ไม่ใช่การเรียกฟังก์ชั่นของ jquery

window.onload = function(){

var mainDiv = $('main');

}

</script>

วิธีที่ 2 ในกรณีที่ไม่ต้องการประกาศตัวแปรเพิ่ม ในที่นี้เราสามารถใช้งานตัวแปร $ ได้แต่เป็นการเรียกใช้แบบ locally scope(เรียกใช้เฉพาะในบล็อคของ jQuery เอง)

ตัวอย่างพร้อมคำอธิบาย

<script src="other_library.js"></script>

<script src="jquery.js"></script>

<script>

jQuery.noConflict();

jQuery(document).ready(function($){

// การใช้ตัวแปร $ ในนี้จะหมายถึง jQuery (locally scope)

$("div").hide();

});

// ส่วนการใช้ตัวแปร $ นี้จะหมายถึงการเรียกใช้แบบ global scope

// ซึ่งในที่นี้หมายถึงการเรียกใช้ $ ของ other_library นั่นเอง

window.onload = function(){

var mainDiv = $('main');

}

</script>

การเรียกใช้งานแบบนี้จะทำให้เราไม่สับสนกรณีที่เขียนโค๊ดยาวๆ หรือใช้ไลบราลีหลายตัว

สองวิธีข้างต้น จะสังเกตว่าเรา include สคริปต์ jQuery หลังสคริปต์ตัวอื่น กรณีที่เรามีการ include สคริปต์ jQuery ก่อนสคริปต์ตัวอื่น จะทำอย่างไร?

ในกรณีที่เรา include jQuery มาก่อนและหากสคริปต์ที่ตามหลังใช้ตัวแปร $ จะถือว่าตัวแปร $ นั้นเป็นของสคริปต์ที่ประกาศที่หลัง(override) ซึ่งถ้าเราต้องการใช้งาน jQuery จะทำได้โดยการเรียกใช้ฟังก์ชั่น  jQuery โดยตรง  ดังตัวอย่างข้างล่างนี้

ตัวอย่างพร้อมคำอธิบาย

<script src="jquery.js"></script>

<script src="other_library.js"></script>

<script>

//เรียกใช้ jQuery ฟังก์ชั่นแบบเต็ม

jQuery(document).ready(function(){

jQuery("div").hide();

});

 

// เรียกใช้ตัวแปร $ ที่ระบุไว้ใน other_library.js

window.onload = function() {

var mainDiv = $('main');

};

 

</script>

สำหรับบทความนี้ก็ขอจบเพียงเท่านี้ หวังว่าต่อไปนี้ท่านผู้อ่านที่ใช้งาน jQuery ร่วมกับสคริปต์อื่นๆ คงจะไม่มีปัญหาสคริปต์ทำงานผิดเพี้ยนหรือสคริปต์ทำงานไม่ครบอีกแล้วนะคะ

แหล่งอ้างอิง : http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/