Question

这是我正在处理的更复杂的事情的简化代码。代码可以工作，但它的某些部分感觉不对。我想知道是否有更好的方法来完成某个部分。

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功能中的内容。由于我无法重新构建一切，我认为除非有人能想出更好的方法，否则我必须做的事情。谢谢！

Answer 1

这就是我如何处理这个问题：

<input value="0" onchange="change(this)"/>

我所做的不是为每个人创造一个功能，而是创造了一系列人。所以它实际上是一个视图模型（来自MVVM模式）。然后<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>对象是一个单独的对象，它不会被克隆，但只是作为可重用函数的存储库，这些函数由您在运行时创建的小部件重用

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

Answer 2

由于您已经规定您可以/想要更改的唯一代码是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/

调用对象特定实例函数的JavaScript字符串文字

2 个答案: