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>
