※スマホ対応はしてません。
DOMおれおれAdvent Calendar 2015 – 24日目
最終日です。
jQueryでやってる事をjQueryなしでやるとしたらどうするのってやつです。
$(selector) → document.querySelectorAll(selector)これが一番基本ですね。
DOMおれおれAdvent Calendar 2015 – 23日目
jQueryをまるまる使う程じゃないけどちょっとjQuery的な機能が欲しいなという場面はときどきあるかと思うんですが、そういうときに「jQuery風の機能」を自作するための実装例を幾つか挙げてみたいと思います。
こんな風に使いたい場合。
var $el = $('#foo .bar [boo=123]');
$el.css({ color:'red' });
以下の二つの機能が必要です。
他にも諸々の機能が必要かと思いますが、それらの基盤となるのが本機能ですね。
これで配列風に扱えるようになります。
// インターフェイス。これを使う。
function $(selector) {
return new MyQuery(selector);
}
// コンストラクター。実態。
function MyQuery(selector) {
var nodes = document.querySelectorAll(selector);
// 配列風に各要素を保持
for (var i=0, l=nodes.length; i<l; i++) {
this[i] = nodes[i];
}
// 配列風に要素数を保持
this.length = nodes.length;
}
var $links = $('a');
console.log($links.length, $links[0]);
といっても何も機能がないので大して嬉しくないですね。ここからです。
forEach() なものを実装します。というか配列が持つ関数をそのまま使っちゃって大丈夫です。
MyQuery.prototype.forEach = Array.prototype.forEach;
あら簡単。（IE 9+。IE 8の場合は自前で実装します。） これだけでもだいぶ使えると思います。
var $links = $('a');
$links.forEach(function(el, index) {
console.log(el, index);
});
ちなみにjQueryは forEach() じゃなくて each() というAPIで、コールバック関数に与えられる引数の順序が違います。けどまあいいよね。
jQueryは使い心地が良いのですが、以下の共通仕様が大きく貢献しているものと思います。
というわけで、これらに気を付けながら諸々実装していきます。
割とよく使う気がしますので、これからいきましょう。 on() は addEventListener() で実装できます。
MyQuery.prototype.on = function(type, listener) {
this.forEach(function(el) {
el.addEventListener(type, listener);
});
return this;
};
簡単だ！
jQueryのメソッドは $.fn に登録する事で自由に追加できるようになっています。真似ておきましょう。
$.fn = MyQuery.prototype;
全然APIないですが、基本的にはこんなもんでしょうか。
// インターフェイス。これを使う。
function $(selector) {
return new MyQuery(selector);
}
// コンストラクター。実態。
function MyQuery(selector) {
var nodes = document.querySelectorAll(selector);
// 配列風に各要素を保持
for (var i=0, l=nodes.length; i<l; i++) {
this[i] = nodes[i];
}
// 配列風に要素数を保持
this.length = nodes.length;
}
$.fn = MyQuery.prototype;
$.fn.forEach = Array.prototype.forEach;
$.fn.on = function(type, listener) {
this.forEach(function(el) {
el.addEventListener(type, listener);
});
return this;
};
30行にも満たないコードですが、これでこんな風に使えます。
$('#el').on('click', function(event) {
alert('!');
});
ちょっとサンプルコード書きたいけどjquery.jsを探してくるの面倒だなーみたいなときに便利かもしれません。良い感じに雛型が整備できるなら良いけれど。
よければご利用ください。