2

htmlli要素であるノードのリストがあります

<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
4

3 に答える 3

1

Nodeはですでに定義されているwindowので、おそらく別の名前で呼び出す必要があります。

次のようなものを試してください。

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

MyNode.prototype.changeName = function(newValue) {
    this.node.text(newValue);
};
于 2012-04-20T06:39:36.113 に答える
1

パフォーマンスの問題に関する限り（ノードの数が少ない場合はほとんど違いが見られないことに注意してください）、クロージャーよりもプロトタイプを選択する必要があります。これは、（最大> 50％）高速であるためです。を参照してください。 ：

Javascriptプロトタイプオペレーターのパフォーマンス：メモリを節約しますが、より高速ですか？

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

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

于 2012-04-20T06:48:35.933 に答える
1

あなたが本当にサイクルを絞りたいのなら...

(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);
});

スクイーズサイクルを超えて、コードのチャンクを本当に効率的にしたい場合は、それが何を達成しようとしているのかについて、より多くの洞察が必要になります。

于 2012-04-20T07:08:50.463 に答える