Question

因此，我有两个外部.js文件，并且已通过index.html文件正确链接了它们，但是只有第一个脚本标签可以加载两个.js文件，但是我只能在html文件中加载其中的一个。

HTML文件：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Crypto Monitor</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">

  </head>

  <body>
    <div class="ui left fixed vertical menu">
  <div class="item">
    <img class="image" src="https://i.imgur.com/KpBo4E0.png">
  </div>
  <a class="item">Dashboard</a>
  <a class="item">Exit</a>
  </div>

  <div class="bitcoin container">
  <div class="ui orange center aligned raised segment">
  <img src="https://s2.coinmarketcap.com/static/img/coins/16x16/1.png"> <p>Current Bitcoin Price:</p>
  <h3 id="btc" style="color:green">Loading Price...</h3>
  <script type="text/javascript" src="btc.js"></script>
  </div>
  </div>

  <div class="Ethereum container">
  <div class="ui blue center aligned raised segment">
  <img src="https://s2.coinmarketcap.com/static/img/coins/16x16/1027.png"> <p>Current Ethereum Price:</p>
  <h3 id="eth" style="color:green">Loading Price...</h3>
  <script type="text/javascript" src="eth.js"></script>
  </div>
  </div>

<div class="ui black center aligned raised segment">
<img src="https://s2.coinmarketcap.com/static/img/coins/16x16/52.png">
<p style="color:green;">Current XRP Price:</p>
<p>Loading...</p>
<label for="24 hr change">Change (24HR): loading...</label>
</div>

<div class="ui yellow center aligned raised segment">
<img src="https://s2.coinmarketcap.com/static/img/coins/16x16/328.png">
<p>Current Monero Price:</p>
<p style="color:green;">Loading...</p>
<label for="24 hr change">Change (24HR): loading...</label>
</div>

<div class="ui black center aligned raised segment">
<img src="https://s2.coinmarketcap.com/static/img/coins/16x16/2.png">
<p>Current Litecoin Price:</p>
<p style="color:green;">Loading...</p>
<label for="24 hr change">Change (24HR): loading...</label>
</div>

<style type="text/css">
body {
overflow:hidden;
}
</style>




</body>
</html>

btc.js文件：

const electron = require('electron')
const path = require('path')
const axios = require('axios')

function getBTC() {
  axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC&tsyms=USD')
  .then(res => {
    const cryptos = res.data.BTC.USD
    btc.innerText = '$' + cryptos.toLocaleString('en')
  })
}

getBTC()
setinterval(getBTC, 1000);

eth.js文件：

const electron = require('electron')
const path = require('path')
const axios = require('axios')

function getETH() {
  axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=ETH&tsyms=USD')
  .then(res => {
    const cryptos = res.data.ETH.USD
    eth.innerText = '$' + cryptos.toLocaleString('en')
  })
}

window.addEventListener("onload", function(){
  console.log('I am loaded');
});

getETH()
setinterval(getETH, 2000);

两个.js文件都能正常工作，但是当我将这两个.js文件都包含在index.html中时，只会加载第一个脚本。

编辑：https://i.imgur.com/cQ2wmjs.gifv 您会看到加载价格...功能不起作用，但是当我在index.html文件中仅使用一个脚本标记时，它将可以正常加载。

Answer 1

您在两个文件中都使用了相同的变量electron，path和axios。您还可以使用const声明它们，禁止重新分配它们。因此，当您尝试加载第二个.js文件时，由于尝试分配给const变量而收到错误消息。

将所有代码包装在IIFE中，以便每个文件都在其自己的范围内。

(function() {
  const electron = require('electron')
  const path = require('path')
  const axios = require('axios')

  function getETH() {
    axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=ETH&tsyms=USD')
      .then(res => {
        const cryptos = res.data.ETH.USD
        eth.innerText = '$' + cryptos.toLocaleString('en')
      })
  }

  window.addEventListener("onload", function() {
    console.log('I am loaded');
  });

  getETH()
  setinterval(getETH, 2000);
})();

仅加载一个javascript标签？

1 个答案: