时间戳

首页 > 解决方案 > 在 ES6 JavaScript 模块中操作 DOM

javascript - 在 ES6 JavaScript 模块中操作 DOM

问题描述

我正在开发一个网站，该网站使用 JavaScript 在客户端（浏览器）上生成大部分内容。代码分为几个 JavaScript 文件。文件代表具有特定任务的模块。

我最近了解到使用 ES6 你现在可以编写原生模块，所以我想测试它们。

我遇到的最大问题是我无法操作 ES6 模块内部的 DOM，因为每个模块都有自己的顶级范围，因此它不再是窗口对象。

有没有办法我可以操作模块内部的 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 +++');

}

lib.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：没有变化

标签： javascriptdom

解决方案

你的前提是错误的。

在 ES6 模块的顶层，var变量或函数声明将作用于模块，而不是全局或window对象的成员。

该window对象仍然可以显式 ( window.document.getElementById) 和隐式 ( document.getElementById) 访问。

推荐阅读