动态加载多个JS脚本,其中脚本的描述完全相同

时间:2022-12-06 09:30:19

I have an interesting problem that I'm unsure how best to solve.

我有一个有趣的问题,我不确定如何最好地解决。

I have JS scripts which contain the following:

我有JS脚本,其中包含以下内容:

   var obj = new namespace.MyObjectName("key", [12, 11, 22, 33, 454, 552, 222], [33, 22, 33, 11, 22, 222, 111]);

   namespace.MyObjectName = function(keyName, data1, data2) {
    this.myData1 = data1;
    this.myData2 = data2;

    this.holder = [
        [keyName, [myData1, myData2]]
    ];
   };

   namespace.MyObjectName.prototype.DoSomething = function(arg1, argArray) {
    this.globalVar = [
      "Display " + arg1 + " into string using " + argArray[0] + "<br> for visual purposes",

      "Display " + arg1 + " into string using " + argArray[2] + "<br> for visual purposes"
    ];
   };

Automation is creating copies of these JS files, each containing the same declaration of the object as per above, with filenames along the lines of:

自动化正在创建这些JS文件的副本,每个文件包含与上面相同的对象声明,文件名的行如下:

  • file1.js
  • file2.js

The per file difference is that the DoSomething method name contents are always different/generated, as are the array values passed to the constructor.

每个文件的区别在于DoSomething方法名称内容始终不同/生成,传递给构造函数的数组值也是如此。

All of the above was just fine during the life of that JS being used standalone.

在JS独立使用的整个生命周期中,所有这些都很好。


What I want to do now is have an HTML page load 1 or more of these files dynamically (for later comparison by code to be written), for which I'll probably go with this answer, however since each script declares the object the same way, I am faced with figuring out how to stop them trampling over one another when I load multiple copies.

Here are some options I am considering:

以下是我正在考虑的一些选项:

  1. Write the JS in such a way that each script file object is uniquely namespaced, but when loaded registers itself somehow with a master piece of JS code in the HTML which holds onto all the object references
    • Write the HTML in such a way that each script is loaded in a fenced-off way (insofar as i know, there isn't a way to do this in JS, but I could be wrong)
    • 编写HTML的方式是每个脚本都以隔离的方式加载(就我所知,在JS中没有办法做到这一点,但我可能是错的)

    • Some other method(s) unknown that people might have ideas on
    • 其他一些不为人知可能有想法的方法

  2. 以这样的方式编写JS,即每个脚本文件对象都是唯一的命名空间,但是在加载时会以某种方式在HTML中注册一段JS代码并保存在所有对象引用上。以每个脚本都是这样的方式编写HTML以隔离的方式加载(就我所知,在JS中没有办法做到这一点,但我可能是错的)其他一些方法未知人们可能有想法

My current bias is towards (1) but I'm putting the whole thing out for discussion since that approach might have inherent problems or others may be clearly demonstrated as superior.

我目前的偏见是(1)但是我把整个事情都放在讨论之中,因为这种方法可能会有固有的问题,或者其他方面可能会被证明是优越的。

2 个解决方案

#1


Regarding (2), it's possible to run javascript in a sandbox by using an iframe, check out for instance Dean Edwards' Sandbox.eval() or the Slickspeed Selectors Test.

关于(2),可以使用iframe在沙箱中运行javascript,例如检查Dean Edwards的Sandbox.eval()或Slickspeed选择器测试。

#2


I dont really understand the problem, but to avoid the trampling of the namespace you could do:

我真的不明白这个问题,但为了避免践踏命名空间,你可以做到:

var namespace = namespace || function() {}

#1


Regarding (2), it's possible to run javascript in a sandbox by using an iframe, check out for instance Dean Edwards' Sandbox.eval() or the Slickspeed Selectors Test.

关于(2),可以使用iframe在沙箱中运行javascript,例如检查Dean Edwards的Sandbox.eval()或Slickspeed选择器测试。

#2


I dont really understand the problem, but to avoid the trampling of the namespace you could do:

我真的不明白这个问题,但为了避免践踏命名空间,你可以做到:

var namespace = namespace || function() {}