オブジェクト向け---高度
55495 ワード
1.Json方式のオブジェクト向け---Jsonに関数を書くことでこの関数を呼び出す.
Jsonの欠陥---オブジェクトは自分で1つずつ追加するしかなく、大規模なプロジェクトでは適用されません.
ネーミングスペース---関数の管理が便利で、分業が明確である
オブジェクト向け書き方---ドラッグ
phpの継承
phpコメントについて
//コメントです.これはC++の注釈スタイルで、単行の内容しか注釈できません.
ここではコメントの内容です.これはUnix shellの注釈スタイルであり、単行の内容しか注釈できない.
/*
ここではコメントの内容です.
この注釈方法では複数行の注釈を使用できますが、この文字列を注釈に埋め込むことは絶対にできません.
*/
JSでの継承方式
instanceofインスタンスは誰ですか?
参照タイプの特徴
改善されたリファレンス
継承を使用したドラッグ&ドロップ
html構造コード:
Drag.js
limiitdrag.js
システムオブジェクト:ホストオブジェクト:ブラウザによって提供され、BOM---window、DOM---document、ブラウザによってサポートが異なります. 内蔵オブジェクト:静的オブジェクト----Grobal,Math ローカルオブジェクト:非静的オブジェクト--newが出る必要があります.つまり、インスタンスを作成します.共通オブジェクト---Object、Function、Array、String、Boolean、Number、Date、RegExp、Error
1 var obj={a: 12, b: 5, c: function (){
2 alert(this.a);
3 }};
4
5 obj.c();Jsonの欠陥---オブジェクトは自分で1つずつ追加するしかなく、大規模なプロジェクトでは適用されません.
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.onmousedown=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.onmousemove=function (ev)
25 {
26 _this.fnMove(ev);
27 };
28
29 document.onmouseup=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.onmousemove=null;
46 document.onmouseup=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 };システムオブジェクト: