Mootools – @FordAntiTrust

ถ้าใครใช้ jQuery, Prototype และ Mootools นั้นจะรู้ว่ามี namespace ตัวนึงคือ $ ซึ่งจะเป็นตัวอ้างอิงเสมือนเวลาอ้างอิงการทำงานใด ๆ ใน ถ้าอ่านในเว็บ jQuery ก็จะบอกไว้เลยว่า

By default, jQuery uses “$” as a shortcut for “jQuery”

ปัญหาก็คือ …..

มันดันใช้วิธีที่ไปเหมือนกับ Prototype, MooTools และ YUI นั้นดิ

ทำให้เวลาเอามาใช้ร่วมกันมันจะตีกันสนุกสนานเลยหล่ะ วิธีแก้ไขก็คือให้ jQuery หลีกทางให้กับตัวอื่น ๆ ซะ

จาก

<script type="text/javascript" src="prototype.js" />
<script type="text/javascript" src="mootools.js" />
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
// ต้องใช้ jQuery
$(document).ready(function(){ $("div").hide(); });
// ต้องใช้ Prototype/Mootools
$('someid').style.display = 'none';
</script>

ถ้าเป็นแบบนี้มันจะใช้งานไม่ได้ ครับ จะเกิดการตีกันระหว่างทั้ง 3 ตัวครับ เราต้องเปลี่ยนมาเป็น

<script type="text/javascript" src="prototype.js" />
<script type="text/javascript" src="mootools.js" />
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
// เพิ่มบรรทัดนี้ลงไป
jQuery.noConflict();
// แล้วใช้ jQuery จาก $ เป็น jQuery(...) แทน
jQuery(document).ready(function(){jQuery("div").hide();});
// ส่วน Prototype/Mootools ใช้ $(...) ได้ตามปกติ
$('someid').style.display = 'none';
</script>

แนวทางการแก้ปัญหาก็ ok นะ แต่ …..

ใน Drupal หล่ะ ถ้าเราเอามาใช้เนี่ยทำไง

โดยตัว Drupal 5.2 แล้วมี jQuery 1.0.1 ใส่มาด้วย แต่ปัญหาคือมันดันไม่มี noConflict มาให้ ตอนนั่งแก้ปัญหา นั่งงงไปพักนึง เลยไปนั่งไล่แกะ จนรู้ว่าต้องมา upgrade เป็น jQuery 1.2 เสียก่อน เลยจัดการเอามาใส่ทับลงไปใน /misc แทนตัวเก่า

แล้วทำการแก้ไขไฟล์ต่าง ๆ ที่ Drupal นั้นใช้ jQuery ซึ่งได้แก่

misc/autocomplete.js
misc/collapse.js
misc/drupal.js
misc/progress.js
misc/tableselect.js
misc/textarea.js
misc/upload.js
misc/update.js
misc/farbtastic/farbtastic.js

โดยทำการ replace ‘$(‘ เป็น ‘jQuery(‘ แล้วทำการใส่ JavaScript ตัวนึงลงไปคือ

jQuery.noConflict();

โดยเอาไปใส่ไว้ด้านล่าง Durpal $scripts ที่ Theme ของเรา ตามด้วยการใส่ mootools.js ไปก่อนหน้า Drupal $head

เฮ้อ ….. เล่นซะมึนไปครึ่งวัน

การมีมาตรฐานและเอามาใช้ร่วมกันนี่ยากเหมือนกันนะเนี่ย ยิ่ง JavaScript ที่มี Prototype หลายค่ายเหลือเกินยิ่งแล้วใหญ่ ความเข้ากันได้ยิ่งยากเข้าไปอีก แถมแต่ละตัวก็ ok ในเรื่องการใช้งาน แต่ว่าบางตัวมีข้อดีแต่ต่างกัน บางตัวใช้งานบางอย่างได้ดี และง่าย บางตัวทำแบบอีกตัวก็ได้ แต่ง่ายกว่ามาก เลยต้องหาจุดลงตัวของมันไป ทำให้ต้องมาปวดหัวกันไป แต่ก็นะเอามาใส่ลงไปในงานของเรา เพื่องานที่ออกมาดีที่สุด และง่ายที่สุดด้วย (ก็มีให้ใช้นิ)

อ้างอิงจาก

mootools Offline Document (.CHM)

เมื่อ jQuery อยู่ร่วมโลกกับ Prototype/Mootools ไม่ได้ (โดยเฉพาะใน Drupal)