Поэтому я недавно начал играть с динамическим импортом и попытался написать код в стиле, который был бы у меня в common.js, и натолкнулся на разницу и хотел получить некоторую информацию об этом.
В common.jsЯ написал бы мой экспорт следующим образом:
var x = {};
x.foo = async () => {
//Imaginary code here.
};
x.bar = async () => {
//Imaginary code here.
};
modules.export = x;
, и я просто импортировал бы так:
var fooBar = require("fooBar");
, и это сработало бы, я мог бы позвонить fooBar.foo();, но с import();это отличается, мой экспорт будет:
var x = {};
x.foo = async () => {
//Imaginary code here.
};
x.bar = async () => {
//Imaginary code here.
};
export {x};
и импорт:
var module = ( await import('./module.js') ).x;
Вот где возникает разница, мне нужно обернуть мой импорт в ().x; для module.foo(); на работу, если я не работаю, то мой объект выглядит следующим образом:
и вызов module.foo() приводит к undefined, который японимаю, почему это так, но попытка вызова module.x.foo() приводит к:
Что не имеет смысла, так как расширение module.x показывает foo() там,Также в экспорте, зачем мне инкапсулировать мой объект в {x}, когда он уже является объектом, но запись export x; приводит к синтаксической ошибке.Я пробовал разные способы получить нужную мне функциональность, и мои попытки были такими:
С оператором распространения:
var {... module} = await import('./module.js');
module.x.foo();// function is accessible.
С именным экспортом:
//module.js
export {x as module};
//app.js
var {module} = await import('./module.js');
//Object name is tied to export declaration and not ideal.
В конечном итоге я пришел к этому, чтобы приблизиться к желаемой функциональности:
index.html
<!doctype html>
<head>
<script src=app/js/imp.js defer></script>
<script type=module src=app/js/app.js defer></script>
</head>
<body></body>
</html>
imp.js
var imp = async file => {
try {
var exp = await import(file);
return exp.x;
}catch(err) {
return err;
}
};
app.js
(async () => {
try {
var module = await imp('./module.js');
module.foo();
module.bar();
}catch(err) {
throw(err);
};
})();
module.js
var x = {};
x.foo = async () => {
//Imaginary code here.
};
x.bar = async () => {
//Imaginary code here.
};
export {x};
TLDR;
Почему import() создан таким образом и существует ли лучший способ согнутьimport() вести себя более похоже на common.js (я открыт для возни с prototype, но не знаю, как и если это возможно) в отношении того, как export добавляется к object безменяя стиль письма.
PS Пожалуйста, не включайте ответы типа "использовать статический импорт или рамки".