0

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

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

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

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

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

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

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

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

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

4

1 回答 1

1

-- 改写答案 --

我的意见：

使用 jquery 的优点之一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 回答