当对象需要首先加载 DOM 时使用的最佳 Javascript 设计模式？答案

【问题标题】：Best Javascript design pattern to use when the object requires DOM to be loaded first?当对象需要首先加载 DOM 时使用的最佳 Javascript 设计模式？
【发布时间】：2013-04-04 04:12:47
【问题描述】：

我正在使用 Google API 做一些事情，我想构建我的代码以使其可重用，但我遇到了困难。要使用 oauth2 进行身份验证，我正在加载此脚本

<script src="https://apis.google.com/js/auth.js?onload=initAuth"></script>

它在加载时调用了 initAuth()。然后我可以使用 gapi.auth 进行身份验证。但是，因为我正在调用不同的 API，所以我想为身份验证创建一个更通用的包装类。我浏览了网络并尝试了自我执行的匿名函数，因为它们看起来很干净：

(function(GAuth, $, undefined) {

    GAuth.token = gapi.auth.getToken();

    GAuth.authenticate = function(clientId, scopes, apiUrl, isInitialAuth, callback) {
        if(isInitialAuth)
        {
            gapi.auth.init(function() {
                authorize(clientId, scopes, apiUrl, false, callback);
            });
        }

        else
        {
            // authorize is private
            authorize(clientId, scopes, apiUrl, true, callback);
        }
    }

    ...etc...

}(window.GAuth = window.GAuth || {}, jQuery));

这个问题是它立即执行，在这种情况下我得到一个“gapi is undefined”错误。我正在寻找一种方法，允许我在加载其他脚本后加载我的 GAuth 对象，并且最好允许我定义公共和私有函数/变量。

【问题讨论】：

在你需要这个文件之前包含设置gapi的文件。
我建议你看看RequireJS。一开始可能会很麻烦，但从长远来看会解决依赖问题和“加载优先”问题。
@JosephtheDreamer RequireJS 对于较小的项目来说太过分了，当您合并和丑化代码时会更加痛苦。我不是在谈论它 - 对于大型模块化项目，它可能是一个可行的选择，就像 CommonJS 一样。

标签： javascript design-patterns dom asynchronous

【解决方案1】：

在需要此文件之前包括设置gapi 的文件。这将确保 gapi 在此脚本执行时具有值。由于您使用的是 jQuery，因此您还可以使用准备好的文档（非常推荐用于首先准备好页面的代码）。

// Define functions here
$(function() {
    // Do your code dependent on a completely loaded DOM here
});

【讨论】：