= エクステンションフレームワーク = 1. [wiki:tutorial_extend#エクステンションレームワークとは エクステンションフレームワークとは] 1. [wiki:tutorial_extend#使い方 使い方] 1. [wiki:tutorial_extend#エクステンションを作成する エクステンションを作成する] 1. [wiki:tutorial_extend#複数の簡易名前空間を使う 複数の簡易名前空間を使う] == エクステンションフレームワークとは == Aelの特徴を利用した拡張方法を提供するフレームワークです。JavaScriptは名前空間がないので規模の大きいシステムやライブラリなどを作成する場合は名前の衝突を起こさないよう慎重に設計する必要がありますが、このフレームワークの簡易名前空間を使うことで問題を緩和できます。 簡易名前空間とはAelの複製です。Aelは一つのルートプロパティに全ての機能を収めているので、好み合わせてカスタマイズした複製を作成することで名前衝突と組み込みオブジェクトの汚染を回避しつつ、使いやすいAPIを提供できます。 次は"sample.string"エクステンションが既にインストールされた状態で、エクステンションフレームワークを利用した例です。 {{{ #!html
// 簡易名前空間(=Aelの複製)を作成する。
var Ns = Ael.namespace();
// Nsをsample.stringエクステンションで拡張する。
Ns.extend("sample.string");
// 拡張したメソッドを呼び出す。
Ns("12345").size(); // 5
}}}
[[BR]]
== 使い方 ==
次の流れになります。
1. エクステンションをインストール
1. エクステンションを指定してAelを拡張する
1. 機能を呼び出す
コードにすると以下のようになります。
{{{
#!html
// 1.エクステンションをAelにインストールする
Ael.extend().install({
id: "sample.string",
fn: function(Ael){
// Stringクラスに文字数を返すメソッドを追加する
Ael(Ael.lang.String).properties({
"ael size": function(){
return this.val().length;
}
});
}
});
// 2.エクステンションを指定してAelを拡張する
Ael.extend("sample.string");
// 3.拡張したメソッドを呼び出す
Ael("12345").size(); // 5
}}}
エクステンションを提供する側は1のコードを作成しておきます。そして利用する側は1~3を順に実行します。2はメソッドを呼び出す前なら任意のタイミングで良いです。エクステンションのインストールコードを一つの.jsファイルに纏めておくと、利用する側はそれを読み込んで好きなタイミングで2~3を行えばよいので扱いやすくなります。
=== エクステンションを作成する ===
エクステンションを作成するのはとても簡単です。次のオブジェクトもエクステンションです。
{{{
#!html
var extension = {
id: "sample.c",
version: 1.0,
dependencies: ["sample.a", "sample.b"],
fn: function(namespace){
// ここに拡張内容を書く(簡易名前空間以外を拡張するのもあり)
}
};
}}}
必須プロパティはidだけでfnも省略できます(無意味なものになりますが)。fnプロパティには拡張内容を関数で渡します。引数には簡易名前空間が渡されるのでクラスやプロパティを追加(※)してカスタマイズしてください。versionを定義しておくことで、複数のバージョンが混在している場合に新しいバージョンで拡張してくれます。dependenciesは拡張する前に依存するエクステンションを組み込んでくれます。
※追加方法などは[wiki:tutorial_ael Aelオブジェクト]や[wiki:tutorial_class クラスフレームワーク]を参照
=== 複数の簡易名前空間を使う ===
他の言語でもオープンソースのライブラリなどを利用すると生産性が上がる様に、特定の機能に特化するようカスタマイズされた簡易名前空間を組み合わせて利用すると複雑な機能も簡単に書けると思います。
{{{
#!html
// 1.DBから送信データを取得する
var data = DB("db1")
.select(function(){/*
select * from table1 where column1 = '123'
*/});
// 2.送信中ダイアログを表示する
var dialog = UI
.dialog("送信中です")
.show();
// 3.dataを送信する。
Net(data)
.send("http://send.to/", {
onfinish: function(){
// 4.dataの送信が終わったのでダイアログを閉じる
dialog.close();
}
});
}}}
※上記のDBやUI、Netはイメージです。Aelで提供していませんのでご注意ください。
[[BR]]
[wiki:tutorial_test 前へ]