是否可以从HTML文件中的特定脚本标记引用函数或对象？

Question

假设HTML文件中有以下代码：

<script id='tag-1'>
  function foo(){
    alert("this is foo-1");
  }
</script>

<script id='tag-2'>
  function foo(){
    alert("this is foo-2");
  }
</script>

<script id='tag-3'>
  function foo(){
    alert("this is foo-3");
  }
</script>

是否可以使用id foo从脚本标记调用函数tag-2？我只是想知道有没有跨浏览器的解决方案？谢谢各位。

好的，我们有两个非常相关的建议--一个是我标记的接受答案，另一个是这个帖子下面的严格评论--一个是@dfsq提议的。谢谢大家！

Answer 1

是的，这是完全可能的，但是您应该使用一种类型而不是text/javascript。

<script id='tag-1' type="myScriptHolder">
  function foo(){
    alert("this is foo-1");
  }
</script>

<script id='tag-2' type="myScriptHolder">
  function foo(){
    alert("this is foo-2");
  }
</script>

<script id='tag-3' type="myScriptHolder">
  function foo(){
    alert("this is foo-3");
  }
</script>

<script>
$.globalEval($('#tag-1').text();
</script>

Answer 2

不，如果不诉诸eval()，那是不可能的。

由于每个脚本块都是由浏览器计算的，函数的以前版本将被覆盖。

您可以访问每个<script>标记的文本上下文，但前提是它是内联的。访问<script src="...">标记的源需要AJAX。

Answer 3

不，这不可能。同一个窗口中的所有Javascript代码共享相同的命名空间，因此在示例中所做的只是简单地覆盖foo，这意味着最终您只有"foo-3“。

iframes每个都有自己的名称空间，但是使用iframes这样的名称空间是没有意义的。

如果函数只需要相应的脚本，那么您可以将每个脚本封装在一个自动执行的函数中。

(function() {
  function foo(){
    alert("this is foo-1");
  }
})();

这意味着foo将无法从该脚本外部访问，这显然可能对您有用，也可能不适用于您，这取决于函数的使用位置。

唯一的其他选择是为函数创建自己的名称空间，例如：

var namespace1 = {};
namespace1.foo = function foo() {...}