Tigra Menuの解析(1)

　1.全体構造

Tigra Menuの全体は、3つのJavascriptファイル、1つのCSSファイル及びmenuを表示するための1つのHTMLの、合計5つのファイルから構成される。

まず、JavascriptファイルとCSSファイルは全て外部化されてHTMLから呼び出されると共に、メニューはHTML内に埋め込まれたたった1つの次のインスタンス生成文により表示される。

new menu (MENU_ITEMS, MENU_POS, MENU_STYLES);

//MENU_ITEMSはメニュー項目であり、メニューの階層に対応した
　子持ちの配列となっている。
//MENU_POS, MENU_STYLESはそれぞれが2次元配列であり1次元目は
　連想配列となっている。

JavascriptとCSS内では、メニューの構造、メニュー各項目、Onmouseout時の色、Onmouseover時の色、Onclick時の動作、階層メニューの表示とその位置及び隠蔽、などが定められており、Javascript文は、(1)menuとmenu_itemの2つの大きなクラス定義、(2)メニュー項目とリンク先、各種イベント処理、メニュー項目の位置・色・表示/非表示等のための定数値を設定する連想配列に大別される。

そして先の2つのクラス内において、当該コンストラクタのメソッドとしてイベント処理関数が定義されている。

＜Javascript文の構成＞

menu.js　　　　　　：メニューの構造を設定する
menu_items.js　　　：メニュー項目を設定する
menu_tpl.js　　　　：メニューの装飾（位置、色等）を設定する

　2.各部

つづく・・・

　関数、変数、配列、オブジェクトとメソッド。
　これらの用語と意味はJavascriptの学びはじめの時点で一通り学習するのが常となっている。
　しかし、コンストラクタ、クラス、インスタンスについてはどうだろうか？
　言葉だけは聞いたことがあるが、実際にそれらの概念を理解し、縦横に使いこなせるような、そんな学習の出来る書籍やサイトがどれだけあるだろう？
　不勉強にしてこれまで、これらの概念の理解は全くと言って良いほど欠如していたし、もちろん利用することなどあり得なかった。
　しかし、大変スマートなTigraMenuに遭遇して、このままではいかん！可能な限りの知恵を付けてこそJavascriptを使いこなせるのだ、との認識に至った。
　そんなわけで、TigraMenuのソースコード解析を通じて、Javascriptの基礎の基礎を学習し直すことになったのである。