我决定我需要提高我的 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();

这在程序上非常有效。也许最明智的做法是不去管它。 :) 但是，为了争论起见，从 OO 的 Angular 来看，编写这样的东西的最佳方法是什么。

我是否应该有一个单独的对象“searchTagList”，其中包含用于上述每个步骤的方法？

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

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

如果我觉得我挑剔毛发，请提前致歉。但我真的很想把这些东西记在脑子里。

谢谢，

特拉维斯

最佳答案

实际上，您发布的 jQuery 示例不是过程性的，它们是面向对象的。具体来说，它们是来自 OO 设计的 Fluid Programming 流派的可链接对象的实现。

程序会是这样的:

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 对象以允许您批处理节点。在我看来，这是一个很好的设计模式。

关于javascript - 面向对象的 JavaScript 最佳实践问题 : How should I configure my objects for the following，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2261802/