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

Question

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

这个方法一直表现良好，但我发现自己写了很多只在初始化时使用的setter和getter。此外，当将这些对象的实例存储在数组中以备后用时，它似乎会导致IE中的内存泄漏问题。

我现在更喜欢小而干净、易读的代码，而不是看起来过于复杂的面向对象方式。我的想法是现在只基于jquery操作dom，并使用.data方法存储数据属性。例如，不再创建新的Tweet对象的实例，而是仅向dom添加一个class为tweet的div，并在该dom元素的.data缓存中简单地添加属性，如作者、时间戳、回复、发送源等。

您认为这种不太结构化的方法在创建流式内容（例如Twitter）中的项目实例时如何？面向对象和原型继承是否是最佳方法，还是严格的dom操作更好呢？

- Abadaba

Answer 1

我正在做类似的事情。我采用了面向对象的JavaScript方法。但是，我没有使用数组，而是使用键值对象。 键 是唯一的DOM元素ID，值 是对象本身。它看起来像这样。

例如：

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 方法需要依赖于所有相关方法的插件，然后将数据存储在元素数据中。我有许多与元素交互无关的方法，因此我将方法和数据保存在类中。

- Josiah Ruddell

Answer 2

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

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

但它运行良好。

- Ryan Doom

---

但是如果它干净、简单、快速和高效，为什么感觉不对呢？因为这不是最佳实践吗？ - Abadaba

是的，感觉好像我把我的显示/前端和代码逻辑混在一起了。直接将数据存储到DOM中感觉很奇怪。与将其保存在JS对象中相比。 - Ryan Doom