面向对象的javascript最佳实践问题:我应该如何为以下内容配置对象

Question

我决定我需要提高我的javascript编程技能，以及我的面向对象技能。我目前正在阅读一些书，但有时如果不先看一些实际的例子，就很难掌握理论。因此，对于以下场景，我有一个关于“最佳实践”的理论问题……

我想创建一个OO脚本，显示从服务器检索到的搜索标记记录的列表。我还希望能够编辑每个搜索标签记录的地方。

目前，在jQuery库的帮助下，我正在程序化地执行此操作：

我接受来自服务器的搜索标记记录的JSON编码列表。它看起来是这样的：

[
   { "searchTagName" : "tagOne", "searchTagID" : "1" },
   { "searchTagName" : "tagTwo", "searchTagID" : "2" },
   { "searchTagName" : "tagThree", "searchTagID" : "3" },
   etc...
]

我将JSON直接转储到jTemplates中以创建适当的html，如下所示：

$("#searchTagList")
   .setTemplateElement("template_searchTagList")
   .processTemplate(searchTagData);

最后，我希望可以使用edit-in-place方法修改每个searchtag，因此我将一个预先构建的edit-in-place方法附加到每个html元素：

$(".searchTag").editInPlace();

这在程序上工作得很好。也许最聪明的事情就是不去管它。:)但是，为了便于讨论，从面向对象的角度来看，编写这样的代码的最佳方式是什么。

我是否应该有一个单独的对象"searchTagList“，为上面讨论的每个步骤提供方法？

var searchTagList = 
{
    searchTagData: JSONdata,
    renderList: function () { /*send to jTemplates */ }
    bindEdit: function() { /* attach edit-in-place */ }
}

或者这是不正确的？(看起来我所做的一切就是将过程函数包装在一个对象中。)我是否应该以某种方式将JSON数据解析为每个搜索标记的实例，然后将单独的方法附加到每个搜索标记？(这似乎是很大的开销，没有任何收益。)

如果我看起来像是在吹毛求疵，请提前道歉。但我真的很想把这件事搞清楚。

谢谢,

特拉维斯

Answer 1

实际上，您发布的jQuery示例不是程序化的，它们是面向对象的。具体地说，它们是来自面向对象设计的流体编程学校的可链接对象的实现。

Procedual应该是这样的：

var el = cssQuery("#searchTagList");
var templateObject = makeTemplate(el,"template_searchTagList");
processTemplate(templateObject,searchTagData);

函数式应该是这样的：

processTemplate(
    makeTemplate(
        cssQuery("#searchTagList"),
        "template_searchTagList"
    ),
    searchTagData
);

jQuery在对象化DOM方面做得很好。可以将其用作您自己的OO DOM库的灵感。我建议你考虑的另一个是YUI3 (YUI2是非常过程化的)。

具体地说，jQuery和YUI3的一般模式是：

nodeListConstructor(query_string).nodeMethods();

它们定义了一个类似OO的节点对象来包装DOM HTMLElements，然后定义了另一个OO样式的nodeList对象来允许您对节点进行批处理。在我看来，这是一个很好的设计模式。

Answer 2

你可以在这里使用Javascript Module pattern来达到很好的效果。

根据该模式，您的searchTagList定义将更改为：

var searchTagList = function() {
    searchTagData: JSONdata;
    return {
    renderList: function () { /*send to jTemplates */ },
    bindEdit: function() { /* attach edit-in-place */ }
   };
}();

renderList和bindEdit这两个函数仍然可以访问searchTagData，但是searchTagList模块之外的代码仍然无法访问它们。

注意，匿名函数立即执行并返回一个对象，其中包含两个公共方法( renderList和bindEdit )，这两个方法在私有成员searchTagData上形成一个closure。

您可以阅读有关模块模式here的更多信息。