JavaScript対象(1)-パッケージ

1、何が対象向けプログラミングですか?対象の思想でコードを書くということは、対象に向けてプログラミングすることです.
2、オブジェクト指向プログラミング(OOP)の特性パッケージ、継承、多状態.
3、オブジェクトの構成方法(挙動、操作)――関数:プロセス、ダイナミック(オブジェクトの下の関数)属性——変数:状態、静的(オブジェクトの下の変数)
4、オブジェクトを作成するモードは通常、オブジェクトを作成する時に以下の方式を採用します.

var obj = new Object();  //         
obj.name = '  ';  //  
obj.showName = function(){  //  
    alert(this.name);
};
obj.showName();

上でコードを作成する方式を対象字面量といいます.オブジェクトの字面量はオブジェクトを作成することができますが、複数のオブジェクトを作成する際にコードの大量重複問題が発生します.

var obj = new Object();  //         
obj.name = '  ';  //  
obj.showName = function(){  //  
    alert(this.name);
};
obj.showName();

var obj2 = new Object();  //          
obj2 .name = '  ';  //  
obj2 .showName = function(){  //  
    alert(this.name);
};
obj2 .showName();

上記の問題を解決するために、一つの関数をカプセル化して、複数のオブジェクトを作成します.

function createPerson(name){
    //1.  
    var obj = new Object();
    //2.  
    obj.name = name;
    obj.showName = function(){
        alert( this.name );
    };
    //3.  
    return obj;
}
var p1 = createPerson('  ');
p1.showName();
var p2 = createPerson('  ');
p2.showName();

上のパッケージ関数は、オブジェクトを作成する別のモードです.工場モードはコード重複の問題を解決しましたが、p 1とp 2の間には内在的な連絡がなく、同じ原型オブジェクトの例を反映できません.工場モードで作成したオブジェクトとシステムオブジェクトを比較すると、2つの違いがあります.1つは関数名の頭文字で、2つはnew 1つは関数の内部で、1つは関数の外部で、上のパッケージ関数の頭文字を大文字で、newを取り出すと、次のパターンがあります.

function CreatePerson(name){
    this.name = name;
    this.showName = function(){
        alert( this.name );
    };
}
var p1 = new CreatePerson('  ');  //new           。 new       ，        this         ，           this（    ），           return  。
var p2 = new CreatePerson('  ');

上にオブジェクトを作成するモードは、構造関数モードです.コンストラクター法は使いやすいですが、メモリを浪費する問題があります.各インスタンスオブジェクトに対して、CreatePerson方法は同じ内容であり、毎回インスタンスを生成すると、メモリを多く占用する.これは環境にもやさしいし、効率にも欠ける.共有されている属性と方法をメモリに一度だけ生成して、そのメモリアドレスをすべて指してもいいですか?

alert( p1.showName == p2.showName );  //false

各コンストラクタにはプロトタイプの属性があり、他のオブジェクトを指します.このオブジェクトのすべての属性と方法は、構造関数の例によって継承されます.私たちはそれらの不変の属性と方法を直接プロタイプオブジェクトに定義できます.この方式が原型モードです.

function CreatePerson(name){
    this.name = name;
}
CreatePerson.prototype.showName = function(){
    alert( this.name );
};
var p1 = new CreatePerson('  ');  
var p2 = new CreatePerson('  ');
alert( p1.showName == p2.showName );  //true

5、対象向けプログラミング例:ドラッグしてまず普通の書き方を書きます.オブジェクト指向の書き方に変更します.一般的な方法は変形します.関数ネスト関数が現れないようにします.グローバル変数があります.オンラインでは付加的な関数ではない語句を個々の関数に置いてください.オブジェクト向けのOloadでオブジェクトを作成します.グローバル変数は属性です.関数は方法です.
過程式の書き方:

<script type="text/javascript">
    window.οnlοad=function(){
        var oDiv=document.getElementById("div1");
        var disX=0;
        var disY=0;

        oDiv.οnmοusedοwn=function(ev){
            var ev= ev || window.event;
            disX=ev.clientX-oDiv.offsetLeft;
            disY=ev.clientY-oDiv.offsetTop;

            document.οnmοusemοve=function(ev){
                var ev=ev||window.event;
                oDiv.style.left=ev.clientX-disX+'px';
                oDiv.style.top=ev.clientY-disY+'px';
            }

            document.οnmοuseup=function(){
                document.οnmοusemοve=null;
                document.οnmοuseup=null;
            }

            return false;
        }
    }
script>

変形後:

<script type="text/javascript">
    var oDiv=null;
    var disX=0;
    var disY=0;

    window.οnlοad=function(){
        oDiv=document.getElementById("div1");
        oDiv.οnmοusedοwn=fnDown;
    }

    function fnDown(ev){
        var ev= ev || window.event;
        disX=ev.clientX-oDiv.offsetLeft;
        disY=ev.clientY-oDiv.offsetTop;

        document.οnmοusemοve=fnMove;
        document.οnmοuseup=fnUp;

        return false;
    }

    function fnMove(ev){
        var ev=ev||window.event;
        oDiv.style.left=ev.clientX-disX+'px';
        oDiv.style.top=ev.clientY-disY+'px';
    }

    function fnUp(){
        document.οnmοusemοve=null;
        document.οnmοuseup=null;
    }

script>

対象向けの書き方に変えます.

<script type="text/javascript"> 
    window.οnlοad=function(){
        var d1=new Drag('div1');  //onload       
        d1.init();
    }

    function Drag(id){  //    
        this.oDiv=document.getElementById(id);
        this.disX=0;
        this.disY=0;
    }

    //            
    Drag.prototype.init=function(){
        var This=this;
        this.oDiv.οnmοusedοwn=function(ev){
            var ev=ev || window.event;
            This.fnDown(ev);
            return false;
        };
    }

    Drag.prototype.fnDown=function(ev){
        var This=this;
        this.disX=ev.clientX-this.oDiv.offsetLeft;
        this.disY=ev.clientY-this.oDiv.offsetTop;

        document.οnmοusemοve=function(ev){
            var ev=ev || window.event;
            This.fnMove(ev);
        };
        document.οnmοuseup=this.fnUp;

    }

    Drag.prototype.fnMove=function(ev){

        this.oDiv.style.left=ev.clientX-this.disX+'px';
        this.oDiv.style.top=ev.clientY-this.disY+'px';
    }

    Drag.prototype.fnUp=function(){
        document.οnmοuseup=document.οnmοusemοve=null;
    }

script>