Question

使用system.js时，从全局范围访问函数的正确方法是什么？例如，假设我们有这个HTML：

<form onsubmit="foo">
<input type="text" name="name" placeholder="name">
</form>
<script src="/lib/system.js"></script>
<script>
SystemJS.import("/src/foo.js");
</script>

我们有这个javascript：

function foo(form) { console.log("here"); }

如何让SystemJS导出foo，以便在提交表单时调用它？

Answer 1

怎么样：

<form onsubmit="return foo(this);">
<input type="text" name="name" placeholder="name">
</form>
<script src="/lib/system.js"></script>
<script>
SystemJS.import("/src/foo.js");
</script>

foo应返回true或false，以表明该表单是否应由action属性提交。由于缺少这一点，我认为false就在这里。

Answer 2

我没有使用过system.js，但是简要介绍一下他们的文档告诉我，import调用会返回一个promise，该promise将被导入的模块的命名空间解析。也许你可以尝试类似的东西：

<form onsubmit="foo">
<input type="text" name="name" placeholder="name">
</form>
<script src="/lib/system.js"></script>
<script>
SystemJS.import("/src/foo.js")
.then(function(foo){
  window.foo = foo;
});
</script>

或者，如果您想避免污染全局命名空间：

<form id="foo-form">
<input type="text" name="name" placeholder="name">
</form>
<script src="/lib/system.js"></script>
<script>
SystemJS.import("/src/foo.js")
  .then(function(foo){
    document.getElementById('foo-form')
            .addEventListener('submit', function(ev){
                foo(...arguments);
                ev.preventDefault();
                return false;
            });
  });
</script>

从HTML访问system.js中定义的函数

2 个答案: