这个问题是关于Chrome浏览器的。
我正在尝试动态导入一个定义为类的javascript模块。
// data-table.js
export class DataTable extends HTMLElement{
constructor() {
super();
}
static get tagName() {
return 'data-table';
}
}我想知道是否有一种方法可以在目标代码中获得导入类的名称。下面是我的目标代码，它不起作用。
// router.js
...//some code
if(route === matched){
// dynamically import the component
import(route.component)
.then( module => {
// anyway to get classname DataTable here??
})
};
...//rest of the code下面是一个很明显的可行的实现，（因为我硬编码了模块类名）
// router.js
...//some code
if(route === matched){
// dynamically import the component
import("components/data-table.js")
.then( {DataTable} => {
cost t = DataTable.tagName;
// code to handle module stuff
})
};
...//rest of the code有一个similar question here没有任何工作答案，但这是关于webpack的，我直接在浏览器中尝试。为什么我想获得类名？因为这给了我简化代码的能力。
4条答案
按热度按时间f4t66c6m1#
当使用动态导入的默认导出时，您需要从返回的对象中解构并重命名“default”键。
我刚刚遇到了同样的问题，但我在Node中使用了async / await：
这允许我访问myClass对象的静态属性方法。
r3i60tvu2#
我不认为这是一个好主意（见@Steven的回答），但要回答这个问题：
当然不是最好的方法，但仍然是一个解决方案。
这仅适用于
export class ...形式的单个导出。uwopmtnx3#
事实上，你已经在解构
{DataTable}（你的语法是错误的，它需要是({DataTable})），这表明它是模块中的一个键，相当于module.DataTable或module['DataTable']。所以你已经有了它。如果你在开发时真的知道DataTable这个名字，那么你已经有了一个字符串。但是您可能不知道这个名称，或者它以一个公共名称（如
export const Component = DataTable）公开，此时您可以使用一致的方式访问它：module.Component.无论哪种情况，只要你有类对象，它就只是一个函数，它有
.name属性，所以你总是可以只做DataTable.name === 'DataTable'。但在我的专业意见中，像这样为了保存一点工作而进行的元编程会导致脆弱的代码，这些代码几乎总是在某些时候不方便地中断。
nom7f22z4#
我在
nodeJS中遇到了同样的问题。我有一个javascript文件，其中有一个Equalizer类（不是默认的），只有static方法。我加载partial pages。当加载partial page时，我在partial page下面放置：现在我可以动态加载
javascrip并在加载后在其上执行函数。因此无需在网站load.enter code here上加载所有javascript文件。