ในบางครั้งท่านผู้อ่านอาจจะมีปัญหา ในการนำ 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/
(ร้องหายแปป)
ง่ายๆ ไปดูเลยค่ะที่เว็บ
