jQuery extend() & jQuery.fn.extend()，插件编写

资料来源：网上资料整理并自行改编测试。复制以下代码并依赖jquery.js，jquery.validate.js即可执行。有误之处，请@我啊，敬请赐教。
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>jQuery extend() & jQuery.fn.extend()</title>
  6 <script src="../../scripts/jquery.js" type="text/javascript"></script>
  7 <script src="lib/jquery.validate.js" type="text/javascript"></script>
  8 <script type="text/javascript">
  9 $(document).ready(function() {
 10 　　function log(){
 11 　　　　console.log(arguments[0]);
 12 　　}
 13 
 14 　　//jQuery实现log
 15 　　jQuery.extend({ 
 16 　　　　log:function(){log(arguments[0])} 
 17 　　}); 
 18　　 $.log("A test to console.log something by jQuery.extend!");
 19 
 20 　　var result=null;
 21 　　log("======================== test1 ========================");
 22 　　//jQuery.extend函数，简单理解，就是合并对象,把后面的合入前面的。如下例：
 23 　　result = $.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"});
 24 　　log(result); //得到结果：Object {name: "Jerry", age: 21, sex: "Boy"}
 25 
 26 　　log("======================== test2 ========================");
 27 　　result=$.extend({name:"Tom",age:21},{name:"Jerry",sex:"Boy"});
 28 　　log(result);    //得到结果同上
 29 
 30 　　log("======================== test3 ========================");
 31 　　var jack = {name:"Jack",age:21};
 32 　　var jane = {name:"Jane",sex:"girl",birthday:'2015-01-01'};
 33 　　result=$.extend(result,jack,jane);
 34 　　log(result);    //得到结果：Object {name: "jane", age: 21, sex: "gitl", birthday: "2015-01-01"}
 35 
 36 　　log("======================== test4 ========================");
 37 　　//Jquery.extend函数重载原型：  extend(boolean,dest,src1,src2,src3...)
 38 　　//第一个参数boolean代表是否进行深度拷贝，其余参数同上。（重写并且继承自己对象没有的参数）
 39 　　//深层拷贝，例子：
 40 　　result=$.extend( 
 41 　　　　　　　　true,  
 42 　　　　　　　　{},  
 43 　　　　　　　　{ name: "John", location: {state: "Alaska",county:"USA"} },  
 44 　　　　　　　　{ name: "Jack", location: {city: "Beijing",county:"China"}} 
 45 　　); 
 46 　　log(result);    //得到结果：Object {name: "Jack", location: {city: "Beijing",county: "China",state: "Alaska"}}
 47 
 48 　　log("======================== test5 ========================");
 49 　　//浅拷贝就是（重写但不继承自己子对象没有的参数），例子：
 50 　　result=$.extend( 
 51 　　　　　　　　false,  
 52 　　　　　　　　{},  
 53 　　　　　　　　{ name: "John", location: {state: "Alaska",county:"USA"} },  
 54　　　　　　　　 { name: "Jack", location: {city: "Beijing",county:"China"} } 
 55 　　); 
 56 　　log(result);    //得到结果：Object {name: "Jack", location: {city: "Beijing",county: "China"}}
 57 
 58 　　log("======================== test6 ========================");
 59 　　result=$.extend( 
 60 　　　　　　　　false,  
 61 　　　　　　　　{},  
 62 　　　　　　　　{ name: "John", location: {state: "Alaska",county:"USA"} },  
 63　　　　　　　　 { name: "Jack",location:{}} 
 64　　 ); 
 65 　　log(result);    //得到结果：Object {name: "Jack", location: {city: "Beijing",county: "China"}}
 66 
 67 　　log("======================== test7 ========================");
 68 　　//jQuery对象下创建一个子对象，
 69 　　jQuery.extend({ 
 70 　　　　　　　　yourName:'ming',  
 71 　　　　　　　　age:12,  
 72 　　　　　　　　sex:'boy'  
 73 　　}); 
 74 　　log($.yourName);// 'Ming'
 75 　　log($.age); // 12
 76 　　log($.sex); // 'boy'   
 77 
 78 　　log("======================== test8 ========================");
 79 　　//这个子对象名其实就是在jQuery全局对象中扩展一个myPlugin的命名空间，
 80 　　//其主要作用是把前面的jQuery对象创建的全局函数都封闭在这个子对象里面，避免jQuery对象的全局函数中发生命名空间的冲突。
 81 　　//这样，其实就是我们创建的一个插件的名字
 82 　　jQuery.myPlugin = {   
 83 　　　　　　　　yourName:'ming',  
 84 　　　　　　　　age:12,  
 85 　　　　　　　　sex:'boy',
 86 　　　　　　　　foo:function(){log('abc')},   
 87 　　　　　　　　bar:function(){log(123)} 
 88     };
 89 　　log($.myPlugin.yourName);// 'Ming'
 90 　　log($.myPlugin.age);// 12
 91 　　log($.myPlugin.sex);// 'boy'
 92 　　$.myPlugin.foo();// 'abc'
 93 　　$.myPlugin.bar();// 123
 94 
 95 　　log("======================== test9 ========================");
 96 　　//用jQuery.extend()这样改写上面的代码：
 97 　　jQuery.extend({
 98 　　　　　　　　myPlugin:{   
 99 　　　　　　　　　　foo:function(){log('abc')} ,  
100 　　　　　　　　　　bar:function(){log(123)} ,    
101 　　　　　　　　　　yourName:'ming',  
102 　　　　　　　　　　age:12 ,   
103 　　　　　　　　　　sex:'boy'  
104 　　　　　　　　}  
105         }  
106     ); 
107 　　log($.myPlugin.yourName);// 'Ming'
108 　　log($.myPlugin.age);// 12
109 　　log($.myPlugin.sex);// 'boy'
110 　　$.myPlugin.foo();// 'abc'
111 　　$.myPlugin.bar();// 123
112 
113 　　log("======================== test10 ========================");
114 　　//我们还可以在上面的基础上，再用jQuery.extend(target,obj)对myPlugin对象（即插件）进一步扩展：
115 　　var temp = {
116 　　　　hello:function(){return 'hello';}
117 　　};
118 　　jQuery.extend($.myPlugin , temp); 
119 　　log($.myPlugin.hello());// 'hello'
120 
121 　　log("======================== test11 ========================");
122 　　//或者修改myPlugin映射中的名-值对：
123 　　jQuery.extend($.myPlugin , {sex:'2'} );//后面的映射参数会覆盖前面myPlugin的映射
124 　　log($.myPlugin.sex);// '2'  
125 
126 　　log("======================== test12 ========================");
127 　　//jQuery.extend和jQuery.fn.extend的区别
128 　　//我们先把jQuery看成了一个类，这样好理解一些。
129 　　//jQuery.extend()，是扩展的jQuery这个类。
130 　　//假设我们把jQuery这个类看成是人类，能吃饭能喝水能跑能跳，现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能。
131 　　//这样的话，不论是男人，女人，xx人.....等能继承这个技能（方法）了。
132 　　//就像上面写的那样：
133 　　jQuery.extend({ 
134 　　　　log:function(){console.log(arguments[0]);} 
135 　　}); 
136 　　$.log("这样就能打印出来这个字符串");//这样(控制台F12)就能打印出来这个字符串
137 
138 　　log("======================== test13 ========================");
139 　　//这说明啥啊，这说明$.log变成了jQuery这个类本身的方法（object）嘛。他现在能”唱歌“了。
140 　　//但是吧，这个能力啊，只有代表全人类的 jQuery 这个类本身，才能用啊。你个人想用，你张三李四王五麻六，你个小草民能代表全人类嘛？
141 　　//所以啊，这个扩展也就是所谓的静态方法。只跟这个类本身有关。跟你具体的实例化对象是没关系滴。
142 　　//我们再看看jQuery.fn.extend()这个方法。
143 　　//从字面理解嘛，这个拓展的是jQuery.fn的方法。
144 　　//jQuery.fn是啥玩意呢？
145 　　//源码如下：
146 　　//jQuery.fn = jQuery.propotype = {
147 　　//　　init:function(){}
148 　　// ...
149 　　//}
150 　　//哦，原来jQuery.fn=jQuery.prototype，就是原型啊。
151 　　//那就一目了然了，jQuery.fn.extend拓展的是jQuery对象（原型的）的方法啊！
152 　　//对象是啥？就是类的实例化嘛，例如
153 　　//$("#abc") 
154 　　//这个玩意就是一个实例化的jQuery对象嘛。
155 　　//那就是说，jQuery.fn.extend拓展的方法，你得用在jQuery对象上面才行啊！他得是张三李四王五痳六这些实例化的对象才能用啊。
156 　　//说白了就是得这么用（假设xyz()是jQuery.fn.extend()拓展的方法）：
157 　　//$('selector').xyz();
158 　　//你要是这么用$.xyz()；是会出错误滴。如：
159 　　jQuery.fn.extend({
160 　　　　display:function(){
161 　　　　　　$(this).css("display","block"); 
162 　　　　}
163 　　});
164 
165 　　try{
166　　 　　$.display();
167 　　}catch(err){
168 　　　　$.log("请亲进入debug模式，设置断点后看效果哈");
169 　　　　$.log(err);
170 　　　　$("#abc").html("亲，能看到我了吧");
171 　　　　//$("#abc").display();//注释下看效果也可以哈
172 　　}
173  
174 　　//jQuery.fn.extend()和上边的jQuery.extend()区别区别一目了然吧？
175 　　//其实吧，jQuery.extend()这个方法，主要是用来拓展个全局函数啦，例如$.ajax()这种，要不就是拓展个选择器啦，例如$.fn.each()，当选择器用。
176 　　//大部分插件都是用jQuery.fn.extend()。
177 });
178 </script>
179 </head>
180 <body>
181 <p id="abc" style="display:none">亲，看不到我吧</p>
182 </body>
183 </html>