解决多个版本jQuery混用而导致的命名冲突的问题

最新推荐文章于 2021-12-12 20:20:29 发布

ithouse

最新推荐文章于 2021-12-12 20:20:29 发布

阅读量909

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript JSP 文章标签： jQuery多个版本 jQuery版本混淆 jQuery多个版本导致出错 jQuery使用多个版本 jQuery版本

本文链接：https://blog.youkuaiyun.com/ithouse/article/details/40147667

Javascript 同时被 2 个专栏收录

18 篇文章

订阅专栏

JSP

12 篇文章

订阅专栏

本文介绍了解决因多个JS文件引入导致的$符号冲突问题的方法，通过使用jQuery.noConflict(true)来确保新旧版本jQuery共存，并展示了如何在实际项目中应用此技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候，我们在编写一个页面要引入许多js文件，有一些js文件是某些大神在旧版本jQuery的基础上修改而成的，但是我们正在编写的页面又要引入最新的jQuery，这就导致了名字冲突的问题，比如我们要使用$来引用最新jQuery的函数，但是由于两个版本都定义了$，编译器不知道你到底想用的是哪一个定义，所以会报"Undefined ..."什么的，大概是说这个函数没有定义，怎样解决这个问题呢，请看<head></head>部分：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="baseUrl" value="${pageContext.request.contextPath}"></c:set>
<html lang="en-US">
<head>
<head>
<title>ACDP Dashboard</title>

<script type="text/javascript" src="${baseUrl}/resources/js/jquery/jquery-1.9.0.js"></script>
<script type="text/javascript">
    var j = jQuery.noConflict(true);
</script>

<link rel="stylesheet" type="text/css" href="${baseUrl}/resources/css/focusStyles.css" />

<script type="text/javascript" src="${baseUrl}/resources/js/report.script.js"></script>
<script type="text/javascript" src="${baseUrl}/resources/js/focus.assist.js"></script>
<script type="text/javascript" src="${baseUrl}/resources/js/jquery.focus.js"></script>
<script type="text/javascript" src="${baseUrl}/resources/js/ichart.1.2.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(){
        var stageWidth = screen.width*25/28;
        var stageHeight = screen.height*17/21;
        $(".b").width(screen.width*25/84);
        $(".focusWrap").css({"width":stageWidth,"height":stageHeight});
        $(".focusCon").width(stageWidth);
        //vertical center
        $("#page").css({"width":stageWidth, "margin-top":-(stageHeight)/2, "margin-left":-(stageWidth)/2});
        $(".focusL").height(screen.height-250);
        $(".focusM").css({"width":stageWidth,"height":stageHeight});
        $(".ulFCon li img").css({"width":stageWidth,"height":stageHeight});
        $(".ulFCon li").height(stageHeight);
        $("#j_Focus").Focus();
        $(".projectName").css({"height":screen.height*17/126,"color":"#3e576f","margin-top":screen.height*17/252-5});
        // Set the refresh time
        var interval = setInterval("getNewDashboardData()", 360000);
        initDashboard();
    });

function initDashboard() {
    var allReportData = ${allData};
    for(var proName in allReportData) {
        var testData;
        var testLabels;
        var analysisData;
        var deployData;
        var deployLabels;
        for(var paramData in allReportData[proName]) {
            if(paramData == "testReport") {
                testData = allReportData[proName][paramData];
            } else if (paramData == "testLabels") {
                testLabels = allReportData[proName][paramData];
            } else if (paramData == "analysisReport") {
                analysisData = allReportData[proName][paramData];
            } else if (paramData == "deployReport") {
                deployData = allReportData[proName][paramData];
            } else if (paramData == "deployLabels") {
                deployLabels = allReportData[proName][paramData];
            }
            //alert(allReportData[proName][paramData]);
        }

        showiChart2D(proName+"c1","Code Analysis","Ok",analysisData);
        showColumnStacked2D(proName+"c2","Test Result","Ok",testLabels,testData);
        showArea2D(proName+"c3","Job Status","subtitle","footText",deployLabels,deployData);
    }
}

function getNewDashboardData() {
    alert("start post");
    j.post("/refreshTheDashboard.shtml",function(result) {
        alert("Result: "+result);
        alert("Result code: "+result.code);
        if(result.code==1000){
            // Deal with the project names.
            var theProjects = result.data["projectNames"];
            var projectHtml = "";
            projectHtml += "<ul class=\"ulFCon\" id=\"j_FocusCon\">";
            for(var item1 in theProjects){
                var tempItem1 = item1 + "c1";
                var tempItem2 = item1 + "c2";
                var tempItem3 = item1 + "c3";
                projectHtml = projectHtml + "<li>" +
                        "<div class=\"projectName\">" + item1 + "</div>" +
                        "<div class=\"b\">" + "<div id=\""+tempItem1.replace(/\s/g, '').replace(/-/g,"")+"\">" + "</div></div>" +
                        "<div class=\"b\">" + "<div id=\""+tempItem2.replace(/\s/g, '').replace(/-/g,"")+"\">" + "</div></div>" +
                        "<div class=\"b\">" + "<div id=\""+tempItem3.replace(/\s/g, '').replace(/-/g,"")+"\">" + "</div></div>" +
                        "</li>";
            }
            projectHtml = projectHtml + "</ul>";
            $(".focusM").html(projectHtml);
            // ==============================I am separator===============================
            var array = new Array();
            $(".ulFCon").find(".b").each(function(){
                array.push($(this).attr("id"));
            });
            var length = array.length;
            for(var i = 0; i < length; i++) {
                array[i] = array[i].replace(/\s/g, "").replace(/-/g,"");
            }
            // ===============================I am separator===============================
            // Deal with the report.
            var allReportData = result.data["allData"];
            for(var proName in allReportData) {
                var testData;
                var testLabels;
                var analysisData;
                var deployData;
                var deployLabels;
                for(var paramData in allReportData[proName]) {
                    if(paramData == "testReport") {
                        testData = allReportData[proName][paramData];
                    } else if (paramData == "testLabels") {
                        testLabels = allReportData[proName][paramData];
                    } else if (paramData == "analysisReport") {
                        analysisData = allReportData[proName][paramData];
                    } else if (paramData == "deployReport") {
                        deployData = allReportData[proName][paramData];
                    } else if (paramData == "deployLabels") {
                        deployLabels = allReportData[proName][paramData];
                    }
                    //alert(allReportData[proName][paramData]);
                }

                showiChart2D(proName+"c1","Code Analysis","Ok",analysisData);
                showColumnStacked2D(proName+"c2","Test Result","Ok",testLabels,testData);
                showArea2D(proName+"c3","Job Status","subtitle","footText",deployLabels,deployData);
            }
        }
    },"json");


}

</script>

<style type="text/css">
    .b{ margin:0; padding:0; height:500px; float:left;}
    .b div{ margin:0 2px; padding:0; height:500px;}
    .projectName {
        text-align: center;
        background-color: #FFFFFF;
        font-size: 28px;
        font-weight: 500;

        margin-bottom: 10px;
        /*border-bottom: 1px solid #e1e1eb; margin-top: 30px; margin-bottom: 15px;*/
    }
    /*.projectName h2 {font-size: 28px; font-weight: 500; height: 50px; line-height: 50px; margin-bottom: 10px;}*/
</style>
</head>
<body id="introduction">
<div id="page">
    <div id="container" class="content clearfix">
        <div class="focusCon" id="j_Focus">
            <!-- --------------middle begin------------ -->
            <div class="focusM">
                <ul class="ulFCon" id="j_FocusCon">
                    <c:forEach items="${projectNames}" var="projectName">
                        <li>
                            <div class="projectName">${projectName}</div>
                            <div class="b" id="${projectName.replaceAll(" ","").replaceAll("-", "")}c1"></div>
                            <div class="b" id="${projectName.replaceAll(" ","").replaceAll("-", "")}c2"></div>
                            <div class="b" id="${projectName.replaceAll(" ","").replaceAll("-", "")}c3"></div>
                        </li>
                    </c:forEach>
                </ul>
            </div>
            <!-- ---------------middle end-------------- -->
        </div>
    </div>
</div>
</body>
</html>