如何优化我的 JavaScript 代码？

Question

我刚刚创建了一个等待所有图像的 javscript 插件。以下是我目前的源码。

$.fn.waitAllImages = function(options){

    var defaults = {
        speed: 900
    }

    var options = $.extend(defaults,options);


    var preloader = $("<div/>");
    preloader.addClass('moonsPreloader');
    preloader.attr("id",options.id+"-preloader");


    var hideWrapper = $("<div/>");
    hideWrapper.attr("id",options.id+"-hide-wrapper");
    hideWrapper.css("display","none");

    $(this).wrapAll(hideWrapper);

    $("body").append(preloader);

    $(window).bind('load',function(){
        $("#"+options.id+"-preloader").remove();
        $("#"+options.id+"-hide-wrapper").eq(0).fadeIn(options.speed);
    });


}

它有效，但我有一个顾虑。

如您所见，加载回调访问 options.id。 $.fn.waitAllImages 和加载回调是两个不同的函数。这是否意味着加载回调会阻止 JavaScript 车库收集器清理 options.id 变量？

Answer 1

垃圾收集细节是特定于实现的，但是是的，您的 load 函数包含对 options 变量的引用，因此它将在该函数的生命周期内可用。

这在实践中很少出现问题，但如果它困扰您，您可以传递您需要的值的副本：

$(window).bind('load', { id: options.id, speed: options.speed }, function(event){
    $("#"+event.data.id+"-preloader").remove();
    $("#"+event.data.id+"-hide-wrapper").eq(0).fadeIn(event.data.speed);
});