个人中心
gpt4 book ai didi

javascript - 本地主机未加载模块

转载 作者：行者123 更新时间：2023-12-01 01:12:55 24 4
gpt4 key购买 nike

我正在使用现代 Javascript MyClass.js 

export default class MyClass {
  constructor(x) {
    this.val=x? x: "Hello!"
    console.log("MyClass:",x)
  }
}

在我的http://localhost/myfolder/mypage.htm，源代码如下，

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='shortcut icon' type='image/x-icon' href='./favicon.ico' />
    <script type="module" src="./MyClass.js"></script>

    <script>
    'use strict';

    document.addEventListener('DOMContentLoaded', function(){

    alert(123)
    let x = new MyClass(11);

    }, false); //ONLOAD
    </script>

</head>
<body> <p>Hello1!</p> </body>
</html>

为什么控制台说“ Uncaught ReferenceError :MyClass未定义”？

PS:这个问题是对this other about using ES6+ with browser+NodeJs的补充.

<小时/>

注意:在 Apache 的本地主机上使用 UBUNTU...myfolder 到真实文件夹的符号链接(symbolic link)存在一些问题？在 /var/www/html 我使用了 ln -s/home/user/myRealFolder/site myfolder

最佳答案

使用前需要导入模块

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8" />
    <script type="module" src="./MyClass.js"></script>
    <script type="module" id="m1">
      // script module is an "island", not need onload.
      'use strict';
      import MyClass from './MyClass.js';
      let x = new MyClass(11);     // we can use here...
      console.log("debug m1:", x)  // working fine!

      window.MyClassRef = MyClass; // "globalizing" class
      window.xRef = x              // "globalizing" instance
    </script>
    <script> // NON-module global script
    document.addEventListener('DOMContentLoaded',function(){
       // only works after all modules loaded:
       console.log("debug:", window.xRef) // working fine!
       let x = new window.MyClassRef(22); // using class also here,
       console.log("debug:", x)           // working fine!

    }, false); //ONLOAD
    </script>

</head>
<body> <p>Hello1!</p> </body>
</html>

有两种使用导入类的方法:

  1. 在模块范围(脚本 m1 ):您可以使用 new MyClass() ，
    并且可以“全局化”实例(例如 xRef)或构造函数的类(MyClassRef)。

  2. 在全局范围:要与其他库一起工作或与主脚本一起使用，请使用全局引用，例如new window.MyClassRef() .

所有这些解决方案都依赖于“静态导入”...

<小时/>

可选动态导入

您还可以使用普通默认的导入 <script> (没有 type="module" )，并且没有“onload”，使用 this solution ，而不是最后一个脚本:

    <script>
    'use strict';
    import('./MyClass.js').then(({default: MyClass}) => {
       alert(123)  // async block
       let x = new MyClass(11);
     });
    </script>

参见dynamic import .

关于javascript - 本地主机未加载模块，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55006392/

24 4 0
文章推荐： python - 使用 python bash float 数学
文章推荐： python - 基于行标签合并行 - pandas python
文章推荐： javascript - 如何在点击时暂停音乐？
文章推荐： asp.net - 将 jQuery 集成到现有的 ASP.NET Web 应用程序中？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com