javascript - 如何在不使用 eval() 的情况下从字符串运行 javascript 对象

Question

我有一个包含项目类型和 ID 的 json 对象，我需要创建新对象

var data = { 
            "items":[
                    {"type":"generator","id":"item_1","x":200,"y":200},
                    {"type":"battery","id":"item_2","x":50,"y":300},
                    {"type":"generator","id":"item_3","x":200,"y":280},
                    {"type":"battery","id":"item_4","x":100,"y":400}
                ]
        };

我需要为 items 中的每个项目运行

jQuery.each(data.items, function(index,value) {
    eval("var " + value.id + " = new " + value.type + "(" + (index + 1) + ");");
    eval(value.id + ".id = '" + value.id + "';");
    eval(value.id + ".draw(" + value.x + "," + value.y + ");")
});

这不是一个好的做法，但是我还能做什么？

然后我需要控制这些项目

类似的东西

    item_1.moveto(300,700);

但我总是得到 item_1 未定义

Answer 1

您可以创建一个工厂方法，它允许从抽象数据结构生成具体类型:

var createItem = (function () {
    var types = {};

    function createItem(index, data) {
        data = data || {};

        var ctor = types[data.type], item;

        if (!ctor) throw new Error("'" + data.type + "' is not a registered item type.");

        item = new ctor(index);

        item.id = data.id;

        return item;
    }

    createItem.registerType = function (type, ctor) {
        types[type] = ctor;
    };

    return createItem;

})();

然后将项目类型注册到工厂:

function Generator(index) {/*...*/}

createItem.registerType('generator', Generator);

最后创建一个对象映射来按 id 查找您的项目(您可以使用 ItemsMap 等专用对象而不是普通对象)，循环遍历您的项目并将它们添加到映射中。

var itemsMap = {};

data.items.forEach(function (itemData, i) {
    var item = itemsMap[itemData.id] = createItem(i + 1, itemData);

    //you can also draw them at this point
    item.draw(itemData.x, itemData.y);
});

您现在可以通过 ID 查找对象，例如:

var item1 = itemsMap['item_1'];