时间戳

首页 > 解决方案 > 如何将 MyClass 导入为可全局重用的通用类？

javascript - 如何将 MyClass 导入为可全局重用的通用类？

问题描述

有一种简单而标准的方式来导入一个类并在全球范围内重用它吗？

这个解决方案不好：需要一个中间脚本......而且它很丑陋，需要冗余声明，而且看起来不那么执行。这很奇怪：

<script type="module" src="./MyClass.js"></script>
<script type="module" id="_the_intermediary_script_">
  'use strict';
  import MyClass from './MyClass.js';
  window.MyClassRef = MyClass; // "globalizing" class
</script>
<script> // NON-module global script
// no way to directelly import here??
document.addEventListener('DOMContentLoaded',function(){
   // only works after all modules loaded:
   let x = new window.MyClassRef(22); // ... after all is an ugly way!
}, false); //ONLOAD
</script>

有没有一种方法可以在没有中间脚本的情况下导入类？

注意：我不需要“动态加载”来导入，我需要像任何其他库一样加载类，使用 传统的静态库包含。我可以使用带有现代 Javascript/ECMAScript解释器的现代（最新版本）浏览器。

标签： javascriptbrowser

解决方案

在没有模块的情况下重用您的课程

要重用我们不需要，export class只需将类的源代码发布到文件中，并在需要时加载它......对任何浏览器都有效吗？它适用于现代 Firefox：

myInclude.js

class MyClass {
    constructor(i=10) { this.i=i; }
    m(){return ++this.i;}
}

myPage.htm

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>example</title>

  <script src="myInclude.js"></script>
  <script>
    let x = new MyClass();
    let y = new MyClass(90);
    console.log( "debug:", x.m(), y.m() );
  </script>

</head>
<body> etc. </body>
</html>

任何导出中的类表达式

export在事物的表达式中定义“类库”没问题吗？似乎正确：

// body of the exported thing

// ... 
const theClassRef = class MyClass {
    constructor(i=10) { this.i=i; }
    m(){return ++this.i;}
}

他们let x = new theClassRef(123)用来创建一个MyClass对象。

请参阅Mozilla 的 JavaScript/参考

推荐阅读