jQuery的extend的用法
来源:互联网 发布:西门子冰箱知乎 编辑:程序博客网 时间:2024/05/17 02:17
最近看到项目中大量使用这种用法,所以选择了一篇不错的文章来总结一下这个的用法。
方法介绍
jQuery 的 API 手册中,extend 方法挂载在 jQuery 和 jQuery.fn 两个不同的对象上,但在 jQuery 内部代码实现的是相同的,只是功能各不相同。
先看看官方给出的解释:
jQuery.extend Merge the contents of two or more objects together into the first object. 把两个或者多个对象合并到第一个对象当中;
jQuery.fn.extend Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods. 把对象挂载到 jQuery 的 prototype 上以扩展一个新的 jQuery 实例方法 。
虽然官方对 jQuery.extend 的扩展方法功能只字未提,但是它也同样具有扩展 jQuery 类方法 的功能。
合并对象
首先,我先来介绍一下 extend 函数在 合并对象 方面的用法。
jQuery.extend(target [, object1] [, objectN])
合并 object1 ... objectN 到 target 对象,如果只有一个参数,则该 target 对象会被合并到 jQuery 对象中。
var obj1 = { name: 'Tom', age: 21}var obj2 = { name: 'Jerry', sex: 'boy'}$.extend(obj1, obj2); // {name: "Jerry", age: 21, sex: "boy"}obj1 // {name: "Jerry", age: 21, sex: "boy"}obj2 // {name: "Jerry", sex: "boy"}
上述代码展示的是将 obj2 对象合并到 obj1 对象中,这种方法会 改变 obj1 对象的结构。如果你 不想改变 合并目标对象的结构,你可以这么做。
var obj1 = { name: 'Tom', age: 21}var obj2 = { name: 'Jerry', sex: 'boy'}$.extend({}, obj1, obj2); // { name: "Jerry", age: 21, sex: "boy" }obj1 // { name: "Tom", age: 21 }obj2 // { name: "Jerry", sex: "boy" }
深浅拷贝
jQuery.extend([deep], target, object1 [, objectN])
和上面的讲述的不同的是,该方法多了一个类型为 boolean 的 [deep] 传参,当其为 true 时,将 object1 , objectN 深度复制 后合并到 target 中。
首先,我们理解一下什么叫做 深度复制 。看看其和 浅度复制 有什么区别。
var obj1 = { name: "John", location: { city: "Boston", county: "USA" }}var obj2 = { last: "Resig", location: { state: "MA", county: "China" }}$.extend(false, {}, obj1, obj2); // { name: "John", last: "Resig", location: { state: "MA", county: "China" }}$.extend(true, {}, obj1, obj2); // { name: "John", last: "Resig", location: { city: "Boston", state: "MA", county: "China" }}
由此可见,执行 深度复制 会递归遍历每个对象中含有复杂对象(如:数组、函数、json对象等)的属性值进行复制,而且 浅度复制便不会这么做。
方法扩展
上述的 extend 方法中的 target 参数是可以省略的。如果省略了,则该方法就只能传入一个 object 参数,该方法功能是将该 object 合并到调用 extend 方法的对象中。
我们通常会使用这种方式来对 jQuer进行一些方法上的扩展。
引子
jQurey 提供了两种方法扩张方式,分别为jQuery.fn.extend(object)
和jQuery.extend(object)
.
想要搞清楚两种扩展方式之间的区别的话,先要了解什么是jQuery.fn
.
本猿参考了 jQuery 的源码,发现其中玄机:
jQuery.fn = jQuery.prototype = { init: function(selector, context) { // ... };}
jQuery.fn = jQuery.prototype
这句代码明确指出jQuery.fn
指代的就是 jQuery 的原型。
其次,我们要引入两个概念 类方法 和 实例方法 。
类方法 是直接可以使用类引用,不需要实例化就可以使用的方法。一般在项目中 类方法 都是被设置为工具类使用;
实例方法 必须先创建实例,然后才能通过实例调用该 实例方法 。
jQuery
可以看做是这个封装得非常好的类,而我们可以使用jQuery选择器
来创建 jQuery 的实例。比如:使 id 选择器$('#btn')
来创建一个实例。
区别
jQuery.extend(object)
相当于对 类方法 的扩展。
jQuery.extend({ /* 返回两个元素中较小的值 */ min: function(a, b) { return a < b ? a : b; }, /* 返回两个元素中较大的值 */ max: function(a, b) { return a > b ? a : b; }});jQuery.min(2, 3); // 2 jQuery.max(4, 5); // 5
jQuery.fn.extend(object)
是对jQuery.prototype
上的扩展。
jQuery.fn.extend = jQuery.prototype.extend
这种方式相当对 实例方法 的扩展。
举个栗子:开发一个简单的小功能,使用该方法可以使选定元素内的文字变红。
$.fn.extend({ setRed: function() { $(this).css("color", "red"); }});$('.tip').setRed();
$(".tip")
创建了一个jQuery实例
,通过它可以调用成员方法setRed
.
上述代码可以实现预想的扩展,但最好返回this
以满足 jQuery 链式操作 的需要。
改良之后,代码如下:
$.fn.extend({ red: function() { return $(this).css("color", "red"); }});
- jQuery.extend的用法
- jQuery的extend用法
- Jquery.extend的用法
- jquery extend的用法
- jQuery.extend 的用法
- jQuery的extend的用法
- jquery.fn.extend与jquery.extend的用法
- JQuery的$.extend()的简单用法
- jQuery.extend扩展函数的用法
- jQuery.extend函数的多种用法!
- Jquery extend 函数的 用法 解析
- 关于jquery中的extend方法的用法
- Jquery的$.extend方法
- jquery的extend详解
- JQuery的extend
- jQuery的extend
- Jquery的extend
- jquery 的插件 extend
- 压缩图片至指定大小
- CentOS 安装 supervisor 以及设置 Laravel 队列设置
- 工程应用标准示范程序:将一个ADC采样值转换为ASCII码
- 最简洁高效的Git 命令上传代码【以及Git的一些经常使用的小命令】
- Linux下socket编程之线程池的实现
- jQuery的extend的用法
- 数据结构之链表的实例
- Luncene学习笔记 -- day04 分词器
- C++11auto类型说明符
- Java连接hive报错01
- C语言——完数
- Springmvc的入门---配置
- python数据持久化到文件并读取:pickle的使用
- struts报错严重: Dispatcher initialization failed Unable to load configuration.