AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

《BackboneJS框架的技巧及模式》(4)完结篇

2013-10-16 894
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 八、PUT需要一个ID属性 这一条也经常会对那些Backbone.js新手造成困扰。要想在调用.save()的时候让模型发送一个HTTP PUT请求，你的模型需要有一个ID属性集。

八、PUT需要一个ID属性

这一条也经常会对那些Backbone.js新手造成困扰。要想在调用.save()的时候让模型发送一个HTTP PUT请求，你的模型需要有一个ID属性集。记得HTTP PUT谓词是设计用做更新的吧，所以发送一PUT请求，你的模型需要有一个ID。在理想情况，你的所有模型都有一名为ID的完美ID属性，但是你从端点接收到的JSON数据或许并不总是有完美命名的ID。

因此，如果你需要更新一个模型，在保存前确保模型上带有ID。Backbone.js从0.5版开始允许使用idAttribute来修改模型ID属性的名称，如果端点返回的不是名为id的ID属性名时。

如果使用的Backbone.js版本低于0.5，建议你修改模型或集合的parse函数，以便将期望的ID属性映射到属性ID。这里有一个快速上手的例子，说明了应怎样修改parse函数来做到这一点。我们假设你有一个cars的集合，它的ID属性名是carID。


[javascript]   view plain copy print ?
  1. parse: function(response) {  
  2.   
  3.     _.each(response.cars, function(car, i) {  
  4.         // map the returned ID of carID to the correct attribute ID  
  5.         response.cars[i].id = response.cars[i].carID;  
  6.     });  
  7.   
  8.     return response;  
  9. },  

九、在页面加载是插件模型数据


有时你会发现模型或集合需要在页面加载时进行初始化。许多关于Backbone.js模式的文章，例如Rico Sta Cruz的“Backbone模式”和Katz的“避免常见的Backbone.js陷阱”，讨论了这种模式。这种模式实现很容易，只需在页面中内联一段脚本，通过你选择的服务端语言，将单个模型属性或者JSON形式的数据呈现出来。例如，在Rails语言中，我采用下面的一种方法：


[javascript]   view plain copy print ?
  1. // a single attribute  
  2. var model = new Model({  
  3.     hello:   
  4. });  
  5. // or to have json  
  6. var model = new Model();  

应用此模式可以通过“立即”渲染页面，以改善你网站的搜索引擎排名，而且它也可通过限制应用初始化HTTP请求的方式，大幅缩短应用启动与运行所需的时间。


十、处理失败的模型属性验证

很多时候，你会想知道是哪个模型属性验证失败了。例如，如果你有一个极其复杂的表单字段，你或许想知道哪一个模型属性验证失败了，以便于你可以将该属性对应的输入字段进行高亮显示。不幸的是，警告视图到底是哪个模型属性验证失败并没有直接集成于Backbone.js，但是你可以用其他不同的模式去处理这个问题。

1、返回一个错误对象

一个通知视图是哪个模型属性验证失败的模式是，返回一个对象，其中包含某种标志，它详细的记录了验证失败的属性，就像下面这样：


[javascript]   view plain copy print ?
  1. // Inside your model  
  2. validate: function(attrs) {  
  3.     var errors = [];  
  4.   
  5.     if(attrs.a 
  6.         errors.push({  
  7.             'message': 'Form field a is messed up!',  
  8.             'class': 'a'  
  9.         });  
  10.     }  
  11.     if(attrs.b 
  12.         errors.push({  
  13.             'message': 'Form field b is messed up!',  
  14.             'class': 'b'  
  15.         });  
  16.     }  
  17.   
  18.     if(errors.length) {  
  19.         return errors;  
  20.     }  
  21. }  
  22. // Inside your view  
  23. this.model.on('invalid’, function(model, errors) {  
  24.     _.each(errors, function(error, i) {  
  25.         $(‘.’ + error.class).addClass('error');  
  26.         alert(error.message);  
  27.     });  
  28. });  

此模式的优点在于，你可以在一个地方处理所有无效的消息。缺点在于，如果你用不同的invalid属性处理无效属性，那么你的invalid方法里面可能会有非常庞大的switch语句或if语句。


2、广播自定义的Error事件

我的朋友Derick Bailey推荐了一个可替代的模式，就是为每个模型属性触发自定义的errors事件。它允许你的视图能够针对单独的属性绑定特定的error事件：


[javascript]   view plain copy print ?
  1. // Inside your model  
  2. validate: function(attrs) {  
  3.   
  4.     if(attrs.a 
  5.             this.trigger(‘invalid:a’, 'Form field a is messed up!', this);  
  6.     }  
  7.     if(attrs.b 
  8.             this.trigger(‘invalid:b’, 'Form field b is messed up!', this);  
  9.     }  
  10. }  
  11. // Inside your view  
  12. this.model.on('invalid:a’, function(error) {  
  13.         $(‘a’).addClass('error');  
  14.         alert(error);  
  15. });  
  16. this.model.on('invalid:b’, function(error) {  
  17.         $(‘b’).addClass('error');  
  18.         alert(error);  
  19. });  

此模式的优点在于，你的视图绑定的error类型是清晰的，并且对于每一种error属性，可以有特定的指令，它可以使得视图方面的代码很清晰，使之更易于维护。此模式的缺点在于，视图的代码可能会变得极为膨胀。


这两种模式都各有利弊，你应该考虑清楚哪个模式对你的应用案例是最优的。如果你按照同样的方式处理所有失败的验证，那么第一个方法可能是最好的；如果你对每个模型属性有特定的UI变化，那么后一种方法会更好。

十一、HTTP状态码200触发错误

如果终端的模型或集合收到了无效的JSON，尽管终端返回了HTTP状态码200，模型或集合还是会触发error事件。这种问题经常发生于开发阶段在本地模拟JSON数据造成的。那么，有个好方法是抛出经过 JSON 验证器验证了的模拟JSON数据文件。或者使用IDE的插件来及时捕获格式错误的JSON数据。

十二、创建通用的错误显示

这能够节省开发时间以及创建统一的模式来处理和可视化错误消息，而且它可以改善整个的用户体验。我之前开发的每一个Backbone.js应用中，我都会创建一个通用的警告视图：


[javascript]   view plain copy print ?
  1. var AlertView = Backbone.View.extend({  
  2.     set: function(typeOfError, message) {  
  3.         var alert = $(‘.in-page-alert’).length ? $(‘.in-page-alert’): $(‘.body-alert’);  
  4.         alert  
  5.             .removeClass(‘error success warning’)  
  6.             .addClass(typeOfError)  
  7.             .html(message)  
  8.             .fadeIn()  
  9.             .delay(5000)  
  10.             .fadeOut();  
  11.     }  
  12. });  

上面代码首先会检查视图代码中是否存在指定in-page-alert视图的DIV元素。如果没有，则接着查看通用的body-alert的DIV元素，它可以在布局中进行声明。这可以交付一致性的错误信息给用户，而且一旦你忘记指定in-page-alert视图的DIV元素，它会有一个有用的反馈。下面的模式简化了怎样在试图中处理错误信息：



[javascript]   view plain copy print ?
  1. var alert = new AlertView();  
  2.   
  3. this.model.on('error', function(model, error) {  
  4.     alert.set('TYPE-OF-ERROR', error);  
  5. });  

十三、单页面应用中更新页面标题


如果你正在开发一个单页面应用，切记要更新每个页面的标题。我写过一个简单的插件（Backbone.js Router Title Helper），它以简单、优雅的格式扩展了 backbone.js router 的功能。它通过一个 Map 对象来控制路由，键来代表路由函数的名字，值则映射到页面的标题。

[javascript]   view plain copy print ?
  1. Backbone.Router = Backbone.Router.extend({  
  2.   
  3.     initialize: function(options){  
  4.         var that = this;  
  5.   
  6.         this.on('route', function(router, route, params) {  
  7.   
  8.             if(that.titles) {  
  9.                 if(that.titles[router]) document.title = that.titles[router];  
  10.                 else if(that.titles.default) document.title = that.titles.default;  
  11.                 else throw 'Backbone.js Router Title Helper: No title found for route:' + router + ' and no default route specified.';  
  12.             }  
  13.         });  
  14.     }  
  15. });  

1、在单页应用中缓存对象


当谈论单页应用时，缓存对象的模式会经常用到！下面的例子简明扼要：


[javascript]   view plain copy print ?
  1. // Inside a router  
  2. initialize: function() {  
  3.   
  4.     this.cached = {  
  5.         view: undefined,  
  6.         model: undefined  
  7.     }  
  8. },  
  9.   
  10. index: function(parameter) {  
  11.     this.cached.model = this.cached.model || new Model({  
  12.         parameter: parameter  
  13.     });  
  14.     this.cached.view = this.cached.view || new View({  
  15.         model: this.cached.model  
  16.     });  
  17. }  

此模式可以加速你的应用程序，因为你不用重新初始化Backbone.js对象。然而，它会过多地消耗内存；所以，缓存的对象应该是在整个应用程序中使用的。如果以前你用过Backbone.js开发过应用，也许你会问你自己，“ 我要重取数据该怎么做？”你可以每次在如下路径中触发后重取数据：



[javascript]   view plain copy print ?
  1. // Inside a router  
  2. initialize: function() {  
  3.   
  4.     this.cached = {  
  5.         view: undefined,  
  6.         model: undefined  
  7.     }  
  8. },  
  9.   
  10. index: function(parameter) {  
  11.     this.cached.model = this.cached.model || new Model({  
  12.         parameter: parameter  
  13.     });  
  14.     this.cached.view = this.cached.view || new View({  
  15.         model: this.cached.model  
  16.     });  
  17.     this.cached.model.fetch();  
  18. }  

当应用程序从端点（比如收件箱）必须取回最新的数据，上面的模式就可以工作。当然，如果待取回的数据时依赖于应用程序的状态（假设这个状态是通过URL和参数来决定的），那么即使应用程序的状态为发生改变，也应该重新取回数据。更好的解决方案是只在应用程序的参数发生变化时重新取回数据：



[javascript]   view plain copy print ?
  1. // Inside a router  
  2. initialize: function() {  
  3.   
  4.     this.cached = {  
  5.         view: undefined,  
  6.         model: undefined  
  7.     }  
  8. },  
  9.   
  10. index: function(parameter) {  
  11.     this.cached.model = this.cached.model || new Model({  
  12.         parameter:parameter  
  13.     });  
  14.     this.cached.model.set('parameter', parameter);  
  15.     this.cached.view = this.cached.view || new View({  
  16.         model: this.cached.model  
  17.     });  
  18. }  
  19.   
  20. // Inside of the model  
  21. initialize: function() {  
  22.     this.on("change:parameter", this.fetchData, this);  
  23. }  

十四、JSDoc函数和Backbone.js类


我是文档注释和JSDoc的超级粉丝。我用JSDoc对所有的Backbone类添加了文档注释：


[javascript]   view plain copy print ?
  1. var Thing = Backbone.View.extend(/** @lends Thing.prototype */{  
  2.     /** @class Thing 
  3.      * @author Phillip Whisenhunt 
  4.      * @augments Backbone.View 
  5.      * @contructs Thing object */  
  6.     initialize() {},  
  7.   
  8.     /** Gets data by ID from the thing. If the thing doesn't have data based on the ID, an empty string is returned. 
  9.      * @param {String} id The id of get data for. 
  10.      * @return {String} The data. */  
  11.     getDataById: function(id) {}  
  12. });  

如果你使用上面的方法对Backbone类添加文档注释，那么你可以生成优美的文档，文档包含了所有的类和函数及参数。确保初始化函数应作为第一个声明的函数，它可以帮助我们生成JSDoc文档。如果你想看使用JSDoc的项目例子，这里有：
https://github.com/homeaway/calendar-widget


十五、测试驱动的开发实践

我认为如果你使用Backbone.js开发项目，那么你应遵循测试驱动开发TDD。我第一次用Jasmine.js创建模型和集合时遵循TDD进行单元测试，但失败了。一旦写下单元测试并且失败，我会对整个模型和集合进行重写。

通过这一点，我的所有Jasmine测试都通过了，而且我有信心我的模型及集合会和我期望的一样工作。自从我遵循TDD，我的视图层非常容易编写而且非常简单。当你开始用TDD时，你的开发速度当然会很慢；但是一但你的脑海里一直想着TDD，你的编程效率和质量会显著提高。

文章标签：
JavaScript
前端开发
数据格式
JSON
Ruby
开发工具
测试技术
UED
数据可视化
缓存
jieforest
目录
相关文章
土木林森
|
3月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘？带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中，高效与可维护性至关重要。JavaServer Faces（JSF）框架通过其面向组件的开发模式，提供了构建复杂用户界面的强大工具，特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观，可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件，并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap，可以进一步丰富组件库，提升用户体验。
土木林森
55 0
Zh.晨光
|
SQL 关系型数据库 MySQL
C#三十四 常用开发的部分总结
C#三十四 常用开发的部分总结
Zh.晨光
39 0
梦无矶小仔
|
测试技术 Python
【第五篇-完结篇】XiaoZaiMultiAutoAiDevices之改造扩展
在前面系列文章中有讲到，使用configparser，ini格式的文件作为配置文件，在新增或者删除其中的值时，会丢失所有注释，所以在框架源码注释中我有写到，如果对这方面比较介意或者是有需求的话，可以进行更改配置文件。
梦无矶小仔
129 0
torchstars
个人若依框架学习大杂烩
个人若依框架学习大杂烩
torchstars
154 0
痴者工良
|
开发框架 .NET 中间件
浅入ABP(1):搭建基础结构的 ABP 解决方案
浅入ABP(1):搭建基础结构的 ABP 解决方案
痴者工良
157 0
浅入ABP(1):搭建基础结构的 ABP 解决方案
痴者工良
|
开发框架 JSON 前端开发
浅入ABP(2):添加基础集成服务
浅入ABP(2):添加基础集成服务
痴者工良
668 0
浅入ABP(2):添加基础集成服务
月光堂堂
|
开发框架 JSON 移动开发
基于.NET平台常用的框架整理
自从学习.NET以来，优雅的编程风格，极度简单的可扩展性，足够强大开发工具，极小的学习曲线，让我对这个平台产生了浓厚的兴趣，在工作和学习中也积累了一些开源的组件，就目前想到的先整理于此，如果再想到，就继续补充这篇日志，日积月累，就能形成一个自己的组件经验库。
月光堂堂
1030 0
狼人2007
|
移动开发 JavaScript API
5款手机应用开发框架推荐
今天，市场上流通着多个手机系统平台，比如iOS、Android、Symbian、Meego、WindowsPhone等等。即使同一操作系统，又有多个版本。因此手机应用开发，因不能跨平台编程，而变得繁琐。
狼人2007
1697 0
嗯哼9925
|
存储 数据库 API
ABP框架搭建项目系列教程基础版完结篇
嗯哼9925
2643 0
walb呀
|
存储 关系型数据库 BI
Winform开发框架的重要特性总结
walb呀
2087 0

热门文章

最新文章

  • 1
    weex-html5 组件进阶
  • 2
    会声会影2023视频编辑软件免费序列号永久
  • 3
    苹果电脑 Mac OS X 系统上防止误按 command+Q 退出软件
  • 4
    SSH连接远程服务器，本地known_hosts文件记录了什么
  • 5
    31.6. MongoDB
  • 6
    saltstack的探索-改善管理用户的sls文件
  • 7
    marathon小知识点分享之如何远程调试marathon
  • 8
    Myeclipse 操作数据库
  • 9
    光伏发电或能控制城市天气
  • 10
    WPF进度条
  • 1
    ROS机器视觉入门：从基础到人脸识别与目标检测
    83
  • 2
    鸿蒙开发：自定义一个简单的标题栏
    27
  • 3
    鸿蒙开发：切换至基于rcp的网络请求
    28
  • 4
    【MyBatisPlus·最新教程】包含多个改造案例，常用注解、条件构造器、代码生成、静态工具、类型处理器、分页插件、自动填充字段
    31
  • 5
    《C++跨平台编译：打破系统边界，释放代码潜能》
    23
  • 6
    电路板设计中射频反馈线的优化
    10
  • 7
    《C++20 图形界面程序：速度与渲染效率的双重优化秘籍》
    10
  • 8
    图解 Spring 循环依赖，一文吃透！
    19
  • 9
    关于 Kafka 高性能架构，这篇说得最全面，建议收藏！
    10
  • 10
    微服务和 SOA 的 6 大核心区别，你都知道吗？
    14

    • 相关课程

    更多
  • SQL基础开发与应用
  • Java面向对象开发
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • MoonBit 编程语言设计和游戏开发
  • Cloud Toolkit 开发部署效率提升神器
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • ReactNative实战优化之路
  • 混合应用平台构建实战
  • React在大型后台管理项目中的工程实践

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 语言入门-1：环境构建
  • 前端开发基础1：前端开发环境的安装和配置
  • 高性能特性体验：ePQ 的详解与实战
  • WEB网页编程实战
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    阿里云OSS设置跨域访问