人気ブログランキング | 話題のタグを見る

CLEditor プラグインの中身

正月休みで時間があったので、毎日ボーッと CLEditor プラグインのソースを眺めていたらいろいろな発見があったのでメモがわりに書いておくことにした。ソースを完全に理解した分けではないが、いろいろなテクニックが分かったので忘れない内に書いておく。

1. エンクロージャー

CLEditor のソースの先頭は (function($) { で始まっている。function の前に ( がついているのは、これを無名関数の中で実行させるためだ。CLEeditor の場合は (function($) { ... }) (jQuery) となっている。驚いたことに、CLEditor の場合は、ソース全体がこの無名関数の中で定義されている。このような、エンクロージャー関数の中で関数の定義を行うと、エンクロージャーの中の局所変数は、名前空間を占有しないレキシカル変数になる。大域変数を隠蔽するためにエンクロージャー関数ないで定義をするという方法は、jQuery の中でも使われているので、プラグインのように大域変数を増やしたくないときによく使われるのだろう。

エンクロージャーの中のレキシカル変数は、var の後に置かれており、 var BACKGROUND_COLOR = "backgroundColor", BUTTON = "button", ... のように一個の var の後でカンマ区切りで続けられており、最後に ; が出たところで定義が終わるので変数のまとまりがよく分かるようになっている。

2. デフォールトのオプション値の設定はオブジェクトで被ってしまう

これも、名前空間を節約するための方法だろう。CLEditor 場合は $.cleditor = { defaultOptions: { width: 500, ... のように入れ子構造になっている。設定値をオブジェクトにしておくと、それを引数で渡す場合も簡潔に記述できるので便利だ。

3. 定数は大文字で表す。

定数を BACKGROUND_COLOR のような大文字に置き換えておくとあとで読みやすい。 JavaScript でなくてもよく使われている方法だ。

4. $が先頭についた変数は、jQuery オブジェクトを表す。

JavaScript では驚いたことに $ を変数名に使うことができる。$result のように変数名の先頭に $ をつけるとその変数が、jQuery のオブジェクトであることを示すことができる。

5. 先頭に $.fn がついているのは、jQuery のアトリビュートか、インスタンスメソッドだ。

先頭に $.fn. がついている変数名は、jQuery オブジェクトのアトリビュートか、インスタンスメソッドだ。したがって、その内容を確かめようと思ったら、jQuery オブジェクトを取得して置かないと分からない。一方で、$.cleditor のように $. しかついていないのは静的変数か、静的メソッドなので、JavaScript コンソールから jQuery.cleditor のように調べることができる。

6. 配列の要素を | で区切った文字列にしておくと、split で簡単に配列に変換できる。

"bold | italic | underline | .. " のような文字列は簡単に "....".split('|') で配列に変換できる。いきなり配列を宣言しないで文字列を変換することによって、あとからの拡張が容易になる。jQuery はDOM要素を指定するのにセレクタの文字列を使うが、これも同じ発想だろう。プログラム内に小さなパーサを持っていれば、プログラム内にミニ言語を実現することができる。プログラムを利用するときの応用性の広さと記述のコンパクトさの両方を実現できる。

7. ループの記述に $.each() 関数を活用して、for 文を激減させている。

each 文は for 文に比べて記述が簡潔になるだけでなく、繰り返しの操作が直感的に理解しやすいのは Ruby でも経験済みだ。

8. editor = this のように、this の代わりにそのオブジェクトの内容が分かるように変数に置き換えている。

ちょっとした工夫だが、あとでソースを読むときにずいぶんと助けになる。

9. delete, apply など見慣れない JavaScript の命令が使われている。

delete, apply などは、JavaScript の参考書でもあまり見かけないが、強力な働きをするらしい。まだ理解していないのでここはあとで補充する。

10. $(<div>) の活用

$(<div>) のように、jQuery の $() 関数の引数にタグを渡すと、どこにも所属していない jQuery 要素を作ることができる。これを整形して最後に目的の場所に append するようにすれば、ポップアップを作るときなどは、今何をやっているかがわかりやすくなる。

11. jQuery の .index()、.extend()、.data() などの見慣れないメソッドが使われている。

これもよくわからないので宿題。

これだけ列挙してもまだ、ソースが読めたという状態ではないが、どうせすぐに忘れてしまうので、分かったことだけでもとにかく書き留めておくことにした。
by tnomura9 | 2011-01-02 17:15 | JavaScript | Comments(0)
<< canvas をjQueryで使う。 jQuery デモ >>