0

テキストボックスを数値のExcelセルのように動作させるプラグインがあり、千の区切りがあります。

次の行は、テキストボックスの値を千区切りにします...

$('#xlLike').excelify();

...そして、対象となる入力タグを内部的にマークして、'excelified' 状態を保存します (例: this input is excelified )。

次の行は、そのような「エクセル化された」入力をすべて見つけ、それらの値から区切り記号を削除します...

$('[data-excelify]').excelify({toNumber: true});

この内部マーキングは、DOM をいじる .attr() を使用して行われます。ただし、.data() を使用して、jQuery にメモリ内でマーキングを行わせることもできました。結局、プラグイン内で何らかのクラス名を使用して、それらのテキスト ボックスをマークすることができたのです。

大したことではないかもしれませんが、プラグインを作成するときに状態を保存するための正しいアプローチを知りたいです。

PS 必要に応じてプラグインの例を次に示します: http://jsfiddle.net/ozrentk/W8fq9/26/

4

1 に答える 1

1

-- 書き直された回答 --

私の意見：

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();
于 2013-06-23T02:01:53.897 に答える