创建一个包含文件 jQuery答案

【问题标题】：Create an includes file jQuery创建一个包含文件 jQuery
【发布时间】：2013-10-28 03:10:39
【问题描述】：

问题/问题： 我有几个带有一些功能的 js 文件（~15）。为了不必在 html 页面中一一包含它们，我想创建一个包含文件（例如在 php 中使用 include()、require() 等）。

目标： 所以目标是拥有这样的东西：

HTML: 仅 src main.js 或 main.js + includes.js
Includes.js： 应该得到所有的脚本。
Main.js：应该可以访问所有的 includes.js 脚本。

我已经尝试过的：

$.getScript 将includes.js中的所有文件，src在main.js之前的html中，并尝试使用main.js中的函数，没有用。
$.getScript 中includes.js 中的所有文件，$.getScript 中includes.js 在main.js 中，只是src main.js，尝试使用main.js 中的函数，没有用。
同上，但src在main.js之前包含.js，脚本运行两次。

感谢任何反馈，谢谢。

PS：我已经找到了这些：loading multiple javascript files - jquery 和这些：How to include multiple js files using jQuery $.getScript() method，但它们并不安静，我想要寻找。

【问题讨论】：

你为什么不把它们合并成一个更大的 JS 文件在服务器上呢？这就是大多数人所做的。将它们组合成一个更大的可缓存文件并将其最小化。比让浏览器下载 15 个单独的文件要快得多。
我认为保留几个小文件可能比一个大文件更容易维护和修改。没有？
你试过 requireJS:requirejs.org/docs/api.html
也许你在 html 和包含中声明了两次 js？否则你应该分享你的尝试，也许可以帮助，getallscripts 工作

标签： jquery

【解决方案1】：

不需要 jQuery。尝试一些更简单的东西。

我做了类似的事情：在多个较小的 JS 文件中编写代码，但在我的 HTML 中只包含一个 <script src="/js/all.js">。

在服务器上，我可以选择提供单个/混淆的 JS，或者提供类似的服务：

=== all.js ===
(function() {
    'use strict';
    var a = [
       'file1',
       'utils',
       'main',
       'jquery.placeholder',
       ...
    ];
    var i;
    var s = [];
    for (i = 0; i < a.length; i += 1) {
        s = s.concat(['<script src="/js/', a[i], '.js"></script>']);
    }
    document.write(s.join(''));
}());

如您所见，HTML 加载 all.js，它执行：它将我想要的所有其他脚本文件写入 DOM。

这意味着当我调试时，我仍然在单独加载文件（所以断点很容易）。如果我想添加一个新的 JS 文件，我只需编辑我的all.js。

当我不调试时，我的服务器会发送一个all.js，它（本质上）是各个文件的串联。（这很简单：鉴于我的all.js 的结构，一个简单的正则表达式可以提取所有单独的文件，然后我可以通过闭包编译器将它们推送。）

【讨论】：

那么在哪里说 file1 utils main 这些是文件名？
@Case 是的。 “file1”、“utils”等都是我的JS文件。此外，由于我有 jquery.placeholder 的本地版本，因此我也将其包含在此处。在我的例子中，由于所有 JS 文件都在同一个位置，var a[] 只是没有完整路径或“.js”扩展名的文件名，它们都被添加到for 循环中。

【解决方案2】：

你可以这样做。

创建一个名为 include-js.txt 的文本文件。
在 include-js.txt 中添加一个 document.write('') 并使用标记将所有 js 文件包含在其中。
现在在 HTML 文件中使用标签包含这个 txt 文档。

例如：

include-js.txt 文件：

document.write('<script type="text/javascript" src="main.js"></script><script type="text/javascript" src="js-file-1.js"></script><script type="text/javascript" src="js-file-2.js"></script>');

HTML 文件：

<head>
    <script language="javascript" type="text/javascript" src="include-js.txt"></script>
</head>

【讨论】：

【解决方案3】：

$(function()
{
     var js = ["file1.js", "file2.js"];
     var load = [];

     for(script in js)
     {
         load.push("<script type="text/javascript" src=" + script + "></script>");
     }

     return load.join(" ");
});

【讨论】：

【解决方案4】：

如果我正确理解了您的问题，您是否希望 main.js 仅在包含所有文件后才执行？为什么不从includes.js 文件中运行main.js 呢？取自this answer at stackoverflow，我们可以在包含文件中执行如下操作：

function getScripts(scripts, callback) {
    var progress = 0;
    scripts.forEach(function(script) { 
        $.getScript(script, function () {
            if (++progress == scripts.length) callback();
        }); 
    });
}
getScripts(["script1.js", "script2.js"], function () {
    // now load the main.js file since all scripts have loaded
    getScripts(["main.js"], function () {
        // do something
        // you have access to all included js files
    });
});

您是否可以将 includes.js 文件重命名为 init.js 并仅将此文件添加到您的 html 中？

注意： 顺便说一句，将所有 js 文件放在一个文件中并将其添加到 html 可能会更快。更多文件意味着对服务器的更多调用。除非您正在使用不同页面需要不同 js 文件的动态环境，否则请将所有 js 转储到一个文件中。您也可以缩小此文件以使其更快。

【讨论】：