关于JavaScript文件包含：a .js within a .js文件


Including a .js file within a .js file

本问题已经有最佳答案，请猛点这里访问。

我想知道是否可以在另一个.js文件中包含一个.js文件？

我之所以想这样做，是为了尽量减少客户参与。我已经用客户机需要的函数编写了几个.js文件。客户机将拥有一个HTML文件，他/她用一个.js文件管理该文件，其中包括(my .js文件)。

我可以用它的所有功能重新编写一个新的.js文件，或者，为了避免做双重工作，我可以想出一种方法来编写一个.js文件，其中包括其他.js文件。

相关讨论

我基本上是这样做的，创建新的元素并将其附加到EDOCX1[1]

1
2
3
var x = document.createElement('script');
x.src = 'http://example.com/test.js';
document.getElementsByTagName("head")[0].appendChild(x);

您也可以对附加的每个脚本使用onload事件，但是请测试一下，我不确定它是否可以跨浏览器工作。

1
x.onload=callback_function;
相关讨论

浏览器加载时间的最佳解决方案是使用服务器端脚本将它们连接到一个大的.js文件中。确保gzip/minify最终版本。单一请求-美观紧凑。

或者，可以使用dom创建一个标记，并在其上设置src属性，然后将其附加到上。如果需要等待加载该功能，可以从该脚本标记上的load事件调用JavaScript文件的其余部分。

此功能基于jquery $.getScript()的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function loadScript(src, f) {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.src = src;
  var done = false;
  script.onload = script.onreadystatechange = function() {
    // attach to both events for cross browser finish detection:
    if ( !done && (!this.readyState ||
      this.readyState =="loaded" || this.readyState =="complete") ) {
      done = true;
      if (typeof f == 'function') f();
      // cleans up a little memory:
      script.onload = script.onreadystatechange = null;
      head.removeChild(script);
    }
  };
  head.appendChild(script);
}

// example:
loadScript('/some-other-script.js', function() {
   alert('finished loading');
   finishSetup();
 });

做这件事没有直接的方法。

您可以根据需要加载脚本。(再次使用类似于伊格纳西奥提到的东西，但更干净)。

请查看此链接，了解执行此操作的多种方法：http://ajaxpatterns.org/on-demand_javascript

我最喜欢的是(不总是适用)：

1
2
<script src="dojo.js" type="text/javascript">
dojo.require("dojo.aDojoPackage");

谷歌的关闭也提供了类似的功能。

解决从HTML文件中减少javascript引用问题的一种流行方法是使用一个类似链轮的连接工具，该工具将javascript源文件预处理并连接在一起。

除了减少来自HTML文件的引用数，这还将减少对服务器的命中数。

然后，您可能希望通过类似jsmin的缩小工具运行所得到的连接，使其缩小。

我使用@gnarf的方法，虽然我在ie<7的时候使用了document.writeln的标签，因为我不能让dom创建在ie6中可靠地工作(而tbh也不太在乎在其中投入太多精力)。我的代码的核心是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if (horus.script.broken) {
    document.writeln('<script type="text/javascript" src="'+script+'">');  
    horus.script.loaded(script);
} else {
    var s=document.createElement('script');
    s.type='text/javascript';
    s.src=script;
    s.async=true;

    if (horus.brokenDOM){
        s.onreadystatechange=
            function () {
                if (this.readyState=='loaded' || this.readyState=='complete'){
                    horus.script.loaded(script);
                }
        }
    }else{
        s.onload=function () { horus.script.loaded(script) };
    }

    document.head.appendChild(s);
}

其中horus.script.loaded()注意到javascript文件已加载，并调用任何挂起的未调用例程(由autoloader代码保存)。