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!

人工智能实验室
相关文章相关文章
  • Michael I. Jordan带你解读百万奖金ATEC蚂蚁人工智能大赛

    Michael I. Jordan带你解读百万奖金ATEC蚂蚁人工智能大赛

  • 2018深圳国际人工智能展览会 2018 shenzhen International Artif

    2018深圳国际人工智能展览会 2018 shenzhen International Artif

  • teamLab创始人猪子寿之: 抛去衣食住行,我还剩下什么?

    teamLab创始人猪子寿之: 抛去衣食住行,我还剩下什么?

  • Oculus公布原型机,大幅度提升可视角,能实现140°的视场水平

    Oculus公布原型机,大幅度提升可视角,能实现140°的视场水平

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

据外媒报道,STEER打造了首款完全自动驾驶停车技术,旨在使常规车辆转变为无人驾驶车辆。STEER的首款技术应用是4级自动驾驶及网络安全停车...

近日,美国软性机器抓手制造商 Soft Robotics 宣布,获得 2000 万美元的融资,本轮投资者包括 Scale Venture Partners,Calibrate Ventures...

据外媒报道,加州车管局发布了《2017自动驾驶脱离报告(California Autonomous Vehicle Disengagement Reports)》,其中谈及了脱离的具体...

用人机语音交互,来解决智能家居适老的问题;通过家庭门禁与安防套件、空气净化套件、可燃气体与有害气体监控套件等相互联动,在不同生活情...