jQueryのプラグインを作成してみたのですがアドバイスをお願いします。

ウィンドウサイズによりプラグインを切り替えるjQueryのプラグインを作りました。

ウィンドウリサイズ時にも適用したく以下のように追加してみました。

リサイズ関数内の options.switchingSize が undefined と出力されます。ウィンドウサイズを変えると480と出力されるときもあります。なぜでしょうか？
プラグインとして利用するために、改善すべき箇所はありますか？

以上の2点について、回答、アドバイスをよろしくお願いします。

lang
1;(function ($) {
2	 $.fn.switchingPlugins = function (custom) {
3	 
4	 	//起動時のウィンドウサイズを取得
5		var width = window.innerWidth;
6		
7	 	options = $.extend(true, {
8            switchingSize: 480,
9            //events
10            smallPlugin: function(){},
11            bigPlugin: function(){},
12            smallPluginDelete: function(){},
13            	bigPluginDelete: function(){}
14        }, custom);
15
16		/* ロード時に実行する */
17		if(width <= options.switchingSize){
18			options.smallPlugin();
19		}
20		else{
21			options.bigPlugin();
22			console.log(options.switchingSize);
23		}
24		
25		
26		/* リサイズ時に実行する */
27		$(window).on('resize', function(){
28			width = window.innerWidth;
29			console.log(width);
30			console.log(options.switchingSize);
31			
32			if(width < options.switchingSize){
33				console.log("bigPlugin delete ");
34				console.log("smallPlugins add");
35			}
36			else{
37				console.log("smallPlugin delete");
38				console.log("bigPlugin add");
39			}		
40		});
41		
42	};
43	
44}($));

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

回答1件

ベストアンサー

スマホからなので箇条書きですが

extendの第一引数はFALSEが無難

resizeイベントは無数に呼ばれることがあるのでsettimeout等で監視する

PCがあるときに未解決だったら詳しく書きます

追記します

lang
1var timer = false;
2;(function ($) {
3     $.fn.switchingPlugins = function (custom) {
4     
5         //起動時のウィンドウサイズを取得
6        var width = $(window).width(); // ★jQueryで取得するのが無難
7        
8         options = $.extend(false, {// ★trueだと第2引数が上書きされてしまうので、
9            switchingSize: 480,     //   今回の処理では問題無いが、特に理由が無ければfalseを使う癖をつけた方が良い
10            //events
11            smallPlugin: function(){},
12            bigPlugin: function(){},
13            smallPluginDelete: function(){},
14                bigPluginDelete: function(){}
15        }, custom);
16
17        /* ロード時に実行する */
18        /*
19        if(width <= options.switchingSize){
20            options.smallPlugin();
21        }
22        else{
23            options.bigPlugin();
24            console.log(options.switchingSize);
25        }*/
26        
27        
28        /* リサイズ時に実行する */
29        $(window).on('resize', function(){
30        
31            width = window.innerWidth;
32            console.log(width);
33            console.log(options.switchingSize);
34            
35            if(width < options.switchingSize){
36                console.log("bigPlugin delete ");
37                console.log("smallPlugins add");
38            }
39            else{
40                console.log("smallPlugin delete");
41                console.log("bigPlugin add");
42            }        
43        }).trigger("resize");// ★イベントで定義した内容をその場で一回呼び出すとコード削減できる
44        
45    };
46    
47}($));