-- 書き直された回答 --
私の意見:
jquery を使用する利点の 1 つは、非常に構造化された方法でデータを格納data()
できることです。外部から操作することもできますが、クラスのような方法でプラグインを使用できます。たとえば、値をオブジェクト内に保存することができます。data()
一方、[data-]
属性を使用すると、DOM を使用して外部からデータを操作したい場合、たとえば、準備された属性値を持つ要素を挿入したり、他のスクリプトで値を変更したりする場合など、興味深い可能性が開かれます。
とはいえ、[data-]
属性をストレージとして使用するために、属性値をセレクターとして使用してそれらの要素の状態を変更する必要があるようなインターフェイスが必要になるとは限りません。これは、プラグインを適用する方法の決定的な違いです。どの要素が特定の状態にあるかを調べるために DOM を再度解析すると、パフォーマンスに大きな影響を与える可能性があります。たとえば、大量の影響を受けるセルを含む Web アプリケーションのようなスプレッドシートを想像する場合です。
以下は、私の目にはこれらのタスクをはるかにうまく実行できるプラグイン インターフェイスの例です。さらに、データを内部ストレージとして使用する方法を示します。
(function($){
var defaults = {
//...
};
var methods = {
init : function(options){
var properties = $.extend(true, {}, defaults, options);
return this.each(function(){
var $element = $(this);
var data = $element.data('foo');
//...
if (!data) {
$(this).data('foo', {
'properties' : properties
//...
});
//...
methods._bind.apply(this, []);
}
});
},
'_bind' : function(){
var $element = $(this);
$element.data('foo', $.extend(true, {}, $element.data('foo'), {
//...
}));
//...
},
'_unbind' : function(){
var $element = $(this);
$element.data('foo', $.extend(true, {}, $element.data('foo'), {
//...
}));
//...
},
'add' : function(){
return this.each(function(){
//...
methods._bind.apply(this, []);
});
},
'remove' : function(){
return this.each(function(){
//...
methods._unbind.apply(this, []);
});
}
};
$.fn.foo = function(arg){
if (arg) {
if (typeof arg === 'string') {
if (arg.indexOf('_') === 0) {
arg = '';
}
if (methods[arg]) {
return methods[arg].apply(this, Array.prototype.slice.call(arguments, 1));
}
}
}
return methods.init.apply(this, arguments);
};
})(jQuery);
したがって、次のように使用できます。
$xl = $('.xl');
$xl.excelify('add');
$xl.excelify('remove');
またはトグル (上記のコード例では実装されていません):
$xlLike.excelify();