多个<script>标记,每个标记都有自己的范围

时间:2017-04-07 03:07:36

标签: javascript

我需要以编程方式生成多个&lt; script&gt; 标记,除了参数不同之外,每个标记几乎相同。例如:

&#xA;&#xA;
 &lt; script&gt;&#xA; function foo(){console.log('1'); }&#XA; / *许多非常复杂的代码调用foo()* /&#xA;&lt; / script&gt;&#xA;&#xA;&lt; script&gt;&#xA; function foo(){console.log('2'); }&#XA; / *许多非常复杂的代码调用foo()* /&#xA;&lt; / script&gt;&#xA;  
&#xA;&#xA;

在这个例子中第一个脚本的参数值为“1”,因此其生成的代码将“1”打印到控制台,而第二个脚本的参数值为“2”。

&#xA;&#xA;

我知道这个问题到目前为止会冒犯许多优秀的程序员的敏感性。它当然大大简化了,我需要这样做,原因超出了这个问题的范围。

&#xA;&#xA;

据我所知,这些&lt; script&gt; 标签将共享全局范围,因此它们的 foo 实现将发生冲突。一种解决方法是单独命名,例如, foo1 foo2 。实际上我有很多这样的功能,我想知道是否有更好的方法。

&#xA;&#xA;

有没有一种好方法可以将每个&lt; script&gt; 标签在自己的范围内,以便 foo 实现不冲突?我更喜欢这样做,没有任何单独的库或预处理等 - 只需使用原生JavaScript。

&#xA;

2 个答案:

答案 0 :(得分:4)

我认为做你想做的事的唯一方法就是将你的代码包装在一个自动执行的函数中

<script>
(function () {
    function foo() { console.log('1'); }
    /* lots of very complicated code which calls foo() */
})();
</script>

<script>
(function () {
    function foo() { console.log('2'); }
    /* lots of very complicated code which calls foo() */
})();
</script>

如果你在两个实例中都这样做,那么它应该具有所需的效果。 如果这是一个选项,它还可以选择将两个片段放在同一个脚本标记中。

答案 1 :(得分:0)

如果您的问题更复杂,并且由于某种原因您希望将命名空间分开,则可以创建对象。

<script>
var scope1 = (function (){
  return{
    foo: function () {console.log('1');}
  }
})();
</script>

<script>
var scope2 = (function (){
  return{
    foo: function () {console.log('2');}
  }
})();
</script>

然后(在全球范围内使用):

scope1.foo(); //prints 1
scope2.foo(); //prints 2

我不知道你问题的所有方面,希望你找到最好的解决方案:)