回答編集履歴

1

おまけ追加

2017/11/18 06:59

投稿

miyabi-sun
miyabi-sun

スコア21158

test CHANGED
@@ -1,4 +1,14 @@
1
+ aの要素をクリックしたらAのページへ画面遷移。
2
+
3
+ bの要素をクリックしたらBのページへ画面遷移。
4
+
5
+
6
+
7
+ 「Aの要素をクリックしたら、Bのページへ画面遷移」そのものの一連の流れは共通ですね。
8
+
1
9
  この程度の差なら配列やオブジェクトを使えば共通化できますね。
10
+
11
+ オブジェクトの配列を作って解決しましょうか。
2
12
 
3
13
 
4
14
 
@@ -43,3 +53,79 @@
43
53
  });
44
54
 
45
55
  ```
56
+
57
+
58
+
59
+ ---
60
+
61
+
62
+
63
+ おまけ: 実行したい内容そのものを分岐させる
64
+
65
+
66
+
67
+ JavaScriptは引数やオブジェクトに関数を持たせられるので、
68
+
69
+ やりたいことをオブジェクトなんかに持たせておく解決法もあります。
70
+
71
+
72
+
73
+ 今回はtoUrlを関数を返す関数に作り変えて実装してみました。
74
+
75
+ 仮引数としてpathを記憶させておいて、次の実行で画面遷移するように仕込んであります。
76
+
77
+
78
+
79
+ また、cの処理が画面遷移さえすれば良いと解釈してこんな風にしてみました。
80
+
81
+ 過ぎた抽象化は読みづらくなる原因ですが、使いこなせば良いソースコードを書けるようになりますので、色々試してみてください。
82
+
83
+
84
+
85
+ ```JavaScript
86
+
87
+ var toUrl = function(path) {
88
+
89
+ return function(e) {
90
+
91
+ // C処理
92
+
93
+ location.href = "https:xxx" + url
94
+
95
+ }
96
+
97
+ }
98
+
99
+ var link_settings = [
100
+
101
+ {selector: "#aBtn", touchend: toUrl("/aaa")},
102
+
103
+ {selector: "#bBtn", touchend: toUrl("/bbb")},
104
+
105
+ {selector: "#cBtn", touchend: toUrl("/ccc")},
106
+
107
+ ]
108
+
109
+ link_settings.forEach(function(it) {
110
+
111
+ $(it.selector).on({
112
+
113
+ 'touchstart': function(e) {
114
+
115
+ // A処理
116
+
117
+ },
118
+
119
+ 'touchmove': function(e) {
120
+
121
+ // B処理
122
+
123
+ },
124
+
125
+ 'touchend': it.touchend
126
+
127
+ });
128
+
129
+ });
130
+
131
+ ```