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

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

jQueryLogo

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

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

ลองดูโค๊ดตัวอย่างพร้อมคำอธิบายครับ

<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>

วิธีที่สอง ในกรณีที่ไม่ต้องการประกาศตัวแปรเพิ่มครับ ในที่นี้เราสามารถใช้งานตัวแปร $ ได้แต่เป็นการเรียกใช้แบบ 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 ตรงๆ ไปเลยครับ ดังตัวอย่างข้างล่างนี้

</pre>
<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>
<pre>

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

Credit : http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Advertisements

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

Up ↑

%d bloggers like this: