操作 ES6 JavaScript 模塊內部的 DOM
[英]Manipulating the DOM inside of an ES6 JavaScript Module
問題描述
我正在開發一個網站，該網站在客戶端（瀏覽器）生成大部分內容，代碼為 JavaScript。代碼分為幾個 JavaScript 文件。 文件代表具有特定任務的模塊。
我最近了解到，使用 ES6，您現在可以編寫本機模塊，所以我想測試一下。
我遇到的最大問題是我無法在 ES6 模塊中操作 DOM，因為每個模塊都有自己的頂級范圍，因此它不再是 window object。
有沒有辦法可以在模塊內操作 DOM？
編輯：添加了我的示例代碼，該代碼通過一個簡單的 Node.js HTTP 服務器提供。
索引.html：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Basic JavaScript module example</title>
<script type = "module" src = "main.js"></script>
</head>
<body>
<button type = "button" onclick = "test()">Test</button>
<div id = "content"></div>
</body>
</html>
主.js：
import {add, sub, createHelloWorld} from './lib.js';
function test(){
console.log('+++ Started ES6 Module Test +++');
let number1 = 3;
let number2 = 2;
console.log('Add: ' + number1 + ' + ' + number2);
console.log('Result: ' + add(number1, number2));
console.log('Subtract: ' + number1 + ' - ' + number2);
console.log('Result: ' + sub(number1, number2));
createHelloWorld();
console.log('+++ End ES6 Module Test +++');
}
庫.js:
function add(a, b){
let result = a + b;
return result;
}
function sub(a, b){
let result = a - b;
return result;
}
function createHelloWorld(){
let div = document.getElementById('content');
div.innerHTML = 'Hello World! I am a ES6 Module!';
}
export {add, sub, createHelloWorld};
當我單擊按鈕時，我得到：“ReferenceError：未定義測試”。
解決方案：
索引.html：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Basic JavaScript module example</title>
<script type = "module" src = "main.js"></script>
</head>
<body>
<button id = "test" type = "button">Test</button>
<div id = "content"></div>
</body>
</html>
主.js：
import {add, sub, createHelloWorld} from './lib.js';
window.onload = init();
function init(){
let button = document.getElementById('Test');
button.addEventListener('click', test);
}
function test(){
console.log('+++ Started ES6 Module Test +++');
let number1 = 3;
let number2 = 2;
console.log('Add: ' + number1 + ' + ' + number2);
console.log('Result: ' + add(number1, number2));
console.log('Subtract: ' + number1 + ' - ' + number2);
console.log('Result: ' + sub(number1, number2));
createHelloWorld();
console.log('+++ End ES6 Module Test +++');
}
lib.js：沒有變化
1 個解決方案
解決方案1
4 已采納 2020-10-26 12:08:53
你的前提是錯誤的。
在 ES6 模塊的頂層， var變量或 function 聲明將限定在模塊范圍內，並且不會是全局變量或window object 的成員。
window object 仍然可以顯式 ( window.document.getElementById ) 和隱式 ( document.getElementById ) 訪問。
ES6 獲取模塊內模塊的路徑
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.