with文を使わず、冗長なコードにならないために

例えば以下のように、複数のスタイルを適用する場合『with』を使わないと冗長になってしまう。

var div = document.createElement('div');

div.style.backgroundColor = '#eee';
div.style.border = '1px solid #ccc';
div.style.color = '#1a1a1a';

これではちょっとイケてないので、こんな関数を用意する。

Code

function setStyle (elm, styles){
  for(var s in styles){
    if(styles.hasOwnProperty(s))
      elm.style[s] = styles[s];
  }
}

Usage

var div = document.createElement('div');
div.appendChild(document.createTextNode('foo'));

setStyle(div,{
  backgroundColor:'#eee',
  border:'1px solid #ccc',
  color:'#1a1a1a'
});

document.body.appendChild(div);

少しはマシになったかと。

もっと汎用性があった方がイイならこんなモンでどうでしょう。

function substituteForWith(o, v){
  for(var s in v){
    if(v.hasOwnProperty(s))
      o[s] = v[s];
  }
}

でも、こうした方がもっとシンプルか?

var
div = document.createElement('div'),
ds = div.style;

ds['backgroundColor'] = '#eee';
ds['border'] = '1px solid #ccc';
ds['color'] = '#1a1a1a';

div.appendChild(document.createTextNode('foo'));
document.body.appendChild(div);

つまり、まず変数に格納することにより、冗長にならないようにする。

この程度のことは好みの問題か?とも思うのだが、jQueryのplugin内部での処理を書いていて、そのpluginの処理速度に問題があるようではそのpuluginを使う気になれないので、速度を気にするならこういった処理が必要になってくる。

もし処理速度を気にしないのならjQueryの場合、以下のように書けば良い。

$(document.createElement('div')).css({
  backgroundColor:'#eee',
  border:'1px solid #ccc',
  color:'#1a1a1a'
}).appendTo(document.body);

簡単だけど上の処理に比べれば処理速度に時間が掛る。