jQuery widget 开发 - 我可以使用 MVC 模式吗?

jQuery widget development - can I use an MVC pattern?

本文关键字：MVC 模式 可以使 widget 开发 我可以 jQuery      更新时间：2023-09-26

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

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

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

简而言之：

  • 尽可能多地保留小部件作为 MVC 的视图部分。尽可能将数据委派出去。
  • 不要在编写小部件时倾向于它位于您的应用程序中。 将小部件视为一座孤岛。
  • 使用事件来处理从小部件传出的数据。不要查询它。
  • 在小部件中使用"告诉，不要询问"模式来保持控制器清洁

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

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

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

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

我只能帮助MVC中的"V"部分:)制作 DOM，我提倡 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>

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

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

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

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

相关文章：