jquery之extend

浏览数：23 / 时间：2015年06月09日

jquery的extend方法的用法
1. [代码][JavaScript]代码
01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
02"http://www.w3.org/TR/html4/strict.dtd">
03<html xmlns="http://www.w3.org/1999/xhtml">
04 <head>
05 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
06 <title>jquery继承</title>
07 </head>
08 <body>
09 <p>对象继承{name:"ws",age:"23"}<={name:"king",sex:"man"}
10 <p type="text" id="parent1"></p>
11 <input type="button" value="extend" id="btn1">
12 <p>
13 <p>全局方法继承$.hello()
14 <input type="button" value="触发" id="btn3">
15 <p>
16 <p>类插件方法触发
17 <br/>name:<input type="text" id="name">
18 <br/>age:<input type="text" id="age">
19 <input type="button" value="触发" id="btn4">
20 <p>
21 <p>
22 深度拷贝{name:"ws",location:{city:"ningbo",code:"315000",locOther="other"},other:"第一岑对象中的参数"}<={name:"king",location:{city:"shaoxin",code:"311824"}}
23 <p id="p5"></p>
24 <p id="p6"></p>
25 <input type="button" value="深度拷贝触发" id="btn5">
26 <input type="button" value="非深度拷贝触发" id="btn6">
27 </p>
28 </body>
29 <script type="text/javascript" src="jquery-1.8.2.js"></script>
30 <script>
31 $(function(){
32
33 /*对象继承*/
34 $("#btn1").click(function(){
35 var result = $.extend({},{name:"ws",age:"23"},{name:"king",sex:"man"});
36 $("#parent1").html("name:"+result.name+"--"+"age:"+result.age+"--"+"sex:"+result.sex);
37 });
38
39 /*方法继承*/
40 $.extend({hello:function(){
41 alert("全局方法");
42 }
43 });
44
45 /*fn插件方法*/
46 $.fn.extend({fnmethod:function(){
47 $(this).click(function(){
48 alert($(this).val());
49 })
50 }});
51 $("#name").fnmethod();
52
53 /*全局jquery方法*/
54 function hello(){
55 alert("子方法");
56 }
57 $("#btn3").click(function(){
58 $.hello();
59 });
60
61 /*类插件方法触发*/
62 $("#btn4").click(function(){
63 $.ws.printInfo({
64 name:$("#name").val(),
65 age:$("#age").val()
66 })
67 });
68
69 /*深度拷贝*/
70 $("#btn5").click(function(){
71 var result = $.extend(true,{},{name:"ws",location:{city:"ningbo",code:"315000",locOther:"other"},other:"第一岑对象中的参数"},{name:"king",location:{city:"shaoxin",code:"311824"}});
72     $("#p5").html("name:"+result.name+"--city:"+result.location.city+"--code:"+result.location.code+"--<b>locOther:"+result.location.locOther+"</b>--<b>other:"+result.other+"</b>");
73 });
74 $("#btn6").click(function(){
75 var result1 = $.extend({},{name:"ws",location:{city:"ningbo",code:"315000",locOther:"other"},other:"第一岑对象中的参数"},{name:"king",location:{city:"shaoxin",code:"311824"}});
76 $("#p6").html("name:"+result1.name+"--city:"+result1.location.city+"--code:"+result1.location.code+"--<b>locOther:"+result1.location.locOther+"</b>--<b>other:"+result1.other+"</b>");
77 });
78
79
80 });
81
82 /**类插件方法触发*/
83 (function ($) {
84 $.ws={
85 op:{
86 name:"ws",
87 age:20,
88 other:"other param"
89 },
90 printInfo:function(newop){
91 var op_ = $.extend({},this.op,newop);
92 console.info("name:"+op_.name);
93 console.info("age:"+op_.age);
94 console.info("sex:"+op_.other);
95 }
96 }
97 })(jQuery);
98 </script>
99</html>
2. [代码]说明
view sourceprint?
01Jquery的扩展方法extend是我们在写插件的过程中常用的方法
02 http://www.huiyi8.com/moban/
03模型：extend(dest,src1,src2,src3...); 解释：将src1,src2,src3...合并到dest中,返回值为合并后的dest
04
051. 全局方法
06为扩展jQuery类本身.为类添加新的方法
07以理解为添加静态方法
08$.extend({
09 hello:function(){alert(‘hello‘);}
10});
11如何调用：$.hello(), 它将覆盖其他子的hello()方法
12
132.jquery的实例对象方法
14（给jQuery对象添加方法）如：点击任何Dom对象弹出它的value
15$.fn.extend({fnmethod:function(){
16 $(this).click(function(){
17 alert($(this).val());
18 })
19}});
20
213.关于深度拷贝
22深度拷贝
23var result=$.extend( true, {}, {name:"ws",other:{x:xvalue,y:yvalue}},{name:"ws",other:{x:xx}}}
24=> {name:"ws",other:{x:xx,y:yvalue}}
25
26非深度拷贝
27var result=$.extend( false, {}, {name:"ws",other:{x:xvalue,y:yvalue}},{name:"ws",other:{x:xx}}}
28=> {name:"ws",other:{x:xx}}网站模板
29区别就是深度拷贝会把对象中的对象的所有属性都拷贝过来，而非深度拷贝则不会
30个人理解：可以吧对象理解为一个json对象，jquery的extend会继承所有对象中的顶层属性，而如果需要再继承对象属性中的属性，那么需要用到深度继承
31jquery默认的拷贝方式是非深度拷贝