jQueryプラグインのカプセル化方法
- 高洛峰オリジナル
- 2016-12-06 15:52:011292ブラウズ
jQuery プラグインとメソッドの拡張は非常に強力で、開発時間を大幅に節約できます。この記事では、jQuery プラグイン開発の基本、ベスト プラクティス、およびよくある落とし穴について概説します。
1. はじめに
jQuery プラグインの作成は、jQuery.fn に新しい関数属性を追加することから始まります。コードは次のとおりです。
jQuery.fn.myPlugin = function(){
//你自己的插件代码
};
ユーザーに愛されたシンボルはどこへ行ってしまったのでしょうか?まだ存在しますが、他の JavaScript ライブラリとの競合を避けるために、jQuery を自己実行の閉じたプログラムに渡し、jQuery がシンボルとしてマップされるようにして、$ 記号が他のライブラリによって上書きされるのを避けることをお勧めします。 。
コードは次のとおりです:
(function ($) {
$.fn.myPlugin = function () {
//你自己的插件代码
};
})(jQuery);
この閉じたプログラムでは、jQuery 関数を表すために $ 記号を制限なく使用できます。
2. 環境
ここで、実際のプラグイン コードの作成を開始できます。 ただし、その前に、プラグインが配置されている環境について理解しておく必要があります。 プラグインのスコープでは、this キーワードはプラグインが実行する jQuery オブジェクトを表します。これは、コールバックを含む他の jQuery 関数では、this キーワードがネイティブ DOM 要素を表すためです。 。これにより、開発者は、以下に示すように、jQuery で this キーワードを誤って不必要にラップすることがよくあります。
コードは次のとおりです:
(function ($) {
$.fn.myPlugin = function () {
//此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。
//$(this)等同于 $($('#element'));
this.fadeIn('normal', function () {
//此处callback函数中this关键字代表一个DOM元素
});
};
})(jQuery);
$('#element').myPlugin();
3. 基本知識
jQuery プラグインの基本を理解したので、何かを行うためのプラグインを作成しましょう。
コードは次のとおりです:
(function ($) {
$.fn.maxHeight = function () {
var max = 0;
this.each(function () {
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度
这是一个简单的插件，利用.height()返回页面中高度最大的div元素的高度。4. チェーン可能性を維持する
多くの場合、プラグインの目的は、単に収集された要素を何らかの方法で変更し、チェーン内の次のメソッドに渡すことです。 これが jQuery の設計の美しさであり、jQuery が人気がある理由の 1 つです。 したがって、プラグインのチェーン可能性を維持するには、プラグインが this キーワードを返すようにする必要があります。
コードは次のとおりです:
(function ($) {
$.fn.lockDimensions = function (type) {
return this.each(function () {
var $this = $(this);
if (!type || type == 'width') {
$this.width($this.width());
}
if (!type || type == 'height') {
$this.height($this.height());
}
});
};
})(jQuery);
$('div').lockDimensions('width').CSS('color', 'red');
プラグインはこのキーワードを返すため、jQuery によって収集された要素が .css などの jQuery メソッドによって引き続き制御できるように連鎖性が維持されます。 したがって、プラグインが組み込み値を返さない場合は、常にスコープ内で this キーワードを返す必要があります。 さらに、プラグインに渡されるパラメータはプラグインのスコープ内で渡されると推測することもできます。 したがって、前の例では、文字列「width」がプラグインの型パラメータになります。
5. デフォルト値とオプション
より複雑で多くのカスタマイズ可能なオプションを提供するプラグインの場合は、プラグインの呼び出し時に ($.extend を使用して) 拡張できるデフォルト設定を用意するのが最善です。 したがって、多数のパラメーターを使用してプラグインを呼び出す代わりに、オーバーライドする設定を含むオブジェクト パラメーターを使用してプラグインを呼び出すことができます。コードは次のとおりです:
(function ($) {
$.fn.tooltip = function (options) {
//创建一些默认值，拓展任何被提供的选项
var settings = $.extend({
'location': 'top',
'background-color': 'blue'
}, options);
return this.each(function () {
// Tooltip插件代码
});
};
})(jQuery);
$('div').tooltip({
'location': 'left'
});
この例では、ツールチップ プラグインを呼び出すと、デフォルト設定の location オプションが上書きされ、background-color オプションはデフォルト値のままになります。したがって、最終的に呼び出される設定値は次のとおりです:
コードは次のとおりです:
{
'location': 'left',
'background-color': 'blue'
}
これは、開発者が利用可能なすべてのオプションを定義する必要がなく、高度に構成可能なプラグインを提供する非常に柔軟な方法です。
6. 名前空間
プラグインに正しく名前を付けることは、プラグイン開発の非常に重要な部分です。 適切な名前空間を使用すると、プラグインが他のプラグインや同じページ上の他のコードによって上書きされる可能性が非常に低いことが保証されます。 また、名前空間を使用すると、メソッド、イベント、データをより適切に追跡できるため、プラグイン開発者としての作業が容易になります。
7. プラグインのメソッド
いずれの場合も、1 つのプラグインが jQuery.fnjQuery.fn オブジェクト内に複数の名前空間を持つべきではありません。コードは次のとおりです:
(function ($) {
$.fn.tooltip = function (options) {
// this
};
$.fn.tooltipShow = function () {
// is
};
$.fn.tooltipHide = function () {
// bad
};
$.fn.tooltipUpdate = function (content) {
// !!!
};
})(jQuery);
.fn は .fn 名前空間を乱雑にするため、これはお勧めしません。 この問題を解決するには、オブジェクト テキスト内のすべてのプラグインのメソッドを収集し、メソッドの文字列名をプラグインに渡してそれらを呼び出す必要があります。コードは次のとおりです:
(function ($) {
var methods = {
init: function (options) {
// this
},
show: function () {
// is
},
hide: function () {
// good
},
update: function (content) {
// !!!
}
};
$.fn.tooltip = function (method) {
// 方法调用
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method' + method + 'does not exist on jQuery.tooltip');
}
};
})(jQuery);
//调用init方法
$('div').tooltip();
//调用init方法
$('div').tooltip({
foo: 'bar'
});
// 调用hide方法
$(‘div').tooltip(‘hide');
//调用Update方法
$(‘div').tooltip(‘update', ‘This is the new tooltip content!');
このタイプのプラグイン アーキテクチャでは、すべてのメソッドを親パッケージにカプセル化し、メソッドの文字列名とこのメソッドに必要な追加パラメータを渡すことでメソッドを呼び出すことができます。 。 このタイプのカプセル化とアーキテクチャは jQuery プラグイン コミュニティの標準であり、jQuery UI のプラグインやウィジェットを含む無数のプラグインで使用されています。
8. イベント
bind メソッドのあまり知られていない機能により、イベントの名前空間をバインドできます。 プラグインがイベントをバインドする場合、このイベントに名前空間を付けることをお勧めします。 こうすることで、バインドを解除するときに、すでにバインドされている可能性のある同じタイプの他のイベントに干渉することがなくなります。 これを行うには、「.」を介してバインドする必要があるイベントに名前空間を追加します。
コードは次のとおりです:(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
$(window).bind('resize.tooltip', methods.reposition);
});
},
destroy: function () {
return this.each(function () {
$(window).unbind('.tooltip');
})
},
reposition: function () {
//...
},
show: function () {
//...
},
hide: function () {
//...
},
update: function (content) {
//...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
$('#fun').tooltip();
//一段时间之后… …
$(‘#fun').tooltip(‘destroy');
在这个例子中，当tooltip通过init方法初始化时，它将reposition方法绑定到resize事件并给reposition非那方法赋予命名空间通过追加.tooltip。 稍后， 当开发人员需要销毁tooltip的时候，我们可以同时解除其中reposition方法和resize事件的绑定，通过传递reposition的命名空间给插件。 这使我们能够安全地解除事件的绑定并不会影响到此插件之外的绑定。
九、数据
通常在插件开发的时候，你可能需要记录或者检查你的插件是否已经被初始化给了一个元素。 使用jQuery的data方法是一个很好的基于元素的记录变量的途径。尽管如此，相对于记录大量的不同名字的分离的data, 使用一个单独的对象保存所有变量，并通过一个单独的命名空间读取这个对象不失为一个更好的方法。
. 代码如下:
(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $('<div />', {
text: $this.attr('title')
});
// If the plugin hasn't been initialized yet
if (!data) {
/*
Do more setup stuff here
*/
$(this).data('tooltip', {
target: $this,
tooltip: tooltip
});
}
});
},
destroy: function () {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip');
// Namespacing FTW
$(window).unbind('.tooltip');
data.tooltip.remove();
$this.removeData('tooltip');
})
},
reposition: function () {
// ...
},
show: function () {
// ...
},
hide: function () {
// ...
},
update: function (content) {
// ...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
将数据通过命名空间封装在一个对象中，可以更容易的从一个集中的位置读取所有插件的属性。
十、总结和最佳做法
编写jQuery插件允许你做出库，将最有用的功能集成到可重用的代码，可以节省开发者的时间，使开发更高效。 开发jQuery插件时，要牢记：
1.始终包裹在一个封闭的插件：
. 代码如下:
(function($) {
/* plugin goes here */
})(jQuery);
2.不要冗余包裹this关键字在插件的功能范围内
3.除非插件返回特定值，否则总是返回this关键字来维持chainability 。
4.传递一个可拓展的默认对象参数而不是大量的参数给插件。
5.不要在一个插件中多次命名不同方法。
3.始终命名空间的方法，事件和数据。
最后加一个自己写的放大镜的插件`
(function($){$.fn.Fdj=function(){
$('#smallImg').on('mouseover', function() {
$('#slider').show();
})
$('#smallImg').on('mouseout', function() {
$('#slider').hide();
})
$('#smallImg').on('mousemove', function(e) {
var x = e.clientX - $('#slider').width() / 2;
var y = e.clientY - $('#slider').height() / 2;
if(x <= 0) {
x = 0
}
if(x > $('#smallImg').width() - $('#slider').width()) {
x = $('#smallImg').width() - $('#slider').width();
}
if(y <= 0) {
y = 0
}
if(y > $('#smallImg').height() - $('#slider').height()) {
y = $('#smallImg').height() - $('#slider').height();
}
$('#slider').css({
'left': x,
'top': y
})
var X=x/$('#smallImg').width()*800
var Y=y/$('#smallImg').height()*800
$('#img').css({
left:-X,
top:-Y
})
})
}
})(jQuery)