这个Javascript函数有效吗？

Question

我有一个节点列表，它们是 html li 元素

<ul id="nodesList">
   <li id="node_1">Node 1</li>
   <li id="node_2">Node 2</li>
   <li id="node_3">Node 3</li>
   <li id="node_4">Node 4</li>
   <li id="node_5">Node 5</li>
</ul>

我有一个管理这些节点的 javascript 函数

(function (nodesManager) {
    var nodes = [];
    nodesManager.requestNode = function(id) {
        if (nodes[id]) {
            return nodes[id];
        }

        nodes[id] = new Node(id);
        return nodes[id];
    }
} (window.nodesManager = window.nodesManager || {}));

var Node = function(id) {
    instance = this;

    var node = $("#node_" + id);

    this.changeName = function(newValue) {
        node.text(newValue);
    };

    // and other nodes specific functions

    var _properties = null;
    this.getProperties = function () {
        if (_properties !== null)
            return _properties;

        var response = null;
        $.ajax({
            cache: false,
            async: false,
            type: "GET",
            url: '/Nodes/NodeProperties', // json object { "dateCreated": "10 minutes ago", "createdBy": "Mike" }
            data: { node_Id: id },
            success: function (data, textStatus) {
                if (data.hasError) {
                    alert(data.message);
                } else {
                    response = data;
                }
             },
             error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert('ajax error');
             }
        });
        _properties = response;

        return _properties;
    };
        this.resetProperties = function () {
            _properties = null;
        };
    }


$("#nodesList").delegate("li", "click", function() {
    var node_Id = $(this).attr("id").replace("node_", "");

    var newNodeName = "I am a new value";
    nodesManager.requestNode(node_Id).changeName(newNodeName);
});

我的问题是，如果 Node 对象中的 changeName 函数会影响性能？

是否为用户选择的每个节点创建？

将它放在nodesManager 函数中以便只实例化一次更好吗？或者这没关系...

什么对我来说很重要

function getNodeCreatorUserName(id) {
    var properties = nodesManager.requestNode(id).getProperties();
    var userName = properties.createdBy;

    // do something with userName
};
function getNodeDateCreated(id) {
    var properties = nodesManager.requestNode(id).getProperties();
    var dateCreated = properties.dateCreated;

    // do something with dateCreated
};

getNodeCreatorUserName("1"); 
getNodeDateCreated("1");     // No server side call will be made because properties are already stored in Node object

Answer 1

就您关心的性能问题（请记住，对于少量节点而言差异几乎不明显），您应该选择原型而不是闭包，因为它们（高达 >50%）更快，请参阅：

Javascript prototype operator performance: saves memory, but is it faster?

http://blogs.msdn.com/b/kristoffer/archive/2007/02/13/javascript-prototype-versus-closure-execution-speed.aspx

http://ejohn.org/blog/simple-class-instantiation/

Answer 2

Node 已在 window 中定义，您可能应该将其命名为其他名称。

试试这样的：

function MyNode (id) {
   this.node = $("#node_" + id);
}

MyNode.prototype.changeName = function(newValue) {
    this.node.text(newValue);
};

Answer 3

如果你真的想压缩周期...

(function (nodesManager) {
    var nodes = [];
    nodesManager.requestNode = function(id) {
        // reduce number of checks
        return nodes[id] !== undefined ? nodes[id] : nodes[id] = new Node(id);
    }
} (window.nodesManager = window.nodesManager || {}));

$("#nodesList").delegate("li", "click", function() {
    // no need to wrap this in jQ just to get the id
    var node_Id = this.id.replace("node_", "");

    var newNodeName = "I am a new value";
    nodesManager.requestNode(node_Id).changeName(newNodeName);
});

如果您真的想让这段代码更高效，而不是压缩循环，我们需要更深入地了解它试图实现的目标。