重构ECShop中的Javascript（一）

ECShop一直有一个很大的问题，就是其自带的JS脚本和jQuery为主的不少使用非常多的JS框架冲突，这个冲突导致了我们在制作ECShop模板的时候，很多优秀的界面效果无法实现。可以说是ECShop最让人诟病的地方。


在网上搜索了几天后，尝试了网上各种不同的解决方案后，发现部分解决方案只是针对某一部分ECShop的版本有效，而在新版中原本有效的解决方案再次失效，或者是只能解决部分jQuery使用的问题，但比较复杂的功能还是会冲突。最后一怒之下，决定一劳永逸地解决这个该死的冲突问题。


我的主要思路是，其实ECShop这些JS的主要功能中，基本上都可以被jQuery的功能替代，或者重写，也正是因为相同功能的不同实现在两部分中同时存在，才引发了这么多冲突。所以，只要把我需要的JS功能用jQuery重写，这个问题也就不存在了。


首先，我们需要先确定到底是哪些功能引起了冲突，这里我不能，也没有时间解决全部问题，因此，提出的仅仅是一个思路，和解决我所遇到的那一部分问题。如果在其他地方冲突，大家可以根据情况自行修改。


在制作模板的时候，我遇到的最大的问题就是在商品列表页和商品显示两个页面的模板中的添加购物车功能的Javascript与jQuery冲突。所以，我们先看看这个添加购物车的功能，究竟干了什么。在firebug中追踪添加购物车后的通讯，结果如下：

服务器端的回复如下：

随后，页面便被跳转到了购物车界面(http://www.ecshop.cn/flow.php?step=cart)。

接下来，看看addToCart这个函数究竟干了什么。

从这里我们可以看到，它检查过了商品规格后，向服务器端通过Ajax发送了一组数据，并采用addToCartResponse函数接收。和jQuery冲突的，正是这两个函数，于是，我们在新的函数中，改掉这一段即可。