javascript/jquery創建一個小部件和使用繼承

Question

我一直玩jquery一兩個星期了，並有類似hackey長滿的例子。它需要結構 - 我已經在Java中使用過MVC等等，但是我發現很難將我的大型.js文件翻譯成許多不同的和邏輯上分離的視圖。

在這些視圖中，我希望能夠創建某些小部件（其基本上是一個具有幾個按鈕和一些可拖動行爲的div）的實例。顯然，我希望能夠利用繼承的優勢，因爲某些長大的div可以分享相同的特性。

我知道如何在Java中做到這一點，但我似乎無法讓我的頭在JavaScript內。我可以得到一個觀點，我可以分離一個函數調用，理論上這個函數會碰到類似於控制器的東西。在這一點上，我繼續檢查父div等的某些樣式，然後做了很多appendTo到特定的div，從而創建我的組件。

總之，我該如何創建一個小部件並在我的jquery頂部的javascript中引用它。我不確定爲它定義對象並創建事件處理程序等。我想我一直是js的黑客太久了！

如果你想知道我目前的代碼類似，請參閱http://jqueryui.com/demos/droppable/#photo-manager我已經基本上添加了一些其他droppables，並且必須確定div im拖動到什麼div然後做各種事情。再次，它有點hackey。我想讓它更加設計一些。

我已經開始看Backbone.js之類的東西了，但是我想告訴你如何正確地創建我的小部件。

非常感謝SO

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

老實說，我不會試圖結合Widget開發瓦特/ jQuery的;它從來沒有被設計成一個框架解決方案，它只是作爲一個DOM api設計的。由一位JS開發人員撰寫的這篇博文解釋了爲什麼jQuery對此不利：http://blog.rebeccamurphey.com/on-jquery-large-applications

我會推薦使用已經存在的用於創建模塊化小部件的框架。對於jQuery應用程序，存在JavascriptMVC（http://javascriptmvc.com/）。我個人使用了Dojo Toolkit，它提供了一個強大而強大的Widget框架，稱爲Dijit。這個框架提供了您在一個優秀的DOM API上所要求的一切，它與jQuery和Dojo Core庫一樣強大和快速。許多企業應用程序使用它來創建其Web UI。它還提供對il8n（國際化），a11y（可訪問性）等的支持。

Dojo Toolkit的：http://dojotoolkit.org/

寫作Dijit的小工具：http://dojotoolkit.org/reference-guide/quickstart/writingWidgets.html#quickstart-writingwidgets

基本上超越了jQuery的widget開發其他框架。