とても読みやすく書かれているかと思います。
以下 少しだけ気になった点です。本当に重箱の隅をつつく程度の事ですが。
-
変数が全てグローバルに定義されてしまっています。意図して敢えてそうしているのなら良いのですがjQueryも使っているようですので$(function(){})
で囲ってあげるなどして変数をグローバルに極力定義しないようにするのが望ましいかと思います。
-
scaleUp()
とscaleDown()
ですが、拡大縮小が最大値/最低値の時はadoptScale()
を実行する必要はないのでif分に書き換えれば不要な処理を行わなくて住むようになると思います。
※ 厳密にはadoptScale()
が呼び出された時に変更前のrateと変更後のrateが異なっている場合のみ実効するといった方法にすればscaleInitial()
が呼び出された時に既にrate = 1.0
なら実行しないといったふうにもできますが、強制的に初期化すると言う意味でこのままで良いかと思います。
- new演算子を使う関数名は大文字で始めたほうが良いかもしれません。
若干好みの問題ですが、ライブラリでもnewする関数は大文字始まりのものが多いように感じます。
これはnew
を付け忘れて実行してしまいthis
がwindow
になってしまいバグを発生させるのを避ける為の目印にしているのではないかと思っています。
- 何度も
$('#js-resizeImage')
を実行してjQueryの初期化をしていますので、コストがかかっています。(IDなのですごくコスト高というわけではありませんが) 変数に入れてキャッシュを取ってしまうかイベントの付け方を工夫してメソッドチェーンを使うのが良いかと思います。
個人的にjQueryオブジェクトを変数にする時は$
始めの変数名にすると読みやすくなるかと思っています。
ex:
javascript
1var $jsResizeImage = $('#js-resizeImage');
<追記>
すみません。jsの変数名に'-'は使えませんでしたね。
以上を踏まえてたものが下記になります。ResizeImage
の各関数の定義の方法はprototypeにつけちゃう方法もありますよ程度な感じなので参考程度に。
javascript
1$(function(){
2 //vendorprefixの判定
3 var venderPrefix = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
4 (/firefox/i).test(navigator.userAgent) ? 'moz' :
5 (/trident/i).test(navigator.userAgent) ? 'ms' :
6 'opera' in window ? 'O' : '';
7
8 //ページの画像のリサイズの挙動
9 var ResizeImage = function(element) {
10 var self = this;
11 self.elem = document.getElementById(element);
12 // elementがクラス名とかに変更される可能性があるならjQueryを使った方がメンテコストを下げられるかと思います。その場合はnew ResizeImage('#'js-translation-image');のように呼び出し方を変更してください。
13 // self.elem = $(element).get(0);
14 self.rate = 1.0;
15 self.step = 0.5;
16 };
17
18 ResizeImage.prototype.adoptScale = function(newRate) {
19 this.elem.style[venderPrefix + 'Transform'] = 'scale(' + newRate + ')';
20 // this.rate を変更する処理を一元化しました
21 this.rate = newRate;
22 };
23
24 ResizeImage.prototype.scaleInitial = function() {
25 this.adoptScale(1.0);
26 };
27
28 ResizeImage.prototype.scaleUp = function() {
29 // rateが最大値以下なら拡大する
30 if(this.rate < 3) {
31 this.adoptScale( this.rate + this.step );
32 }
33 };
34
35 ResizeImage.prototype.scaleDown = function() {
36 // rateが最小値以下なら縮小する
37 if(this.rate > 0.5) {
38 this.adoptScale( this.rate - this.step );
39 }
40 };
41
42
43 var resizeImages = new ResizeImage('js-translation-image');
44
45 //イベントを要素にセット
46 $('#js-resizeImage')
47 .on('click', '.js-resizeImage--scaleUp', function() {
48 resizeImages.scaleUp();
49 })
50 .on('click', '.js-resizeImage--scaleDown', function() {
51 resizeImages.scaleDown();
52 })
53 .on('click', '.js-resizeImage--scaleInitial', function() {
54 resizeImages.scaleInitial();
55 });
56});
画像変更部分と変更の呼び出し部分がバラバラなので、
画像変更するコントロール部分に対して、変更する画像をオプションで渡してしまうようなjQueryのプラグインのような形にしてしまうのも一つの方法かもしれません。
せっかくなのでやり過ぎた感に溢れるプラグイン化したものも書いてみます。
javascript
1$(function() {
2 //vendorprefixの判定
3 var venderPrefix = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
4 (/firefox/i).test(navigator.userAgent) ? 'moz' :
5 (/trident/i).test(navigator.userAgent) ? 'ms' :
6 'opera' in window ? 'O' : '';
7
8 var ResizeImageController = function(elm, options) {
9 var self = this, o;
10 self.$el = $(elm);
11 self.el = elm;
12 o = self.options = $.extend({}, ResizeImageController.DEFAULTS, options);
13 self.defaultRate = self.rate = o.rate;
14 self.step = o.step;
15 self.minScale = o.minScale;
16 self.maxScale = o.maxScale;
17 self.image = $( self.options.image ).get(0);
18 self.init();
19 };
20
21 // OPTIONS
22 ResizeImageController.DEFAULTS = {
23 rate: 1.0,
24 step: 0.5,
25 minScale: 0.5,
26 maxScale: 3.0,
27 image: 'img',
28 scaleUpBtn: '.scaleUp',
29 scaleDownBtn: '.scaleDown',
30 resetBtn: '.reset'
31 };
32
33 ResizeImageController.prototype.venderPrefix = venderPrefix;
34
35 ResizeImageController.prototype.init = function() {
36 var self = this, o = self.options;
37 self.$el.on('click', o.scaleUpBtn, function() {
38 self.scaleUp();
39 })
40 .on('click', o.scaleDownBtn, function() {
41 self.scaleDown();
42 })
43 .on('click', o.resetBtn, function() {
44 self.scaleInitial();
45 });
46 };
47
48 ResizeImageController.prototype.adoptScale = function(newRate) {
49 var self = this, o = self.options;
50 self.image.style[self.venderPrefix + 'Transform'] = 'scale(' + newRate + ')';
51 self.rate = newRate;
52 };
53
54 ResizeImageController.prototype.scaleInitial = function() {
55 this.adoptScale( this.defaultRate );
56 };
57
58 ResizeImageController.prototype.scaleUp = function() {
59 // rateが最大値以下なら拡大する
60 if(this.rate < 3) {
61 this.adoptScale( this.rate + this.step );
62 }
63 };
64
65 ResizeImageController.prototype.scaleDown = function() {
66 // rateが最小値以下なら縮小する
67 if(this.rate > 0.5) {
68 this.adoptScale( this.rate - this.step );
69 }
70 };
71
72 $.fn.resizeImageController = function(option) {
73 return this.each(function() {
74 var $this = $(this),
75 options = typeof(option) == 'object' && option;
76 $this.data('my.resizeImageController', new ResizeImageController(this, options));
77 });
78 };
79
80 // Pluginを実行
81 $('#js-resizeImage').resizeImageController({
82 image: '#js-translation-image',
83 scaleUpBtn: '.js-resizeImage--scaleUp',
84 scaleDownBtn: '.js-resizeImage--scaleDown',
85 resetBtn: '.js-resizeImage--scaleInitial'
86 });
87
88});
最近jQueryのプラグイン作ってないので書き方がダメな部分もあるかもしれません。指摘して頂けますと幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/11 01:55