[jQuery]処理をメソッドにまとめたい。リファクタリング

現在HTML,Javascript（jQuery）を使ってアプリを作っています。

jQueryでボタンタップ時に画面遷移する処理を作っているのですが、うまくメソッドにまとめることができません。
そのリファクタリング方法を教えていただきたいです。

処理は以下です。

javascript
1$("#aBtn").on({
2    'touchstart': function(e) {
3      // A処理
4    },
5    'touchmove': function(e) {
6      // B処理
7    },
8    'touchend': function(e) {
9      // C処理
10      toPage("/aaa");
11    }
12  });
13$("#bBtn").on({
14    'touchstart': function(e) {
15      // A処理
16    },
17    'touchmove': function(e) {
18      // B処理
19    },
20    'touchend': function(e) {
21      // C処理
22      toPage("/bbb");
23    }
24  });
25$("#cBtn").on({
26    'touchstart': function(e) {
27      // A処理
28    },
29    'touchmove': function(e) {
30      // B処理
31    },
32    'touchend': function(e) {
33      // C処理
34      toPage("/ccc");
35    }
36  });
37
38function toPage(url){
39　// D処理
40  location.href = "https:xxx" + url
41}

タップ処理の対応をするとすごくひとつの処理が長くなってしまします。
行っている内容はtouchmoveが発生した時にタップをキャンセルするといった対応です。
もし分かる方がいればよろしくお願いいたします。

追記
元々の投稿本文を修正しました。
どのボタンタップ時も
toPage("/ccc");
になっていたので、
それぞれの遷移先へいくように修正しました。
aボタンタップ時 toPage("/ccc");　→　toPage("/aaa");
bボタンタップ時 toPage("/ccc");　→　toPage("/bbb");

追記２
アドバイスでいただいたswitch文を使う方法はイメージできたので記載してみます。

javascript
1$("#aBtn,#bBtn,#cBtn").on({
2    'touchstart': function(e) {
3      // A処理
4    },
5    'touchmove': function(e) {
6      // B処理
7    },
8    'touchend': function(e) {
9      // C処理
10      var id = var id = $(this).attr("id");
11      switch(id){
12        case "aBtn":
13          toPage("/aaa");
14          break;
15        case "bBtn":
16          toPage("/bbb");
17          break;
18        case "cBtn":
19          toPage("/ccc");
20          break;
21      }
22    }
23  });
24
25function toPage(url){
26　// D処理
27  location.href = "https:xxx" + url
28}

この書き方はどうでしょうか？
あまりよくないなどの意見があればおっしゃってください。

kei344

2017/11/18 04:01

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

k499778

2017/11/18 04:08

修正しました

行動規範の内容に同意します

回答3件

ベストアンサー

aの要素をクリックしたらAのページへ画面遷移。
bの要素をクリックしたらBのページへ画面遷移。

「Aの要素をクリックしたら、Bのページへ画面遷移」そのものの一連の流れは共通ですね。
この程度の差なら配列やオブジェクトを使えば共通化できますね。
オブジェクトの配列を作って解決しましょうか。

JavaScript
1var link_settings = [
2  {selector: "#aBtn", url: "/aaa"},
3  {selector: "#bBtn", url: "/bbb"},
4  {selector: "#cBtn", url: "/ccc"},
5]
6link_settings.forEach(function(it) {
7  $(it.selector).on({
8    'touchstart': function(e) {
9      // A処理
10    },
11    'touchmove': function(e) {
12      // B処理
13    },
14    'touchend': function(e) {
15      // C処理
16      toPage(it.url);
17    }
18  });
19});

おまけ: 実行したい内容そのものを分岐させる

JavaScriptは引数やオブジェクトに関数を持たせられるので、
やりたいことをオブジェクトなんかに持たせておく解決法もあります。

今回はtoUrlを関数を返す関数に作り変えて実装してみました。
仮引数としてpathを記憶させておいて、次の実行で画面遷移するように仕込んであります。

また、cの処理が画面遷移さえすれば良いと解釈してこんな風にしてみました。
過ぎた抽象化は読みづらくなる原因ですが、使いこなせば良いソースコードを書けるようになりますので、色々試してみてください。

JavaScript
1var toUrl = function(path) {
2  return function(e) {
3    // C処理
4    location.href = "https:xxx" + url
5  }
6}
7var link_settings = [
8  {selector: "#aBtn", touchend: toUrl("/aaa")},
9  {selector: "#bBtn", touchend: toUrl("/bbb")},
10  {selector: "#cBtn", touchend: toUrl("/ccc")},
11]
12link_settings.forEach(function(it) {
13  $(it.selector).on({
14    'touchstart': function(e) {
15      // A処理
16    },
17    'touchmove': function(e) {
18      // B処理
19    },
20    'touchend': it.touchend
21  });
22});

投稿2017/11/18 06:43

編集2017/11/18 06:59

miyabi-sun

総合スコア21158

k499778

2017/11/18 07:01

このような書き方があるのですね！コード量が少なく、シンプルでわかりやすいです。参考にさせて頂きます。

行動規範の内容に同意します

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title>Sample</title>
6	</head>
7	<body>
8		<button type="button" class="func_btn" data-url="aaa">A button</button>
9		<button type="button" class="func_btn" data-url="bbb">B button</button>
10		<button type="button" class="func_btn" data-url="ccc">C button</button>
11
12		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
13		<script type="text/javascript">
14			// 処理A
15			let func_a = function (event) {
16				alert('func_a');
17			};
18			// 処理B
19			let func_b = function (event) {
20				alert('func_b');
21			};
22			// 処理C
23			let func_c = function (event) {
24				let url = this.getAttribute('data-url');
25				location.href = "https:www.example.com/" + url;
26			};
27			$(".func_btn").on({
28				'touchstart': func_a,
29				'touchmove': func_b,
30				'touchend': func_c
31			});
32		</script>
33	</body>
34</html>

投稿2017/11/18 06:40

退会済みユーザー

総合スコア0

退会済みユーザー

2017/11/18 06:54 編集

追記したコードそもそも矛盾している。」動作確認くらいしてから書いてください。

k499778

2017/11/18 06:58

idですよね。失礼しました。以下に修正しました。 case "aaa": →　case "aBtn": case "bbb": →　case "bBtn": case "ccc": →　case "cBtn": 言い方きついですね(⌒-⌒; ) ローカルで動作確認はしました。もっとシンプルなアラートを出す書き方で書いていたので投稿本文に合わせたときに誤記しました。修正致しましたのでよろしくお願いします。

k499778

2017/11/18 07:02

回答ありがとうございます。このような書き方もあるのですね！参考にさせていただきます

退会済みユーザー

2017/11/18 07:02

動くことは動きますね。コードの保守性ということを考えると、再考すべきです。 #dBtn を追加する場面になったとき、修正すべきコードが少ない方がバグを生みにくくなる。ごs自身が書いたコードと、私が提示したコードでそれぞれ、#dBtn を追加したコードに修正するときどちらが楽にできますか？

行動規範の内容に同意します

いまいちどういうことをしたいかがわかりませんが、提示のコードなら下記のようにまとめられます。

JavaScript
1$("#aBtn, #bBtn, #cBtn").on({
2    'touchstart': function(e) {
3      // A処理
4    },
5    'touchmove': function(e) {
6      // B処理
7    },
8    'touchend': function(e) {
9      // C処理
10      toPage("/ccc");
11    }
12  });

投稿2017/11/18 03:57

kei344

総合スコア69398

k499778

2017/11/18 04:03

回答ありがとうございます。失礼しました。url部分に間違いがありました。それぞれ違うページ遷移するので,url末尾が変わります。ですのでtoPage("/ccc");を３パターンに分岐したいのです。セレクタの複数指定は思いついたのですが、この部分をどのようにすればシンプルに書けるかわかりません。何かフラグを設定するとかなら、現状のコードの方がまだシンプルなんじゃないかなと。いい方法はありますでしょうか？

k499778

2017/11/18 04:04

投稿本文のurl末尾部分を修正しました。