解決ECshop transport.js和Jquery的衝突

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支持2、修改transport.js

2.1 註釋掉重寫object的方法,具體搜索
Js代碼
  1. if ( ! Object.prototype.toJSONString) {  

這一段代碼,然後把裏面的內容全部註釋掉。(參考:註釋掉496-737行)

2.2 加入新的JSON支持方法
Js代碼
  1. function objToJSONString(obj, filter){  
  2.     return JSON.stringify(obj, filter);  
  3. }  
  4.   
  5. function parseObjectToJSON(object, filter){  
  6.     return JSON.parse(object, filter);  
  7. }  



也可以看到其實都很簡單,都是調用json2.js裏面提供的方法,有人覺得不必在這裏添加直接調用也可以,但我還是建議做這樣的一個適配器在這,因爲容易容易表明用意。

2.3 修正AJAX方法

2.3.1 在transport.js搜索params.toJSONString() 改爲 objToJSONString(params)

2.3.2 繼續在transport.js搜索result.parseJSON() 改爲 parseObjectToJSON(result)(具體在408行左右)

3、修復舊JSON調用地方

簡單來說就是把所有*.toJSONString() 的調用改爲用objToJSONString(*),而*.parseJSON()改爲parseObjectToJSON(*)。

例如: comm.js裏面第一個函數裏面的

Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJSONString(), addToCartResponse, 'POST', 'JSON');

要改爲Ajax.call('flow.php?step=add_to_cart', 'goods=' + objToJSONString(goods), addToCartResponse, 'POST', 'JSON');

comm.js裏面還有一些Ajax.call調用tojsonstring的,都需要按照本例替換。


但非不得已不建議把一切舊的調用都修復,應該選擇性的修復,應當出現衝突的地方我們才必須去修復。

就是說哪裏調用了jQuery,就把修正後的transport.js及json2.js導入,並且修復toJSONString和 parseJSON方法,其他頁面幾不必了。


所以說,也不建議在header裏面就加入了jQuery,因爲這樣每個頁面都會出現衝突了,修復工資也比較麻煩了,能避免儘量避免了。

最好的解決方案就坐等ECShop來搞定了。

同樣的,這次的衝突不具備特殊性,也是一次很好的經驗,因爲以後遇到修改object等對象的場合並不會少,有這次的經驗就知道如何應對了。


PS:附件爲修復後的transport.js文件,注意調用之前必須加入json2.js文件。

附加:transport.js修改版代碼

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章