1.Json方式的面向对象---通过在Json里面写函数来调用这个函数。
1 var obj={a: 12, b: 5, c: function (){ 2 alert(this.a); 3 }}; 4 5 obj.c();
Json的缺陷----对象只能是自己一个一个的添加,在大型项目并不适用。
1 var p1={ 2 name: 'paxster', 3 sex: '男', 4 showName: function () 5 { 6 alert('我的名字是:'+this.name); 7 }, 8 showSex: function () 9 { 10 alert('我的性别是'+this.sex+'的'); 11 } 12 }; 13 14 var p2={ 15 name: 'boychik', 16 sex: '女', 17 showName: function () 18 { 19 alert('我的名字是:'+this.name); 20 }, 21 showSex: function () 22 { 23 alert('我的性别是'+this.sex+'的'); 24 } 25 }; 26 p1.showName(); 27 p1.showSex(); 28 p2.showName(); 29 p2.showSex();
命名空间-----方便函数管理,分工明确
1 var paxster={};//一个空的json 2 paxster.common={ 3 getByClass: function () 4 { 5 }, 6 myAddEvent: function () 7 { 8 } 9 }; 10 11 paxster.fx={ 12 startMove: function () 13 { 14 }, 15 drag: function () 16 { 17 } 18 }; 19 20 paxster.common.getByClass()
面向对象写法---拖拽
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 <style> 5 #div1 {width:100px; height:100px; background:red; position:absolute;} 6 #div2 {width:100px; height:100px; background:yellow; position:absolute;} 7 </style> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <title>无标题文档</title> 10 <script> 11 window.onload=function () 12 { 13 new Drag('div1'); 14 new Drag('div2'); 15 }; 16 17 function Drag(id) 18 { 19 var _this=this; 20 21 this.disX=0; 22 this.disY=0; 23 this.oDiv=document.getElementById(id); 24 25 this.oDiv.onmousedown=function () 26 { 27 _this.fnDown(); 28 }; 29 } 30 31 Drag.prototype.fnDown=function (ev) 32 { 33 var _this=this; 34 var oEvent=ev||event; 35 this.disX=oEvent.clientX-this.oDiv.offsetLeft; 36 this.disY=oEvent.clientY-this.oDiv.offsetTop; 37 38 document.onmousemove=function () 39 { 40 _this.fnMove(); 41 }; 42 43 document.onmouseup=function () 44 { 45 _this.fnUp(); 46 }; 47 }; 48 49 Drag.prototype.fnMove=function (ev) 50 { 51 var oEvent=ev||event; 52 53 this.oDiv.style.left=oEvent.clientX-this.disX+'px'; 54 this.oDiv.style.top=oEvent.clientY-this.disY+'px'; 55 }; 56 57 Drag.prototype.fnUp=function () 58 { 59 document.onmousemove=null; 60 document.onmouseup=null; 61 }; 62 </script> 63 </head> 64 65 <body> 66 <div id="div1"> 67 </div> 68 <div id="div2"> 69 asdf 70 </div> 71 </body> 72 </html>
php里的继承
关于php注释
//这里是注释内容。这种是C++的注释风格,只能注释单行的内容。
#这里是注释内容。这种是Unix shell的注释风格,也是只能注释单行的内容。
/*
这里是注释内容。
这种注释方法可以使用多行注释,但绝对不能把/* */这个字串再嵌入注释里
*/
1 <?php 2 class Person 3 { 4 function __construct($name, $sex) 5 { 6 $this->name=$name;//->相当于js里面的. 表示“的” 7 $this->sex=$sex; 8 } 9 10 function showName() 11 { 12 echo $this->name;//echo相当于js里的alert 13 } 14 15 function showSex() 16 { 17 echo $this->sex; 18 } 19 } 20 21 class Worker extends Person //php里面的继承,使用extends继承父亲的特性 22 { 23 function __construct($name, $sex, $job) 24 { 25 parent::__construct($name, $sex); 26 27 $this->job=$job; 28 } 29 30 function showJob() 31 { 32 echo $this->job; 33 } 34 } 35 36 $w1=new Worker('paxster', '男', '扫大街'); 37 38 $w1->showName(); 39 $w1->showJob(); 40 ?>
JS里的继承方式
1 function Person(name, sex) 2 { 3 this.name=name; 4 this.sex=sex; 5 } 6 7 Person.prototype.showName=function () 8 { 9 alert(this.name); 10 }; 11 12 Person.prototype.showSex=function () 13 { 14 alert(this.sex); 15 }; 16 17 //------------------------------------- 18 19 function Worker(name, sex, job) //这个构造函数继承上面的父函数的功能,添加新的功能 20 { 21 //this->new出来的Worker对象 22 //构造函数伪装 调用父级的构造函数——为了继承属性 23 Person.call(this, name, sex); //继承父类的call方法 24 25 this.job=job; //新添加的功能 26 } 27 28 //原型链 通过原型来继承父级的方法----多次的值传递,产生一条原型链 29 //Worker.prototype=Person.prototype; 直接继承父类的方法,不使用这种方法 30 31 for(var i in Person.prototype) 32 { 33 Worker.prototype[i]=Person.prototype[i]; 34 } 35 36 Worker.prototype.showJob=function () 37 { 38 alert(this.job); 39 }; 40 41 var oP=new Person('blue', '男'); 42 var oW=new Worker('blue', '男', '打杂的'); 43 44 oP.showName(); 45 oP.showSex(); 46 47 oW.showName(); 48 oW.showSex(); 49 oW.showJob();
instanceof实例属于谁?
1 var arr1=[1,2,3]; 2 3 alert(arr1 instanceof Object); //arr1属于Object
引用类型的特点
1 var arr1=[1,2,3]; //第一个数组和第二个数组 2 var arr2=arr1; 3 4 arr2.push(4); //第一个数组和第二个数组输出的都是1,2,3,4 因为第一个数组引用了第二个数组,也就是第二个数组的改变影响了第一个,因为有一句arr2=arr1 5 6 alert('1:'+arr1); 7 alert('2:'+arr2);
改进后的引用
1 var arr1=[1,2,3]; 2 var arr2=[]; //第二个数组没有去取第一个数组的内容 3 4 for(var i in arr1) //数组arr2遍历数组arr1里面的内容,复制了一份arr1,不会存在儿子影响父亲的情况 5 { 6 arr2[i]=arr1[i]; 7 } 8 9 arr2.push(4); 10 11 alert('1:'+arr1); 12 alert('2:'+arr2);
使用继承实现拖拽
html结构代码:
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 <style> 5 #div1 {width:100px; height:100px; background:red; position:absolute;} 6 #div2 {width:100px; height:100px; background:yellow; position:absolute;} 7 </style> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <title>无标题文档</title> 10 <script src="Drag.js"></script> 11 <script src="LimitDrag.js"></script> 12 <script> 13 window.onload=function () 14 { 15 new Drag('div1'); 16 new LimitDrag('div2'); 17 }; 18 </script> 19 </head> 20 21 <body> 22 <div id="div1"> 23 </div> 24 <div id="div2"> 25 </div> 26 </body> 27 </html>
Drag.js
1 function Drag(id) 2 { 3 var _this=this; 4 5 this.disX=0; 6 this.disY=0; 7 this.oDiv=document.getElementById(id); 8 9 this.oDiv.οnmοusedοwn=function (ev) 10 { 11 _this.fnDown(ev); 12 13 return false; 14 }; 15 } 16 17 Drag.prototype.fnDown=function (ev) 18 { 19 var _this=this; 20 var oEvent=ev||event; 21 this.disX=oEvent.clientX-this.oDiv.offsetLeft; 22 this.disY=oEvent.clientY-this.oDiv.offsetTop; 23 24 document.οnmοusemοve=function (ev) 25 { 26 _this.fnMove(ev); 27 }; 28 29 document.οnmοuseup=function () 30 { 31 _this.fnUp(); 32 }; 33 }; 34 35 Drag.prototype.fnMove=function (ev) 36 { 37 var oEvent=ev||event; 38 39 this.oDiv.style.left=oEvent.clientX-this.disX+'px'; 40 this.oDiv.style.top=oEvent.clientY-this.disY+'px'; 41 }; 42 43 Drag.prototype.fnUp=function () 44 { 45 document.οnmοusemοve=null; 46 document.οnmοuseup=null; 47 };
limiitdrag.js
1 function LimitDrag(id) 2 { 3 Drag.call(this, id); 4 } 5 6 //LimitDrag.prototype=Drag.prototype; 7 8 for(var i in Drag.prototype) 9 { 10 LimitDrag.prototype[i]=Drag.prototype[i]; 11 } 12 13 LimitDrag.prototype.fnMove=function (ev) 14 { 15 var oEvent=ev||event; 16 var l=oEvent.clientX-this.disX; 17 var t=oEvent.clientY-this.disY; 18 19 if(l<0) 20 { 21 l=0; 22 } 23 else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth) 24 { 25 l=document.documentElement.clientWidth-this.oDiv.offsetWidth; 26 } 27 28 if(t<0) 29 { 30 t=0; 31 } 32 else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight) 33 { 34 t=document.documentElement.clientHeight-this.oDiv.offsetHeight; 35 } 36 37 this.oDiv.style.left=l+'px'; 38 this.oDiv.style.top=t+'px'; 39 };
系统对象:
- 宿主对象:由浏览器提供,BOM---window,DOM---document,不同的浏览器对他们的支持不一样
- 内置对象:静态对象----Global,Math
- 本地对象:非静态对象----需要new出来,也就是创建实例;常用对象----Object、Function、Array、String、Boolean、Number、Date、RegExp、Error