兩個 javascript 文件可以通過 html 主體中的引用進行通信嗎？

Question

我正在嘗試從functions.js導出並將其導入到login.js，但是當我加載localhost：3000時出現錯誤“未捕獲的語法錯誤：無法在模塊外使用導入語句”和“未捕獲的語法錯誤：意外令牌'導出'”

webpack 是唯一的解決方案嗎？ 我處於項目的后期階段，並試圖找到簡單的工作。

代碼：

<html>
 <body
    <script src="/js/exports/functions.js"></script>
    <script src="/js/login.js"></script>
  </body>
</html>

Answer 1

由於您要求一個簡單的解決方法，您可以考慮使用全局變量。

您的所有 JavaScript 文件都有一個通用的全局 scope。 瀏覽器腳本文件之間的通用全局 object 上下文是window 。 當您分配像x = 1這樣的變量時，它會被分配給window.x 。 如果你定義一個 function 像function go() {}它被分配給window.go 如果您嘗試讀取像foo這樣的變量，它實際上是在尋找window.foo 。 您的所有 JavaScript 文件都將有權訪問此window foo及其屬性，無論是顯式使用window.foo還是隱式使用。

另外值得一提的是JavaScript 模塊是一個東西。 但是，如果您只是在尋找一個快速的解決方案並且現在沒有時間學習新的東西，那么精心使用的全局可以讓您擺脫困境。

Answer 2

如果您使用<script>手動導入，則不必使用import ，您可以直接使用提供給您的庫。

索引.html

<html>
  <head>
    <!-- Order matters! -->
    <!-- Sum has to be imported first so `print.js` can use it -->
    <script src="./sum.js"></script>
    <script src="./print.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

sum.js

const sum = (a, b) => {
    return a + b
}

打印.js

var result = sum(1, 1) // Notice how you dont have to import any library, it's on the global namespace
console.log("1 + 1 = ", result)

Webpack的工作是將所有 JS 文件捆綁到一個文件中。 因此，如果您想使用import ，那么 webpack 將是您要選擇的方式。

但要了解每個工具的用途以及創建它的原因。 Webpack 未創建，因此您可以使用import ，並且您仍然可以在沒有 Webpack 的情況下制作項目。 但在某些情況下，它肯定會對您有所幫助，並且不會浪費任何知識。

兩個 javascript 文件可以通過 html 主體中的引用進行通信嗎？

問題描述

2 個解決方案

解決方案1
1 2020-12-19 15:25:04

解決方案2
1 已采納 2020-12-19 15:26:14

兩個 javascript 文件可以通過 html 主體中的引用進行通信嗎？

問題描述

2 個解決方案

解決方案1 1 2020-12-19 15:25:04

解決方案2 1 已采納 2020-12-19 15:26:14

解決方案1
1 2020-12-19 15:25:04

解決方案2
1 已采納 2020-12-19 15:26:14