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

Question

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

我想创建一个 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);

最后我希望可以使用就地编辑方法来修改每个搜索标签，因此我将预构建的就地编辑方法附加到每个 html 元素：

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

这在程序上非常有效。也许最聪明的事情就是让自己一个人呆着。 :) 但是，为了争论，从面向对象的角度来看，写这样的东西的最佳方法是什么。

我应该有一个对象“searchTagList”，其中包含上述每个步骤的方法吗？

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

或者说不正确？ （似乎我所做的只是将我的程序函数包装在一个对象中。）我是否应该以某种方式将 JSON 数据解析为每个搜索标签的实例，然后将单个方法附加到每个搜索标签？ （这似乎是很多开销，没有任何收获。）

如果我似乎在挑毛病，请提前道歉。但我真的很想把这些东西直接记在脑海里。

谢谢，

特拉维斯

Answer 1

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

程序类似于：

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

函数式类似于：

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

jQuery 在对象化 DOM API 方面做得非常好。可以将它作为自己的 OO DOM 库的灵感。我建议您查看的另一个是 YUI3（YUI2 非常程序化）。

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

nodeListConstructor(query_string).nodeMethods();

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

Answer 2

您可以在这里使用 Javascript 模块模式来获得良好的效果。

根据该模式，您的 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。