magento 中常见的js冲突

Magento内置使用的Prototype库，和jQuery的使用有一定的冲突，解决起来还是相当简单的。在网上有很多文章介绍这个东西，详细到说明了jquery和prototype库的引入前后顺序，最开始看的时候让我头晕而且很难记得，每次写的时候还要翻下文章。当然不是说那些文章不够好，只是个人感觉有点啰嗦~~

这里记录下在Magento中使用jquery的具体方式。这种方式对于jquery与prototype库的先后引入关系没有限制。如下代码所示。可以看到，首先引入jquery库，接着引入需要的Jquery插件，然后就可以手写代码咯。首先调用jQuery.noConflict()更改jquery的命名空间，这样就可以使用jQuery替代$了。

<script src=”http://www.template.dev/js/jquery/jquery-1.7.1.min.js” type=”text/javascript”></script>
<script src=”http://www.template.dev/js/jquery/nivo/jquery.nivo.slider.pack.js” type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[
jQuery.noConflict();
jQuery(window).load(function() {
jQuery(‘#slider’).nivoSlider();
});
//]]>
</script>

这里使用jQuery作为$的替代，稍微有点长了，如果使用$a,$b,$c的形式是不是更好呢？还有一种方式就是可以指定jQuery库的标识，和上面差不多，如下代码。

<script src=”http://www.template.dev/js/jquery/jquery-1.7.1.min.js” type=”text/javascript”></script>
<script src=”http://www.template.dev/js/jquery/nivo/jquery.nivo.slider.pack.js” type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[
$j = jQuery.noConflict();
$j(window).load(function() {
$j(‘#slider’).nivoSlider();
});
//]]>
</script>

最后，一个好消息是，Magento2的计划中，jquery已经成为了标准库，放弃了prototype~~