JS OOライブラリの選択

17716 ワード

一、プロトタイプ継承JavaScriptは、プロトタイプ継承と呼ばれるユニークなオブジェクトの創建と継承の方式を使用しています.この方法の背後にある前提(比較的多数のプログラマが熟知する従来のクラス/オブジェクトスキーム)は、オブジェクトのコンストラクタが別のオブジェクトから方法を継承し、プロトタイプオブジェクトを作成し、すべての新しいオブジェクトがこのプロトタイプから作成されます.この全過程はプロトタイプ属性(各関数に存在します.どの関数もコンストラクタになり得るので)によって助成されます.このような形の継承が特に難しいのは、プロトタイプが他のプロトタイプや他のコンストラクタから属性を継承するのではなく、実際のオブジェクトから継承されることである.
コード:
//  Person      

function Person( name ) {

    this.name = name;

}

// Person         

Person.prototype.getName = function() {

    return this.name;

};

//      User     

function User( name, password ) {

    //            /  ,

    //           

    this.name = name;

    this.password = password;

};

//User    Person       

User.prototype = new Person();

//            User  

User.prototype.getPassword = function() {

    return this.password;

}; 
     上記の例で一番重要な行はUser.prototype=new Person();私たちはこれが何を意味するのかを深く見てみます.UserはUserオブジェクトの関数コンストラクタの参照である.new Person()は新しいPersonオブジェクトを作成し、Personコンストラクタを使用します.この結果をUserコンストラクタのprototypeの値に設定すると、いつでもnew User()を使用するときに、新しく作成したUser類のオブジェクトもnew Person()を使用して作成したPerson類のオブジェクトのすべての方法を持つことを意味します.この特殊な技術を持って、JavaScriptに継承されるプロセスを簡単にパッケージ化するために、いくつかの異なる開発者によって作られたものを見てきました.
二、クラス引継ぎ
クラスの継承については、Duglasの古典的な記事があります.
  • Class cal Inherityance in JavaScript
  • この文章の中で、古い道はどうしてJavaScriptの中で類の継承を模擬することを分析しました.主な目的は多重化です.古い道の実現方式はFunction.prototypeにあげます. 増加  method 和  inherits 二つの方法を提供しました.  uber 文法飴
    三、Dean Edwards-Baseライブラリ
    JavaScriptオブジェクトの作成と継承分野の最近の成果はDean Edwardsが開発したBaseライブラリです.この特別なライブラリは、オブジェクトの機能を拡張するためのいくつかの異なる方法を提供しています.それ以外にも直感的なオブジェクト継承方式を提供しています.Dean最初にこのライブラリを開発したのは、彼の他のプロジェクトのためで、IE 7プロジェクト(IEのセットアップグレードとして)を含む.Deanのウェブサイトに掲載されている例はかなり分かりやすく、確実にこのライブラリの能力を示しています.http://dean.edwards.name/weblog/2006/03/base .これ以外にも、Baseソースコードディレクトリには、より多くの例が見られます.http://dean.edwards.name/base/.Baseライブラリは、かなり長くて複雑です.これは追加の注釈で説明する価値があります.(http://www.apress.com/のSource Code/Downloadが提供するコードに含まれます.)コメントを通読したコード以外に、Deanが彼のウェブサイトで提供した例を見に行くことを強く勧めます.よくある疑惑を明らかにするために役立ちます.しかし、スタートラインとして、あなたの一覧Baseライブラリのいくつかをあなたの開発に役立つかもしれない重要な点を紹介します.具体的には、プログラム3-4には、類作成、父相続と父類関数の書き換えを示しています.例.プログラム3-4.Dean EdwardsのBaseライブラリを利用して簡単なクラス作成と継承を行う例
    コード:
    //      Person 
    
    var Person = Base.extend({
    
        //Person      
    
        constructor: function( name ) {
    
            this.name = name;
    
        },
    
        //Person      
    
        getName: function() {
    
            return this.name;
    
        }
    
    });
    
    //         Person  User 
    
    var User = Person.extend({
    
        //  User     ,
    
        constructor: function( name, password ) {
    
            //                 
    
            this.base( name );
    
            this.password = password;
    
        },
    
        // User           
    
        getPassword: function() {
    
            return this.password;
    
        }
    
    });
    プログラム3-4のBaseライブラリはどうやって前に要約した3つの目標を達成し、オブジェクトの作成と継承の簡単な形を作り出したかを見てみましょう.Base.exted(...);この表式は、新しい基本的なコンストラクタオブジェクトを作成するために使用されます.この関数は、属性と値を含む単純なオブジェクトを授受します.属性はいずれもプロトタイプ方法としてオブジェクトに追加されます.Person.exted(...):これはBase.exted()です.構文の代替バージョン.すべての作成されたコンストラクタが使用されます.exted()方法はそれら自身のものを直接に受け取ることが可能です.プログラム3-4は最初のPersonコンストラクタから直接継承することによってUserコンストラクタを作成しました.メソッドは、親オブジェクトの書き換えられたオブジェクトを呼び出すために使用されます.Corockford'sのクラスの継承に使用されるthis.uber関数とは全く違っています.親タイプの方法名を提供する必要がありません.すべての対象者向けJavaScriptライブラリでは、Baseライブラリの書き換え方法の機能が一番良いと思います.個人的には、DeanのBaseライブラリは一番読みやすい、実用的、理解できる対象向けのJavaScriptコードを生産できると思います.もちろん、最終的にはどのライブラリを選ぶかは開発者自身が何を感じるかを見ます.次に対象となるJavaScrritコードを見ます.ptコードは流行のProttypeライブラリでどうやって実現されますか?
    四、Prottypeライブラリ
    コード:
    //      "Class"     
    
    var Class = {
    
        //                   
    
        create: function() {
    
            //            
    
            return function() {
    
                //           
    
                this.initialize.apply(this, arguments);
    
            }
    
        }
    
    }
    
    //   "Object"      ,                 
    
    Object.extend = function(destination, source) {
    
        //          
    
        for (property in source) {
    
            //          
    
            destination[property] = source[property];
    
        }
    
        //        
    
        return destination;
    
    } 
       Prottypeは確かに二つの明確な関数だけで対象に向かうシステムを作成して維持しています.観察コードを見るだけで、BaseやCrockfordのように強力ではないと判断できるかもしれません.二つの関数の前提は簡単です.
    Class.creat():この関数は簡単にコンストラクタとして利用できる匿名関数のパッケージに戻ります.この簡単なコンストラクタはオブジェクトのinitialze属性を呼び出して実行します.これは、オブジェクトの中に少なくとも関数を含むinitialize属性があります.そうでないと、コードが間違ってしまいます.Object.exted():この関数は、オブジェクトから他のオブジェクトに属性をコピーします.コンストラクタのプロトタイプの属性を使うと、より簡単に継承できるように設計できます.
    五、John Resig-Seimple JavaScript Inherityance
    I’ve been dong a lot of work,lately,with JavaScript inherityance–namely for my  work-in progress JavaScript book – and in dong so have exmined a number of different JavaScript classical-inheitance-simutlating techniques.Out of all the ones that I've looked at I think my favorites were the implements  base 2 and Prottotype.
    コード:
    /* Simple JavaScript Inheritance
    
     * By John Resig http://ejohn.org/
    
     * MIT Licensed.
    
     */
    
    // Inspired by base2 and Prototype
    
    (function(){
    
      var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
    
     
    
      // The base Class implementation (does nothing)
    
      this.Class = function(){};
    
     
    
      // Create a new Class that inherits from this class
    
      Class.extend = function(prop) {
    
        var _super = this.prototype;
    
       
    
        // Instantiate a base class (but only create the instance,
    
        // don't run the init constructor)
    
        initializing = true;
    
        var prototype = new this();
    
        initializing = false;
    
       
    
        // Copy the properties over onto the new prototype
    
        for (var name in prop) {
    
          // Check if we're overwriting an existing function
    
          prototype[name] = typeof prop[name] == "function" &&
    
            typeof _super[name] == "function" && fnTest.test(prop[name]) ?
    
            (function(name, fn){
    
              return function() {
    
                var tmp = this._super;
    
               
    
                // Add a new ._super() method that is the same method
    
                // but on the super-class
    
                this._super = _super[name];
    
               
    
                // The method only need to be bound temporarily, so we
    
                // remove it when we're done executing
    
                var ret = fn.apply(this, arguments);        
    
                this._super = tmp;
    
               
    
                return ret;
    
              };
    
            })(name, prop[name]) :
    
            prop[name];
    
        }
    
       
    
        // The dummy class constructor
    
        function Class() {
    
          // All construction is actually done in the init method
    
          if ( !initializing && this.init )
    
            this.init.apply(this, arguments);
    
        }
    
       
    
        // Populate our constructed prototype object
    
        Class.prototype = prototype;
    
       
    
        // Enforce the constructor to be what we expect
    
        Class.prototype.constructor = Class;
    
     
    
        // And make this class extendable
    
        Class.extend = arguments.callee;
    
       
    
        return Class;
    
      };
    
    })();
    デモの用例:
    var Person = Class.extend({
    
      init: function(isDancing){
    
        this.dancing = isDancing;
    
      },
    
      dance: function(){
    
        return this.dancing;
    
      }
    
    });
    
     
    
    var Ninja = Person.extend({
    
      init: function(){
    
        this._super( false );
    
      },
    
      dance: function(){
    
        // Call the inherited version of dance()
    
        return this._super();
    
      },
    
      swingSword: function(){
    
        return true;
    
      }
    
    });
    
     
    
    var p = new Person(true);
    
    p.dance(); // => true
    
     
    
    var n = new Ninja();
    
    n.dance(); // => false
    
    n.swingSword(); // => true
    
     
    
    // Should all be true
    
    p instanceof Person && p instanceof Class &&
    
    n instanceof Ninja && n instanceof Person && n instanceof Class
    jquery作者のJS OOライブラリは最も簡潔で精悍で、分かりやすく、Base 2とProttotypeの長所を合わせました.機能的には十分に全面的ではありませんが、少なくともシステムには十分に役立ちます.