window.np 未定义，即使它在打印 window 时出现在控制台中

Question

我一直在尝试解决我运行遇到的这个问题，但不知道为什么我的代码是错误的。我有使用 javascript 为 NPM 制作的这个模块。我刚刚将该 npm 转换为 HTML 语法并将该模块导入到此 HTML 文件中。

但是当我尝试使用“window.np”访问项目时（window 是我将这些文件保存到用户计算机中的方式），它说“window.np”未定义.我不知道为什么会这样说，因为当我执行 console.log(window) 时，我可以看到 'np' 作为属性之一。但是我还是无法访问它。

这是我执行“console.log(window)”时的输出。

这是上图的放大版。

<!DOCTYPE html>
<html>
    <body>
        <script type="module" src="https://unpkg.com/numpy-matrix-js@1.1.0/src/html/index.js">
        </script>

        <script>
            console.log(window)
            console.log(window.np)
        </script>
    </body>
</html>

Answer 1

通过 type="module" 作为 ES6 模块包含的脚本实际上默认被延迟 (MDN)，这意味着 numpy-matrix-js 脚本将运行在内联脚本之后。

解决这个问题的方法很简单：您需要将内联脚本的执行推迟到模块的执行之后。一种方法是 defer 属性，但由于它仅适用于外部脚本，因此您需要将其放在单独的文件中。另一种方法是监听 DOMContentLoaded:

<!DOCTYPE html>
<html>
    <body>
        <script defer type="module" src="https://unpkg.com/numpy-matrix-js@1.1.0/src/html/index.js">
        </script>

        <script>
            window.addEventListener("DOMContentLoaded",function(){
                console.log(window)
                console.log(window.np)
            });
        </script>
    </body>
</html>

有关详细信息，请参阅。

至于它为何显示在控制台中，我猜测当您单击它时（即在模块具有运行之后），花哨的对象浏览器会查找属性，而不是在其记录时.

window.np 未定义，即使它在打印 window 时出现在控制台中

window.np is undefined even though it appears in console when window is printed

javascript

html

module

window