複数の<script>それぞれ独自の有効範囲を持つタグ

Question

複数の<script>タグをプログラムで生成する必要があり、それぞれ異なるパラメータを除いてほぼ同じです。そう例：この例では

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

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

最初のスクリプトは、その生成されたコードの印刷に「1」のパラメータ値が「1」コンソールに、2番目のスクリプトは、「2」のパラメータ値を有しています。

私はこの質問を今まで知っていますが、多くの優れたプログラマーの感性を害するでしょう。それはもちろん非常に簡素化されており、私はこの問題の範囲を超えて理由でこれを行う必要があります。

私が理解しているように、これらの<script>タグはグローバルスコープを共有するため、そのfooの実装は競合します。 1つの修正点は、それらを別々に指定することです。 foo1およびfoo2。実際には、私はそのような多くの機能を持っており、もっと良い方法があるのだろうかと思っています。

fooの実装が競合しないように、それぞれの<script>タグを独自の有効範囲に囲むのに良い方法はありますか？私は別のライブラリやプリプロセスなどをせずに、ネイティブJavaScriptだけでこれを行うことを好むでしょう。

Answer 1

私はあなたがやりたいための唯一の方法は、あなたが両方のインスタンスでこれを行う場合、それは所望の効果を持っている必要があり、自己実行機能

<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> 

であなたのコードをラップすることだと思います。 オプションの場合は、同じスクリプトタグ内に両方のフラグメントを持つこともできます。

Answer 2

問題がより複雑で何らかの理由で名前空間を分離したい場合は、オブジェクトを作成することができます。

その後

<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 

私はあなたの問題のすべての側面を知りませんが、あなたが最善の解決策:)