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与其他辅助库如jQuery、Underscore和Mustache来实现与后端数据的交互。 首先，我们需要创建一个后端PHP文件`api.php`，用于返回JSON格式的数据。在这个例子中，`api....
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应用打下坚实的基础。
6. **Ajax**：`$.ajax`，`$.get`，`$.post`等方法使得异步数据交互变得简单易用。 结合使用Underscore.js和jQuery，开发者可以充分利用各自的优势，构建出高效、可维护的前端应用。例如，Underscore可以用来处理...
你可以通过`Backbone.Model.extend()`方法创建自定义的模型。`initialize`方法在模型实例化时会被调用，可以用来初始化模型的属性。例如： ```javascript var User = Backbone.Model.extend({ initialize: ...
它的轻量化设计使得开发者可以快速上手，同时也允许与其他库和工具结合使用，如jQuery进行DOM操作，Underscore.js提供实用函数支持。然而，对于大型项目，可能需要更强大的框架，如Angular.js或React.js来提供更全面...
如果您的应用程序具有仅针对某些路由显示的视图，则一种方法是每次访问相应的路由时都创建视图的新实例。 但是这种方法是一些常见问题的根源。 如果您不记得在更改路线时手动关闭视图，则将在创建视图的多个副本时...
在实际代码中，开发者可能使用`Backbone.Model.extend()`来创建自定义模型，`Backbone.View.extend()`来创建视图，`Backbone.Collection.extend()`来创建集合，以及`Backbone.Router.extend()`来创建路由器。...
在项目主入口文件中，我们需要实例化模型、集合、视图和路由器，然后启动路由器监听浏览器的URL变化： ```javascript var todos = new Todos(); todos.fetch(); // 从服务器获取数据 var todoView = new TodoView...
4. **Router** - 路由器，处理URL与应用状态之间的映射，实现页面无刷新的导航。 5. **Event** - 事件系统，使得Model、Collection和View之间可以通信，无需直接引用对方。 在“bbtodo”项目中，我们首先会创建一...
例如，`_.each`用于遍历数组或对象，`_.extend`用于对象扩展，`_.isEqual`用于深度比较等。 **3. Backbone.js 的关键组件** - **Model**: Model是Backbone的核心组件，用于封装和管理数据。它包含了数据属性和业务...
在视图和路由器中，我们可以实例化这些模型和集合，并监听变化，以便在用户交互时更新界面。例如： ```javascript // view/UserListView.js define(['jquery', 'underscore', 'backbone', 'collection/Users'], ...
这些文件共同构成了一个基于RequireJS和Backbone.js的完整应用实例，每个文件都是独立模块，通过RequireJS进行管理和通信。 总之，"require+backbone结合开发"是一种高效组织和管理Backbone应用的方式，它利用...
默认情况下，它使用AJAX请求（jQuery的`$.ajax`）进行通信，但你可以覆盖此方法以实现自定义的通信协议，如WebSocket或WebRTC。 7. **模板(Templates)** Backbone鼓励使用客户端模板来动态构建UI。这通常通过...