• お役立ち

Fancyboxのソースコードから見るJavaScriptのクラス定義記述

  • このエントリーをはてなブックマークに追加
  • LINEで送る

今回はまたしてもマニアックですが、Fancyboxのソースコードを見ていて気がついたことなどを備忘録的につらつらと。

WEBページ上で画像を印象的に表示させる手段としてここ数年人気となっているLightbox。ですが、prototype.jsベースのため、jQueryベースで開発している案件の場合に若干ややこしいことと、画像以外(swfコンテンツやiframeでの外部ページなど)のコンテンツ表示ができないというのが残念なポイントです。

で、そのLightboxの代替品というのがいろいろ出回っているわけですが、うちでよく使ってるのがFancyboxというモノ。

Fancybox – Fancy lightbox alternative

jQueryベースな上に画像以外のコンテンツにもバッチリ対応してるので、割合重宝してます。

今回ふとそのソースコードを見ていて面白いと思ったのがクラス定義の記述方法。途中略しますが、こんな感じ↓

/*
* FancyBox - jQuery Plugin
(中略)
*/
;(function($) {
	(中略)
	$(document).ready(function() {
		$.fancybox.init();
	});
})(jQuery);

コメント表記の後いきなり「;」がきて、さらに匿名関数が続いてます。パッと見ではよくわからなかったんですが、調べてみるとどうやらjQueryのクラス定義も同様に構成されてる模様。冒頭の「;」は、一種の安全対策か何かでしょうか?

jQueryのクラス定義はトリッキーでかっこいいよ at HouseTect, JavaScriptな情報をあなたに

この書き方って、もしかしてかなり標準的な記述方法だったりするんですかね。今後のjQuery開発にバシバシ活用させてもらおうと思います。

星虹思械BRICOLEUR

関連コンテンツ