第3回くらいYokohama.jsの課題やってみた

こういう勉強会にいつかは行ってみたいと思いつつ、こんなぺーぺーがなぁ・・とか思って家でTLやらを追ってばかり。

今回も、

今日の→ bit.ly/yjs20120805 #yjs20120805

— Yokohamaさん (@yokohamajs) 8月 5, 2012

こんなのが流れてきたので、やってみました。

完成品

ソース

メインのコード

function Slider(tgt){
	this.main = tgt;
	this.nav = tgt.getElementsByClassName('move');
	this.list = tgt.getElementsByClassName('image-list')[0];
	this.imgLen = this.list.getElementsByTagName('img').length;
	this.current = 0;
}
Slider.prototype.init = function(){
	var $nav = this.nav;
	var $slider = this;
	for(var i = 0, l = $nav.length; i < l; i++){
		$nav[i].addEventListener('click', function(e){
			$slider.update(e);
			$slider.move($slider.current);
		}, false);
	}
};
Slider.prototype.update = function(e){
	var dir = e.target.className.split(' ')[1];
	if(dir === 'prev'){
		if(this.current === 0){
			this.current = this.imgLen-1;
		}else{
			this.current--;
		}
	}else{
		if(this.current === this.imgLen-1){
			this.current = 0;
		}else{
			this.current++;
		}
	}
};
Slider.prototype.move = function(current){
	this.list.style.marginLeft = - (337 * current) + 'px';
};

実行するとこ

;(function(_doc){
	var doc = _doc;
	var tgt = doc.getElementsByClassName('slider')[0];
	var slider = new Slider(tgt);
	slider.init();
	
	var tgt2 = doc.getElementsByClassName('slider')[1];
	var slider2 = new Slider(tgt2);
	slider2.init();
	
}(document));

反省

updateメソッドの中身がキレイくない。

だいたいのスライダーの実装については、以前にLearn jQuery 30 daysの動画見た時に覚えてたけれども、細かいとこが・・。

参考：Tuts+ Premium Course: 30 Days to Learn jQuery - Prototypal Inheritance and Refactoring the Slider

改めて見返すと、これが美しいコードか・・・！ってほどすっきりしてますね！

最初にDOMつかむとこ

getElementsByClassNameで掴んだほうがいいのか、querySelectorAllとか使った方がいいのか判断つかず。
あとgetElementsByTagNameも。

ちょっと調べた限りじゃよくわからなかったのよねー。

PC限定っていう

クリックイベントしか取ってないので、スマートフォンで動かんのやろなあ・・。
タッチイベント系やらスワイプやらまとめて処理してくれるライブラリがあれば、それ使ってごにょごにょできそうかな・・？

うーん、精進しますです・・。