JavaScript 文件的结构和 Modernizr/yepnope答案

【问题标题】：Structure of JavaScript files and Modernizr/yepnopeJavaScript 文件的结构和 Modernizr/yepnope
【发布时间】：2013-11-26 07:16:22
【问题描述】：

我正在使用 Modernizr 和 yepnope.js 研究整个异步脚本加载，我想知道如何调整我的应用程序结构以使用异步脚本加载。

现在的结构是这样的：

...
<head>
    <script src=jquery.js></script>
    <script src=plugin1.js></script>
    <script src=plugin2.js></script>
    <script src=plugin3.js></script>
    <script src=global.js></script>
</head>
<body>

此代码位于整个应用程序中的 required 的 header.php 文件中。在文档正文部分（其他 PHP 文件）中，我可能有一些 JavaScript 文件，如下所示：

    ...
    <script src=moduleA.js></script>
    <script src=someScripts.js></script>
</html>

下面是 moduleA.js 和 someScripts.js 可以包含的简化示例：

$(document).ready(function() {
     $('.searchDate').myCoolPlugin({ /* some options */ });
});

还有一些Scripts.js：

$(document).ready(function() {
     $('#departureDate, #arrivalDate').myCoolPlugin({ /* some options */ });
});

如果我使用的是 Modernizr，我会在页面顶部删除其他插件脚本并在 global.js 中写：

Modernizr.load([
    {
        test: $.fn.myCoolPlugin,
        nope: 'plugin1.js',
        complete: function() {
            $(document).ready(function() {
                $('.filterDates').myCoolPlugin();
            }
        }
    }
]);

如何保证 myCoolPlugin 在 moduleA.js 和 someScripts.js 执行时已经加载？我意识到我可以使用Modernizr.load() 将插件初始化包装在这些文件中，但这似乎是不必要的代码重复。

【问题讨论】：

标签： javascript asynchronous modernizr yepnope event-driven-design

【解决方案1】：

如果我正确理解了您的问题，那么您希望在使用 Modernizr 加载必要的脚本后执行正文脚本。

你可以这样做：

// Header script
var race_won = false;
var load_body_script = function() {
  race_won = true;
};

Modernizr.load([
    {
        test: ..your condition..,
        yep: ..test success..,
        nope: ..test fail..,
        complete: function() {
            $(document).ready(function() {
                $('.filterDates').myCoolPlugin();
                load_body_script();
            }
        }
    }
]);

// Body script
var body_script = function() {
  // .. your code here ..
}
if (race_won) {
  body_script();
}
else {
  load_body_script = body_script;
}

【讨论】：