ブレイクスルーjavascript: chp02-02 01
2015年発売の本だが、
es5 + jqueryでモーダルなどwebサイトでよく使うギミックのコーディングテクニックを紹介している本。
新ツールやフレームワークのHowToではなく、純粋にコーディングテクニックが学べる。
2015年秋頃に写経していて3ヶ月ほど休止していたが、javascript力の不足を感じ、またやりはじめた。
ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまで
- 作者: 太田智彬,田辺丈士,新井智士,大江遼,株式会社アイ・エム・ジェイ
- 出版社/メーカー: 翔泳社
- 発売日: 2015/04/16
- メディア: Kindle版
- この商品を含むブログを見る
今は写真をクリックすると拡大画像がoverlayするlightboxのようなギミックを作っているところ。
http://ryota-murakami.github.io/breakthrough-javascript/Chapter2/chp02-02/01/
オブジェクトのイニシャライザでDOMのキャッシュとイベントハンドラのセットを行う書き方が新鮮で分かりやすいと思った。
完全なSPAでなければフレームワーク使わなくても、やり方次第で十分整理されたコードが書けそうですね。
function Modal(el) { this.initialize(el); } Modal.prototype.initialize = function(el) { this.$el = el; this.$container = $('#modal'); this.$contents = $('#modal-contents'); this.$close = $('#modal-close'); this.$next = $('#modal-next'); this.$prev = $('#modal-prev'); this.$overlay = $('#modal-overlay'); this.$window = $(window); this.index = 0; this.handleEvents(); }; Modal.prototype.handleEvents = function() { var self = this; this.$el.on('click', function(e) { self.show(e); return false; }); };