javascript - 我有一大堆元素，而 jQuery 的each() 函数正在杀死我的浏览器 - 如何改进我的代码？

Question

我正在使用我编写的两个插件来查找表单中的所有单选/复选框输入和选择框，并设置它们的样式。

我现在有一个大表单，其中有很多复选框，当我的插件尝试为每个复选框设置样式时，Firefox 都挂着。

这是插件代码:

(function($)
{
   $.fn.stylecheck = function(options)
   {
      /*
         Parameters:
            image:   the image to load in place of the checkboxes/radio buttons
            offset:  the Y offset (background-position) to show the 'on' position of the image
      */

      return this.each(function()
      {
         if (!$(this).is(':checkbox') && !$(this).is(':radio'))
            return;

         var $input     = $(this);
         var $image     = null;
         var $contianer = null;

         // Wrap the input and then hide it
         $input.wrap('<div class="stylecheck-container" style="display: inline" />').addClass('stylecheck').hide();

         $container = $input.parent('div.stylecheck-container');
         $image     = $container.append('<div class="stylecheck-image" />').children('div.stylecheck-image');

         $image.css(
         {
            "width"   : options['width'],
            "height"  : (options['height'] / 2),
            "display" : "inline-block",
            "background" : ($input.is(':checked')) ? ("url('" + options['image'] + "') no-repeat 0px -17px") : ("url('" + options['image'] + "') no-repeat 0px 0px")
         });

         if ($container.parent('label').length > 0)
         {
            $container.append('<label style="display: inline; position: relative; top: -2px">' + $container.parent('label').text() + '</label> ');
            $container.parent('label').replaceWith($container);
         }

         $input.change(function()
         {
            if ($input.is(':checked'))
               $image.css("background-position", "0px -" + (options['height'] / 2) + "px");
            else
               $image.css("background-position", "0px 0px");
         });

         $container.click(function()
         {
            if ($input.is(':checkbox'))
            {
               if (!$input.is(':checked'))
                  $input.attr('checked', true);
               else
                  $input.removeAttr('checked');
            }

            if ($input.is(':radio') && !$input.is(':checked'))
            {
               $findme = $('input[name="' + $input.attr('name') + '"]:checked')

               if ($findme.length > 0)
                  $findme.each(function() { $(this).attr('checked', false); $(this).trigger('change'); });

               $input.attr('checked', true);
            }

            $input.trigger('change');
         });
      });
   };
})(jQuery);

我猜问题出在 jQuery 的each() 函数搜索数百个复选框...

有什么办法可以改进我的插件吗？

并非所有复选框在页面加载时都可见(显示:隐藏)。因此，我认为另一种选择是仅在切换可见性时才设置复选框的样式 - 不过，如果我的上述代码可以改进，我想将其作为最后的手段。

干杯。

Answer 1

这是您可以改进的一件事。您正在创建两个 jQuery 对象并对这两个对象调用 .is()。然后在下一行中，您将创建另一个并将其缓存在变量中。

要么在 if() 语句之前缓存在变量中，并使用缓存版本，要么完全放弃 jQuery 对象以使用 if() 语句，然后执行某些操作像这样:

var type = this.type.toLowerCase();
if (type != 'checkbox' && type != 'radio')
        return;

<小时/>

这里的其余部分将是 @Nick Craver 发布的 jsFiddle 的文档。

总的来说，当可以避免时不要使用 jQuery。使用 native API 速度更快。当您确实使用 jQuery 时，请以尽可能最少的方式使用它。

您可以更改此行:

$container = $input.parent('div.stylecheck-container');

对此:

$container = $input.parent();

由于您包装了 $input，因此无需使用选择器测试父级。

更改此行:

"background" : ($input.is(':checked')) ? ("url('" + options['image'] + "') no-repeat 0px -17px") : ("url('" + options['image'] + "') no-repeat 0px 0px")

这样做是为了避免调用 .is()。执行 this.checked 返回一个 bool 值:

"background" : this.checked ? ("url('" + options['image'] + "') no-repeat 0px -17px") : ("url('" + options['image'] + "') no-repeat 0px 0px")

在您分配的处理程序中，将 $input.is('checked') 更改为 $input[0].checked。这会获取 DOM 元素，并获取 checked 属性。这不会加快插件执行速度，但会改进处理程序。

此外，将 $input.is(':checkbox') 更改为 $input[0].type == "checkbox" (与 radio )。您甚至可以像我在本答案顶部所做的那样将类型缓存在变量中，并使用该值。如type == "checkbox"。