2013年01月16日

[Javascript]利用者に優しいブログパーツの書き方

今回紹介するのは、ブログパーツ利用者(HTMLコーダー)に配慮した、心優しきブログパーツの書き方である。 利用者に優しいブログパーツを作成するには二つの配慮が必要だ。
まず第一に、「グローバル関数を使わない」という配慮、第二には、他のブログパーツ用jsと変数などのネーミングが被らないようにする配慮である。

この二つの配慮を意識したブログパーツjavascriptのサンプルはこのようになる。

blogparts.js
// ブログパーツ(ネームスペース対応)
(function(window, namespace, undefined) {
  var mynamespace = window[namespace];
  if (!mynamespace) {
    mynamespace = {};
    window[namespace] = mynamespace;
  }

  mynamespace.Blogparts = Blogparts;

  function Blogparts(obj) {
    this.obj = obj;
  }
  
  Blogparts.prototype.show = function() {
    window.document.write(this.obj.param1);
  }
})(this, "jp_hoge_moge"); // 第二引数はネームスペース

このjavascriptを利用者は下のように呼び出す。

blogparts.html
<script type="text/javascript" src="blogparts.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
var bp = new jp_hoge_moge.Blogparts({ 
  param1: "ほげ" 
});
bp.show();
//-->
</script>

まず、 new jp_hoge_moge.Blogparts(...) のように、ネームスペース(jp_hoge_moge)を使った呼び出しを行うことで、他の製作者が作った"Blogparts"とカブる可能性を極力排除している。

更に、Blogpartsコンストラクタの引数には、{ param1 : "ほげ" } のような「オブジェクト」を直接渡すことで、グローバル変数の使用を避けている。

ちなみに、ブログパーツ用javascriptの一行目((function(window, namespace, undefined) {)の第三引数 undefined は、"undefined" という変数が外部で勝手に変更されても、ブログパーツのロジックに影響を与えないようにするための繊細な配慮である。こうしておけば、ブログパーツ用javascriptの中で平常通りに undefined が利用できるのだ。

このように、ブログパーツを作るなら、なるべく利用者に優しい仕様を心がけるべきだろう。

今回参考にさせていただいたサイト。
JavaScriptでnamespaceを使おうとして分けがわからなくなった人へ - E v e r G i z m O エヴァー ギズモ
javascript - ブログパーツ/ウィジェット開発者におねがい - 404 Blog Not Found
posted by 寄り道退屈男 at 22:54 | Comment(0) | TrackBack(0) | Webデザイン
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/61510757
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック