Question

我一直在使用knockoutjs和backbone来创建单页JavaScript应用程序。我使用骨干模型和淘汰视图模型，但我也有很多UI控件，我已经使用jQuery UI小部件工厂来创建。

我的问题是如何更好地构建我的jQuery小部件中的代码。像knockout / backbone / ember这样的框架可以很容易地在主应用程序中实现MVC类型模式，但是当涉及到小部件开发时，我最终会拥有一大堆输出和操作DOM元素的代码。我仍然可以测试这个，因为jquery可以很容易地查询DOM，但代码非常难看。理想情况下，我也想在我的小部件中使用MVC模式。

是否有任何图书馆或框架可以帮助解决这个问题？

Answer 1

简而言之：

尽可能保持小部件与MVC的视图部分一样多。尽可能将数据委派出来。
不要将您的小部件写入您的应用中。像小岛一样对待小部件。
使用事件处理从窗口小部件传出的数据。不要查询它。
在小部件中使用"Tell, Don't ask"模式以保持控制器清洁

理想情况下，JQuery是整个应用程序的MVC模式的V部分。如果小部件需要在用户与之交互时保留并返回数据，那么事件就是可行的方法。在窗口小部件中使用"Tell, don't ask"开发模式，这样您就不必查询窗口小部件的状态来执行某些操作。这应该清理许多问题。

Answer 2

我只能帮助MVC中的“V”部分:) 制作DOM，我喜欢OOCSS概念，每个类都继承父级属性，但你可以将它们集成在一起。

OOCSS

<div class="mod"> 
    <b class="top"></b>
    <div class="inner">
        <div class="bd"></div>
    </div>
    <b class="bottom"></b> 
</div>

https://github.com/stubbornella/oocss/wiki/Module

jQuery UI

<div class="ui-widget ui-widget-content">
  <div class="ui-widget-header"></div>
  <div class="ui-widget-content"></div>
</div>

http://jqueryui.com/docs/Theming/API

混合OOCSS和jQuery UI

<div class="mod ui-widget ui-widget-content">
  <div class="top ui-widget-header"></div>
  <div class="inner ui-widget-content"></div>
  <div class="bottom ui-widget-footer ?"></div> 
</div>

Answer 3

框架有所帮助，但没有它们可以解决这些原则。我通常会在自我执行的匿名函数中构建我的小部件和/或私有函数中的方法，这些函数为我提供了我正在寻找的分离。如果窗口小部件变大，将图层拆分成不同的文件会有所帮助，尽管这可能会使最终产品的使用变得更加困难。

Answer 4

这在很大程度上取决于你对jQuery小部件的意思。如果你的小部件只包含一些小东西，比如增加HTML元素功能的东西（即文本框的自动完成功能），那么你最好还是很好地构建你的插件并正确to test it。尽量保持简单。 MVC模式将是一个开销，因为人们通常只想获取一个js文件并在他们的项目中引用它。

相反，如果你想开发一个Backbone风格的MVC应用程序，JavaScriptMVC可能就是你想要的。

Answer 5

我已经通过以下方式阅读了您的问题，但我可能会偏离主题，所以警告经纪人。

在将代码分解为独立的代码单元方面，您可能需要考虑使用AMD将它们全部重新引入。就个人而言，我不是语法的粉丝，但从实用的角度来看，也许这会有所帮助，就好像你决定将你的巨大的mongo文件分解成离散的可重用单元一样，你可能会看到很多将功能单元隔离到独立文件中，并通过简单的方法确保依赖关系以正确的顺序加载。

顺便说一下，一旦你将依赖关系解析固定下来，你可能会对PureMVCJS作为组织原则进行检查感兴趣 - 它像许多其他MVC框架一样，提供了将代码分解为可恢复层的方法或垂直切片。开箱即用，它独立于任何DOM或OOP抽象库，这取决于你想要实现的目标，是一个恩惠（我可以改变我的DOM抽象库而不破坏我的服务）或痛苦（我必须在我的DOM库和PureMvc视图之间编写一个集成层），但我发现它很有用（然后，我可能会有偏见，因为，在完全公开的精神中，我是其中一个作者端口）。

无论如何，希望这有帮助。

jQuery小部件开发 - 我可以使用MVC模式吗？

5 个答案:

OOCSS

jQuery UI

混合OOCSS和jQuery UI