Question

我有一个插件，它使文本框的行为类似于具有千位分隔符的数字Excel单元格。

以下行使文本框值千位分隔...

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

...并在内部标记目标输入标记以保存“excelified”状态（例如：此输入是优秀的）。

以下行找到所有此类“excelified”输入并从其值中删除分隔符...

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

这个内部标记是使用.attr（）完成的，它可以摆弄DOM。但是，我本可以使用.data（）并让jQuery在内存中进行标记。毕竟，我可以在插件中使用一些类名来标记这些文本框。

也许这不是什么大问题，但我想知道在编写插件时，存储状态的哪种方法是正确的。

P.S。如果需要，这是插件示例：http://jsfiddle.net/ozrentk/W8fq9/26/

Answer 1

- REWRITTEN ANSWER -

我的意见：

使用jquery data()时的一个优点是，您可以以非常结构化的方式存储数据。虽然data()可以从外部进行操作，但您可以使用类方式使用该插件，您可以在其中存储值让在对象内部。< / p>

另一方面，当您想要使用DOM操纵外部数据时，使用[data-]属性会打开有趣的可能性，例如：插入带有准备好的属性值的元素或希望其他脚本更改值等时。

那就是说，使用[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();

jQuery插件和存储页面元素的状态

1 个答案: