じょりじょり日記

JavaScript100サイトチャレンジを記録するブログです。

ModalWindow by JavaScript | JS 14/100

さて、prototypeやobserverの考え方を取り入れたモーダルウインドウのコードを勉強しました。
どこまでprototypeで疎結合なコードにするかや、observerで他のコードにより上書きされない仕組みを作るかなど、自分にとってはかなり複雑なコードに見えます。
jsのコード中盤で

(data-index + 増減値 + それらの総数) % それらの総数

というコードがありますが、この記述をすることによって、prev or nextボタンを押すと、カウンタが動くという仕組みになっています。


また、$containerを表示している際に、$overlayを後ろ側に差し入れることで

Modal.prototype.hide = function(e) {
this.$container.fadeOut();
this.$overlay.fadeOut();
};

黒幕(overlay)をクリックしたときでもfadeOutが動くようになっているので、これはよいなとおもいました。
prototypeで機能を切り出す感覚が身についてきたので、そろそろチュートリアルサイトを卒業できるのかな・・・、と淡い期待を抱いて精進していきたいと思います。

こういうコードを実装していくと、まったく自分では思いつかない発想ばかりなので、いろいろな人のコード・書籍で勉強する必要があると感じました。

今回のような記述を省略できる、モーダルウインドウなどのライブラリ、おそるべし。


See the Pen js 14/100 by zyory (@zyoryzyory) on CodePen.