2010年現在、JavaScript関連の仕事ではほとんどの場合においてjQueryライブラリを使うわけだが、いわゆるレガシー案件というのだろうか、環境がそれを許さない場合もある。
そういった場合、DOMの書き換え処理を素朴な方法、つまりgetElementByIDなどDOMの組み込みメソッドを使った方法で実現することになる。本当に小さいプログラムなら気にならないかもしれないが、似たようなことを何度も書くことになるので自分でちょっとしたユーティリティ関数を書いておき、いろんな仕事で使い回すことになる。
そんな中にapplyメソッドを使った実用的なものがいくつかあったのでここに記録しておく。一昔前まではapplyの意味を理解できなかったけれどもう大丈夫ですよ、という記念をかねて。あとクロージャも。
DOMユーティリティ関数
// 指定されたidをもつ要素に関数fを適用
function getByIdAndApply(id, f){
var elm = document.getElementById(id);
if(elm) f.apply(elm);
}
// 指定されたタグをもつ要素群に関数fを適用
function getByTagNameAndApply(tag, f){
var elms = document.getElementsByTagName(tag);
for(var i=0, n=elms.length; i<n; i++) f.apply(elms[i]);
}
利用例
htmlを書きかえる。スタイルも変更（無駄にタイマーを使う）。
<html>
<head>
<script type="text/javascript" charset="utf-8" src="./js/myutil.js"></script>
<script type="text/javascript">
window.onload = function(){
// id=p1 なる要素のテキストを変更
getByIdAndApply('p1', function(){
this.innerHTML = "foo";
});
// 全p要素のスタイルを変更
getByTagNameAndApply('p', function(){
// クロージャを使う例（setTimeout内でthisを参照するため仮引数elmとして保持）
(function(elm){ setTimeout(function(){elm.style.color='#f00';}, 2000) })(this);
});
}
</script>
</head>
<body>
<p id="p1">text</p>
<p id="p2">text</p>
<p id="p3">text</p>
</body>
</html>
0 件のコメント:
コメントを投稿