操作 ES6 JavaScript 模块内部的 DOM

Question

I am developing a website that generates most of its content on the client side (browser) with JavaScript. The code is divided into several JavaScript files.我正在开发一个网站，该网站在客户端（浏览器）生成大部分内容，代码为 JavaScript。代码分为几个 JavaScript 文件。 A file represents a module with a specific task.文件代表具有特定任务的模块。

I recently learned that with ES6 you can now write native modules so i wanted to test them out.我最近了解到，使用 ES6，您现在可以编写本机模块，所以我想测试一下。

The big problem that i have is that i can not manipulate the DOM inside of an ES6 module because each module has its own top-level-scope and therefore it is no longer the window object.我遇到的最大问题是我无法在 ES6 模块中操作 DOM，因为每个模块都有自己的顶级范围，因此它不再是 window object。

Is there a way how i can manipulate the DOM inside of a module?有没有办法可以在模块内操作 DOM？

Edit: Added my example code that is served through a simple Node.js HTTP server.编辑：添加了我的示例代码，该代码通过一个简单的 Node.js HTTP 服务器提供。

Index.html:索引.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>

main.js:主.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 +++');

}

lib.js:库.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};

When i click the button i get: "ReferenceError: test is not defined".当我单击按钮时，我得到：“ReferenceError：未定义测试”。

Solution:解决方案：

Index.html:索引.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>

main.js:主.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: no changes lib.js：没有变化

Answer 1

Your premise is wrong.你的前提是错误的。

At the top level of an ES6 module, a var variable or function declaration will be scoped to the module and will not be a global or a member of the window object.在 ES6 模块的顶层， var变量或 function 声明将限定在模块范围内，并且不会是全局变量或window object 的成员。

The window object is still accessible both explicitly ( window.document.getElementById ) and implicitly ( document.getElementById ). window object 仍然可以显式 ( window.document.getElementById ) 和隐式 ( document.getElementById ) 访问。

操作 ES6 JavaScript 模块内部的 DOM

问题描述

1 个解决方案

解决方案1
4 已采纳 2020-10-26 12:08:53

操作 ES6 JavaScript 模块内部的 DOM

问题描述

1 个解决方案

解决方案1 4 已采纳 2020-10-26 12:08:53

解决方案1
4 已采纳 2020-10-26 12:08:53