jQuery开发插件的两个方法 js 深浅拷贝
1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。由全局函数来调用, 主要是用来拓展个全局函数
2.jQuery.fn.extend(object);为jQuery的实例对象添加方法 由实例对象来调用,可以用来拓展个选择器,例如$.fn.each();
extend
添加静态方法,直接用$在其他地方来调用此扩展方法了
$.extend({
test:function(param){
alert(param);
}
});
$.test(1);//则直接弹出1
$.test(1)变成了jQuery这个类本身的方法。
extend扩展:
- extend([deep ], target, object1,object2,object3,objectN)
将object1,object2,object3,...合并到target中,返回值为合并后的target,由此可以看出该方法合并后,是修改了target的结构的。
后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。
deep :Boolean 设置为true 为深拷贝
fn.extend
$.fn.extend({
test:function(){
alert("1");
}
}); $("div").test();
test()变成了jQuery实例化对象的方法。
深浅拷贝
如果给一个变量赋值一个对象 ,那么两者的值会是同一个引用,改变其中一方,另一方也会相应改变。
通过 Object.assign
进行浅拷贝即可解决
let a = {
name: "小明"
}
let b = Object.assign({}, a)
a.name = "小文";
console.log(b.name) // "小明"
// 也可以通过展开运算符(…)解决 let b = {...a}
a.obj.name="小文";
console.log(b.name) //"小明";
浅拷贝只解决了第一层的问题,如果接下去的值中还有对象的话,两者会有相同的引用。
let a = {
name: "小明",
obj:{
name:"小汪"
}
}
let b = {...a}
a.obj.name="小文";
console.log(b.obj.name) //"小文";
可以通过 JSON.parse(JSON.stringify(object))
来解决。
let a = {
name: "小明",
obj:{
name:"小汪"
}
}
let b = JSON.parse(JSON.stringify(a))
a.obj.name="小文";
console.log(b.obj.name) //"小汪";
该函数是内置函数中处理深拷贝性能最快的,但是该方法也是有局限性的:
- 会忽略
undefined
- 不能序列化函数
- 不能解决循环引用的对象
let a = {
a: undefined,
b: function() {},
c: 'yck'
}
let b = JSON.parse(JSON.stringify(a))
console.log(b) // {c: "yck"}
当然如果你的数据中含有以上三种情况下,可以使用 lodash 的深拷贝函数。
如果你所需拷贝的对象含有内置类型并且不包含函数,可以使用 MessageChannel
function structuralClone(obj) {
return new Promise(resolve => {
const {port1, port2} = new MessageChannel();
port2.onmessage = ev => resolve(ev.data);
port1.postMessage(obj);
});
} var obj = {a: 1, b: {
c: b
}}
// 注意该方法是异步的
// 可以处理 undefined 和循环引用对象
const clone = await structuralClone(obj);
jQuery开发插件的两个方法 js 深浅拷贝的更多相关文章
- jQuery开发插件的两种方式
最近挺多人写jQuery的,都是关于jQuery扩展方面的,使用方面的讲的比较多,但是关于详细的一个基础的过程讲的比较少一点,做web开发的基本上都会用到jQuery,本人就根据jQuery的使用经验 ...
- java开发——Cloneable接口、clone()方法和深浅拷贝
1.实现Cloneable接口表明该类的对象是允许克隆的. 2.允许克隆的意思是:可以调用clone()方法. 3.深拷贝还是浅拷贝,取决于如何重写Object的clone()方法. 4.原对象和克隆 ...
- jQuery中开发插件的两种方式
jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...
- 获取网页URL地址及参数等的两种方法(js和C#)
转:获取网页URL地址及参数等的两种方法(js和C#) 一 js 先看一个示例 用javascript获取url网址信息 <script type="text/javascript&q ...
- 安装jenkins插件的两种方法
安装jenkins插件有两种方法,一种是在线安装,一种是离线安装.两种方式介绍如下: 1.如果服务器可以上网,那边选择在线安装最好不过了,安装流程为:系统管理----插件管理---选择需要的插件直接安 ...
- Jquery开发插件的方法
Jquery未开发插件提供了两个方法: (1)Jquery.extend(object) -为Jquery类本身添加新的方法;代码如下: $.extend({ add:function(a,b) ...
- jQuery中开发插件的两种方式(附Demo)
做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQu ...
- div随页面滚动遇顶固定的两种方法(js&jQuery)
一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”.目前我们在国内的商业网站上就常常看到这样的效果了.例如 ...
- 用jQuery开发插件详解
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...
随机推荐
- mysql更改时区
set global time_zone = '+8:00'; ##修改mysql全局时区为北京时间,即我们所在的东8区 set time_zone = '+8:00'; ##修改当前会话时区 flu ...
- HTable基本概念
出处:http://www.taobaotest.com/blogs/1582 引言 团队中使用HBase的项目多了起来,对于业务人员而言,通常并不需要从头搭建.维护一套HBase的集群环境,对于其架 ...
- JavaScript学习系列8 - JavaScript中的关系运算符
JavaScript中有8个关系运算符,分别是 ===, !===, ==, !=, <, <=, >, >= 1. 恒等运算符 (===) ===也叫做 严格相等运算符,它要 ...
- 以后尽量不用cin、cout啦
cout输出有问题(对于double,不同OJ处理的结果不一样),cin读入机制较scanf繁琐.慢!!!!!!!!
- Dreamweaver Flash Photoshop网页设计综合应用 (智云科技) [iso] 1.86G
全书共15章,主要包括网页制作基础.Dreamweaver CC网页制作.Photoshop CC网页图像设计.Flash CC网页动画设计以及综合案例实战5个部分.通过本书的学习,不仅能让读者学会三 ...
- 【mysql 统计分组之后统计录数条数】
SELECT count(*) FROM 表名 WHERE 条件 // 这样查出来的是总记录条 SELECT count(*) FROM 表名 WHERE 条件 GROUP BY id //这样统 ...
- 转:PHP性能:序——谈ab(Apache Bench)压力测试工具
PHP性能:序——谈ab(Apache Bench)压力测试工具 ab(Apache Bench)是啥? ab是Apache自带的一个压力测试软件,可以通过ab命令和选项对某个URL进行压力测试.a ...
- SAS笔记(6) PROC MEANS和PROC FREQ
PROC MEANS和PRC FREQ在做描述性分析的时候很常用,用法也比较简单,不过这两个过程步的某些选项容易忘记,本文就梳理一下. 在进入正文前,我们先创建所需的数据集TEST_SCORES: D ...
- Codeforces Round #527 (Div. 3)D2(栈,思维)
#include<bits/stdc++.h>using namespace std;int a[200007];stack<int>s;int main(){ int ...
- 2017-10-17 NOIP模拟赛
Reverse #include<iostream> #include<cstdio> #include<cstring> using namespace std; ...