快捷導(dǎo)航

加載jQuery后$沖突的解決辦法

更新時(shí)間：2010年07月09日 19:50:00 作者：

因?yàn)閖query中也有$調(diào)用，如果原來已經(jīng)定義了，難免會(huì)沖突。下面是一些解決思路。

網(wǎng)站開發(fā)中的javasript部分，現(xiàn)在的開發(fā)人員很少有再去手工寫document.getElementById()的了吧，那還不得累死，你還真別說，getElementById還真不好寫，字母還挺多又區(qū)分大小寫，一不留神就寫錯(cuò)了。因此一下諸如用$來實(shí)現(xiàn)document.getElemetnById()就常見了。

復(fù)制代碼代碼如下:

 
function $() { 
var elements = new Array(); 
for (var i = 0; i < arguments.length; i++) { 
var element = arguments[i]; 
if (typeof element == 'string') 
element = document.getElementById(element); 
if (arguments.length == 1) 
return element; 
elements.push(element); 
} 
return elements; 
} 

微軟的asp.net ajax客戶端框架也有類似用$get來實(shí)現(xiàn)的代碼。

復(fù)制代碼代碼如下:

 
var $get = Sys.UI.DomElement.getElementById = function Sys$UI$DomElement$getElementById(id, element) { 
/// <param name="id" type="String"></param> 4.5. 
/// <param name="element" domElement="true" optional="true" mayBeNull="true"></param> 6.7. 
/// <returns domElement="true" mayBeNull="true"></returns> 8.9. 
var e = Function._validateParams(arguments, [ 
{name: "id", type: String}, 
{name: "element", mayBeNull: true, domElement: true, optional: true} 
]); 
if (e) throw e; 
if (!element) return document.getElementById(id); 
. if (element.getElementById) return element.getElementById(id); 
// Implementation for browsers that don't have getElementById on elements: 28.29. 
var nodeQueue = []; 
var childNodes = element.childNodes; 
for (var i = 0; i < childNodes.length; i++) { 
var node = childNodes[i]; 
if (node.nodeType == 1) { 
nodeQueue[nodeQueue.length] = node; 
} 
} 
while (nodeQueue.length) { 
node = nodeQueue.shift(); 
if (node.id == id) { 
return node; 
} 
childNodes = node.childNodes; 
for (i = 0; i < childNodes.length; i++) { 
node = childNodes[i]; 
if (node.nodeType == 1) { 
nodeQueue[nodeQueue.length] = node; 
} 
} 
} 
return null; 
} 

由于jQuery的簡約、優(yōu)美，更重要的是被微軟所大力推廣，因此在項(xiàng)目中引入jQuery就顯得自然而必然，jQuery采用$函數(shù)來返回一個(gè)jQuery對(duì)象，也就是$=jQuery,引入jQuery后針對(duì)$符號(hào)問題必然產(chǎn)生沖突，因此主要有2個(gè)思路來解決。
一、利用jQuery.noConfict()使得$$等于jQuery,代碼為$$=jQuery.noConflict()。這樣需要做一下幾件事
1、在包含jQuery以及基于jQuery的javasript代碼文件中最后加上$$=jQuery.noConflict(),jQuery的VS智能提示文件(jQueryXXX –vsdoc.js)也最后的window.jQuery = window.$ = jQuery;也改成window.jQuery = window.$$ = jQuery;好了。
2、基于jQuery的插件和擴(kuò)展文件最前面加上$=jQuery.noConflict();最后面加上$$=jQuery.noConflict();。
3、原有的$的實(shí)現(xiàn)文件中,最上面加上jQuery.noConflict()表示將$的“權(quán)力”交給其他我們自己的js文件，然后文件最后面加上$$=jQuery.noConflict()。
4、頁面引入js的時(shí)候注意順序，jQuery的相關(guān)文件放前面，與jQuery不相關(guān)的文件放后面。
這樣做了之后，$還是表示以前的含義，而使用jQuery則直接用jQuery或者$$就可以了。
優(yōu)點(diǎn)：只需要改幾個(gè)文件就能達(dá)到目的。
缺點(diǎn)：$$使用起來并不順手，以后引入jQuery插件時(shí)都需要按步驟2進(jìn)行操作一次。

二、將原有的$進(jìn)行替換，經(jīng)過考慮后我采用的第二種方法，因?yàn)閖Query在以后的項(xiàng)目中將被廣泛使用，使用$$或者jQuery來寫代碼畢竟別扭?？紤]到asp.net ajax的兼容性，因此將原有$替換成$get。用Visual Studio來做替換到也不難

，但也還需要一點(diǎn)步驟。
1、首先用$get("替換掉$("，然后是用$get(‘替換掉$('，最后才是$get替換成$。
2、替換的時(shí)候利用VSS的簽出提示功能，一個(gè)一個(gè)文件進(jìn)行一定的確認(rèn)（要是出了差錯(cuò)那可不是小事）。最后還是出了一些小問題，在同事的協(xié)助下也基本解決了。
3、Visual Studio的替換功能還真是袖里有乾坤，如下的一個(gè)Replace in Files東西還真不少。

Use那個(gè)勾上上，可千萬別選Regular expressions，因?yàn)樵谟疫吳宄娘@示$表示End of Line。Look In那個(gè)當(dāng)然選Current Project，當(dāng)然右邊的按鈕按下后可以選多個(gè)目錄來框定反問，這個(gè)倒是以前完全沒用過的。Look at these file types可以選定特殊的一些文件類型來縮小范圍。

您可能感興趣的文章: