underscore.extend实例
<html>
<head>
</head>
<meta charset="GBK">
<title>extend</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="underscore-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var a = {
name : 'zhangshan',
age : 28,
length : 180,
company : {
name : '腾讯',
address : '深圳',
size : 10000,
baseInfo : {
beginDate : '2015-03-08 00:00:00',
endDate : undefined
}
}
};
var b = {
name : 'lisi',
age : 30,
company : {
name : '阿里巴巴',
address : '杭州',
baseInfo : {
beginDate : '2015-03-08',
endDate : '2016-03-08'
}
},
stature : '172cm'
};
console.log('before extend:');
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
var c = _.extend(a,b);
//var c = $.extend(a,b);
//var c = $.extend(true,a,b);
b.name = 'test';
b.company.address = '北京';
console.log('after extend:');
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('c:' + JSON.stringify(c));
a.name = 'test002';
a.company.address = '深圳';
console.log('after modify a:');
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('c:' + JSON.stringify(c));
});
</script>
<body>
</body>
</html>
运行结果：
从运行结果来看，underscore的extend和jQuery的extend的浅拷贝是一样的，_.extend拷贝对象A时，对象B将拷贝A的所有字段，如果字段是内存地址，B将拷贝地址，若果字段是基元类型，B将复制其值。具体我们也可以再看看这篇文章http://bijian1013.iteye.com/blog/2255037。
当然，最简单的办法，我们直接将此实例改成$.extend(a,b)。
<html>
<head>
</head>
<meta charset="GBK">
<title>extend</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="underscore-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var a = {
name : 'zhangshan',
age : 28,
length : 180,
company : {
name : '腾讯',
address : '深圳',
size : 10000,
baseInfo : {
beginDate : '2015-03-08 00:00:00',
endDate : undefined
}
}
};
var b = {
name : 'lisi',
age : 30,
company : {
name : '阿里巴巴',
address : '杭州',
baseInfo : {
beginDate : '2015-03-08',
endDate : '2016-03-08'
}
},
stature : '172cm'
};
console.log('before extend:');
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
//var c = _.extend(a,b);
var c = $.extend(a,b);
//var c = $.extend(true,a,b);
b.name = 'test';
b.company.address = '北京';
console.log('after extend:');
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('c:' + JSON.stringify(c));
a.name = 'test002';
a.company.address = '深圳';
console.log('after modify a:');
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('c:' + JSON.stringify(c));
});
</script>
<body>
</body>
</html>
运行结果和_.extend完全一样，如下所示：
下面我们再来看下$.extend(true,a,b)即深拷贝的运行结果。
<html>
<head>
</head>
<meta charset="GBK">
<title>extend</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="underscore-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var a = {
name : 'zhangshan',
age : 28,
length : 180,
company : {
name : '腾讯',
address : '深圳',
size : 10000,
baseInfo : {
beginDate : '2015-03-08 00:00:00',
endDate : undefined
}
}
};
var b = {
name : 'lisi',
age : 30,
company : {
name : '阿里巴巴',
address : '杭州',
baseInfo : {
beginDate : '2015-03-08',
endDate : '2016-03-08'
}
},
stature : '172cm'
};
console.log('before extend:');
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
//var c = _.extend(a,b);
//var c = $.extend(a,b);
var c = $.extend(true,a,b);
b.name = 'test';
b.company.address = '北京';
console.log('after extend:');
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('c:' + JSON.stringify(c));
a.name = 'test002';
a.company.address = '深圳';
console.log('after modify a:');
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('c:' + JSON.stringify(c));
});
</script>
<body>
</body>
</html>
运行结果：
$.extend(true,A,B)会完全拷贝所有数据，优点是B与A不会相互依赖（A,B完全脱离关联）。
相关推荐
标题"bcakbone.js中Underscore.js实现的视图与子视图"指向了Backbone.js中如何利用Underscore.js来处理视图及其子视图的相关知识。在Backbone.js中，视图（View）是用户界面的抽象，负责渲染DOM元素和管理用户交互。...
3. **方便比较**：由于每次修改都会生成新实例，可以轻松地通过`===`进行浅比较，快速判断数据是否发生变化，简化状态管理。 **UUID** UUID（Universally Unique Identifier）是一种为电子设备、软件和文件系统生成...
《深入理解Underscore.js：基于“underscore-example”实例解析》 在JavaScript的世界里，Underscore.js是一款不可或缺的工具库，它为开发者提供了大量实用的函数，简化了日常编程任务。本文将通过"underscore-...
在Backbone.js中，View是用来呈现模型数据的部分，同时也是与用户交互的关键组件。View负责监听事件并对这些事件做出响应，同时还能渲染数据到DOM中。理解View的用途和工作原理对于开发高质量的应用程序至关重要。 ...
在这个实例中，我们将看到如何整合Backbone.js与其他辅助库如jQuery、Underscore和Mustache来实现与后端数据的交互。 首先，我们需要创建一个后端PHP文件`api.php`，用于返回JSON格式的数据。在这个例子中，`api....
当需要为视图添加DOM事件监听器时，可以在View的events属性中定义，然后Backbone.js会自动将这些事件与对应的回调函数关联起来。重要的是，这些事件监听器只能被添加到el属性指定的DOM元素的子元素上。这样可以确保...
Backbone与其他工具如jQuery、Underscore.js（提供实用函数库）、Handlebars（模板引擎）等配合使用，可以构建出功能强大的Web应用。例如，Underscore.js的模板功能可以让视图渲染更高效，而jQuery则简化了DOM操作。...
Underscore.js在这里提供了解析和操作数据的工具，如`_.extend`用于创建模型实例，`_.bind`用于绑定方法到特定上下文。 2. **视图（View）**：视图负责渲染和处理用户界面。它们与模型关联，当模型数据改变时，视图...
本实例将深入讲解如何使用RequireJS构建一个简单的待办事项（Todo）应用，以此来演示RequireJS的核心功能和优势。 在RequireJS中，我们首先需要设置配置文件（通常命名为`require.config`），用于指定脚本的路径、...
在本教程中，我们将探讨如何使用Backbone.js框架创建一...通过实际操作，你将更好地理解Backbone.js如何组织代码以及如何实现数据与视图的双向绑定。同时，这也会为你后续深入学习更复杂的Backbone应用打下坚实的基础。
要创建一个Backbone.js的Model，通常需要使用Backbone.Model.extend来扩展一个新的Model类。Backbone允许你定义实例方法和静态方法来增强Model的功能。此外，Backbone还提供了丰富的API来处理HTTP请求，与后端服务器...
6. **Ajax**：`$.ajax`，`$.get`，`$.post`等方法使得异步数据交互变得简单易用。 结合使用Underscore.js和jQuery，开发者可以充分利用各自的优势，构建出高效、可维护的前端应用。例如，Underscore可以用来处理...
你可以通过`Backbone.Model.extend()`方法创建自定义的模型。`initialize`方法在模型实例化时会被调用，可以用来初始化模型的属性。例如： ```javascript var User = Backbone.Model.extend({ initialize: ...
下面详细说明Backbone.js框架中Model与Collection的使用实例： 1. 创建Model实例： 在Backbone中，首先需要扩展Backbone.Model来创建一个模型的类，然后可以创建该类的实例。模型可以包含默认属性，并且可以定义...
它为开发者提供了一套模型(Model)、视图(View)、集合(Collection)和路由器(Router)的框架，帮助组织代码结构，并与后端数据进行交互。本文详细描述了如何创建一个简单的Backbone.js的Hello World程序实例，包括前后...
它的轻量化设计使得开发者可以快速上手，同时也允许与其他库和工具结合使用，如jQuery进行DOM操作，Underscore.js提供实用函数支持。然而，对于大型项目，可能需要更强大的框架，如Angular.js或React.js来提供更全面...
如果您的应用程序具有仅针对某些路由显示的视图，则一种方法是每次访问相应的路由时都创建视图的新实例。 但是这种方法是一些常见问题的根源。 如果您不记得在更改路线时手动关闭视图，则将在创建视图的多个副本时...