jQuery กับ JavaScript Framework อื่น ๆ ในถ้ำเดียวกัน

ใน jQuery นั้น จะมีการประกาศใช้ Global Object (Object ที่สามารถเข้าถึงได้จากทุก ๆ Function จากทุก ๆ ที่) โดยที่ถ้าเรานำเอา jQuery ไปใช้กับ JavaScript Framework อื่น ๆ หรือ Library อื่น ๆ ที่มีการประกาศ Global Object ชื่อเหมือนกัน อาจจะทำให้เกิดปัญหาได้

และวันนี้เราจะมาคุยเรื่องการเอา jQuery มาใช้ร่วมกับ JavaScript Framework ตัวอื่น ๆ

ยกตัวอย่างที่เห็นได้ชัด สำหรับคนที่เคยใช้ prototype.js มาก่อน คงจะเคยเห็น function $() ที่เอาไว้สำหรับดึง Element ที่มี id ตามที่ระบุ และ jQuery ก็เช่นกัน มีการกำหนดให้ $ เป็นการเรียก jQuery Object อย่างย่อ ๆ ทำให้ถ้าเราประกาศใช้ prototype.js และ jQuery พร้อม ๆ กันอาจจะเกิดปัญหาได้

วิธีการแก้ไขทางหนึ่งคือ การเรียกฟังก์ชั่น jQuery.noConflict() ให้ทำงานหลังจาก Framework ของ jQuery และ Framework ที่เราจะนำมาใช้ร่วมกันโหลดเสร็จแล้ว วิธีนี้จะทำให้ $ ไม่เป็นการเรียก jQuery Object อย่างย่ออีกต่อไป เวลาเราจะเรียกใช้ jQuery Object เราก็จะต้องเรียกเป็น jQuery แล้วตามด้วยเครื่องหมายจุด (.) และตามด้วย Method หรือ Attribute ที่ต้องการเรียกใช้ เช่น

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function()
    {
      jQuery("span").html("Hello world");
    }
  );

  $("myid").hide(); // เรียกใช้ $ ของ prototype.js
</script>

หรือถ้าเรายังต้องการให้เรียก jQuery Object แบบสั้น ๆ อยู่ เราก็ยังสามารถกำหนด jQuery Object ให้กับตัวแปรชื่อสั้น ๆ ได้ เช่น

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $j = jQuery.noConflict();
  $j(document).ready(function()
    {
      $j("span").html("Hello world");
    }
  );

  $("myid").hide(); // เรียกใช้ $ ของ prototype.js
</script>

นอกจากนี้แล้ว เรายังสามารถใช้ $ แทน jQuery Object ได้โดยการรับพารามิเตอร์ jQuery Object เข้ามาด้วยในฟังก์ชั่นครับ เช่น

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function($)
    {
      $("span").html("Hello world");
    }
  );

  $("myid").hide(); // เรียกใช้ $ ของ prototype.js
</script>

แต่วิธีนี้จะทำให้เราไม่สามารถเรียก $ ของ prototype ในนั้นได้ครับ เพราะว่ามันชนกันครับ

Tips!

ถ้าไม่อยากใส่ jQuery.noConflict() ให้ทำการ include jquery.js ก่อน Framework ตัวอื่นครับ

แหล่งอ้างอิง

• http://docs.jquery.com/Using_jQuery_with_Other_Libraries