Backbone.js轻量级框架 Wine Cellar开发教程

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

构建重要 Web 应用程序所面临的其中一个挑战是,JavaScript 的不定向特性首先可能导致代码结构缺失,或者换句话说就是缺乏主干。JavaScript 通常被写成一连串自由悬挂的无关代码块,要不了多久人们将很难理解自身代码的逻辑和结构。

Adobe Creative Cloud

您可以免费注册Adobe创意云服务。Creative Cloud上还提供了诸多HTML5开发工具,包括可以免费下载HTML5动画制作工具Edge Animate,开发工具Edge Code,移动应用测试工具Edge Inspect等。

Creative Cloud的登录地址在此:http://t.cn/zTbTLKT

构建重要 Web 应用程序所面临的其中一个挑战是,JavaScript 的不定向特性首先可能导致代码结构缺失,或者换句话说就是缺乏主干。JavaScript 通常被写成一连串自由悬挂的无关代码块,要不了多久人们将很难理解自身代码的逻辑和结构。

Backbone.js 是一个轻量级框架,它通过向具有大量 JavaScript 的 Web 应用程序添加框架有效解决了这一问题。

独立构建基块

Backbone.js 提供了若干类(模型、集合、视图及路由器),您可以借此扩展定义自己的应用程序构建基块。要使用 Backbone.js 构建应用程序,请首先创建应用程序的模型、集合和视图。然后定义通过一组(深层链接)URL 提供应用程序入口点的 路由器 来激活这些组件。

您可以借助 Backbone.js 组织独立实体(模型、集合和视图)的代码,简单来说,独立实体是指不再含有自由悬挂的无关代码块。

数据绑定

您可以借助 Backbone.js 将视图绑定至模型,这样,当某个模型的数据发生更改时,绑定至该模型的所有视图均将自动重新呈现。不再需要复杂的 UI 同步代码。

巧妙的 REST 集成

Backbone.js 还能够自然、神奇而又巧妙地与 RESTful 服务集成。如果您纯粹通过 RESTful API 公开后端数据,则使用 Backbone.js 的简单模型 API 执行检索 (GET)、创建 (POST)、更新 (PUT) 及删除 (DELETE) 模型操作将变得非常简单。

关于 Wine Cellar 示例应用程序

本教程分为三个部分,我们将在此教程中创建 Wine Cellar 应用程序,从而让用户浏览葡萄酒列表,并添加、更新和删除葡萄酒。

(1)在本文 Backbone.js Wine Cellar 教程第一部分:入门 中,您将会定义基本结构。您将为该应用程序创建一个 只读 版本。这样就能检索葡萄酒列表并获取每种葡萄酒的详细信息。

(2)在 Backbone.js Wine Cellar 教程第二部分:CRUD 教程第二部分:CRUD 中,您将会添加代码功能以添加、更新及删除葡萄酒。您可以利用 Backbone 的强大 REST 集成功能。

(3)在 Backbone.js Wine Cellar 教程第三部分:深层链接和应用程序状态中,您将增加全面的历史记录管理和深层链接支持。

图 1. Wine Cellar 应用程序

只读 Wine Cellar 应用程序代码演练

要查看第一部分的工作版本(应用程序只读版本),请单击此处。

backbone.js 的代码如下所示。我建议您从我的源代码管理网站下载代码以进行深入了解。此应用程序的链接位于本教程的要 求部分。

图 2. backbone.js 代码。

代码重点:

1.WineModel(第 2 行):请注意,该代码没有明确定义属性(名称、国家/地区、年份等)。您可以添加验证、默认值,以此类推。在第二部分:CRUD 中了解更多信息。

2.WineCollection(第 4 行至第 7 行): 模型 表示集合的性质。 url 提供 RESTFul API 的终端。这就是需要使用 Backbone 的简单模型 API 检索、创建、更新及删除葡萄酒所需的全部组件。

3.WineListView(第 10 行至第 25 行):render() 函数循环访问集合,实例化集合中的每种葡萄酒的 WineListItemView,并将其添加至 wineList。

4.WineListItemView(第 27 行至第 38 行):render() 函数将模型数据合并至 wine-list-item 模板(在 index.html 中进行定义)。通过定义单独的列表项视图,您将能够在支持模型发生更改时轻松更新特定的列表项,而无需重新呈现整个列表。请在第二部 分:CRUD 中查看有关该内容的更多信息。

5.WineView(第 40 行至第 49 行):该视图用于显示葡萄酒表单中的葡萄酒详细信息。render() 函数将模型数据(某款特定的葡萄酒)合并至从 index.html 检索而来的 wine-details 模板。

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

人工智能实验室
相关文章相关文章
  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

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

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

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

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

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

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

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

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

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

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

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

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