JavaScript類のパッケージ操作例詳細

7533 ワード

JavaScript クラスのパッケージ

本論文の実例はJavaScript類のパッケージ操作を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
まず、なぜパッケージを使うのですか？
これは情報の角度から出発したので、情報の隠れることは最終の目的で、カプセル化はただ隠れる1種の方法を実現するだけです。
ここで私達が理解したいのは、クラスの定義には以下の3つの方法があります。
（第一種）門戸を大きく開ける方式（第二の）私有と公有を命令規範で区別する方法（第三種）閉包する
各種類の定義方法を詳しく説明します。
最初のタイプに対しては、ドアが大きく開くタイプです。
まず、状況を見に行きます。
(1)簡単なクラスを宣言します。コードは以下の通りです。


 function Person(age,name) {
    this.name=name;
    
    this.age=age;
  }

(2)例示類+呼び出し


var p=new Person(-10,"  ");
alert(p.age)//

上記の運転結果から、プログラムは正常に実行されることが分かりますが、これは実際と一致しています。年齢がマイナスになっているため、私たちが望んでいるのではなく、正確に処理し、実際の状況に合った解決策が必要です。
上記の年齢の問題を解決するために、拡張タイプの原型チェーンを作ってもいいです。


Person.prototype={
    checkAge:function (age) {
     if(0<age&&age<150){
       return true;
     }else {
      return false;
        }
          }
       }

ソリューションを加えると、コードは以下の通りです。
（1）基本類


 function Person(age,name) {
    this.name=name;
    //        
    if(!this.checkAge(age)){
      throw new Error("     0-150  ");
    }
    this.age=age;
  }

（2）年齢判断検証


 Person.prototype={
          checkAge:function (age) {
            if(0<age&&age<150){
              return true;
            }else {
              return false;
            }
          }
      }

(3)呼び出し


var p2=new Person(10,"  ");
alert(p2.age)

私達は更にnameに読み取り検証を追加することができます。nameは空の時に標準値を使って同じ拡張タイプのプロトタイプチェーンです。
コードは以下の通りです


 Person.prototype["getName"]=function () {
        return this.name||"     ";
      }
//


var p3=new Person(10,"");
alert(p3.getName())//   “     ”

まとめてみます。クラスが門戸の大開タイプと定義されると、実際と合わない場合があります。種類に加えてプロトタイプを拡張して検証方法を加えることができますが、このようにすると、種類が大きくなります。
第二種類に対して、命名規範で私有と公有を区別する。
手順は以下の通りです
(1)クラスを定義する変数(プライベートと共有変数)+検証方法の呼び出し


//             
  function Person(name,age,email) {
    //      

    this._name;//  
    this.setName(name);//       ，      ，        

    this._age;//  
    this.setAge(age);
     this.email=email;//   
  }

(2)クラスの原型の上に賦課方法を拡張する


Person.prototype={//        ，          this  
    setName:function (name) {
    this._name=name;
    },
    setAge:function (age) {
      //           
      if(age>0&&age<150){//      ，       
        this._age=age;
      }else {
        throw new Error("      0 150   ")
      }
    }

  }

(3)適用


var text1=new Person("  ",-10,"qq.com");
 alert(text1._age)//-10              （       ）


 var p2=new Person("  2",10,"qq.cpm");
  alert(p2._age)//

まとめてみます。クラスの定義は、プライベート変数と共有変数を定義するためにネーミング仕様を使用し、検証方法と赋値方法をこのタイプのプロトタイプチェーンに拡張し、クラスでメソッドを呼び出してもいいです。（戻り値があります。）このように、クラスの肥大を招くことはありません。
第三の種類に対して、クローズドは実装されます。
このような方式は高級言語に似ています。定義クラスではget、set方法を使ってデータの操作を実現します。
（1）基本クラス（変数＋操作変数の方法）を定義します。


  function Person(name,age,email) {
    //(1)             get set  
    this.email=email;//    
    //get  
    this.getName=function (name){
      return this.name;//    this   ？  set  
    }
    this.getAge=function (age){
      return this.age;
    }
    //set              
    this.setName=function (name) {
      this.name=name;//Person.prototype.name      get this      
    }
    this.setAge=function (age) {
      if(age>0&&age<150){
        this.age=age;//Person.prototype.name      get this      
      }else {
        throw new Error("      0 150   ");
      }
    }


    //（2）                    set  get   ，  get      
    this.init=function () {
     this.setName(name);
     this.setAge(age);
    }
    this.init();//    
  }

(2)適用


var p=new Person("text",-10,"qq.com");
  alert(p.age)//             ，

注：別途のクローズドの書き方 varモード


 var _sex="M";
    this.getSex=function () {
       return _sex;
    }
    this.setSex=function () {
        _sex=sex;
    }

まとめてみます
（1）ここでは関数と属性の簡単なパッケージだけでなく、さらに複雑な業務はパッケージ化が必要であり、getとsetの方法を使用する場合、二つの順序の初期化のためのコンストラクタが必要で、その後呼び出しを表示し、setがget前のものであることを確認する。
（2）クローズドの実現は、getとsetによって達成され、this.方式で値を付与する際に外に露出することなくget、set法によりクローズドが実現される。
二，スタティック化
一般的な属性と関数はオブジェクトに作用しますが、静的な関数はクラスに定義されます。
第一種類の静的関数の書き方：クラスに書きます。
（1）まず、簡単なクラスを定義します。例えば、


 function Person(name,age) {
    this.name=name;
    this.age;age;
    this.showName=function () {
      alert(this.name);
    }
  }

(2)クラスに書く方法を定義します。たとえば、Person.add-』(クラス.関数)または(クラス.属性)


 Person.add=function (x,y) {
    return x+y;
  }

(3)適用


alert(Person.add(10,20));//   30

まとめてみますと、この定義は高級言語の静的な類に似ています。高級言語と同じようにクラスを通じて直接に呼び出されます。
第二の静的関数の書き方：クラス内のクラスを使用して、各オブジェクトはすべて現在のクラスの同じ属性と関数を持っています。注意: クラスの中の種類の方式は1回限りの賦課です。
(1)クラスの定義フォーマットは以下の通りです。


var cat=(function () {
    //      
     var AGE=1;
     function add(x,y) {
       return x+y;
     }


     return function () {//    return                         AGE add           
       this.AGE=AGE;
       this.add=function (x,y) {
        return add(x,y)
       }
     }
  })(）//   cat，     return

（2）应用


 alert(new cat().add(1,3))//4
 alert(new cat().AGE)//1

要約します。上のコードフォーマットからは、クラスの中でプライベートな属性と方法が定義されていることが分かります。この種類のプライベート静的属性と方法のクラスを初期化することができます。外部クラスを実際に例証すると、実質的にはこのクラスの内部のクラスreturnによって実例化されます。
パッケージの利点:
（1）内部データの完全性を保護することはパッケージ化の大きな目的である。
（2）オブジェクトの再構成が簡単になります。答えはきっと怖いです。
(3)化モジュール間の結合
不正行為:
（1）プライベートな方法はユニットテストが難しくなります。
（2）パッケージを使用することは、複雑なコードとの関係を意味する。
（3）最大の問題はJavaScriptで実装するのが難しいです。自由自在に操作しない限り、どこでもカプセル化してテストが難しくなります。
以上は学習の初歩的な理解だけで、よくないです。もっと理解してほしいです。
興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRun上記コードの運行効果をテストします。
もっと多くのJavaScriptに関する内容に興味がある読者は、当駅のテーマを見ることができます。「javascript対象向け入門教程」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」および「JavaScript数学演算の使い方のまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。

詳しくはspringの中でElasticsearchのコードを使って実現します。

jquery+css 3によって実現されたクラシカルポップアップ層の効果例