Soumettre la recherche
Mettre en ligne
Miyazaki.js vol.2
•
6 j'aime
•
1,174 vues
Takami Kazuya
Suivre
Miyazaki.js vol.2 で登壇した内容スライド。イベントデリゲートやバブリングのお話。
Lire moins
Lire la suite
Ingénierie
Affichage du diaporama
Signaler
Partager
Affichage du diaporama
Signaler
Partager
1 sur 41
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Elasticsearch勉強会#44 20210624
Elasticsearch勉強会#44 20210624
Tetsuya Sodo
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
Koichiro Matsuoka
Reladomo入門 JJUGナイトセミナー #jjug
Reladomo入門 JJUGナイトセミナー #jjug
Hiroshi Ito
Spring Social でソーシャルログインを実装する
Spring Social でソーシャルログインを実装する
Rakuten Group, Inc.
goimagick-syokai-II
goimagick-syokai-II
Yo Ya
とあるイルカのバーボンハウス
とあるイルカのバーボンハウス
yoku0825
Elasticsearch勉強会#39 LT 20201217
Elasticsearch勉強会#39 LT 20201217
Tetsuya Sodo
go-thumber-imagick
go-thumber-imagick
Yo Ya
Recommandé
Elasticsearch勉強会#44 20210624
Elasticsearch勉強会#44 20210624
Tetsuya Sodo
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
Koichiro Matsuoka
Reladomo入門 JJUGナイトセミナー #jjug
Reladomo入門 JJUGナイトセミナー #jjug
Hiroshi Ito
Spring Social でソーシャルログインを実装する
Spring Social でソーシャルログインを実装する
Rakuten Group, Inc.
goimagick-syokai-II
goimagick-syokai-II
Yo Ya
とあるイルカのバーボンハウス
とあるイルカのバーボンハウス
yoku0825
Elasticsearch勉強会#39 LT 20201217
Elasticsearch勉強会#39 LT 20201217
Tetsuya Sodo
go-thumber-imagick
go-thumber-imagick
Yo Ya
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
20110714 j queryベーシック
20110714 j queryベーシック
良太 増子
jQuery超入門編
jQuery超入門編
Yasuhito Yabe
Springのプログラムモデルと動く仕様~テスト編~
Springのプログラムモデルと動く仕様~テスト編~
terahide
Microsoft Antimalware for Azure による Azure 仮想マシンの簡易的なマルウェア対策
Microsoft Antimalware for Azure による Azure 仮想マシンの簡易的なマルウェア対策
wintechq
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
IgGrid 入門編
IgGrid 入門編
Daizen Ikehara
Not CVE-2013-xxxx
Not CVE-2013-xxxx
abend_cve_9999_0001
学生向けAndroid勉強会(入門編)
学生向けAndroid勉強会(入門編)
Itsuki Kuroda
Knockout
Knockout
Kazuhiro Eguchi
第四回 JavaScriptから始めるプログラミング2016
第四回 JavaScriptから始めるプログラミング2016
kyoto university
Elastic Cloudを活用!!ゼロトラストセキュリティの「はじめの一歩」
Elastic Cloudを活用!!ゼロトラストセキュリティの「はじめの一歩」
Hibino Hisashi
20150221 めとべや東京-プライベートコード共有サービス
20150221 めとべや東京-プライベートコード共有サービス
Takayoshi Tanaka
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Hiroshi Oyamada
HTML5 conference 2013
HTML5 conference 2013
Takuo Kihira
SORACOM UG 関西 x JAWS-UG 関西 IoT専門支部共催 | #あのボタン 開発のちょっといい話とSORACOM アップデート
SORACOM UG 関西 x JAWS-UG 関西 IoT専門支部共催 | #あのボタン 開発のちょっといい話とSORACOM アップデート
SORACOM,INC
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
Shogo Sensui
Visualforce + jQuery
Visualforce + jQuery
Salesforce Developers Japan
Jqm20120210
Jqm20120210
cmtomoda
03 piggyback -by-simple-code-public
03 piggyback -by-simple-code-public
Smz Nbys
HTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習い
Takami Kazuya
Google Apps Script 入門
Google Apps Script 入門
Takami Kazuya
Contenu connexe
Similaire à Miyazaki.js vol.2
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
20110714 j queryベーシック
20110714 j queryベーシック
良太 増子
jQuery超入門編
jQuery超入門編
Yasuhito Yabe
Springのプログラムモデルと動く仕様~テスト編~
Springのプログラムモデルと動く仕様~テスト編~
terahide
Microsoft Antimalware for Azure による Azure 仮想マシンの簡易的なマルウェア対策
Microsoft Antimalware for Azure による Azure 仮想マシンの簡易的なマルウェア対策
wintechq
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
IgGrid 入門編
IgGrid 入門編
Daizen Ikehara
Not CVE-2013-xxxx
Not CVE-2013-xxxx
abend_cve_9999_0001
学生向けAndroid勉強会(入門編)
学生向けAndroid勉強会(入門編)
Itsuki Kuroda
Knockout
Knockout
Kazuhiro Eguchi
第四回 JavaScriptから始めるプログラミング2016
第四回 JavaScriptから始めるプログラミング2016
kyoto university
Elastic Cloudを活用!!ゼロトラストセキュリティの「はじめの一歩」
Elastic Cloudを活用!!ゼロトラストセキュリティの「はじめの一歩」
Hibino Hisashi
20150221 めとべや東京-プライベートコード共有サービス
20150221 めとべや東京-プライベートコード共有サービス
Takayoshi Tanaka
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Hiroshi Oyamada
HTML5 conference 2013
HTML5 conference 2013
Takuo Kihira
SORACOM UG 関西 x JAWS-UG 関西 IoT専門支部共催 | #あのボタン 開発のちょっといい話とSORACOM アップデート
SORACOM UG 関西 x JAWS-UG 関西 IoT専門支部共催 | #あのボタン 開発のちょっといい話とSORACOM アップデート
SORACOM,INC
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
Shogo Sensui
Visualforce + jQuery
Visualforce + jQuery
Salesforce Developers Japan
Jqm20120210
Jqm20120210
cmtomoda
03 piggyback -by-simple-code-public
03 piggyback -by-simple-code-public
Smz Nbys
Similaire à Miyazaki.js vol.2
(20)
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
20110714 j queryベーシック
20110714 j queryベーシック
jQuery超入門編
jQuery超入門編
Springのプログラムモデルと動く仕様~テスト編~
Springのプログラムモデルと動く仕様~テスト編~
Microsoft Antimalware for Azure による Azure 仮想マシンの簡易的なマルウェア対策
Microsoft Antimalware for Azure による Azure 仮想マシンの簡易的なマルウェア対策
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
IgGrid 入門編
IgGrid 入門編
Not CVE-2013-xxxx
Not CVE-2013-xxxx
学生向けAndroid勉強会(入門編)
学生向けAndroid勉強会(入門編)
Knockout
Knockout
第四回 JavaScriptから始めるプログラミング2016
第四回 JavaScriptから始めるプログラミング2016
Elastic Cloudを活用!!ゼロトラストセキュリティの「はじめの一歩」
Elastic Cloudを活用!!ゼロトラストセキュリティの「はじめの一歩」
20150221 めとべや東京-プライベートコード共有サービス
20150221 めとべや東京-プライベートコード共有サービス
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
HTML5 conference 2013
HTML5 conference 2013
SORACOM UG 関西 x JAWS-UG 関西 IoT専門支部共催 | #あのボタン 開発のちょっといい話とSORACOM アップデート
SORACOM UG 関西 x JAWS-UG 関西 IoT専門支部共催 | #あのボタン 開発のちょっといい話とSORACOM アップデート
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
Visualforce + jQuery
Visualforce + jQuery
Jqm20120210
Jqm20120210
03 piggyback -by-simple-code-public
03 piggyback -by-simple-code-public
Plus de Takami Kazuya
HTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習い
Takami Kazuya
Google Apps Script 入門
Google Apps Script 入門
Takami Kazuya
GoogleAppsScript入門
GoogleAppsScript入門
Takami Kazuya
Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2
Takami Kazuya
WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作
Takami Kazuya
WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座
Takami Kazuya
WordPress+AMP
WordPress+AMP
Takami Kazuya
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
Takami Kazuya
WordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップ
Takami Kazuya
jQuery3.0-beta1-point
jQuery3.0-beta1-point
Takami Kazuya
プラグイン公開までの道のり
プラグイン公開までの道のり
Takami Kazuya
History api
History api
Takami Kazuya
JSON-LD schema.org定義によるデータ構造化のススメ
JSON-LD schema.org定義によるデータ構造化のススメ
Takami Kazuya
WordPress widget api
WordPress widget api
Takami Kazuya
React Facebook JavaScript Library
React Facebook JavaScript Library
Takami Kazuya
Wordpress カスタム投稿
Wordpress カスタム投稿
Takami Kazuya
WordPressプラグインの作り方
WordPressプラグインの作り方
Takami Kazuya
【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告
Takami Kazuya
WordPressプラグイン考察
WordPressプラグイン考察
Takami Kazuya
WordPressテーマ作成
WordPressテーマ作成
Takami Kazuya
Plus de Takami Kazuya
(20)
HTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習い
Google Apps Script 入門
Google Apps Script 入門
GoogleAppsScript入門
GoogleAppsScript入門
Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2
WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作
WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座
WordPress+AMP
WordPress+AMP
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップ
jQuery3.0-beta1-point
jQuery3.0-beta1-point
プラグイン公開までの道のり
プラグイン公開までの道のり
History api
History api
JSON-LD schema.org定義によるデータ構造化のススメ
JSON-LD schema.org定義によるデータ構造化のススメ
WordPress widget api
WordPress widget api
React Facebook JavaScript Library
React Facebook JavaScript Library
Wordpress カスタム投稿
Wordpress カスタム投稿
WordPressプラグインの作り方
WordPressプラグインの作り方
【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告
WordPressプラグイン考察
WordPressプラグイン考察
WordPressテーマ作成
WordPressテーマ作成
Miyazaki.js vol.2
1.
© aratana.inc とあるjQueryのコードレビュー Miyazaki.js ver.1.0.0【Miyazaki.js vol.2】
2.
© aratana.inc 自己紹介 1 高見 和也(Takami
Kazuya) Twitter@miiitaka Facebook@miiitaka 株式会社アラタナ フロントエンドエンジニア JavaScriptと友達です。
3.
© aratana.inc 仕様 2 Question: h2タグにクリックイベントを追加(IDで指定) → クリックで次要素のulタグ表示 →
再度クリックでulタグが非表示 → 500ミリ秒で開閉する liタグにクリックのイベント追加 → クリックしたらalert()を表示 → alert()の内容はクリックした要素のテキストを表示
4.
© aratana.inc 基本のコードはこちら 3 <!DOCTYPE html> <html
lang="ja"> <head> <meta charset="utf-8"> <title>Sample</title> <style> #click_trigger { background: #ccc; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function () { }); </script> </head> <body> <h1>Sample</h1> <h2 id="click_trigger">Click!</h2> <ul> <li>メニュー01</li> <li>メニュー02</li> <li>メニュー03</li> </ul> </body> </html>
5.
© aratana.inc 追記場所 4 <!DOCTYPE html> <html
lang="ja"> <head> <meta charset="utf-8"> <title>Sample</title> <style> #click_trigger { background: #ccc; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function () { // 記述ができるのはここだけ。ほかのコードは触らないで作りましょう (^o^) }); </script> </head> <body> <h1>Sample</h1> <h2 id="click_trigger">Click!</h2> <ul> <li>メニュー01</li> <li>メニュー02</li> <li>メニュー03</li> </ul> </body> </html>
6.
© aratana.inc JavaScript だけ抜粋 5 $(function
() { $("h2").click(function () { $("#click_trigger + ul > li").slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
7.
© aratana.inc OH… 6 う、う………ん、まぁ、動くけどね。
8.
© aratana.inc 改善その1:要素をキャッシュする 7 要素をキャッシュする
9.
© aratana.inc 改善その1:要素をキャッシュする 8 要素は変数に保持してキャッシュ化しておきます。 その時の指定方法は、以下の通り。 idで指定する タグ名で指定する classで指定する 属性で指定する jQuery独自拡張セレクタで指定する 速い 遅い 高速化の方法は様々あるが、DOM操作は一番パフォーマンスが左 右されるのでより高速にアクセスする方法を身につけておく。
10.
© aratana.inc 改善その1:要素をキャッシュする 9 <!DOCTYPE html> <html
lang="ja"> <head> <meta charset="utf-8"> <title>Sample</title> <style> #click_trigger { background: #ccc; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function () { }); </script> </head> <body> <h1>Sample</h1> <h2 id="click_trigger">Click!</h2> <ul> <li>メニュー01</li> <li>メニュー02</li> <li>メニュー03</li> </ul> </body> </html> IDが設定されている
11.
© aratana.inc 改善その1:要素をキャッシュする 10 $(function ()
{ $("h2").click(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.click(function () { $("#click_trigger + ul > li").slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); }); 変数に保持してそれを 使いまわします。
12.
© aratana.inc 改善その2:イベントのバインド 11 イベントのバインド
13.
© aratana.inc 改善その2:イベントのバインド 12 jQuery1.7以上であれば、on(), off()
でバインド(関連付け)しま しょう。 $(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.click(function () { click_trigger.on("click", function () { $("#click_trigger + ul > li").slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
14.
© aratana.inc 改善その2:イベントのバインド 13 .click(fn)は、.on("click", fn)のショートカットメソッドなので、良い といえば良いが… 拡張性やメリットを考慮して
.on(“click”, fn) を採用しましょう。
15.
© aratana.inc 改善その2:イベントのバインド 14 メリット①:複数のイベントタイプが設定できます。 $("#hoge").on("touchstart click",
function () { // 処理を書きます });
16.
© aratana.inc 改善その2:イベントのバインド 15 メリット②:複数のイベントハンドラが設定できます。 $("#hoge").on({ "mouseenter": function
() { }, "mouseleave": function () { } });
17.
© aratana.inc 改善その2:イベントのバインド 16 メリット③:ロード後に追加した要素に対してイベントをバインド できます。 ※これは、この後のイベントデリゲートにところで。
18.
© aratana.inc 改善その2:イベントのバインド 17 メリット④:イベントに引数を渡すことができます。 .on( events
[, selector ] [, data ], handler(eventObject) );
19.
© aratana.inc 改善その3:キュー構造の理解 18 アニメーションのキュー
20.
© aratana.inc 改善その3:キュー構造の理解 19 liが対象になると、slideToggle()メソッドがliの数分発生するので無 駄な処理が動作してしまいます。 $(function ()
{ ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function () { $("#click_trigger + ul > li").slideToggle(500); $(this).next("ul").slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
21.
© aratana.inc 改善その3:キュー構造の理解 20 スライド(500ms) Click!キュー (queue) アニメーション処理がキュー に保持
22.
© aratana.inc 改善その3:キュー構造の理解 21 スライド(500ms) Click!キュー (queue) アニメーションの時間、500 ミリ秒処理が実行される。
23.
© aratana.inc 改善その3:キュー構造の理解 22 スライド(500ms) Click!キュー (queue) 500ミリ秒後、処理完了。 キューから削除される。
24.
© aratana.inc 改善その3:キュー構造の理解 23 スライド(500ms) Click! Click! Click! Click! Click! Click! キュー (queue) ものすごくClick! スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms)
25.
© aratana.inc 改善その3:キュー構造の理解 24 スライド(500ms) Click! Click! Click! Click! Click! Click! キュー (queue) キューには終了していない処 理が待ち状態になる。 スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms)
26.
© aratana.inc 改善その3:キュー構造の理解 25 スライド(500ms) Click! Click! Click! Click! Click! Click! キュー (queue) 500ミリ秒アニメーションが 順番に処理されていく。スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms)
27.
© aratana.inc 改善その3:キュー構造の理解 26 スライド(500ms) キュー (queue) スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms) キューの中の処理が終わるま で処理は続く。
28.
© aratana.inc 改善その3:キュー構造の理解 27 キューのアニメーションを破棄してから次のアニメーションを動作 させます。 $(function ()
{ ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function () { $(this).next("ul").stop().slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
29.
© aratana.inc 改善その3:キュー構造の理解 28 スライド(500ms) キュー (queue) stop()でキューの中身が削除され る。 スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms)
30.
© aratana.inc 改善その3:キュー構造の理解 29 キュー (queue) 次のslideToggle()が格納される。 スライド(500ms)
31.
© aratana.inc 改善その3:キュー構造の理解 30 キュー (queue) 美しい。(^o^) スライド(500ms)
32.
© aratana.inc 改善その4:少ないアクセスで済ませる 31 イベントデリゲート (イベントの委譲)
33.
© aratana.inc 改善その4:少ないアクセスで済ませる 32 liをクリックするとalert()を動作させたい。 liにイベントを設定しているが、この設定対象を変えます。 $(function ()
{ ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function () { $(this).next("ul").stop().slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
34.
© aratana.inc 改善その4:少ないアクセスで済ませる 33 liにアクセスするより、ID+ulセレクタにアクセスするほうが速い。 イベント設定対象が減る。 $(function ()
{ ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function () { $(this).next("ul").stop().slideToggle(500); }); click_trigger.next("ul").on("click", "li", function () { $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
35.
© aratana.inc 改善その4:少ないアクセスで済ませる 34 window document h2h1 ul li liのclickを発動!
36.
© aratana.inc 改善その4:少ないアクセスで済ませる 35 window document h2h1 ul li $(window).on(“click”,
fn) が発動! $(document).on(“click”, fn) が発動! $(“ul”).on(“click”, fn) が発動!
37.
© aratana.inc 改善その4:少ないアクセスで済ませる 36 window document h2h1 ul li これをバブリングと 言います。
38.
© aratana.inc 改善その4:少ないアクセスで済ませる 37 バブリングの発生を止めておきましょう。 $(function ()
{ ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function (e) { e.stopPropagation(); $(this).next("ul").stop().slideToggle(500); }); click_trigger.next("ul").on("click", "li", function (e) { e.stopPropagation(); alert($(this).text()); }); });
39.
© aratana.inc 改善その4:少ないアクセスで済ませる 38 <ul> <li>メニュー01</li> <li>メニュー02</li> <li>メニュー03</li> <li>メニュー04</li> </ul> 要素を動的に増やすと しましょう。 $("button").on("click", function
(e) { e.stopPropagation(); var objLi = $("<li>").text("メニュー04"); click_trigger.next("ul").append(objLi); });
40.
© aratana.inc 改善その4:少ないアクセスで済ませる 39 .on() でバインドしてイベントデリゲートにしておくと、動的に追 加した要素にも自動的にイベントが設定されます。 click_trigger.next("ul").on("click",
"li", function (e) { e.stopPropagation(); alert($(this).text()); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); ○拡張ある記述 ×拡張性がない
41.
© aratana.inc ご清聴ありがとうございました。 40 ご清聴 ありがとうございました。
Télécharger maintenant