16

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

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

是否有任何旨在帮助解决此问题的库或框架？

4

5 回答 5

1

In short:

  • Keep widgets as much as a view part of the MVC as you can. Delegate the data out whenever possible.
  • Don't write your widget with the predisposition of it being in your app. Treat the widget like a an island.
  • Use Events to handle data passing out of the widget. Don't query for it.
  • Use "Tell, Don't ask" pattern in widgets to keep the controller clean

Ideally, JQuery is the V part of the MVC pattern of your overall application. If widgets you have need to retain and return data when the user interacts with them, eventing is the way to go. Use the "Tell, don't ask" pattern of development in your widgets so that you don't have to query the state of your widgets to do something. This should clean up many of the issues.

于 2012-05-18T15:10:32.997 回答
0

这在很大程度上取决于您所说的 jQuery 小部件是什么意思。如果您的小部件仅包含一些小的东西，例如增强 HTML 元素功能的东西（即文本框的自动完成功能），那么您最好构建好插件并正确测试它。尽可能简单。MVC 模式在那里会产生开销，因为人们通常只是喜欢获取一个js文件并在他们的项目中引用它。

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

于 2012-05-14T06:28:20.723 回答
0

我只能帮助 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 用户界面

<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>
于 2012-04-26T10:00:26.360 回答
0

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

于 2012-05-08T04:38:42.663 回答
0

我已经通过以下方式阅读了您的问题，但我可能会偏离主题，所以请注意购买者。

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

顺便说一句，一旦确定了依赖关系解析，您可能有兴趣将PureMVCJS作为一种组织原则进行检查——它提供了与许多其他 MVC 框架一样将代码分解为可重复使用的层或垂直切片的方法。开箱即用，它独立于任何 DOM 或 OOP 抽象库，根据您要实现的目标，它是一个福音（是的，我可以在不破坏我的服务的情况下更改我的 DOM 抽象库）或痛苦（我必须在我的 DOM 库和 PureMvc 视图之间编写一个集成层），但我发现它很有用（再说一遍，我可能有偏见，因为本着全面披露的精神，我是港口）。

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

于 2012-05-14T20:53:32.330 回答