javascript / jquery创建一个小部件并使用继承[关闭]

Question

我已经用 jquery 玩了一两个星期了，并且有一些类似于 hackey 杂草丛生的例子。它需要结构——我之前在 java 等中使用过 MVC。但我发现很难将我的大型 .js 文件转换为许多不同且逻辑分离的视图。

在这些视图中，我希望能够创建某些小部件的实例（它基本上是一个带有几个按钮和一些可拖动行为的 div）。显然，我希望能够利用继承，因为某些过度生长的 div 具有相同的特征。

我知道如何在 Java 中做到这一点，但我似乎无法在 javascript 中理解。我可以达到一个点，我可以隔离一个函数调用，理论上它会碰到类似于控制器的东西。在这一点上，我继续检查父 div 等的某些样式，然后对特定 div 执行大量 appendTo 操作，从而创建我的组件。

简而言之，我如何创建一个小部件并在我的 jquery 顶级 javascript 中引用它。我不确定是否要定义对象并为其创建事件处理程序等。我想我做 js 的黑客太久了！

如果您想了解我当前的代码是什么样的，请参阅http://jqueryui.com/demos/droppable/#photo-manager 我基本上添加了许多其他可放置对象，并且必须确定我要拖动到哪个 div，然后执行各种操作。再一次，它有点骇人听闻。我想让它更有设计感。

我已经开始研究 Backbone.js 之类的东西，但我想就如何正确创建我的小部件提出建议。

非常感谢所以

Answer 1

我也在处理一个危险增长的 jQuery 应用程序。

我发现 Alex Sexton 的这篇文章很有帮助：http://alexsexton.com/?p=51 它还说您不应该害怕为自己的页面创建自己的专用 jQuery 插件来构建您的代码（和您的页面）。

我还阅读了很多关于 Javascript 中的类继承模式的文章，但我发现 Douglas Crockfords 的建议是最明智的：“因为 JavaScript 中的对象非常灵活，所以您需要对类层次结构有不同的看法。深层次结构是不合适的。浅层次结构高效且富有表现力。” http://www.crockford.com/javascript/inheritance.html.

因此，您的脑海中可能有一个 MVC 类型模式，但尝试使用尽可能少的对象层次结构来实现它。

Answer 2

老实说，我不会尝试将小部件开发与 jQuery 结合起来；它从未被设计为框架解决方案，它仅被设计为 DOM api。 JS 开发人员的这篇博文解释了为什么 jQuery 对此不好：http://blog.rebeccamurphey.com/on-jquery-large-applications

我建议使用已经存在的框架来创建模块化小部件。对于 jQuery 应用程序，存在 JavascriptMVC (http://javascriptmvc.com/)。我个人使用 Dojo Toolkit，它提供了一个健壮而强大的小部件框架，称为 Dijit。这个框架在一个强大的 DOM api 之上提供了你所要求的一切，它与带有 Dojo 核心库的 jQuery 一样强大和快速。许多企业应用程序使用它来创建 Web UI。它还支持 il8n（国际化）、a11y（可访问性）等。

Dojo 工具包：http://dojotoolkit.org/

编写 Dijit 小部件：http://dojotoolkit.org/reference-guide/quickstart/writingWidgets.html#quickstart-writingwidgets

基本上，除了 jQuery 之外，还可以使用其他框架进行小部件开发。