Prototype
1、 当声明一个函数的时候，浏览器会自动为该函数添加一个属性prototype，
2、 该属性的默认值为{}
3、 可以动态的给prototype增加key和value值
4、 另外一种形式动态添加key,value值
Json
动态的给json添加属性
第一种方式
第二种方式
动态的遍历json
Extends
第一种
1 function Person(){ 2 3 } 4 Person.prototype.setName = function(name){ 5 this.name = name; 6 } 7 Person.prototype.getName = function(){ 8 return this.name; 9 } 10 11 var p = new Person(); 12 p.setName("aaaa"); 13 14 function Student(){ 15 16 } 17 /** 18 * 让Student继承Person 19 */ 20 Student.prototype = Person.prototype; 21 Student.prototype = new Person();
第二种
1 /** 2 * 定义一个函数,该函数传递一个json格式的对象，返回值为一个函数 3 * var Person = extend({ 4 * a:'a', 5 * b:'b' 6 * }) 7 * var p = new Person(); 8 */ 9 10 function extend(json){ 11 function F(){ 12 13 } 14 /** 15 * 遍历传递过来的json格式的对象 16 * 把json对象的每一个key,value值传递给F的prototype 17 */ 18 for(var i in json){ 19 F.prototype[i] = json[i]; 20 } 21 return F; 22 } 23 24 25 var Person = extend({ 26 a:'a', 27 b:'b' 28 }); 29 var p = new Person(); 30 alert(p.a); 31 alert(p.b);
说明：F为在函数内部定义的函数，用Person来接收，也就是说在函数内部定义的函数，在外部使用，这种现象为闭包，所以继承的封装是闭包的一种应用。
第三种
1 /** 2 * 写一个函数extend 3 * var Person = extend({ 4 * aa:'aa', 5 * bb:'bb' 6 * }); 7 * Student继承了Person,扩充了一个json对象 8 * var Student = extend(Person,{ 9 * cc:'cc', 10 * dd:'dd' 11 * }); 12 */ 13 function extend(json,prop){ 14 function F(){ 15 } 16 /** 17 * json是一个对象 18 * 该if语句是第一次调用extend执行的 19 */ 20 if(typeof json == "object"){ 21 for(var i in json){ 22 //把json对象中的每一个key,value赋值给F的prototype 23 F.prototype[i] = json[i]; 24 } 25 } 26 27 /** 28 * json是一个函数 29 * 该if语句是第二次调用extend执行的 30 */ 31 if(typeof json == "function"){ 32 /** 33 * 把json的prototype的属性的引用赋值给F的prototype 34 */ 35 F.prototype = json.prototype; 36 /** 37 * 把传递过来的prop对象的每一个key,value赋值给F的prototype 38 */ 39 for(var i in prop){ 40 F.prototype[i] = prop[i]; 41 } 42 } 43 return F; 44 } 45 46 var Person = extend({ 47 a:'a', 48 b:'b' 49 }); 50 var p = new Person(); 51 alert(p.a); 52 alert(p.b); 53 var Student = extend(Person,{ 54 c:'c', 55 d:'d' 56 }); 57 var s = new Student(); 58 alert(s.a); 59 alert(s.c);
1 /** 2 * extends(a,b) 3 如果a是json对象,b是json对象，则把b赋值给a 4 如果a是函数，b是json对象，则把b赋值给a的prototype 5 如果a是json对象，b是函数，则把b的prototype的内容赋值给a 6 如果a是函数，b是函数，则把b的prototype中的内容赋值给a的prototype 7 */ 8 function extend(prop1,prop2){ 9 //prop1是一个对象 10 if(typeof prop1 == "object"){ 11 //prop2是一个对象 12 if(typeof prop2 == "object"){ 13 //把prop2的每一个key,value赋值给prop1 14 for(var i in prop2){ 15 prop1[i] = prop2[i]; 16 } 17 } 18 //prop2是一个函数 19 if(typeof prop2 == "function"){ 20 //把prop2函数的prototype属性的key,value赋值给prop1 21 for(var i in prop2.prototype){ 22 prop1[i] = prop2.prototype[i]; 23 } 24 } 25 } 26 //prop1是一个函数 27 if(typeof prop1 == "function"){ 28 //prop2是一个对象 29 if(typeof prop2 == "object"){ 30 for(var i in prop2){ 31 prop1.prototype[i] = prop2[i]; 32 } 33 } 34 //prop2是一个函数 35 if(typeof prop2 == "function"){ 36 for(var i in prop2.prototype){ 37 prop1.prototype[i] = prop2.prototype[i]; 38 } 39 } 40 } 41 return prop1; 42 } 43 44 var json = extend({},{a:'a',b:'b'}); 45 alert(json.b); 46 function Student(){ 47 48 } 49 Student.prototype.name = 5; 50 var json2 = extend({},Student); 51 alert(json2.name);
说明：完成了一个创建函数，并且在此基础上进行了扩充。
事件
事件的声明1
利用该方法声明事件不能防止事件被叠加
事件的声明2
unbind和bind不能给未来元素添加事件
事件的声明3
说明：
给body下的所有的div添加一个事件:click。
这些div不管是页面加载完毕以后就有的还是后来添加上的都可以添加事件。
闭包
概念
在函数中定义的函数，在外部要使用
使用场景
继承
见继承
可以做到函数的私有性和公开性
1 (function(){ 2 /** 3 * 在外部能够访问getName,getSex，init方法,但是不能够访问setName,setSex 4 */ 5 var data = { 6 name:'', 7 sex:'', 8 }; 9 function Person(){ 10 /** 11 * json对象中的key,value的内容就是将来要公开的api 12 */ 13 return { 14 getName:getName, 15 getSex:getSex, 16 init:init 17 }; 18 } 19 //私有方法 20 function setName(name){ 21 data.name = name; 22 } 23 //私有方法 24 function setSex(sex){ 25 data.sex = sex; 26 } 27 function getName(){ 28 return data.name; 29 } 30 function getSex(){ 31 return data.sex; 32 } 33 function init(name,sex){ 34 setName(name); 35 setSex(sex); 36 } 37 //Person函数赋值给了window的一个属性，这样外部就能访问了 38 window.Person = Person; 39 })(); 40 var p = window.Person(); 41 p.init("aaa","bbb"); 42 alert(p.getName()); 43 alert(p.getSex());
1 (function(){ 2 /** 3 * Person模块 4 */ 5 var Person = { 6 /** 7 * 数据 8 */ 9 data:{ 10 name:'', 11 sex:'' 12 }, 13 /** 14 * 操作的部分 15 */ 16 opt:{ 17 getName:function(){ 18 return Person.data.name; 19 }, 20 setName:function(name){ 21 Person.data.name = name; 22 }, 23 getSex:function(){ 24 return Person.data.sex; 25 }, 26 setSex:function(sex){ 27 Person.data.sex = sex; 28 }, 29 init:function(name,sex){ 30 Person.opt.setName(name); 31 Person.opt.setSex(sex); 32 } 33 }, 34 /** 35 * 公开api 36 */ 37 openAPI:function(){ 38 return { 39 getName:Person.opt.getName, 40 getSex:Person.opt.getSex, 41 init:Person.opt.init 42 }; 43 } 44 }; 45 window.Person = Person; 46 })(); 47 var p = window.Person.openAPI(); 48 p.init("aa","bb"); 49 alert(p.getName()); 50 alert(p.getSex());
Jquery的内核
(function(window){ //jQuery是一个函数，一个对象，一个构造器函数 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }, //定义了jQuery的prototype的内容 //fn=prototype //加在jQuery的prototype上的方法可以通过选择器创建出来的对象调用 jQuery.fn = jQuery.prototype = { 对象方法 ready:function(){ }, each:function(){ } }, //post方法和extend方法直接加在了jQuery对象上 全局方法 jQuery.post = function(){ }, jQuery.extend = function(){ } //程序员在用jQuery的时候，是window的一个属性 //jQuery=$ window.jQuery = window.$ = jQuery; $.fn=jQuery.prototype=window.$.prototype=window.$.fn=window.jQuery.fn=window.jQuery.prototype 加在jQuery的prototype上的方法和加在jQuery对象上的方法称为jQuery的插件开发 })(window);
Jquery的插件开发
1 (function($){ 2 $.myconfirm = function(){ 3 //获取到当前页面所有的超级链接 4 $("a").each(function(){ 5 //如果是删除的超级链接，则添加click事件 6 if($(this).text()=="删除"){ 7 $(this).unbind("click"); 8 $(this).bind("click",function(){ 9 return window.confirm("您确认要删除吗?"); 10 }); 11 } 12 }); 13 } 14 })($); 15 $().ready(function(){ 16 $.myconfirm(); 17 });
1 (function(jQuery){ 2 jQuery.fn.myeach = function(callback){ 3 //this为$("div") 4 var array = $(this); 5 for(var i=0;i<array.length;i++){ 6 /** 7 * 该回调函数是由正在遍历的每一个对象 8 */ 9 callback.call(array[i]); 10 } 11 } 12 jQuery.myeach = function(obj,callback){ 13 var array = obj; 14 for(var i=0;i<array.length;i++){ 15 /** 16 * 该回调函数是由正在遍历的每一个对象 17 */ 18 callback.call(array[i]); 19 } 20 } 21 })(jQuery); 22 23 $().ready(function(){ 24 $("div").myeach(function(){ 25 //输出每一个div中的内容 26 alert($(this).text()); 27 }); 28 29 jQuery.myeach($("div"),function(){ 30 //输出每一个div中的内容 31 alert($(this).text()); 32 }); 33 });
组件开发
Table案例
1 [ 2 { 3 pid:'1', 4 name:'a1', 5 sex:'b1' 6 },{ 7 pid:'2', 8 name:'a2', 9 sex:'b2' 10 },{ 11 pid:'3', 12 name:'a3', 13 sex:'b3' 14 } 15 ]
1 $().ready(function(){ 2 /** 3 * 1、创建命名空间 com.itheima09.oa.system.DepartmentGrid 4 * 2、把jQuery.fn.GridPanel赋值给DepartmentGrid 5 * 3、利用DepartmentGrid的createTable方法创建表格 6 */ 7 $.nameSpace("com.itheima09.oa.system.DepartmentGrid"); 8 $.extend(com.itheima09.oa.system.DepartmentGrid,jQuery.fn.GridPanel); 9 com.itheima09.oa.system.DepartmentGrid.methods.createTable({ 10 url:'person.json' 11 }); 12 });
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>table.html</title> 5 6 <meta name="keywords" content="keyword1,keyword2,keyword3"> 7 <meta name="description" content="this is my page"> 8 <meta name="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 <script src="../js/jquery-1.4.2.js"></script> 14 <script src="jQuery-plugin-table.js"></script> 15 <body> 16 <table id="personTable" border="1" cellpadding="5" cellspacing=0> 17 <tbody> 18 <tr> 19 <th item="pid">id</th> 20 <th item="sex">性别</th> 21 <th item="name">姓名</th> 22 </tr> 23 </tbody> 24 </table> 25 </body> 26 </html>
1 /** 2 * 做一个插件$.fn.GridPanel = { 3 * //该组件内部用到的参数 4 * defaults:{ 5 * url:'' 6 * }, 7 * //该json对象存放所有的方法 8 * methods:{ 9 * //创建表格 10 * createTable:function(){ 11 * 12 * }, 13 * //创建tr 14 * createTR:function(){ 15 * 16 * }, 17 * //创建td 18 * createTD:function(){ 19 * 20 * } 21 * } 22 * }; 23 * GridPanel是一个组件 24 * 在该组件中把表格的增加、删除、修改、查询的方法全部包含了 25 */ 26 (function(jQuery){ 27 //组件 28 jQuery.fn.GridPanel = { 29 //参数的默认值 30 defaults:{ 31 url:'' 32 }, 33 methods:{ 34 createTable:function(config){ 35 /** 36 * config为程序员传递过来的参数 37 * 把config中的内容覆盖掉defaults的内容 38 */ 39 $.extend(jQuery.fn.GridPanel.defaults,config); 40 //发出ajax请求，请求一个url，返回一个json格式的对象，用于动态的拼接表格 41 $.post(jQuery.fn.GridPanel.defaults.url,null,function(data){ 42 var jsonObj = eval("("+data+")"); 43 //循环jsonObj的每一个对象 44 $.each(jsonObj,function(){ 45 //循环了多少次，创建多少个tr 46 var $tr = jQuery.fn.GridPanel.methods.createTR(this); 47 $("tbody").append($tr); 48 }); 49 /** 50 * [ 51 { 52 pid:'1', 53 name:'a1', 54 sex:'b1' 55 },{ 56 pid:'2', 57 name:'a2', 58 sex:'b2' 59 },{ 60 pid:'3', 61 name:'a3', 62 sex:'b3' 63 } 64 ] 65 */ 66 }); 67 }, 68 //jsonObj中有多少个对象，就有多少个tr 69 /* 70 * trObj 71 * { 72 pid:'1', 73 name:'a1', 74 sex:'b1' 75 } 76 */ 77 createTR:function(trObj){ 78 var $tr = $("<tr></tr>"); 79 /** 80 * 循环遍历所有的th 81 * <th item="pid">id</th> 82 <th item="name">姓名</th> 83 <th item="sex">性别</th> 84 */ 85 var arrayTH = $("table *[item]"); 86 /* 87 * 遍历所有的th,有多少th就有多少td 88 */ 89 $.each(arrayTH,function(){ 90 var $th = $(this);//当前正在遍历的th 91 //每遍历一次创建一个td 92 //$th.attr("item") pid/name/sex 93 jQuery.fn.GridPanel.methods.createTD($tr,trObj[$th.attr("item")]); 94 }); 95 return $tr; 96 }, 97 createTD:function(tr,value){ 98 var $td = $("<td></td>").text(value); 99 tr.append($td); 100 } 101 } 102 }; 103 })(jQuery);
1 /** 2 * nameSpace("com.itheima09.oa.system.DepartmentGrid") 3 * window.com.itheima09.oa.system.DepartmentGrid 4 */ 5 (function($){ 6 $.nameSpace = function(namespace){ 7 //把com.itheima09.oa.system.DepartmentGrid变成一个数组 8 var array = namespace.split("."); 9 var temp = []; 10 for(var i=0;i<array.length;i++){ 11 temp.push(array[i]); 12 eval("window."+temp.join('.')+"={}"); 13 } 14 } 15 })($);
namespace.html
table_component.html