`
Kenny.Lee
  • 浏览: 515108 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

解决ECShop transport.js与jQuery冲突

    博客分类:
  • Php
阅读更多
jQuery是目前在JavaScript领域上最广泛流行的框架,无奈这次把他加到 ECShop的时候就遇到一个十分头疼的问题。

ECShop把AJAX事件和JSON解析的模块放在common/transport.js之中,可以说它也有自己封装的一套工具,这其实是很正常的。

但恰恰的,在封装JSON各种方法的同时对object的模型进行了重写,这个就跟jQuery冲突了。因为众所周知的,jQuery对各种JavaScript对象进行了扩展。

这一切其实都很容易理解,各有各的理由十分自然,但头痛和无奈的就变得在我们这些使用者身上了。在ECShop论坛上原来也有很多朋友提出了这个问题,也提出了各种各样的方法,我尝试了一些,不好或者甚至无用,所以只好自己动手了。

解决思路:

一切起因就是在于两者都重写了Object,所以当然任意一方让步就可以了。在这里我选择了修改代码量比较少的transport.js,除了简单,更重要的是去修改jQuery的话框架提供的强大特效和各种敏捷方法就失效了,还不是得不偿失。

1、加入JSON2.js文件
原因很简单,transport修改Object是为了加入支持JSON的方法。所以我这里用JSON官网在javascript语言上提供的json2.js支持具体下载地址 http://www.json.org/json2.js

2、修改transport.js

2.1 注释掉重写object的方法,具体搜索
if ( ! Object.prototype.toJSONString) {

这一段代码,然后把里面的内容全部注释掉。(参考:注释掉496-737行)

2.2 加入新的JSON支持方法
function objToJSONString(obj, filter){
	return JSON.stringify(obj, filter);
}

function parseObjectToJSON(object, filter){
    return JSON.parse(object, filter);
}


也可以看到其实都很简单,都是调用json2.js里面提供的方法,有人觉得不必在这里添加直接调用也可以,但我还是建议做这样的一个适配器在这,因为容易容易表明用意。

2.3 修正AJAX方法

2.3.1 在transport.js搜索params.toJSONString() 改为调用 objToJSONString方法(具体在352行左右)

2.3.2 继续在transport.js搜索result.parseJSON() 改为调用 parseObjectToJSON发那个发(具体在408行左右)

3、修复旧JSON调用地方

简单来说就是把所有toJSONString 的调用改为用objToJSONString,而parseJSON()改为parseObjectToJSON。

但非不得已不建议把一切旧的调用都修复,应该选择性的修复,应当出现冲突的地方我们才必须去修复。

就是说哪里调用了jQuery,就把修正后的transport.js及json2.js导入,并且修复toJSONString和parseJSON方法,其他页面就不必了。


所以说,也不建议在header里面就加入了jQuery,因为这样每个页面都会出现冲突了,修复工资也比较麻烦了,能避免尽量避免了。

最好的解决方案就坐等ECShop来搞定了。

同样的,这次的冲突不具备特殊性,也是一次很好的经验,因为以后遇到修改object等对象的场合并不会少,有这次的经验就知道如何应对了。


PS:附件为修复后的transport.js文件,注意调用之前必须加入json2.js文件。
6
2
分享到:
评论
2 楼 eithree 2015-06-01  
thanks you so much!
This problem make me have a bad headache on long time!
1 楼 xjzxjym 2011-04-08  
博主的 并不是在每个页面都可行的
实际上我使用博主的 方法没解决问题
博主是怎么解决的能不能发个邮件 帮忙搞定一下
376067807@qq.com


下面的是出现的问题


用jquery.json和$.toJSON()替换掉toJSONString方法,但是ec中有
typeof(toJSONString) == 'function'这种怎么替换呢,我试了typeof(toJSON) == 'function'不行,这样改完之后,原来的Ajax.call不 能用了~~~

相关推荐

    ecshop transport.js和jquery冲突的问题

    在开发Web应用时,我们经常会遇到JavaScript库...通过以上步骤,你应该能够成功解决ECSHOP中的`transport.js`与jQuery的冲突问题。在实际操作中,可能还需要根据具体情况进行微调,但以上方法通常足以应对大部分情况。

    ECShop中transport.js与jQuery冲突

    所以这里用JSON官网在javascript语言上提供的json2.js支持。 具体下载地址:https://github.com/douglascrockford/JSON-js 2、修改transport.js 2.1 注释掉重写object的方法,具体搜索 if ( ! Object.prototype....

    transport.js文件(解决ecshop jquery jqzoom冲突)

    transport.js文件(解决ecshop jquery jqzoom冲突)

    ecshop解决与jQuery冲突文件

    总的来说,解决ECSHOP与jQuery冲突的关键在于理解两个库的运作机制,识别潜在冲突,并采取适当的措施避免这些冲突。通过替换`transport.js`文件和引入`json2.js`,我们可以使ECSHOP在利用jQuery的强大功能的同时,...

    transport.js

    替换(不是去掉)页面所有的$(){}函数,防止jquery不生效(解释:这一步是要替换掉原ecshop里的$(){}这个函数,因为它与jquery是冲突的,解决的办法很多,可以用其他函数代替,比如getId(){}等等,也可以用jquery本身...

    ECShop解决jQuery补丁.zip

    根本的解决办法是不用transport.js中的json功能,那么就要有一个相同的功能来代替它,这里我选用jquery-json1.3.js。首先要把transport.js中的json功能删除。由于实现json功能的函数有区别,所以要麻烦改掉原ecshop...

    解决其他js和jquery冲突方法

    解决其他js和jquery冲突方法 JS和jQuery是两个非常常用的JavaScript库,但是当它们一起使用时,可能会出现冲突。解决这种冲突的方法是使用noConflict()方法将变量$的控制权让渡给其他库。 在开发过程中,可能还会...

    ECShop_V2.7.3_UTF8_完美兼容_jQuery_模式

    Ecshop与Jquery冲突的完美解决方案 ECShop把AJAX事件和JSON解析的模块放在common/transport.js之中,可以说它也有自己封装的一套工具,这其实是很正常的。 但恰恰的,在封装JSON各种方法的同时对object的模型进行了...

    ecshop_jquery_transport_conflict

    标题“ecshop_jquery_transport_conflict”和描述“ecshop jquery transport conflict”涉及到的是一个常见的JavaScript编程问题,特别是在使用ECSHOP电商系统时遇到的与jQuery中的Ajax运输(transport)冲突的问题...

    ECShop_V2.7.3_UTF8_完美兼容_$_模式

    Ecshop与Jquery冲突的完美解决方案 ECShop把AJAX事件和JSON解析的模块放在common/transport.js之中,可以说它也有自己封装的一套工具,这其实是很正常的。 但恰恰的,在封装JSON各种方法的同时对object的模型进行了...

    ckeditor在ecshop中替换原富文本编辑器

    描述中提到的“ckeditor中jquery和transport.js中的部分相冲突!”是一个具体的例子。CKEditor自身可能依赖jQuery,而ECShop的某些部分或者FCKeditor可能也使用了jQuery,甚至使用了不同的版本,这可能会引发冲突。...

    ecshop中transport

    就是说哪里调用了jQuery,就把修正后的transport.js及json2.js导入,并且修复toJSONString和parseJSON方法,其他页面就不必了。 所以说,也不建议在header里面就加入了jQuery,因为这样每个页面都会出现冲突了,...

    ecshop整合替换百度编辑器 ueditor,测试通过

    <script type="text/javascript" src="../includes/ueditor/fix_jquery/transport_json.js" rel="stylesheet" /></script> {insert_scripts files="../js/utils.js"} 4、解决商品编辑中编辑器被重置,uedite无法...

    ecshop后台编辑器替换成ueditor编辑器

    这一步是为了确保UEditor与ECSHOP的其他JavaScript组件兼容,并引入了必要的修复jQuery冲突的文件。 **步骤5:解决商品编辑问题** 在商品编辑页面,可能遇到编辑器内容被重置的问题。这是因为ECSHOP的某些操作会...

Global site tag (gtag.js) - Google Analytics