JavaScript客户端MVC框架 详解不同框架用法

  次阅读 作者:智能小宝 来源:互联网 2016-01-26 10:29 我要评论(0)

15 年前,许多人都使用 Perl 和 ColdFusion 之类的工具构建网站。我们经常编写可以在页面顶部查询数据库的脚本,对数据应用必要的转换,以及在同一个脚本底部显示数据。这类架构适合于向网站添加简单 的Contact us表单。然而,随着应用程序变得更加复杂,这种方法无法进行相应的扩展来处理更大的复杂问题。大部分 Web 应用程序现在已经对模型-视图-控制器 (MVC) 架构进行了标准化,使用单独的代码实现业务逻辑、显示逻辑和用户交互(路由)逻辑。涌现出从 Spring MVC 到 Rails 的各种框架可以帮助您快速实现基于 MVC 的 Web 应用程序。

JavaScript客户端MVC框架 详解不同框架用法 三联

几年前,jQuery 是用于构建客户端 JavaScript 应用程序的主流库。然而,随着应用程序中的 JavaScript 的复杂性日益增加,jQuery 成为一项处理复杂性的必要不充分技术。例如,用于待办事项 (to-do) 列表的单页面应用程序可以包含一个紧急待办事项列表、一个完整的待办事项列表、一个当日待办事项列表,以及一个过期待办事项列表。在删除某个待办事项时会 怎样?如果任务很紧急但已过期,您可能需要手动编写代码来从视图中的三个或四个不同位置中删除该事项。如果删除某个对象后需要您删除或更改屏幕上显示的其 他相关对象,这样复杂性就会变得无法控制。

客户端 MVC 框架旨在解决此类问题,并且大多数框架都表现出色。但是您如何从许多 JavaScript 客户端 MVC 框架中选择合适的框架。本文将从较高的层面简要介绍其中一些最流行的框架。以及如何针对给定的用例选择合适的框架。

Backbone.js

在使用率方面,Backbone 是目前为止最流行的客户端 MVC 框架。它被广泛应用于各个开发社区,Rails 开发人员对它的采用率一直较高,并出现了许多广受欢迎的资源,比如 thoughtbot(一家备受尊敬的 Rails 咨询公司)推出了 Backbone on Rails(参见 参考资料)。Backbone.js 的优势在于它与具象状态传输 Web 服务实现了良好的集成。如果您对后端数据使用 RESTful JavaScript Object Notation (JSON) 模型并遵循 Backbone 所期望的约定(与 Rails 中的约定匹配),那么您不需要编写任何代码就可以将 Backbone 连接到服务器,从而节省大量的时间。

在 Backbone 中,应用程序包含集合(用户或文章)、模型(单个用户或文章)、视图和路由器。Backbone.js 中的视图是非预定的 (nonprescriptive),允许您使用自己喜欢的 JavaScript 模板或框架。路由器结合了 Rail 风格的路由器和一个传统的 MVC 控制器,负责获得给定的 URL 并通知框架要运行的代码。清单 1 中的 Backbone.js 路由器代码给出了一个示例。

清单 1. 样例 Backbone.js 路由器代码

var Workspace = Backbone.Router.extend({

routes: {

help :help , // #helpsearch/:query :search , // #search/kiwissearch/:query/p:page :search// #search/kiwis/p7 },

help: function() {

....

},

search: function(query, page) {

.....

}

});

Backbone.js 附带了一个 Underscore.js 副本。Underscore.js 是一组实用工具,可以通过更加功能化的方式简化 JavaScript 的编写,并支持一系列有用的基于集合的操作。它还包括 Backbone.history,后者可以帮助您巧妙地处理页面导航。

Backbone.js 主要优势在于它与服务器的自动集成。如果这样做适合您的用例,那么学习如何使用 Backbone.js 将是值得的。您可以通过一些框架在一两个小时之内初步掌握可能需要花一到两天学习的Backbone.js 基础知识。这非常适合比较大的项目,这类项目至少持续几周的时间。

Backbone.js 仍然算不上一种完好的解决方案。您可能需要编写相当数量的代码来处理潜在的内存泄露等问题。您还可能需要试验几种方法来查看呈现内容,之后才能找到真正满足需求的方法。

Spine.js

Spine.js 通常与 Backbone.js 进行比较;它受到 Backbone.js 的影响,并在使用率方面与前者接近。Spine.js 包含类、模型、控制器和视图,这比 Backbone.js 引入的集合更加传统一些。

Spine.js 使用 CoffeeScript(参见 参考资料)编写,这使它更加简练且(依我看来)更易于读取源代码。要了解 Spine.js 如何工作,您需要熟悉 CoffeeScript。然而,您不必使用 CoffeeScript 构建 Spine.js 应用程序。但是,如果已使用 CoffeeScript 进行了构建,您可以访问 CoffeeScript 特性(如类)。CoffeeScript 使用原型继承而非经典继承,因而无法支持在本地 JavaScript 中的类。CoffeeScript 使用了一些非常标准的模式,为希望使用它们的开发人员提供类。如果使用纯 JavaScript 编写 Spine.js 应用程序,您只需使用 ,后者使您不需要编写 CoffeeScript 代码就可以访问类。

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...