我应该学习什么样的架构才能做出好的基于JavaScript的软件？

Question

我非常了解Model-View-Controller，我已经知道它很多年了，并将它用于服务器端的PHP等语言的开发。

然而，我现在正在使用JavaScript，并利用SVG、Canvas和其他现代浏览器支持的强大功能来构建一个大型应用程序。这个项目很大，所以它背后的架构不能是脆弱的。

JavaScript和MVC不像一座着火的房子，因为JavaScript是由自然事件驱动的。那么，有没有什么架构或者其他我一定要学习、理解和实现的东西呢？

软件将不得不处理数据。它已经利用了本地存储和web SQL数据库。我需要一个模特，对吧？有UI，所以我有视图？但是，我有控制器吗？那么事件呢？我该如何组织所有的东西？

架构，架构，架构--这就是我感兴趣的。我对我选择的语言很满意。

Answer 1

首先，我是JavaScriptMVC的作者，所以我在很多方面都非常偏颇。首先，在JS应用程序中，您会做一些类似的事情：

1. 加载脚本
2. 响应用户事件
3. 从服务器更新DOM
4. 请求数据
5. 将该数据转换为对前端业务逻辑有用的数据

您对架构的选择可能取决于您想要/需要的工具。

对于一般架构，我确实认为分离关注点很重要。

我强烈建议你找到一些做依赖管理和客户端模板的方法。它们会让你的生活变得轻松许多。

JavaScriptMVC使用分层的MVC方法，这在很大程度上是基于自定义UI事件和OpenAjax事件。

我使用$.Controller构建低级小部件的方式与构建jQuery小部件的方式类似。最大的区别在于，这些小部件生成一个顶级控制器可以监听的非ui事件。例如，选项卡小部件可能会产生一个"tab.activate“事件，如下所示：

$('.tab').trigger('tab.activated')

然后，我的高阶控制器可能会侦听tab.activated事件，并使用模型更新选项卡内容，如下所示：

".flickr tab.activated" : function(tabEl, ev){
  Flickr.findAll({type : "rainbows"}, function(images){
    tabEl.html("//path/to/view", images );
  }
}

Flickr.findAll本质上是查询flickr消息，然后使用图像列表进行回调。将服务/ajax功能与模型包装在一起可以使它们更具可重用性。

您会注意到，在回调中，我用视图中呈现的内容更新了tab元素的html。这可能不是“最好”的方法，但我想要一个快速的例子。更好的做法是将呈现的输出传递给tabs控制器，这样它就可以随心所欲地处理它。这样，如果你的标签想要在某一天淡入内容，它将能够并且你的主控制器不必知道标签的实现。

最重要的事情是将你的应用程序分解成尽可能小的部分。让它们单独可测试(和灵活)，并在您的应用程序开发过程中将这些小部分组合成更大的部分。

Answer 2

看看Ext JS吧。它有一个干净的架构，非常适合于高度复杂的javascript应用。

数据处理和服务器通信是通过存储完成的。数据呈现是通过网格(使用单元格内编辑器)和表单(使用一组丰富的表单控件)来完成的，它们都可以与商店对话。还有一组用于抽象CSS定位的布局类(边框布局、框布局、表格布局、表单布局等)。

然而，它不是典型意义上的MVC。这个库鼓励一种编程风格，避免处理太多的超文本标记语言和CSS，让你(大部分)生活在纯JavaScript的土地上。你最终会考虑组件和数据，而不是单独的dom元素和样式规则。如果你不喜欢这种方法，请注意，你不会喜欢这个库的。

Answer 3

在我看来，MVC仍然是未来的发展方向。如果你正在寻找一个好的框架来帮助你更轻松地实现这一点，我会看看JavaScript MVC，它有模型，视图，控制器，单元测试，jQuery支持等。