■[jQuery] extend で継承

jQuery の extend を用いた継承の書き方を調べました．

▼ コード

$(function() {

  // 親クラスの定義
  var PClass = function() {};
  PClass.prototype = {
    fn1: function() {},
    fn2: function() {
      console.log("親クラスの fn2 を実行");
    },
    fn3: function() {
      console.log("親クラスの fn3 を実行");
    }, 
  };

  // 子クラスの定義
  var CClass = function() {
    console.log("CClass のコンストラクタを実行");
  };
  $.extend(CClass.prototype, PClass.prototype, {
    fn1: function() {
      console.log("子クラスの fn1 を実行");
      },
    fn2: function() {
      console.log("子クラスの fn2 を実行");
      }
    });

  var v = new CClass();
  v.fn1();
  v.fn2();
  v.fn3();
  
  });

▼ 実行結果

CClass のコンストラクタを実行
子クラスの fn1 を実行
子クラスの fn2 を実行
親クラスの fn3 を実行

　解説とメモ

• gihyo.jp の jquery.jsを読み解く（470行目〜769行目） に，"extendメソッドは，jQueryオブジェクトを拡張するメソッドです。代表的な使い方は，jQuery.extend(target, object1, [objectN])で，targetのプロパティをobjectNのプロパティで上書きします。複数のObjectを指定した場合は，右に指定した Objectのプロパティが優先されます。" という解説があります．今回のコードでは，子クラスの定義として extend の最後の引数で，必要な関数をオーバーライドしています．
• 親クラスのfn1には具体的な実装がありません．空の定義の関数からなるクラスにすれば，抽象クラス，インターフェース的な用途のクラスが作成できることがわかります．

Permalink | コメント(0)

■[日常] ディノオープンラボラトリに検索欄を復活させるグリモン

GreaseMonkey はじめの一歩．ディノブログに一つ前のデザインのときにあった検索欄を復活させてみました．機能は残っていたので部品を追加/表示しただけです．

• ソース(gist)

▼ スクリーンショット

Permalink | コメント(0)