2

问题/问题： 我有几个具有某些功能的 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 中的函数，没有用。

  • 与上面相同，但在 main.js 之前还有 src include.js，脚本运行两次。

感谢任何反馈，谢谢。

PS：我已经找到了这些：加载多个 javascript 文件 - jquery和这些：如何使用 jQuery $.getScript() 方法包含多个 js 文件，但它们并不安静，我正在寻找。

4

4 回答 4

1

你可以做这样的事情。

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

例如：

包含-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>
于 2017-02-18T10:42:04.047 回答
1

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

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

在服务器上，我可以选择提供单个/混淆的 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的简单正则表达式的结构可以提取所有单个文件，然后我可以通过闭包编译器推送它们。）

于 2017-02-14T22:01:12.860 回答
0 
$(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(" ");
});
于 2017-02-16T04:41:22.257 回答
0

如果我正确理解了您的问题，您只想main.js在包含所有文件后执行？你为什么不main.js从includes.js文件中运行呢？从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 转储到一个文件中。您也可以缩小此文件以使其更快。

于 2017-02-17T09:35:31.063 回答