兩個javascript文件相互覆蓋（衝突）

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> 

UPDATE：
（以下內容被張貼OP作爲一個答案 - 亞歷山大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

他們不是「互相覆蓋」，他們要更換有excact相同名稱的方法..

爲了避免這個問題，可以考慮爲對象創建兩個腳本。

//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");