面向对象的 Javascript 与纯 jQuery 和 .data 存储

Question

我目前的编程风格是使用 John Resig 的 Class.extend 函数的 OO javascript：http://ejohn.org/blog/simple-javascript-inheritance/

这很好，但我发现自己编写了许多只在 init 上使用的 setter 和 getter。此外，在将这些对象的实例存储在数组中以供以后使用时，似乎会导致 IE 中的内存泄漏。

我开始偏爱更小、更干净、更易读的代码，而不是看似矫枉过正的 OO 方法。我的想法是现在使用 jquery 将所有内容都基于 dom，并使用 .data 方法存储数据属性。例如，您无需创建新的 Tweet 对象的实例，而是只需将 div 添加到具有类 tweet 的 dom 中，并在 .data 缓存中添加诸如作者、时间戳、回复、发送自等属性。那个dom元素。

在创建诸如 twitter 等流中的项目之类的事物实例时，您如何看待这种结构较少的方法？ OO 和原型继承是最好的方法还是严格的 dom 操作更好？

Answer 1

我正在做类似的事情。我采用了 OO javascript 方法。但是我没有使用数组，而是使用键值对象。 key 是唯一的 dom 元素 id，value 是对象本身。它看起来像这样。

例如：

var collection = {};
var $domEl = jQuery;              // jquery dom element
var myClass= new MyClass($domEl); // class instance

// add to collection
collection[$domEl.attr('id')] = myClass;

// remove
delete collection[$domEl.attr('id')];

实际上，这取决于您的对象的复杂性。严格的 .data 方法需要依赖于所有相关方法的插件，然后将数据存储在元素数据中。我有很多方法与严格的元素交互无关，所以我将方法和数据保留在类中。

Answer 2

我的大脑告诉我，不依赖 DOM 操作和使用 jQuery 调用和调用它的非常结构化的 Javascript 将是理想的。

但是，我刚刚编写了一个 HTML5 网络应用程序，它使用内置的 SQLlite 离线运行，主要使用 .data 并将信息存储在 div 中并将它们从那里取出。它简单、干净、容易，但由于某种原因感觉不对。

但效果很好。