jQuery技术

Javascript笔记:(实践篇)从jQuery插件技巧说起

字号+ 作者:H5之家 来源:H5之家 2017-07-09 11:00 我要评论( )

1.1 对$.extend的懂得 上方的代码里我编写jQuery插件应用到了¥.extend办法。这里要讲讲我以前对jQuery插件开辟的误会,这种误会源自于我对jQuery插件开辟懂得的

1.1 对$.extend的懂得

  上方的代码里我编写jQuery插件应用到了¥.extend办法。这里要讲讲我以前对jQuery插件开辟的误会,这种误会源自于我对jQuery插件开辟懂得的肤浅。


  在我前一家公司,有位做前端的同事很喜好把本身代码封装成jQuery插件,他曾经对我说:jQuery插件技巧是jQuery最让人激动听心的技巧,关键就是应用extend办法,当时我浏览一些关于jQuery技巧的材料,大多一开端都邑提到extend办法的应用,可能本身进修的时辰不太细心,认为jQuery插件技巧就是应用extend封装好javascript代码,但我每次查看jQuery手册对extend的申明又很让我费解,手册上说来说去extend办法只不过用于复制对象的办法。


  固然上方我用extend成功写出了一个jQuery插件,对extend办法懂得的困惑任然没有废除,是以这里我要从文档的描述里的内容好好的研究下extend办法到底是咋回事。


  jQuery手册对jQuery.extend的申明:



下面我逐句解析jQuery.extend办法的功能。


(1) 用一个或多个其他对象来扩大一个对象,返回被扩大的对象。这句话很精辟,它概括了extend感化的精华,extend就是太上老君的炼丹炉,我们把各类不合的对象投进这个丹炉里就会产生一个融合这些对象所有功能的超等对象,这就是extend办法的感化,这个可以用数学公式形象的表述就是A+B=AB。s


(2) 若是不指定target,则给jQuery定名空间本身进行扩大。这有助于插件作者为jQuery增长新办法。要懂得这句话,就得解析下extend的参数了。在jQuery1.7的中文手册里把参数分为两个版本:


版本V1.0:target(object),[object1(object)],[objectN(object)],(圆括号里的内容是参数的类型),参数注释如下:



版本V1.4: [deep(object)],target(object),object1(object),[objectN(object)],参数注释如下:



这句话似乎有点题目,若是不指定target应当如何懂得了?是说extend办法里不传值吗?没有参数传入何来的给jQuery定名空间进行扩大啊。若是对比在版本V1.0里对参数的申明,若是target是独一的参数那么如许的用法就是扩大jQuery的定名空间了,这个申明倒公道些,至少在前面我们写的jQuery插件里应用到这个用法。后面我会把extend的用法一一做测试,看看这句话到底是翻译错误了?还是我的懂得上呈现了题目。


(3) 若是第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。不然的话,副本会与原对象共享布局。从这句话应当我们越来越熟悉打听了extend办法的本质了,extend就是一个javascript说话里的拷贝操纵,在大多半包含对象概念的说话里,因为对象的名称存储的是对象的别号换种说法就是对象的引用及该对象的地址而不是对象本身,所以当对象进行拷贝操纵时辰就存在浅拷贝和深拷贝的题目。关于浅拷贝和深拷贝我在以前的博文里做过研究,若是还有那位童鞋不太定名二者的差别,可以参看下面的文章,文章链接如下:


java笔记:关于错杂数据存储的题目--根蒂根基篇:数组以及浅拷贝与深拷贝的题目(上)


java笔记:关于错杂数据存储的题目--根蒂根基篇:数组以及浅拷贝与深拷贝的题目(下)


(4) 不决义的属性将不会被复制,然而从对象的原型持续的属性将会被复制。第一句好懂得没有定义过的对象属性当然不会被复制了,因为不决义就便是没有这个属性,后半句也好懂得,extend办法在做复制操纵时辰会把对象原型(prototype)持续到的属性也加以复制。


为了懂得¥.extend办法我逐句的解析了jQuery手册里的申明,细心回味下,extend这个可以建造jQuery插件的办法本来就是一个做javascript对象拷贝操纵的函数,一个对象拷贝复制函数就是插件技巧的核心,这一会儿还真的让人难以接管。


鉴于此,我筹算在体系讲解extend办法前先好都雅看在javascript说话里浅拷贝和深拷贝办法到底如何写成的,懂了这个或许会对我们正确懂得extend的道理很有帮助。


1.2 Javascript里的浅拷贝和深拷贝

  Javascript的赋值都是引用传递,就是说,在把一个对象赋值给另一个变量时辰,那么新变量所指向的还是赋值对象本来的地址,并没有为新对象在堆区真正的产生一个新的对象,这个就是所谓的浅拷贝;深拷贝则是把本来拷贝的对象真正的复制成一个新对象,而新的变量是指向这个新对象的地址。


  下面我们就来看看javascript里的两种拷贝的写法:


1.2.1 浅拷贝

代码如下:

// 浅拷贝测试
var scopyobj = shallowcopy({},orgval);
scopyobj.obj.content = ""New Object Value"";//改变scopyobj里面引用对象的值
// 我们会发明scopyobj和orgval里的obj.content的值都产生了改变
console.log(""scopyobj.obj.content:"" + scopyobj.obj.content);//scopyobj.obj.content:New Object Value
console.log(""orgval.obj.content:"" + orgval.obj.content);//orgval.obj.content:New Object Value
// 我们操纵数组,成果是一样的
scopyobj.arrs[1].Array02 = ""I am changed"";
console.log(""scopyobj.arrs[1].Array02:"" + scopyobj.arrs[1].Array02);//scopyobj.arrs[1].Array02:I am changed
console.log(""orgval.arrs[1].Array02:"" + orgval.arrs[1].Array02);//orgval.arrs[1].Array02:I am changed

 


上方的代码斗劲清楚了,这里我就不做过多的讲解。


1.2.2 深拷贝

  深拷贝就斗劲错杂了,有个编程经验的伴侣都知道经常被深拷贝纠结的数据类型其实就两大类:对象和数组,我们很难把握一个函数里传入的参数的数据类型,那么一个编写杰出的数据类型断定函数就显的首要多了,下面就是javascript一种断定数据类型的办法,代码如下:


console.log(""whatType:"" + whatType.call(1));
console.log(""whatType:"" + whatType.call(
console.log(""whatType:"" + whatType.call(
console.log(""whatType:"" + whatType.call(

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评