Question

我遇到的问题是我在index.html，ExhaustTemperature.js和CylinderPressure.js中包含了两个javascript文件。

这个想法是当我点击list_row1然后将显示来自ExhaustTemperature.js的table1，当我点击list_row2时，CylinderPressure.js中的table2将显示出来。

我相信两个javascript文件互相覆盖，因为它们有类似的方法名称，是否可以防止这种覆盖？

我的index.html文件。

        <script type="text/javascript" src="js/ExhaustTemperature.js"></script> // table1
        <script type="text/javascript" src="js/CylinderPressure.js"></script> // table2

        <ul class="list-group">
            <li class="list-group-item"><a href='#' id='list_row1'>Exhaust Temperature</a></li>
            <li class="list-group-item"><a href='#' id='list_row2'>Cylinder Pressure</a></li>
        </ul>

    <div id = "table1">table1</div>
    <div id = "table2">table2</div>
<script>    
           // hide the tables by default when page loads
            $('#table1').hide();
            $('#table2').hide();

            $('#list_row1').on('click',function(event){
                event.preventDefault(); // halt the anchor tag's default behaviour
                $('#table2').hide();
                $('#table1').show();
            });

            $('#list_row2').on('click',function(event){
                event.preventDefault(); // halt the anchor tag's default behaviour
                $('#table1').hide();
                $('#table2').show();
            });
</script>

更新
（以下内容由OP发布为答案-Alexander Zhak）
以下是 ExhaustTemperature.js

的内容

<script type="text/javascript" src="js/ExhaustTemperature.js"></script>

<script type="text/javascript">
    window.onload = function () {

    var dps = []; // dataPoints

    var chart = new CanvasJS.Chart("table1",{
        title :{
            text: "Live Random Data"
        },          
        data: [{
            type: "line",
            dataPoints: dps 
        }]
    });

    var xVal = 0;
    var yVal = 100; 
    var updateInterval = 20;
    var dataLength = 500; // number of dataPoints visible at any point

    var updateChart = function (count) {
        count = count || 1;
        // count is number of times loop runs to generate random dataPoints.

        for (var j = 0; j < count; j++) {   
            yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
            dps.push({
                x: xVal,
                y: yVal
            });
            xVal++;
        };
        if (dps.length > dataLength)
        {
            dps.shift();                
        }

        chart.render();     

    };

    // generates first set of dataPoints
    updateChart(dataLength); 

    // update chart after specified time. 
    setInterval(function(){updateChart()}, updateInterval); 

}
</script>

以下是 CylinderPressure.js。

的内容

<script type="text/javascript" src="js/CylinderPressure.js"></script>

<script type="text/javascript">
    window.onload = function () {

    var dps = []; // dataPoints

    var chart = new CanvasJS.Chart("table2",{
        title :{
            text: "Live Random Data"
        },          
        data: [{
            type: "line",
            dataPoints: dps 
        }]
    });

    var xVal = 0;
    var yVal = 100; 
    var updateInterval = 20;
    var dataLength = 500; // number of dataPoints visible at any point

    var updateChart = function (count) {
        count = count || 1;
        // count is number of times loop runs to generate random dataPoints.

        for (var j = 0; j < count; j++) {   
            yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
            dps.push({
                x: xVal,
                y: yVal
            });
            xVal++;
        };
        if (dps.length > dataLength)
        {
            dps.shift();                
        }

        chart.render();     

    };

    // generates first set of dataPoints
    updateChart(dataLength); 

    // update chart after specified time. 
    setInterval(function(){updateChart()}, updateInterval); 

}
</script>

Answer 1

他们没有＆＃34;互相覆盖＆＃34;，他们正在取代具有相同名称的方法。

要避免此问题，请考虑将两个脚本创建为对象。

//construct the object by running this "constructor" method
function myObjectName() {
    //stuff like default values for this script
    this.myAttribute = "default value";
}

myObjectName.prototype.myFunction1 = function(parameter, list){
    //what to do, when the function is called.
    //access the variables of this object like this:
    alert( this.myAttribute );
}

初始化并构建对象，（记得存储全局引用，以便于访问）：

var myObject = new myObjectName();

现在像往常一样调用函数，但请记住对象的引用：

myObject.myFunction1("value", "List");

两个javascript文件互相覆盖（冲突）

1 个答案: