teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問jsのリファクタリングをお願いしたいです！

編集履歴

回答編集履歴

4

jsの変数名にハイフンは使えないので修正

2015/08/11 14:28

投稿

KiKiKi_KiKi
KiKiKi_KiKi

スコア596

test CHANGED
@@ -30,10 +30,14 @@
30
30
 
31
31
  ```javascript
32
32
 
33
- var $js-resizeImage = $('#js-resizeImage');
33
+ var $jsResizeImage = $('#js-resizeImage');
34
34
 
35
35
  ```
36
36
 
37
+ <追記>
38
+
39
+ すみません。jsの変数名に'-'は使えませんでしたね。
40
+
37
41
 
38
42
 
39
43
  以上を踏まえてたものが下記になります。`ResizeImage`の各関数の定義の方法はprototypeにつけちゃう方法もありますよ程度な感じなので参考程度に。

3

変数化し忘れていた箇所を修正

2015/08/11 14:28

投稿

KiKiKi_KiKi
KiKiKi_KiKi

スコア596

test CHANGED
@@ -240,21 +240,21 @@
240
240
 
241
241
  ResizeImageController.prototype.init = function() {
242
242
 
243
- var self = this;
243
+ var self = this, o = self.options;
244
-
244
+
245
- self.$el.on('click', '.js-resizeImage--scaleUp', function() {
245
+ self.$el.on('click', o.scaleUpBtn, function() {
246
246
 
247
247
  self.scaleUp();
248
248
 
249
249
  })
250
250
 
251
- .on('click', '.js-resizeImage--scaleDown', function() {
251
+ .on('click', o.scaleDownBtn, function() {
252
252
 
253
253
  self.scaleDown();
254
254
 
255
255
  })
256
256
 
257
- .on('click', '.js-resizeImage--scaleInitial', function() {
257
+ .on('click', o.resetBtn, function() {
258
258
 
259
259
  self.scaleInitial();
260
260
 

2

, 位置が変だったので修正

2015/08/11 07:55

投稿

KiKiKi_KiKi
KiKiKi_KiKi

スコア596

test CHANGED
@@ -320,7 +320,7 @@
320
320
 
321
321
  options = typeof(option) == 'object' && option;
322
322
 
323
- $this.data('my.resizeImageController' ,new ResizeImageController(this, options));
323
+ $this.data('my.resizeImageController', new ResizeImageController(this, options));
324
324
 
325
325
  });
326
326
 

1

プラグイン化したケースを書いてみました。

2015/08/11 07:44

投稿

KiKiKi_KiKi
KiKiKi_KiKi

スコア596

test CHANGED
@@ -159,3 +159,193 @@
159
159
  画像変更部分と変更の呼び出し部分がバラバラなので、
160
160
 
161
161
  画像変更するコントロール部分に対して、変更する画像をオプションで渡してしまうようなjQueryのプラグインのような形にしてしまうのも一つの方法かもしれません。
162
+
163
+
164
+
165
+ ---
166
+
167
+
168
+
169
+ せっかくなのでやり過ぎた感に溢れるプラグイン化したものも書いてみます。
170
+
171
+ ```javascript
172
+
173
+ $(function() {
174
+
175
+ //vendorprefixの判定
176
+
177
+ var venderPrefix = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
178
+
179
+ (/firefox/i).test(navigator.userAgent) ? 'moz' :
180
+
181
+ (/trident/i).test(navigator.userAgent) ? 'ms' :
182
+
183
+ 'opera' in window ? 'O' : '';
184
+
185
+
186
+
187
+ var ResizeImageController = function(elm, options) {
188
+
189
+ var self = this, o;
190
+
191
+ self.$el = $(elm);
192
+
193
+ self.el = elm;
194
+
195
+ o = self.options = $.extend({}, ResizeImageController.DEFAULTS, options);
196
+
197
+ self.defaultRate = self.rate = o.rate;
198
+
199
+ self.step = o.step;
200
+
201
+ self.minScale = o.minScale;
202
+
203
+ self.maxScale = o.maxScale;
204
+
205
+ self.image = $( self.options.image ).get(0);
206
+
207
+ self.init();
208
+
209
+ };
210
+
211
+
212
+
213
+ // OPTIONS
214
+
215
+ ResizeImageController.DEFAULTS = {
216
+
217
+ rate: 1.0,
218
+
219
+ step: 0.5,
220
+
221
+ minScale: 0.5,
222
+
223
+ maxScale: 3.0,
224
+
225
+ image: 'img',
226
+
227
+ scaleUpBtn: '.scaleUp',
228
+
229
+ scaleDownBtn: '.scaleDown',
230
+
231
+ resetBtn: '.reset'
232
+
233
+ };
234
+
235
+
236
+
237
+ ResizeImageController.prototype.venderPrefix = venderPrefix;
238
+
239
+
240
+
241
+ ResizeImageController.prototype.init = function() {
242
+
243
+ var self = this;
244
+
245
+ self.$el.on('click', '.js-resizeImage--scaleUp', function() {
246
+
247
+ self.scaleUp();
248
+
249
+ })
250
+
251
+ .on('click', '.js-resizeImage--scaleDown', function() {
252
+
253
+ self.scaleDown();
254
+
255
+ })
256
+
257
+ .on('click', '.js-resizeImage--scaleInitial', function() {
258
+
259
+ self.scaleInitial();
260
+
261
+ });
262
+
263
+ };
264
+
265
+
266
+
267
+ ResizeImageController.prototype.adoptScale = function(newRate) {
268
+
269
+ var self = this, o = self.options;
270
+
271
+ self.image.style[self.venderPrefix + 'Transform'] = 'scale(' + newRate + ')';
272
+
273
+ self.rate = newRate;
274
+
275
+ };
276
+
277
+
278
+
279
+ ResizeImageController.prototype.scaleInitial = function() {
280
+
281
+ this.adoptScale( this.defaultRate );
282
+
283
+ };
284
+
285
+
286
+
287
+ ResizeImageController.prototype.scaleUp = function() {
288
+
289
+ // rateが最大値以下なら拡大する
290
+
291
+ if(this.rate < 3) {
292
+
293
+ this.adoptScale( this.rate + this.step );
294
+
295
+ }
296
+
297
+ };
298
+
299
+
300
+
301
+ ResizeImageController.prototype.scaleDown = function() {
302
+
303
+ // rateが最小値以下なら縮小する
304
+
305
+ if(this.rate > 0.5) {
306
+
307
+ this.adoptScale( this.rate - this.step );
308
+
309
+ }
310
+
311
+ };
312
+
313
+
314
+
315
+ $.fn.resizeImageController = function(option) {
316
+
317
+ return this.each(function() {
318
+
319
+ var $this = $(this),
320
+
321
+ options = typeof(option) == 'object' && option;
322
+
323
+ $this.data('my.resizeImageController' ,new ResizeImageController(this, options));
324
+
325
+ });
326
+
327
+ };
328
+
329
+
330
+
331
+ // Pluginを実行
332
+
333
+ $('#js-resizeImage').resizeImageController({
334
+
335
+ image: '#js-translation-image',
336
+
337
+ scaleUpBtn: '.js-resizeImage--scaleUp',
338
+
339
+ scaleDownBtn: '.js-resizeImage--scaleDown',
340
+
341
+ resetBtn: '.js-resizeImage--scaleInitial'
342
+
343
+ });
344
+
345
+
346
+
347
+ });
348
+
349
+ ```
350
+
351
+ 最近jQueryのプラグイン作ってないので書き方がダメな部分もあるかもしれません。指摘して頂けますと幸いです。