如何在另一个JavaScript文件中包含一个JavaScript文件?

JavaScript中是否有类似于@importCSS的东西,允许您在另一个JavaScript文件中包含一个JavaScript文件?

StafanTomTom2020/03/09 12:30:44

@import可以使用Mixture之类的工具通过其特殊.mix文件类型来实现类似CSS的JavaScript导入语法(请参见此处)。我想该应用程序只是内部使用一种上述方法,尽管我不知道。

从文件的Mixture文档中.mix

混合文件只是带.mix的.js或.css文件。在文件名中。混合文件只是扩展了普通样式或脚本文件的功能,并允许您导入和合并。

这是一个.mix将多个.js文件合并为一个的示例文件

// scripts-global.mix.js
// Plugins - Global

@import "global-plugins/headroom.js";
@import "global-plugins/retina-1.1.0.js";
@import "global-plugins/isotope.js";
@import "global-plugins/jquery.fitvids.js";

Mixture将其输出为scripts-global.js,也将其输出为缩小版本(scripts-global.min.js)。

注意:除了将它用作前端开发工具之外,我与Mixture无关。在看到一个运行中的.mixJavaScript文件(在其中一个Mixture样板中)并对它有点困惑时,我遇到了这个问题(“我能想到吗?”)然后我意识到这是一种特定于应用程序的文件类型(有些令人失望,同意)。但是,认为这些知识可能对其他人有所帮助。

更新:混合物现在免费(脱机)。

更新:混合物现已停产。旧的混合物版本仍然可用

达蒙阿飞斯丁2020/03/09 12:30:44

用现代语言检查脚本是否已经加载,它将是:

function loadJs(url){
  return new Promise( (resolve, reject) => {
    if (document.querySelector(`head > script[src="${src}"]`) !== null) return resolve()
    const script = document.createElement("script")
    script.src = url
    script.onload = resolve
    script.onerror = reject
    document.head.appendChild(script)
  });
}

用法(异步/等待):

try { await loadJs("https://.../script.js") } 
catch(error) {console.log(error)}

要么

await loadJs("https://.../script.js").catch(err => {})

用法(承诺):

loadJs("https://.../script.js").then(res => {}).catch(err => {})
乐十三2020/03/09 12:30:44
var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);
猿小宇宙小哥2020/03/09 12:30:44

如果您使用的是Web Workers,并且希望在worker的范围内包括其他脚本,则有关将脚本添加到head标记等的其他答案将对您不起作用。

幸运的是,Web Workers具有自己的importScripts功能,这是Web Workers范围内的全局功能,它浏览器本身的固有功能,因为它是规范的一部分

另外,作为对您问题的第二高投票答案RequireJS还可以处理Web Worker内的脚本(可能会importScripts自称,但还有一些其他有用的功能)。

TomMandy2020/03/09 12:30:44

而不是在运行时添加,而是使用脚本在上传之前进行串联。

我使用链轮(我不知道是否还有其他链轮)。您将JavaScript代码构建在单独的文件中,并包含由Sprockets引擎处理的注释(包括)。对于开发,您可以依次包含文件,然后在生产中将它们合并...

也可以看看:

2020/03/09 12:30:44

应该这样做:

xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);
木千2020/03/09 12:30:44

如果要加载JavaScript文件的目的是使用导入/包含的文件中的函数,则还可以定义一个全局对象并将这些函数设置为对象项。例如:

global.js

A = {};

file1.js

A.func1 = function() {
  console.log("func1");
}

file2.js

A.func2 = function() {
  console.log("func2");
}

main.js

A.func1();
A.func2();

在HTML文件中包含脚本时,只需要小心即可。顺序应如下所示:

<head>
  <script type="text/javascript" src="global.js"></script>
  <script type="text/javascript" src="file1.js"></script>
  <script type="text/javascript" src="file2.js"></script>
  <script type="text/javascript" src="main.js"></script>
</head>
凯阳光2020/03/09 12:30:43

此处显示的大多数解决方案都暗含动态载荷。我正在搜索的是一个将所有依赖文件组装成一个输出文件的编译器。Less / Sass预处理器处理CSS @import规则相同。由于我没有找到任何像样的东西,因此我编写了一个简单的工具来解决该问题。

这就是编译器https://github.com/dsheiko/jsic,它可以$import("file-path")安全地替换为请求的文件内容。这是对应的Grunt插件:https : //github.com/dsheiko/grunt-jsic

在jQuery master分支上,它们仅将原子源文件连接成一个以开头intro.js和以结束的单个源文件outtro.js那不适合我,因为它在源代码设计上没有灵活性。查看jsic的工作方式:

src / main.js

var foo = $import("./Form/Input/Tel");

src /表格/输入/Tel.js

function() {
    return {
          prop: "",
          method: function(){}
    }
}

现在我们可以运行编译器:

node jsic.js src/main.js build/mail.js

并获得合并的文件

build / main.js

var foo = function() {
    return {
          prop: "",
          method: function(){}
    }
};
Eva猿猿2020/03/09 12:30:43

语句import在ECMAScript 6中。

句法

import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name" as name;
泡芙村村Pro2020/03/09 12:30:43

可以动态生成JavaScript标记并将其从其他JavaScript代码内部附加到HTML文档。这将加载目标JavaScript文件。

function includeJs(jsFilePath) {
    var js = document.createElement("script");

    js.type = "text/javascript";
    js.src = jsFilePath;

    document.body.appendChild(js);
}

includeJs("/path/to/some/file.js");
Harry小卤蛋2020/03/09 12:30:43

我认为更简洁的另一种方法是发出同步Ajax请求,而不使用<script>标签。Node.js处理的内容包括在内。

这是使用jQuery的示例:

function require(script) {
    $.ajax({
        url: script,
        dataType: "script",
        async: false,           // <-- This is the key
        success: function () {
            // all good...
        },
        error: function () {
            throw new Error("Could not load script " + script);
        }
    });
}

然后,您可以像通常使用include那样在代码中使用它:

require("/scripts/subscript.js");

并能够在下一行中从所需脚本中调用函数:

subscript.doSomethingCool();