在前端项目开发过程中,jQuery与ExtJS同时使用时,$符号的冲突是一个经典难题。具体表现是:页面原本未引入jQuery时功能一切正常,但一旦引入,保存功能便会失效。尤其需要留意的是,该冲突在非IE内核浏览器中不会出现,仅在IE内核浏览器下才会暴露。
根本原因在于两个JavaScript库都采用了$符号作为核心函数的快捷别名,导致jQuery的$与ExtJS的$在全局命名空间上产生冲突。解决方案非常直接——使jQuery主动放弃对$的控制权,转而使用其他变量名。
具体操作时,需要在引入jQuery文件之后、引入ExtJS文件之前,调用jQuery.noConflict()方法,并将其返回值赋给一个新变量(例如jq)。如此一来,jq将完全替代$在jQuery中的作用,而$符号则归还给ExtJS或其他库使用。
之后在调用jQuery相关方法时,只需使用jq替代原先的$即可。示例如下:
function a(){
jq("#SARYXX_XM").jSuggest({
url: "../../ftdxxglxt/highchart/jsp/autoFind.jsp",
type: "GET",
data: "sary_xm",
autoChange: true
});
}
