JavaScriptのコーディングスタイル例
HTML上のある要素に対してなにか操作させるJavaScriptをつくる場合、リソースに関することはJavaScriptではなく、なるべくHTML中に宣言的に埋め込むという手がある。
たとえばこんな感じ：
<?xml version="1.0"?>
<html>
<head>
<script language="JavaScript">
//<![CDATA[
function clickToChange(id) {
var imgSpan = document.getElementById(id);
var img = imgSpan.getElementsByTagName("img")[0];
img.index = 0;
img.onclick = function () {
var seqs = imgSpan.getElementsByTagName("seq");
img.index = (img.index + 1) % seqs.length;
img.src = seqs[img.index].getAttribute("src");
};
}
//]]>
</script>
</head>
<body onload="clickToChange('img1');">
<div>
いろいろな
<span id="img1">
<img src="d00.png" />
<seq src="d00.png" />
<seq src="d01.png" />
<seq src="d02.png" />
</span>
文書
</div>
</body>
</html>もしくは:
<?xml version="1.0"?>
<html>
<head>
<script language="JavaScript">
//<![CDATA[
function clickToChange(id) {
var img = document.getElementById(id);
img.index = 0;
img.count = parseInt(img.getAttribute("count"));
img.onclick = function () {
img.index = (img.index + 1) % img.count;
img.src = img.getAttribute("seq" + img.index);
};
}
//]]>
</script>
</head>
<body onload="clickToChange('img1');">
<div>
いろいろ
<img id="img1" src="d00.png"
count="3"
seq0="d00.png"
seq1="d01.png"
seq2="d02.png" />
文書
</div>
</body>
</html>クリックしたら切り替わる簡単なJavaScriptだけど、シーケンス上のリソースは要素や属性にしてHTML上に埋める。
やりたいこととやっていることを分離するので設計的には良いと思う。コードの置き換えもやりやすいはず。問題はHTMLのvalidな構造を越えるものになることだが、最近はmicroformatとか出ているので、XML的にwellformedで「知らない要素や属性を無視する」とHTMLでvalidであれば問題ない気もする。
