プロトタイプベースのオブジェクト指向ライブラリ「base.js」 - SIE Wiki - SIE

base.jsとは

「base.js」とは、プロトタイプベースのオブジェクト指向プログラミングを支援するためのJavaScriptライブラリです。SIEを軽量化するために作られた、自身も軽量なライブラリ( gzip圧縮で621バイト)です。オープンソースで、MITライセンスを採用しています。

特徴

オープンソース
プロトタイプベースのオブジェクト指向プログラミングの支援
JavaScriptで記述
軽量なライブラリ

ダウンロード

SIEのパッケージをダウンロードしてください。パッケージを解凍した後、その中にある tool/funcproto/ ディレクトリに、base.jsというファイルがあります。

Git

ソースコードはGitで取得できます。マスターブランチのレポジトリ、http://sourceforge.jp/projects/sie/scm/git/sie/tree/master/tool/funcproto/ 　をご覧下さい

サンプルコード

base("$hoge").mix( {

  init: function () {}

} ).up("$hogehoge");

base("$hoge").init();

別の書き方もできます。

base("$hoge").up("$hogehoge");

base("$hoge").mix( {

  init: function () {}

} );

できるだけ、簡単に書けるように、また、さまざまな書き方ができるようにすることで、オブジェクト指向プログラミングを軽量化できるのです。

初心者のための導入手順

ここでは、ブラウザ上で使いたいときに、JavaScript初心者のために、base.jsを導入するためのやり方を述べていきます。

まず、SIEをダウンロードをして、tar.gz形式のパッケージを解凍します。解凍できましたら、tool/funcproto/ディレクトリにある、「base.js」という名前のファイルを、自分の好きなディレクトリにコピーしてください。

コピー先のディレクトリを仮に「doc」としておきましょう。これで、準備はすみました。

ここまでの確認

SIEをダウンロードして、解凍
「base.js」というファイルがあるので探す
2のファイルを好きなディレクトリにコピー

続けて、HTMLファイルを用意して、docディレクトリにいれます。できましたら、そのHTML文書に、次の一文を追加してください。（処理を早くするため、できれば、body要素の終了タグの前がいいでしょう）

 <script src='base.js' type='text/javascript'></script>

これが、base.jsを読み込むためのscriptタグとなります。さらに、今度はサンプル用のJavaScriptファイルを用意します。ここでは仮に「sample.js」としておきます。これもHTMLファイルと同じように、docディレクトリにいれておきましょう。先ほどのHTMLファイルを文書エディターで開いて、<script>タグを書いておいた場所に、次の一文を追加します。

 <script src='sample.js' type='text/javascript'></script>

さて、sample.jsに次のようなコードを書いてみましょう。

base("$hoge").mix( {

  init: function () {
    alert("Hello! World");
  }

} );

base("$hoge").init();

後はブラウザを起動して、作ったHTMLファイルを読み込めば、Hello! Worldという文書がポップアップで表示されて、これで成功です。

ここまでの確認

HTML文書を用意
1で用意した文書に、base.jsを読み込むための、scriptタグを書き込み追加
別に、サンプル用のJavaScriptファイルを用意して、同様にscriptタグを追加
1のHTML文書をブラウザで読み込めばOK

API

base.jsでは、いろいろな関数やメソッドを用意していますので、それを解説していきます。

base 関数

オブジェクトを生成、参照するために、呼び出す関数です。引数には、文字列を使って、オブジェクトの名前を付けます。返り値は、生成したオブジェクトとなります。

base("$hoge");

作ったオブジェクトを参照したい時は、同じ名前で呼び出すことができます。

( base("$hoge") === base("$hoge") ); // true

このbase関数によって作られたオブジェクトには、あらかじめ、いくつかメソッドが用意されています。これらのメソッドを使うことで、オブジェクト指向プログラミングを実現します。

mix メソッド

オブジェクトを合成したい時に使います。強力なメソッドです。引数には、合成しておきたいオブジェクトを入れます。例えば、$hogeオブジェクトにhogehogeメソッドを指定してみましょう。

base("$hoge").mix( { 
  hogehoge: function(){}
} );

指定したhogehogeメソッドの呼び出しは以下のとおりです。

base("$hoge").hogehoge();

このサンプルコードでは、$hogeオブジェクトに、hogehogeメソッドを定義しています。もちろん、オブジェクトリテラル以外でも、別のオブジェクトでも構いません。

base("$$hoge").mix( base("$hoge") );

また、引数には関数を使うことができます。

base("$hoge").mix( function() {} );

thisには$hogeオブジェクトが入っています。ですので、次のような書き方ができます。

base("$hoge").mix( function() {
  this.hogehoge = function() {};
} );

このコードは、$hogeオブジェクトに、hogehogeメソッドを定義するわけです。このmixメソッドの返り値は、レシーバのオブジェクトですので、メソッドチェーンを使うことができます。

base("$hoge").mix({})
               .mix({});

up メソッド

オブジェクトの継承をするために、新しいオブジェクトを作るメソッドです。引数には、文字列を使って、新しく作るオブジェクトの名前をいれておきます。

base("$parent").up("$child");

返り値は新しく作ったオブジェクトです。この新規オブジェクトは、レシーバのオブジェクトを継承できます。継承すれば、親のメソッドやプロパティを使えるようになります。

base("$parent").mix( {
  hoge: function() {
    return 12;
  }
} );

base("$parent").up("$child").hoge(); //12

$childオブジェクトは$parentオブジェクトのメソッドが使えるので、$parentオブジェクトを継承しているわけです。

また、次のように、一度作ったオブジェクトは、親オブジェクトのプロパティで参照します。

base("$parent").$child;

base("$parent").$child.hoge(); //12

このような機能を、名前空間と呼びます。

on メソッド

メソッドの合成ができるメソッドです。おもに、非同期処理や初期化などで使います。第一引数には、メソッド名が、第二引数には、関数が入ります。

base("$hoge").mix( { 
                  hogehoge: function(){}
                } )
               .on( "hogehoge", function() {});

base("$hoge").hogehoge(); //hogehogeメソッドを呼び出す

関数は登録された順に実行されますので、ご注意下さい。なお、hogehogeメソッドが始めからない場合、最初に指定したonメソッドの関数が、メソッドとして登録されます。次のコードでは、xプロパティを1ずつ足していくhogehogeメソッドを作っています。

base("$hoge").on( "hogehoge", function() {
                      this.x = 0;
                      this.x++;
                })
               .on( "hogehoge" , function() {
                      this.x++;
                });

base("$hoge").hogehoge();
base("$hoge").x;           // 2;

第二引数で指定した関数のthisに注目してください。このthisは、束縛されていませんので、レシーバである$hogeオブジェクト ( つまり、 base("$hoge") の返り値 )を表しているのです。また、メソッドの引数を、関数の引数に引き継ぐことができますので、初期化も可能です。

base("$hoge").on( "initialize", function(obj) {
                      this.px = obj.x;
                })
               .on( "initialize" , function(obj) {
                      this.py = obj.y;
                });

base("$hoge").initialize( {
                  x: 2,
                  y: 3
                } );
base("$hoge").px;           // 2;
base("$hoge").py;           // 3;

このメソッドの利点は、upメソッドでも合成を引き継ぐことです。試しに、さきほどの初期化コードを、upメソッドを使って、$childオブジェクトにも使えるようにしましょう。

base("$hoge").on( "initialize", function(obj) {
                      this.px = obj.x;
                })

               .up("$child")

               .on( "initialize" , function(obj) {
                      this.py = obj.y;
                });

/*$childオブジェクトでinitializeメソッドを実行*/

base("$hoge").$child.initialize( {
                  x: 2,
                  y: 3
                } );
base("$hoge").$child.px;           // 2;
base("$hoge").$child.py;           // 3;

これを使えば、初期化のみならず、非同期処理にも応用できるでしょう。

of メソッド

callメソッドといっしょに使います。mixメソッドと書き方は同じですが、効果は異なります。このメソッドとcallメソッドを使うことで、コンストラクタで力を発揮します。例えば、簡単な足し算の例を見てみましょう。

base("$hoge").of( {
                  p: base("$h"),
                  pp: base("$hh"),

                  call: function() {
                    return this.p+this.pp;
                  }
} );

base("$h").call = function()  {
                  return 12;
};
base("$hh").call = function() {
                  return 15;
}
base("$hoge").call(); // 27を返す

このように足すことができましたが、具体的には何をやっているのでしょうか。詳しい解説はcallメソッドでやりたいと思います。

call メソッド

of メソッドでは、プロパティにオブジェクトを指定していました。上の例でいうと、$h オブジェクトと$hh オブジェクトが、それぞれ、pプロパティとppプロパティに指定されています。しかし、実際にはオブジェクトが入っていません。では、$h がどこに入っているかと言うと、$hoge オブジェクトの_pプロパティに入っています。

base("$hoge")._p === base("$h"); // true

このとき、of メソッドを使った$hoge オブジェクトに対して、callメソッドを呼び出します。すると、$h オブジェクトのcallメソッドが呼び出されて、返り値をp プロパティに入力するのです。

説明より、例を見てもらった方が理解しやすいでしょう。

base("$hoge").p; // このときはundefined。_pプロパティに$h オブジェクトが入る

base("$hoge").call(); // 27を返す

base("$hoge").p === base("$h").call(): // どちらも12なので、true

こうして、callメソッドを使うことで、オブジェクトそのものが一つの関数としてふるまうことができます。

いろいろな特長

オブジェクト指向プログラミングとして、いろいろなことができるのもbase.jsの特長です。

メソッドのオーバライド

まずは、$hogeオブジェクトと、それを継承した$childオブジェクトを作っておいて、hogehogeメソッドを定義します。そのメソッドのオーバライドをしてみましょう。この方法は、カンタンです。

 base("$hoge").mix( {
   hogehoge: function() {
     return "ow";
   }
 } )
  .up("$child").mix( {
    hogehoge: function() {
      return this.$hoge.hogehoge.call(this);
    }
  } );

 base("$hoge").$child.hogehoge(); // "ow"

$childのメソッドから、親の$hogeオブジェクトを呼び出すには、メソッド内で、this.$hogeプロパティをつければいいのです。こうすれば、$hogeオブジェクトを指定したことになります。

カプセル化

クロージャの仕組みと、mixメソッドを組み合わせると、カプセル化もできます。

 base("$hoge").mix( function() {
  var my = "es";
  this.hogehoge = function() {
    return my;
  }
 } );

この変数myがプライベートな変数です。クロージャによって、外部から保護されています。

Fork

Side Bar

base.jsとは

特徴

ダウンロード

Git

サンプルコード

初心者のための導入手順

ここまでの確認

ここまでの確認

API

base 関数

mix メソッド

up メソッド

on メソッド

of メソッド

call メソッド

いろいろな特長

メソッドのオーバライド

カプセル化