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

我一直在使用knockoutjs和主干创建一个单页JavaScript应用程序。我使用主干模型和淘汰视图模型，但我也有很多UI控件，我使用jQueryUI小部件工厂创建了这些控件

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

有没有专门设计的库或框架可以帮助解决这个问题？

我只能帮助MVC中的“V”部分：） 在制作DOM时，我预先提出了OOCSS概念，其中每个类继承父类的属性，但您可以将它们集成在一起

OOCSS

jQuery用户界面

混合OOCSS和jqueryui

框架有帮助，但没有它们，原则也可以解决。我通常会在我的小部件和/或自执行匿名函数内的私有函数中构建方法，以实现我想要的分离。如果小部件变大，将层拆分为不同的文件可能会有所帮助，尽管这可能会使最终产品的消费更加困难。

这在很大程度上取决于您所说的jQuery小部件。如果你的小部件只是由一些小的东西组成，比如一些增强HTML元素功能的东西（例如，文本框的自动完成功能），那么你最好把你的插件设计得很好，很好。尽可能简单。MVC模式将是一种开销，因为人们通常只喜欢获取一个

js

文件并在项目中引用它

---

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

我已经用下面的方式阅读了你的问题，但我可能偏离了主题，所以请注意

在将代码拆分为独立的代码单元时，您可能需要考虑使用它们将它们重新拉回来。就我个人而言，我不喜欢这种语法，但从实用的角度来看，这可能会有所帮助，就像你决定将巨大的mongo文件分解成离散的可重用单元一样，您可能会看到，将功能单元隔离到独立文件中，并有一种简单的方法确保您的依赖项以正确的顺序加载，会带来很多好处

顺便说一句，一旦确定了依赖项解析，您可能会有兴趣将其作为一种组织原则进行检查——它提供了一种方法，就像许多其他MVC框架一样，可以将代码分解为可恢复的层或垂直切片。开箱即用，它独立于任何DOM或OOP抽象库，这取决于您试图实现的目标，可能是一件好事（是的，我可以在不破坏服务的情况下更改DOM抽象库），也可能是一件痛苦的事（我必须在DOM库和PureMvc视图之间编写一个集成层），但我发现它很有用（再说一次，我可能有偏见，因为本着充分披露的精神，我是《港口》的作者之一）

总之，希望这能有所帮助。

简而言之：

• 尽可能将小部件作为MVC的视图部分。尽可能将数据委托出去
• 不要在你的应用程序中编写你的小部件，把它当作一个孤岛
• 使用事件处理从小部件传递出去的数据。不要查询它
• 使用小部件中的模式保持控制器干净

---

理想情况下，JQuery是整个应用程序MVC模式的V部分。如果您的小部件需要在用户与它们交互时保留和返回数据，则事件处理是一种方法。在小部件中使用开发模式，这样您就不必查询小部件的状态来执行某些操作。这应该可以清理许多问题问题。

问得好！我一直在寻找同样的东西。大多数时候都是“小部件”指的是不需要处理复杂数据的简单ui元素。据我所知，jQuery ui的widget factory或Dojo的数字系统是您最好的选择。对于更复杂的问题，您已经回答了自己的问题：主干/knockout/javascriptmvc/等等。如果您找到了更好的解决方案，请在这里发布，因为我很想听听您的想法.同样的疑问！首先也是最重要的是，我不知道你（或任何人）到底在做什么“widget”是指“widget”…听起来很酷…它是什么？没有太清楚的想法？定义它-你从50个人那里得到100个定义…期待一些好的答案-关于widget和原始问题。@ParthThakkar“widget”我指的是客户端控制，我说widget是因为他们在jQuery UI中称它为“widget”我正在使用的构建控件的工厂。但是是的。控件，控件。谁cares@nicholas我有用于浏览/选择/搜索分层数据的控件，以及用于分组选择的控件。我想创建一个可重用的控件，我想因为这些控件一开始就相当简单，所以使用jquery是有意义的widget factory。随着复杂性的增加，使用MVC模式会很好，但仍然能够将其打包为jquery控件/小部件。我刚刚制作了带有主干视图的小部件，以便尽可能将其作为MVC代码。例如，这里有一个。似乎工作得很好，但我觉得有点奇怪，因为我没有使用它e以这种方式使用BB视图的许多其他示例，而不是用于更大更复杂的视图。其他人有想法或经验为什么这可能不是一个好主意？

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

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

<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>