我一直在尝试最近添加到浏览器中的新的原生ECMAScript模块支持.最终能够直接从JavaScript轻松导入脚本是令人愉快的.
/example.html
<script type="module">
import {example} from '/example.js';
example();
</script>
/example.js
export function example() {
document.body.appendChild(document.createTextNode("hello"));
};
但是,这只允许我导入由单独的外部 JavaScript文件定义的模块.我通常更喜欢内联用于初始渲染的一些脚本,因此它们的请求不会阻止页面的其余部分.使用传统的非正式结构库,可能如下所示:
/inline-traditional.html
<body>
<script>
var example = {};
example.example = function() {
document.body.appendChild(document.createTextNode("hello"));
};
</script>
<script>
example.example();
</script>
但是,天真地内联模块文件显然不起作用,因为它会删除用于将模块标识到其他模块的文件名.HTTP/2服务器推送可能是处理这种情况的规范方式,但它仍然不是所有环境中的选项.
是否可以使用ECMAScript模块执行等效转换？有没有办法<script type="module">在同一文档中导入另一个模块导出的模块？
我想这可以通过允许脚本指定文件路径,并且表现得好像它已经从路径下载或推送一样.
/inline-name.html
<script type="module" name="/example.js">
export function example() {
document.body.appendChild(document.createTextNode("hello"));
};
</script>
<script type="module">
import {example} from '/example.js';
example();
</script>
或者可能通过完全不同的参考方案,例如用于本地SVG refs:
/inline-id.html … 我的 HTML 中有一个带有模块类型的脚本标签，它导出一个变量：
<script type="module">
var life = 42;
export { life };
</script>
如何life从其他脚本标签或 Chrome 控制台访问以进行调试？
我希望我的用户能够在我的JavaScript应用程序中使用JavaScript作为脚本语言.为此,我需要动态执行源代码.
动态执行JavaScript似乎有两个主要选项:
a)使用eval(...)方法(或var func = new Function(...);).
b)<script>向DOM 添加节点(例如,使用$('body').append(...)).
只要我不在import动态执行的源代码中使用任何语句,这两种方法都可以正常工作.如果我包含import语句,我会收到错误消息Unexpected identifier.
要执行的示例用户源代码:
import Atom from './src/core.atom.js':
window.createTreeModel = function(){
var root = new Atom('root');
root.createChildAtom('child');
return root;
}
示例应用程序代码,用于说明该动态代码的可能用法:
a)使用eval
var sourceCode = editor.getText();
window.createTreeModel = undefined;
eval(sourceCode);
var model = window.createTreeModel();
treeView.setModel(model);
b)使用DOM修改:
var sourceCode = editor.getText();
window.createTreeModel = undefined;
var script = "<script >\n"+
sourceCode + "\n" +
"</script>";
$('body').append(script);
var model = window.createTreeModel(); …