跨境电商
经验交流分享

再谈Magento中jQuery和Prototype的兼容问题

众所周知,Magento使用Prototype作为前端开发中的核心JS库,可能在Magento开发初期Prototype与jQuery前端JS库的王者之争尚未结束,Magento悲催的没有选择使用面最广的jQuery框架,造成了如今开发成本和学习周期提高的问题。据说Magento 2.0中将会使用jQuery框架,绝对的一个好消息。

关于Magento中jQuery和Prototype库之间的兼容问题,网上有非常多的文章介绍具体该如何避免不同库之间的冲突。之前一篇文章中也提到过解决方法。今天在一个Magento升级项目中,转移一个Ajax搜索插件的时候,遇到了一个问题。Prototype抛出如下异常。

TypeError: element.attachEvent is not a function

这是一个典型的jQuery和Prototype库之间冲突的提示,第一时间,我检查了项目中引用的所有jQuery插件,全部没有问题,都已经通过jQuery.noConflict()完成了命名空间转换。为什么依然提示库冲突呢?找了很长时间的解决办法,依然无效。最终,去到jQuery的官方网站,在noConflict()方法页找到了如下的实例代码。

[html]
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();

// Use jQuery via jQuery(…)
jQuery(document).ready(function(){
jQuery("div").hide();
});

// Use Prototype with $(…), etc.
$(‘someid’).hide();
</script>
</head>
<body></body>
</html>
[/html]

可以看到,首先引入Prototype库,接着引入了jQuery。值得注意的是,在使用任意Prototype的$对象之前,jQuery都事先声明了noConflict()。抱着试试的态度,在header.phtml头部的最顶部添加了该段代码。刷新页面,果然不再提示“TypeError: element.attachEvent is not a function”的错误。

赞(0)
未经允许不得转载:锐想 » 再谈Magento中jQuery和Prototype的兼容问题
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

锐想电商 - 跨境电商经验交流分享

锐想无限