javaScript字符串字面呼叫函数为对象的特定实例

这是我正在处理的更复杂事情的简化代码。该代码有效，但其某些部分感觉不正确。我想知道是否有更好的方法来完成此操作的某个部分。

https://jsfiddle.net/fkyly3of/36/

window.getRandomInt = function (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};
window.mySingleton = {
    runMe: function(obj) {
        var uid = getRandomInt(0, 999999);
        // START OF CODE IN QUESTION
        window.mySingleton['whoAmI' + uid] = function() {
            alert(obj.firstName);
        };
        document.getElementById('x').innerHTML += '<input type="button" onclick="window.mySingleton.whoAmI' + uid + '()" value="Click Me">';
        // END OF CODE IN QUESTION
    }
};
//simulate launching panel xyz
var person1 = new Object();
person1.firstName = "John";
window['mySingleton']['runMe'](person1);
//simulate launching a second instance of panel xyz
var person2 = new Object();
person2.firstName = "Jane";
window['mySingleton']['runMe'](person2);

我的问题是关于注释之间的代码。当我有一个像这样的JavaScript字符串时，我该如何获取它来引用对象的正确实例？该代码有效，第一个按钮准确地引用了John和第二个参考Jane。但是使用此方法，如果启动了20个面板，则将创建20个whoAmI的版本。

obj =一个空的dhtmlx窗口。

singleton =进入obj(dhtmlx窗口(的屏幕(网格，表格等(。

我只能在runMe函数中编辑内容。由于我无法重新搜索我认为上述的一切，除非有人能想到更好的方法。谢谢！

，因为您已经规定了您可以/要更改的代码是runMe函数，所以我将您的代码更改为类似的内容：

window.mySingleton = {
    runMe: function(obj) {
        var xElement = document.getElementById('x');
        var button = document.createElement('input');
        button.type = 'button';
        button.value = 'Click Me';
        xElement.appendChild(button);
        button.onclick = function(){
          alert(obj.firstName);
        }
        // END OF CODE IN QUESTION
    }
};
//simulate launching panel xyz
var person1 = new Object();
person1.firstName = "John";
window['mySingleton']['runMe'](person1);
//simulate launching a second instance of panel xyz
var person2 = new Object();
person2.firstName = "Jane";
window['mySingleton']['runMe'](person2);

以这种方式，您将onclick设置为实际函数，而不是将字符串串联在一起以制作具有字符串函数的元素。这是您调用您在runMe中定义的函数，而无需将该函数实际附加到全局范围。

编辑：忘记添加JSFIDDLE。这里：https：//jsfiddle.net/nzifnab/fkyly3of/48/

这就是我要解决这个问题的方式：

<html>
<body>
  <div id="x">
  </div>
<script>
    window.people = [];
    window.createButton = {
      init: function(obj) {
        document.getElementById('x').innerHTML += '<input type="button" onclick="window.createButton.show(' + obj.index + ')" value="Click Me">';
      },
      show: function(uid) {
        console.log(window.people);
        alert(window.people[uid].firstName);
      }
    };
    //simulate launching panel xyz
    var person1 = new Object();
    person1.firstName = "John";
    person1.index = window.people.length;
    window.people.push(person1);
    window.createButton.init(person1);
    //simulate launching a second instance of panel xyz
    var person2 = new Object();
    person2.firstName = "Jane";
    person2.index = window.people.length;
    window.people.push(person2);
    window.createButton.init(person2);
</script>
</body>
</html>

我所做的是不是为每个人创建一个函数，而是创建了一系列人。因此，它实际上是一种视图模型(来自MVVM模式(。然后，createButton对象是一个不会被克隆的单个对象，但仅充当可重复使用函数的存储库，该函数由您在运行时创建的小部件重新使用。

。

这是jsfiddle：https：//jsfiddle.net/r35zam1e/1/

相关内容

最新更新

热门标签：