JQuery 源码解析 · extend()详解
前言:最近想重写一个dropdown插件,于是想到了使用jquey实现插件,于是重温了一波$.extend()的知识,然后总结了这篇笔记
正文:
- $.extend(src)
- jQuery.extend( target, object1 [, objectN ] )
该方法将src合并到jquery的实例对象中去
下面是一个例子:
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dtarget 目标参数
这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。如下例:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
那么合并后的结果,同名属性会被后面的对象所覆盖
console.log(result)
>> {name:"Jerry",age:21,sex:"Boy"}
在ES6中,实现这种方法有一种更为简单的方法,利用点扩展运算符
var person1={name:"Tom",age:21}
var person2={name:"Jerry",sex:"Boy"})
person1={...(person1),...(person2)}
- jQuery.extend( [deep ], target, object1 [, objectN ] )
第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,看下面这个例子
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
// Merge object2 into object1
$.extend( object1, object2 );
console.log(JSON.stringify( object1 );
>>{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
经过浅拷贝后,banana属性是对象类型,属于引用类型,指向object2的banana对象,所以没有了weight属性
我们再看一下,如果是深度拷贝,则输出结果为:
$.extend( true, object1, object2 );
console.log(JSON.stringify( object1 );
>>{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
2. $.fn.extend(src)
该方法就是将src合并到jquery的全局对象中去
jQuery.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
},
uncheck: function() {
return this.each(function() {
this.checked = false;
});
}
});
// Use the newly created .check() method
$( "input[type='checkbox']" ).check();
扩展,进阶
利用这个函数,我们可以来写JQuery插件
var Dropdown= function(element) {
var self=this;
var target=$(element).data("target");
self.$element=$(element);
self.$target=$(target);
self.$element.on('mouseleave',function(){
self.close(self.$target);
});
self.$element.on('mouseenter',function(){
self.open(self.$target);
});
}
//定义haorooms的方法
Dropdown.prototype = {
open: function($target) {
return $target.show();
},
close:function($target){
return $target.hide();
}
}
$.fn.myPlugin = function() {
//创建Dropdown的实体
var dropdown= new Dropdown(this);
}
插件的使用
$(function() {
$('.dropdown').myPlugin();
})
然后用一个即使匿名函数,将我们的代码包裹起来,防止污染全局环境、防止其他地方使用到了 我们自定义插件的对象。
;(function($,window,document,undefined){
//我们的代码。。
})(jQuery,window,document);
JQuery 源码解析 · extend()详解的更多相关文章
- 第37篇 Asp.Net源码解析(二)--详解HttpApplication
这篇文章花了点时间,差点成烂到电脑里面,写的过程中有好几次修改,最终的这个版本也不是很满意,东西说的不够细,还需要认真的去看下源码才能有所体会,先这样吧,后面有时间把细节慢慢的再修改.顺便对于开发的学 ...
- jQuery源码分析-构造函数详解
在jQuery.js的构造函数中,充分利用了JavsScript语言的动态性——对行参的类型和个数没有的严格要求,以至于一个函数可以实现多种功能需求,也为JavaScript语言的多态性提供了基础,在 ...
- jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
- jquery源码解析:代码结构分析
本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94) 定义了一些变量和函数, jQuery = function() ...
- JQuery源码解析(一)
写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.j ...
- Android源码下载方法详解
转自:http://www.cnblogs.com/anakin/archive/2011/12/20/2295276.html Android源码下载方法详解 相信很多下载过内核的人都对这个很熟悉 ...
- 【Java】HashMap源码分析——常用方法详解
上一篇介绍了HashMap的基本概念,这一篇着重介绍HasHMap中的一些常用方法:put()get()**resize()** 首先介绍resize()这个方法,在我看来这是HashMap中一个非常 ...
- 【转】ANDROID自定义视图——onMeasure,MeasureSpec源码 流程 思路详解
原文地址:http://blog.csdn.net/a396901990/article/details/36475213 简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量—— ...
- Spring Boot源码中模块详解
Spring Boot源码中模块详解 一.源码 spring boot2.1版本源码地址:https://github.com/spring-projects/spring-boot/tree/2.1 ...
随机推荐
- NLP(七) 信息抽取和文本分类
命名实体 专有名词:人名 地名 产品名 例句 命名实体 Hampi is on the South Bank of Tungabhabra river Hampi,Tungabhabra River ...
- lightoj 1032 - Fast Bit Calculations(数位dp)
A bit is a binary digit, taking a logical value of either 1 or 0 (also referred to as "true&quo ...
- 杭电第六场 hdu6362 oval-and-rectangle 积分求期望
oval-and-rectangle Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- 从零开始构建Linux
目的:深入了解以Linux内核为基础的系统是如何组成,运行,以构建一个最基础的,纯净的系统. LFS构建步骤宿主机准备- linux操作系统安装- 使用独立硬盘,创建分区- 配置用户和组- 下载所有需 ...
- Flume介绍与安装
搭建环境 部署节点操作系统为CentOS,防火墙和SElinux禁用,创建了一个shiyanlou用户并在系统根目录下创建/app目录,用于存放 Hadoop等组件运行包.因为该目录用于安装hadoo ...
- STL中关于全排列next_permutation以及prev_permutation的用法
这两个函数都包含在algorithm库中.STL提供了两个用来计算排列组合关系的算法,分别是next_permutation和prev_permutation. 一.函数原型 首先我们来看看这两个函数 ...
- 多线程——Callable接口
package pers.aaa.callable; import java.util.concurrent.Callable; public class MyCallable implements ...
- 三句话告诉你break、return、continue!
break:终止循环执行循环体下面的代码 return:终止循环并且退出循环所在的方法 continue:终止当前循环,进行下一次循环
- C++性能查看-宏定义输出
之前由于想统计代码中每个模块加载时长,因此写了一个模块加载时长统计类,使用起来也是超级方便,只需要定义一个宏即可 使用方式如下: 1.统计函数性能 void func() { CONSUMING_OU ...
- 安装MariaDB
1.安装MariaDB安装命令yum -y install mariadb mariadb-server安装完成MariaDB,首先启动MariaDBsystemctl start mariadb设置 ...