HTML からの独立

JavaScript

デザイン要素を HTML から切り離すのと同じように、動的要素を HTML から切り離したい。一般的にはトリガーとなる呼び出し部分が HTML 側に残るが、それすらも JavaScript ファイルの方に移したいと思って、やってみたのがこれ。業務系の開発では有効なテクニックとなるはずだ。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="melchior.js" type="text/javascript"></script>
  <script src="scr001.js" type="text/javascript"></script>
</head>
<body>
<div id="id1">Click me!</div>
<form>
<input type="text" value="ここは無関係" />
<input type="submit" id="id2" />
</form>
</body>
</html>

通常であればイベントに JavaScript を指定するところに、id の指定だけを行っておくことで、HTML を JavaScript で汚さないようにする。

// --  scr001.js --
// これが画面単位の実装になる。
// 最初に melchior.initialize にオブジェクトを渡す。

window.onload = function() {
  melchior.initialize(scr001);
}

var scr001 = {
  // 関数紐付け定義
  actions: [
    { id:'id1', event:'onmousedown', func:'action_id1' },
    { id:'id2', event:'onmousedown', func:'action_id2' }
  ],
  // アクション id1
  action_id1: function() {
    $('id1').style.color = "red";
  },
  // アクション id2
  action_id2: function() {
    alert('clicked');
  }
};

window.onload = function() と書くことで、HTML の読み込みが終わったら、特定の処理を実行させることができる。ここでは、作成中のフレームワーク melchior を呼び出している。melchior に渡すのがは、id とイベントと JavaScript 関数を関連づけた配列である。もうちょっといろいろやらせる予定なので、少し冗長な記述となっているが、意図は通じるだろう。

// --  melchior.js --
// ライブラリ (prototype.js を使う場合は削除)
function $(id) {
  return document.getElementById(id);
}

// melchior の本体
var melchior = {
  initialize: function(obj) {
    var items = obj.actions;
    for (var i in items) {
      $(items[i].id)[items[i].event] = obj[items[i].func];
    }
  }
};

melchior (仮名) で、id とイベントと JavaScript 関数の紐付けを行っている。これで HTML 要素に onmousedown="hogehoge()" と書く必要がなくなる。