加入收藏 | 设为首页 | 会员中心 | 我要投稿 惠州站长网 (https://www.0752zz.com.cn/)- 办公协同、云通信、物联设备、操作系统、高性能计算!
当前位置: 首页 > 编程 > 正文

JavaScript 客户端 MVC 框架****

发布时间:2018-04-25 08:13:57 所属栏目:编程 来源:伯乐在线
导读:副标题#e# 15 年前,许多人都使用 Perl 和 ColdFusion 之类的工具构建网站。我们经常编写可以在页面顶部查询数据库的脚本,对数据应用必要的转换,以及在同一个脚本底部显示数据。这类架构适合于向网站添加简单的 Contact us 表单。然而,随着应用程序变得

Spine.js 和 Backbone.js 两者之间最主要区别是它们处理服务器交互的方式。Backbone.js 在显示响应之前将等待服务器响应。如果试图删除、插入或更新某个元素,用户界面 (UI) 直到操作成功完成才会刷新。而 Spine.js 侧重于即时更新 UI,而且在进行后台处理时处理 Ajax 服务器。这种更新是一种非常重要的实践,也是在这两种优化的拥有良好编档的流行框架之间选择时需要考虑的的主要因素。

如果您的目标是创建一种客户端体验,而对服务器状态的更新是次要的,那么 Spine.js 可能是一种更好的选择。如果仍然使用服务器来检查状态变化的有效性则 Backbone.js 可能更适合。Spine.js 提供了响应性更好的 UI。但是,如果显示成功删除某个元素,只是让服务器发送一个响应,不允许您删除该项,因为该项正在被其他人使用,那么会发生什么?针对这个问题存在一些应急方案,但是通常来讲 Spine.js 更加适合用户操作自有(而非共享)数据。Spine.js 的一个常见用例就是购物车,其中所有验证都可以在客户端处理。

Knockout

人们可能会争论目前为止讨论的这些工具是否是原本意义上的真正的 MVC 框架。Knockout 明确实现了模型-视图-视图-模型 (MVVM),而不是经典的 MVC。但是,不要因此而妨碍到您的决策制定。在选择框架时,更重要的是查看所提供的功能而非首字母缩略词或分类。

Knockout.js 在熟悉 MVVM 模型的 Microsoft .NET 开发人员之间特别受欢迎。对于主要问题是将模型状态通过声明的方式绑定到视图用例,Knockout.js 是非常好的选择。Knockout.js 对于前面提到的示例待办事项应用程序是非常理想的选择,该应用程序的主待办事项列表的子集都有自己的视图,在删除某个待办事项后需要更新所有的列表。

在 Knockout.js 中,您将创建模型、视图模型和视图。与在 Spine.js 和 Backbone.js 中一样,负责处理业务逻辑、验证和与远程服务器交互的 Ajax(假设您不仅仅是创建一个本地应用程序)。视图模型代码负责保留和操作模型数据。例如一个视图模型可能包含添加、编辑以及从列表中删除内容项的方法。视图模型非常贴近于传统的 MVC 架构中的控制器。视图就是一些模板,包含将信息呈现到屏幕的标记。在 Knockout.js 中,这些可以通过声明的方式绑定到视图模型(方便入门)。一些学员可以在一个小时内掌握并使用 Knockout,并可在三个小时内构建非凡 (non-trivial) 应用程序。

一般来讲,Knockout.js 比较适合较小、较简单的项目。人们往往将 Backbone.js 或 Spine.js 用于更大、更复杂的项目。也就是说,有经验的 Knockout.js 开发人员可以创建非常复杂、同时又易于维护的应用程序。如果考虑使用 Knockout.js,您也应当考虑 Angular.js 和 Sammy.js(参见 参考资料),后两者是两种相对轻量级、易于启动的框架。

Batman.js

Batman.js 是一种有趣的新框架,由 JSConf 在 2011 年推出,但是又经过了几个月的时间才能够通过下载获取。Batman.js 已经开始受到一些喜欢并得到开发 MVC 应用程序的程序员的关注。表面上看,Batman 在易于入门、支持视图声明绑定方面与 Knockout.js 类似。Batman.js 提供了一些其他功能,包括可选的全栈 (full-stack) 框架,用于自动代码生成器、构建工具甚至后端 Node.js 服务器代码,可以实现您的服务器端 API。

和 Knockout.js 一样,Batman.js 也使用视图绑定。清单 3展示了一些样例视图代码。

清单 3. Batman.js 中的视图代码示例

<ul id=“items">

<li data-foreach-todo=“Todo.all” data-mixin=“animation”>

<input type=“checkbox” data-bind=“todo.isDone” data-event-change=“todo.save” />

<label data-bind=“todo.body” data-addclass-done=“todo.isDone”

data-mixin=“editable”></label>

<a data-event-click=“todo.destroy">delete</a>

</li>

<li><span data-bind=“Todo.all.length”></span>

<span data-bind=“‘item’ | pluralize Todo.all.length”></span></li>

</ul>

(编辑:惠州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读