BackboneJS框架的技巧及模式(1)

简介: 原文见:http://coding.smashingmagazine.com/2013/08/09/backbone-js-tips-patterns/ 译者注:本文采用意译,省略所有口水话,内容直指要义。

原文见:http://coding.smashingmagazine.com/2013/08/09/backbone-js-tips-patterns/

译者注:本文采用意译,省略所有口水话,内容直指要义。

BackboneJS是一个流行的JavaScript MVC/MVVM框架,第一版发布于三年多前,到现在已经是一个颇有影响力的框架。尽管BackboneJS提供了JavaScript项目的基本结构,但它还留下了很多设计模式和决策供开发者使用。

因此,本文会介绍很多不同的设计模式供BackboneJS开发过程中使用,还会介绍一些开发中可能遇到的陷阱。


应用就和建筑一样,都是遵循已知的模式进行构建。


一、实现对象的深度复制

JavaScript把所有的原生类型变量都以值传递的方式对待。因此,当原生类型的变量被引用时,变量的值会被传递。

比如,上面代码中,设置helloWorldCopy变量的值等同于helloworld变量。因此,任何修改变量helloWorldCopy值的行为并不会影响到helloWorld变量,因为这是一份拷贝。

JavaScript把所有的非原生类型的变量都以参数传递的方式对待。这意味着当非原生类型的变量被引用时,JavaScript会传递变量的内存地址。


[javascript]   view plain copy print ?
  1. var helloWorld = {  
  2.     ‘hello’: ‘world’  
  3. }  
  4. var helloWorldCopy = helloWorld;  

比如,上面的代码设置helloWorldCopy变量的值等同于helloworld变量的引用。当修改helloWorldCopy变量时,会直接操纵helloWorld变量。而如果你想拥有一份helloWorld的拷贝,那么你必须创建对象的拷贝。


你或许会想到这样的问题,“为什么BackboneJS中到处都是引用传递?”

BackboneJS并不会复制对象,这意味着如果你从模型调用.get()方法获得一个对象,任何对此对象的修改都会直接修改原对象。

下面我们一起看一个例子来说明此问题。如果你有如下的Person模型:


[javascript]   view plain copy print ?
  1. var Person = Backbone.Model.extend({  
  2.    defaults: {  
  3.         'name''John Doe',  
  4.         'address': {  
  5.             'street''1st Street',  
  6.             'city''Austin',  
  7.             'state''TX',  
  8.             'zipCode': 78701  
  9.         }  
  10.    }  
  11. });  

接着我们创建了一个新person对象:



[javascript]   view plain copy print ?
  1. var person = new Person({  
  2.     'name''Phillip W'  
  3. });  

接下来我们操纵新person对象的一些属性:



[javascript]   view plain copy print ?
  1. person.set('name''Phillip W.', { validate: true });  

上面的代码成功地修改了person对象的name属性。接着,我们试着修改person对象的address属性。但是,在做之前,我们先验证一下地址属性:



[javascript]   view plain copy print ?
  1. var Person = Backbone.Model.extend({  
  2.     validate: function(attributes) {  
  3.   
  4.         if(isNaN(attributes.address.zipCode)) return "Address ZIP code must be a number!";  
  5.     },  
  6.   
  7.     defaults: {  
  8.         'name''John Doe',  
  9.         'address': {  
  10.             'street''1st Street',  
  11.             'city''Austin',  
  12.             'state''TX',  
  13.             'zipCode': 78701  
  14.         }  
  15.     }   
  16. });  

接着,我们尝试用错误的ZIP代码设置地址:



[javascript]   view plain copy print ?
  1. var address = person.get('address');  
  2. address.zipCode = 'Hello World';  
  3. // Raises an error since the ZIP code is invalid  
  4. person.set('address', address, { validate: true });  
  5. console.log(person.get('address'));  
  6. /* Prints an object with these properties. 
  7. { 
  8.     'street': '1st Street' 
  9.     'city': 'Austin', 
  10.     'state': 'TX' 
  11.     'zipCode': 'Hello World' 
  12. } 
  13. */  

这会怎么样呢?我们的验证出现了错误!为什么属性依旧被修改了?正如前面提过的,BackboneJS不会复制模型的属性,它只会简单地返回你所请求的一切。因此,如你所料,如果你请求一个对象,你会得到此对象的引用。对此对象的任何操作都会直接改变模型中的实际对象。


如果你要debug,这可能将把你带入到无底的兔子黑洞。


实现一个深度模型对象的复制可能会让你在调试中避免掉入兔子洞。


此问题对于BackboneJS新手要引起注意,甚至一些JavaScript老手也该提防。

在这里:https://github.com/documentcloud/backbone/issues/2315有深度的讨论。

正如Jeremy Ashkenas所说,实现深度复制是用于解决不同的问题,尤其是在很大、有深度的对象来说,此操作的内存开销很大。

幸运的是,jQuery库提过了一个深度复制的实现,即$.extend操作。顺便说一句,UnderscoreJS框架(它依赖于BackboneJS),也提供了_.extend这样的函数,但是我们应该尽量避免使用它,因为它没有实现深度复制。

Lo-Dash (http://lodash.com/)是UnderscoreJS的分支和优化版本,提供了_.clone函数,实现了深度复制。但是,我使用$.extend来实现任意对象的深度复制,对象是通过.get()从模型中获取的。记住要传递true,它指示执行对象的深度复制。

[javascript]   view plain copy print ?
  1. var address = $.extend(true, {}, person.address);  

我们现在有address对象的准确复制了,我们可以随心修改内容而无需担心修改了实际的模型。要注意一点,此模式工作的前提是由于address对象的所有成员变量都是不可变 的(数字或字符串等)。还要注意,深度复制对性能是有一点儿影响的,尤其是对于大对象来说。

目录
相关文章
|
开发框架 资源调度 前端开发
Umi框架
Umi框架
786 0
|
程序员 C++ 开发者
《Lua游戏开发实践指南》一2.2Lua简介
本节书摘来华章计算机《Lua游戏开发实践指南》一书中的第2章 ,第2.2节,(美)Paul SchuytemaMark Manyen著 田剑译 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
3060 0
Delphi2010强化的反射
很多人可能都发现了,Delphi2010编译后的程序体积非常大,一个空的窗体居然达到接近800K。这些多出来的体积其实就是运行时信息,使用这些信息,我们可以轻松的获取到有关的类内容,并在不知情的情况下使用它们。
1057 0
|
2天前
|
云安全 人工智能 自然语言处理
AI说的每一句话,都靠谱吗?
阿里云提供AI全栈安全能力,其中针对AI输入与输出环节的安全合规挑战,我们构建了“开箱即用”与“按需增强”相结合的多层次、可配置的内容安全机制。
|
9天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
4天前
|
安全 Java Android开发
深度解析 Android 崩溃捕获原理及从崩溃到归因的闭环实践
崩溃堆栈全是 a.b.c?Native 错误查不到行号?本文详解 Android 崩溃采集全链路原理,教你如何把“天书”变“说明书”。RUM SDK 已支持一键接入。
412 185
|
2天前
|
数据采集 消息中间件 人工智能
跨系统数据搬运的全方位解析,包括定义、痛点、技术、方法及智能体解决方案
跨系统数据搬运打通企业数据孤岛,实现CRM、ERP等系统高效互通。伴随数字化转型,全球市场规模超150亿美元,中国年增速达30%。本文详解其定义、痛点、技术原理、主流方法及智能体新范式,结合实在Agent等案例,揭示从数据割裂到智能流通的实践路径,助力企业降本增效,释放数据价值。