【クリスマスだし】用意しておくとちょっと便利なjQueryの拡張メソッドたち【25日目の４】

こんにちはやまがたです。アドベントカレンダーの最終日は、日頃クライアントサイドでJavaScript + jQueryでコードを書いていて何かと重宝している拡張メソッドをご紹介します。

ch

$.fn.childrenのエイリアスです。出現頻度が高くスペルを間違えやすいので作りました。

$.fn.extend({
  ch: function(expr) {
    this.children(expr);
  }
});

hasClasses, notHasClasses

hasClassを拡張して複数のクラスの組み合わせをチェックします。

var checkClasses = function($target, mode, klasses) {
  var result = false;
  $.each(klasses, function(i, klass) {
    result = $target.hasClass(klass);
    switch(mode) {
      case 'has':
        if (!result) return false;
        break;
      case 'not has':
        if (result) return false;
        break;
    }
  };
  return result;
};

$.fn.hasClasses = function(klasses) {
  checkClasses(this, 'has', klasses);
}

$.fn.notHasClasses = function(klasses) {
  !checkClasses(this, 'not has', klasses);
}

// Example
<div id="sample" class="hoge foo"></div>
$('#sample').hasClasses(['hoge', 'foo']) // => true
$('#sample').notHasClasses(['woo', 'bar']) // => true

switchClass

クラスのremoveとaddを同時に行います。

$.fn.extend({
  switchClass: function(from, to) {
    this.removeClass(from).addClass(to);
  }
});

// Example
<div id="sample" class="hoge"></div>
$('#sample').switchClass('hoge', 'fuga') // => <div id="sample" class="fuga"></div>

imageLoad

画像のonloadイベントはIEでうまく動かない事があるのでキャッシュを見ないようにロードさせます。

var imageLoad = function(callback) {
  var src, timestamp;
  src = this.attr('src');
  timestamp = new Date().getTime();
  this.attr({src: src + '?' + timestamp});
  return this.on('load', callback);
};
        
var createImageAndLoad = function(image_path, callback) {
  var createImage = function(image_path) {
    return $('<img />').attr({src: image_path});
  };
       
  if (typeof image_path === 'string') {
    createImage(image_path).imageLoad(callback);
  } else if (typeof image_path === 'object') {
    $.each(image_path, function(i, imgp) {
      createImage(imgp).imageLoad(callback);
    });
  }
};
        
$.fn.extend({
  imageLoad: imageLoad
});
$.extend({
  imageLoad: createImageAndLoad
});

// Example
<img id="sample" src="/images/sample.jpg" />

$('#sample').imageLoad(function(event) {
  alert('loaded!');
})

$.imageLoad('/images/sample.jpg', function(event) {
  alert('loaded!');
});

len

データ型にかかわらず要素のlengthを返します

$.extend({
  len: function(arg) {
    var result = 0;
    if (typeof arg === 'object' && !$.isArray(arg)) {
      for (var i in arg) result++;
    } else {
      if (typeof arg === 'number') arg = arg.toString();
      result = arg.length;
    }
    return result;
  }
});

// Example
$.len('hoge') // => 4
$.len(['hoge', 'fuga']) // => 2
$.len({ hoge: 'hoge', fuga: 'fuga' }) // => 2
$.len(123) // => 3

まとめ

中には使いすぎると、知らない人が見た場合に謎メソッドだらけに見えるので用法用量を守ってお使いください。
ただ何度も繰り返し登場する処理はこのように切り出しておくとコードがよりDRYになっていいですよね。