Question

我有以下JavaScript函数但想要重构$（document）.ready（），因为我有2个实例。我怎样才能做到这一点？

FlashMessenger = {
    init: function() {
        setTimeout(function() {
            $(".flash").fadeOut("slow", function () {
                $(".flash").remove();
            });
        }, 5000);
    }
}

SelectLanguage = {
    init: function() {
        $('#selectLanguageId').change(function() {
            $('#frmSelectLanguage').submit();
        });
    }
}

$(document).ready(FlashMessenger.init);
$(document).ready(SelectLanguage.init);

Answer 1

为$（document）.ready设置多个处理程序是完全可以接受的，尽管你可能有充分的理由去做我不知道的事情。您可能有兴趣知道$（handler）可以用作$（document）.ready（handler）的简写：

$(FlashMessenger.init);
$(SelectLanguage.init);

如果你真的希望他们在一个电话中，试试这个：

$(function() {
    FlashMessenger.init();
    SelectLanguage.init();
});

Answer 2

只需将它们组合成一个带匿名函数的调用：

$(document).ready(function()
{
  FlashMessenger.init();
  SelectLanguage.init();
});

Answer 3

$(document).ready(function() {
    FlashMessenger.init();
    SelectLanguage.init();
});

Answer 4

首先，没有理由你组合它们。

但如果你想：

$(document).ready(function(jq){
    FlashMessenger.init(jq);
    SelectLanguage.init(jq);
});

打破它：

创建一个函数来执行所有init（可以命名或匿名;上面的那个是匿名的）。
让调用其他初始化函数，传入jQuery传递给你的jQuery实例，万一他们使用它。

您也可以选择将每个init调用包装在try/catch块中，以便一个init中的错误不会阻止下一个init发生，但这取决于您的需求。 / p>

Answer 5

选项1

FlashMessenger = {
    init: function() {
        setTimeout(function() {
            $(".flash").fadeOut("slow", function () {
                $(".flash").remove();
            });
        }, 5000);
    }
}    
SelectLanguage = {
    init: function() {
        $('#selectLanguageId').change(function() {
            $('#frmSelectLanguage').submit();
        });
    }
}

$(function(){
    FlashMessenger.init();
    SelectLanguage.init();
});

选项2

FlashMessenger = {
    init: function() {
        setTimeout(function() {
            $(".flash").fadeOut("slow", function () {
                $(".flash").remove();
            });
        }, 5000);
    }
}

SelectLanguage = {
    init: function() {
        $('#selectLanguageId').change(function() {
            $('#frmSelectLanguage').submit();
        });
    }
}

$(document).ready(function(){
    FlashMessenger.init();
    SelectLanguage.init();
});

选项3
你实际上不需要那两个对象，因为它只保存init方法，所以这是我认为的最终解决方案，除非你在其他地方使用这些对象。

$(function(){
    $('#selectLanguageId').change(function() {
        $('#frmSelectLanguage').submit();
    });
    setTimeout(function() {
        $(".flash").fadeOut("slow", function () {
                $(".flash").remove();
        });
    }, 5000);
})

我因this原因而更喜欢2和3。

Answer 6

我认为op所说的是，“如果将来我在document.ready调用第三个函数，那么如何在不触及该代码的情况下执行此操作？”

如果您不想进行多次$(document).ready()次调用，则可以创建一个名为startupHooks的数组，并将每种方法添加到其中：

startupHooks[ startupHooks.length ] = myNewStartupHook;

您的启动脚本可能看起来像

$(document).ready(function() {
    for( var i=0; i<startupHooks.length; i++ ) {
        startupHooks[i]();
    }
}

我知道这不是很有用，但如果这对你很有吸引力，你就可以这样做。

就个人而言，我会进行多次$(document).ready()来电。

Answer 7

就个人而言，我根本不会使用document.ready。如果将脚本放在html页面的末尾（就在标记之前），您可以以任何您喜欢的方式编写。也许这对0.01％的脚本不起作用，但它永远不会对我有用。

这样做的积极效果是初始HTML + CSS渲染速度更快。你也可以在雅虎上阅读它。 http://developer.yahoo.com/performance/rules.html#js_bottom

重构$（document）.ready（），目前有2个实例

7 个答案: