var js = document.createElement("script");
js.type = "text/javascript";js.src = jsFilePath;
document.body.appendChild(js);

最好使用jQuery方式。要延迟就绪事件，请先调用$.holdReady(true)。示例（来源）：

$.holdReady(true);$.getScript("myplugin.js", function() {$.holdReady(false);});

别忘了看看LAB.js！

<script type="text/javascript">$LAB.script("jquery-1.8.3.js").wait().script("scripts/clientscript.js");</script>

现在，我可能完全被误导了，但这是我最近开始做的事情……使用回车开始和结束您的JavaScript文件，放在PHP脚本中，然后再进行一次回车。JavaScript注释“//”被PHP忽略，因此无论如何都会发生包含。回车的目的是使包含的JavaScript的第一行不会被注释掉。

从技术上讲，您不需要注释，但它在Dreamweaver中发布了令我恼火的错误。如果您在不发布错误的IDE中编写脚本，您不应该需要注释或回车。

\n//<?php require_once("path/to/javascript/dependency.js"); ?>
function myFunction(){// stuff}\n

var s=["Hscript.js","checkRobert.js","Hscript.js"];for(i=0;i<s.length;i++){var script=document.createElement("script");script.type="text/javascript";script.src=s[i];document.getElementsByTagName("head")[0].appendChild(script)};

这应该做：

xhr = new XMLHttpRequest();xhr.open("GET", "/soap/ajax/11.0/connection.js", false);xhr.send();eval(xhr.responseText);

我编写了一个简单的模块，可以自动在JavaScript中导入/包含模块脚本。有关代码的详细解释，请参阅博客文章JavaScript需要/导入/包括模块。

// ----- USAGE -----
require('ivar.util.string');require('ivar.net.*');require('ivar/util/array.js');require('http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
ready(function(){//Do something when required scripts are loaded});
//--------------------
var _rmod = _rmod || {}; //Require module namespace_rmod.LOADED = false;_rmod.on_ready_fn_stack = [];_rmod.libpath = '';_rmod.imported = {};_rmod.loading = {scripts: {},length: 0};
_rmod.findScriptPath = function(script_name) {var script_elems = document.getElementsByTagName('script');for (var i = 0; i < script_elems.length; i++) {if (script_elems[i].src.endsWith(script_name)) {var href = window.location.href;href = href.substring(0, href.lastIndexOf('/'));var url = script_elems[i].src.substring(0, script_elems[i].length - script_name.length);return url.substring(href.length+1, url.length);}}return '';};
_rmod.libpath = _rmod.findScriptPath('script.js'); //Path of your main script used to mark//the root directory of your library, any library.

_rmod.injectScript = function(script_name, uri, callback, prepare) {
if(!prepare)prepare(script_name, uri);
var script_elem = document.createElement('script');script_elem.type = 'text/javascript';script_elem.title = script_name;script_elem.src = uri;script_elem.async = true;script_elem.defer = false;
if(!callback)script_elem.onload = function() {callback(script_name, uri);};document.getElementsByTagName('head')[0].appendChild(script_elem);};
_rmod.requirePrepare = function(script_name, uri) {_rmod.loading.scripts[script_name] = uri;_rmod.loading.length++;};
_rmod.requireCallback = function(script_name, uri) {_rmod.loading.length--;delete _rmod.loading.scripts[script_name];_rmod.imported[script_name] = uri;
if(_rmod.loading.length == 0)_rmod.onReady();};
_rmod.onReady = function() {if (!_rmod.LOADED) {for (var i = 0; i < _rmod.on_ready_fn_stack.length; i++){_rmod.on_ready_fn_stack[i]();});_rmod.LOADED = true;}};
_.rmod = namespaceToUri = function(script_name, url) {var np = script_name.split('.');if (np.getLast() === '*') {np.pop();np.push('_all');}
if(!url)url = '';
script_name = np.join('.');return  url + np.join('/')+'.js';};
//You can rename based on your liking. I chose require, but it//can be called include or anything else that is easy for you//to remember or write, except "import", because it is reserved//for future use.var require = function(script_name) {var uri = '';if (script_name.indexOf('/') > -1) {uri = script_name;var lastSlash = uri.lastIndexOf('/');script_name = uri.substring(lastSlash+1, uri.length);}else {uri = _rmod.namespaceToUri(script_name, ivar._private.libpath);}
if (!_rmod.loading.scripts.hasOwnProperty(script_name)&& !_rmod.imported.hasOwnProperty(script_name)) {_rmod.injectScript(script_name, uri,_rmod.requireCallback,_rmod.requirePrepare);}};
var ready = function(fn) {_rmod.on_ready_fn_stack.push(fn);};

我常用的方法是：

var require = function (src, cb) {cb = cb || function () {};
var newScriptTag = document.createElement('script'),firstScriptTag = document.getElementsByTagName('script')[0];newScriptTag.src = src;newScriptTag.async = true;newScriptTag.onload = newScriptTag.onreadystatechange = function () {(!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') && (cb());};firstScriptTag.parentNode.insertBefore(newScriptTag, firstScriptTag);}

它工作得很好，对我来说没有页面重载。我尝试过AJAX方法（其他答案之一），但它似乎对我来说效果不佳。

下面是对那些好奇的人的代码工作原理的解释：本质上，它创建了URL的新脚本标记（在第一个标记之后）。它将其设置为异步模式，因此不会阻止其余代码，但当readyState（要加载的内容的状态）更改为“已加载”时调用回调。

这里显示的大多数解决方案都意味着动态加载。我正在寻找一个编译器，它将所有依赖的文件组装成一个输出文件。与更少/萨斯预处理器处理CSS@import at规则相同。由于我没有找到任何类似的东西，我写了一个简单的工具来解决这个问题。

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

在jQuery主分支上，他们只是将原子源文件连接成一个从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

拿到合并文件

构建/main.js

var foo = function() {return {prop: "",method: function(){}}};

此脚本将在任何其他<script>标记的顶部添加一个JavaScript文件：

(function () {var li = document.createElement('script');li.type = 'text/javascript';li.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";li.async = true;var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(li, s);})();

这是一个Grunt插件，允许您在包括JavaScript文件在内的任何文件中使用@import "path/to/file.js";语法。它可以与uglify或watch或任何其他插件配对。

它可以使用npm install安装：https://npmjs.org/package/grunt-import

如果你想要纯JavaScript，你可以使用document.write。

document.write('<script src="myscript.js" type="text/javascript"></script>');

如果你使用jQuery库，你可以使用$.getScript方法。

$.getScript("another_script.js");

还有Head.js。很容易处理：

head.load("js/jquery.min.js","js/jquery.someplugin.js","js/jquery.someplugin.css", function() {alert("Everything is ok!");});

如您所见，它比Require.js更容易，并且与jQuery的$.getScript方法一样方便。它还具有一些高级功能，例如条件加载、特征检测和更多。

这是同步版本没有jQuery：

function myRequire( url ) {var ajax = new XMLHttpRequest();ajax.open( 'GET', url, false ); // <-- the 'false' makes it synchronousajax.onreadystatechange = function () {var script = ajax.response || ajax.responseText;if (ajax.readyState === 4) {switch( ajax.status) {case 200:eval.apply( window, [script] );console.log("script loaded: ", url);break;default:console.log("ERROR: script not loaded: ", url);}}};ajax.send(null);}

请注意，要获得这个工作的跨域，服务器需要在其响应中设置allow-origin标头。

实现类似CSS的JavaScript导入的@import语法可以使用Mixture等工具通过其特殊的.mix文件类型（参见这里）实现。我假设应用程序通过上述方法之一做到这一点。

从Mixture留档.mix文件：

Mix文件是简单的. js或. css文件，文件名中包含。A混合文件只是扩展了正常样式或脚本文件，并允许您导入和组合。

这是一个示例.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没有任何关系。我在看到.mix JavaScript文件时遇到了这个问题（在Mixture的一个样板中）并且对它有点困惑（“你能做到这一点？”我心想）。然后我意识到这是一种特定于应用程序的文件类型（有点令人失望，同意）。尽管如此，我想这些知识可能对其他人有所帮助。

备注： Mixture于2016/07/26停止（在2015/04/12开源后）。

如果您使用Web工作者并希望在工作进程的范围内包含其他脚本，则提供的关于将脚本添加到head标记等的其他答案将不适用于您。

幸运的是，Web Worker有自己的#0函数是Web Worker范围内的全局函数，原生于浏览器本身，因为它是规范的一部分。

或者，投票数第二高的答案将突出显示、是否必填也可以处理在Web Worker中包含脚本（可能调用importScripts本身，但具有一些其他有用的功能）。

这个问题有很多潜在的答案。我的答案显然是基于其中的一些。这是我通读所有答案后得出的结论。

$.getScript以及任何其他在加载完成时需要回调的解决方案的问题是，如果您有多个使用它并相互依赖的文件，则不再有办法知道何时加载了所有脚本（一旦它们嵌套在多个文件中）。

示例：

file3.js

var f3obj = "file3";
// Define other stuff

file2.js：

var f2obj = "file2";$.getScript("file3.js", function(){
alert(f3obj);
// Use anything defined in file3.});

file1.js：

$.getScript("file2.js", function(){alert(f3obj); //This will probably fail because file3 is only guaranteed to have loaded inside the callback in file2.alert(f2obj);
// Use anything defined in the loaded script...});

您说您可以指定Ajax同步运行或使用XMLHttpRequest相关文档是对的，但目前的趋势似乎是弃用同步请求，因此您现在或将来可能无法获得完整的浏览器支持。

您可以尝试使用$.when来检查延迟对象的数组，但现在您在每个文件中都这样做，并且一旦$.when执行而不是回调执行时，file2将被视为已加载，因此file1仍然在file3加载之前继续执行。这仍然存在相同的问题。

我决定向后而不是向前。谢谢你document.writeln。我知道这是禁忌，但只要正确使用它，这就很好。你最终得到的代码可以轻松调试，正确显示在DOM中，并可以确保正确加载依赖项的顺序。

当然，您可以使用$（"body"）. append（），但这样您就不能再正确调试了。

注意：你只能在页面加载时使用它，否则你会得到一个空白屏幕。换句话说，总是把这个放在document.ready之前/之外。我还没有在页面加载到点击事件或类似事件中后测试使用它，但我很确定它会失败。

我喜欢扩展jQuery的想法，但显然你不需要。

在调用document.writeln之前，它通过评估所有脚本元素来检查以确保脚本尚未加载。

我假设脚本在其document.ready事件执行之前不会完全执行。（我知道不需要使用document.ready，但很多人使用它，处理这是一种保障。）

加载附加文件时，document.ready回调将以错误的顺序执行。为了在脚本实际加载时解决此问题，导入它的脚本本身会重新导入并停止执行。这会导致原始文件现在在其导入的任何脚本之后执行其document.ready回调。

而不是这种方法，你可以尝试修改jQueryreadyList，但这似乎是一个更糟糕的解决方案。

解决方案：

$.extend(true,{import_js : function(scriptpath, reAddLast){if (typeof reAddLast === "undefined" || reAddLast === null){reAddLast = true; // Default this value to true. It is not used by the end user, only to facilitate recursion correctly.}
var found = false;if (reAddLast == true) // If we are re-adding the originating script we do not care if it has already been added.{found = $('script').filter(function () {return ($(this).attr('src') == scriptpath);}).length != 0; // jQuery to check if the script already exists. (replace it with straight JavaScript if you don't like jQuery.}
if (found == false) {
var callingScriptPath = $('script').last().attr("src"); // Get the script that is currently loading. Again this creates a limitation where this should not be used in a button, and only before document.ready.
document.writeln("<script type='text/javascript' src='" + scriptpath + "'></script>"); // Add the script to the document using writeln
if (reAddLast){$.import_js(callingScriptPath, false); // Call itself with the originating script to fix the order.throw 'Readding script to correct order: ' + scriptpath + ' < ' + callingScriptPath; // This halts execution of the originating script since it is getting reloaded. If you put a try / catch around the call to $.import_js you results will vary.}return true;}return false;}});

用法：

文件3：

var f3obj = "file3";
// Define other stuff$(function(){f3obj = "file3docready";});

文件2：

$.import_js('js/file3.js');var f2obj = "file2";$(function(){f2obj = "file2docready";});

文件1：

$.import_js('js/file2.js');
// Use objects from file2 or file3alert(f3obj); // "file3"alert(f2obj); // "file2"
$(function(){// Use objects from file2 or file3 some more.alert(f3obj); //"file3docready"alert(f2obj); //"file2docready"});

保持它漂亮，简短，简单，可维护！：]

// Third-party plugins / script (don't forget the full path is necessary)var FULL_PATH = '', s =[FULL_PATH + 'plugins/script.js'      // Script exampleFULL_PATH + 'plugins/jquery.1.2.js', // jQuery LibraryFULL_PATH + 'plugins/crypto-js/hmac-sha1.js',      // CryptoJSFULL_PATH + 'plugins/crypto-js/enc-base64-min.js'  // CryptoJS];
function load(url){var ajax = new XMLHttpRequest();ajax.open('GET', url, false);ajax.onreadystatechange = function (){var script = ajax.response || ajax.responseText;if (ajax.readyState === 4){switch(ajax.status){case 200:eval.apply( window, [script] );console.log("library loaded: ", url);break;default:console.log("ERROR: library not loaded: ", url);}}};ajax.send(null);}
// Initialize a single loadload('plugins/script.js');
// Initialize a full load of scriptsif (s.length > 0){for (i = 0; i < s.length; i++){load(s[i]);}}

此代码只是一个简短的功能示例，可以需要额外的功能功能才能在任何（或给定）平台上获得完全支持。

语句#0在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;

以下是Facebook为其无处不在的喜欢按钮所做的通用版本：

<script>var firstScript = document.getElementsByTagName('script')[0],js = document.createElement('script');js.src = 'https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js';js.onload = function () {// do stuff with your dynamically loaded scriptsnowStorm.snowColor = '#99ccff';};firstScript.parentNode.insertBefore(js, firstScript);</script>

如果它适用于Facebook，它将适用于您。

我们寻找第一个script元素而不是head或body的原因是，如果缺少，某些浏览器不会创建一个，但我们保证有一个script元素-这个。在http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/阅读更多。

我有一个简单的问题，但我对这个问题的回答感到困惑。

我必须在另一个JavaScript文件（main.js）中使用一个JavaScript文件（myvariables.js）中定义的变量（myVar1）。

为此，我做了如下：

以正确的顺序将JavaScript代码加载到超文本标记语言文件中，myvariables.js，然后main.js：

<html><body onload="bodyReady();" >
<script src="myvariables.js" > </script><script src="main.js" > </script>
<!-- Some other code --></body></html>

文件：myvariables.js

var myVar1 = "I am variable from myvariables.js";

文件：main.js

// ...function bodyReady() {// ...alert (myVar1);    // This shows "I am variable from myvariables.js", which I needed// ...}// ...

如您所见，我在另一个JavaScript文件中的一个JavaScript文件中使用了一个变量，但我不需要在另一个JavaScript文件中包含一个变量。我只需要确保第一个JavaScript文件在第二个JavaScript文件之前加载，并且，第一个JavaScript文件的变量可以在第二个JavaScript文件中自动访问。

这拯救了我的一天。我希望这能有所帮助。

如果您加载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();

当您在超文本标记语言文件中包含脚本时，您只需要小心。顺序应该如下所示：

<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>

我基本上像下面这样做，创建一个新元素并将其附加到head：

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

在jQuery：

// jQuery$.getScript('/path/to/imported/script.js', function(){// Script is now loaded and executed.// Put your dependent JavaScript code here.});

我需要异步加载一个JavaScript文件数组，并在最后进行回调。基本上，我最好的方法如下：

// Load a JavaScript file from other JavaScript filefunction loadScript(urlPack, callback) {var url = urlPack.shift();var subCallback;
if (urlPack.length == 0) subCallback = callback;else subCallback = function () {console.log("Log script: " + new Date().getTime());loadScript(urlPack, callback);}
// Adding the script tag to the head as suggested beforevar head = document.getElementsByTagName('head')[0];var script = document.createElement('script');script.type = 'text/javascript';script.src = url;
// Then bind the event to the callback function.// There are several events for cross browser compatibility.script.onreadystatechange = subCallback;script.onload = subCallback;
// Fire the loadinghead.appendChild(script);}

示例：

loadScript(["js/DataTable/jquery.dataTables.js","js/DataTable/dataTables.bootstrap.js","js/DataTable/dataTables.buttons.min.js","js/DataTable/dataTables.colReorder.min.js","js/DataTable/dataTables.fixedHeader.min.js","js/DataTable/buttons.bootstrap.min.js","js/DataTable/buttons.colVis.min.js","js/DataTable/buttons.html5.min.js"], function() { gpLoad(params); });

第二个脚本在第一个脚本完全加载之前不会加载，因此…

结果：

你不能导入，但你可以引用。

PhpShtorm IDE。要引用，在一个.js文件中到另一个.js，只需将其添加到文件顶部：

<reference path="../js/file.js" />

当然，您应该对JavaScript文件使用自己的PATH。

我不知道它是否适用于其他IDE。可能是的，试试看。它应该也适用于Visual Studio。

也许还有另一种方式！

在Node.js你可以这样做，就像下面的代码显示！

sub.js

    module.exports = {log: function(string) {if(console) console.log(string);}mylog: function(){console.log('just for log test!');}}

main.js

    const mylog = require('./sub');
mylog.log('Hurray, it works! :)');mylog.mylog();

裁判

http://requirejs.org/docs/node.html

var xxx = require("../lib/your-library.js")

或

import xxx from "../lib/your-library.js" //get default exportimport {specificPart} from '../lib/your-library.js' //get named exportimport * as _name from '../lib/your-library.js'  //get full export to alias _name

另一种方法是使用超文本标记语言导入。这些可以包含脚本引用以及样式表引用。

你可以链接一个超文本标记语言文件

<link rel="import" href="vendorScripts.html"/>

在vendorScripts.html文件中，您可以包含您的脚本引用，例如：

<script src="scripts/vendors/jquery.js"></script><script src="scripts/vendors/bootstrap.js"></script><script src="scripts/vendors/angular.js"></script><script src="scripts/vendors/angular-route.js"></script>

查看超文本标记语言导入了解更多详细信息。

不幸的是，这只适用于Chrome。

如果您使用Angular，那么插件模块$ocLazyLoad可以帮助您做到这一点。

以下是其留档中的一些引文：

加载一个或多个包含多个文件的模块和组件：

$ocLazyLoad.load(['testModule.js', 'testModuleCtrl.js', 'testModuleService.js']);

加载一个或多个包含多个文件的模块，并在必要时指定类型：注意：当使用请求JS样式格式时（例如以js！开头），不要指定文件扩展名。使用一个或另一个。

$ocLazyLoad.load(['testModule.js',{type: 'css', path: 'testModuleCtrl'},{type: 'html', path: 'testModuleCtrl.html'},{type: 'js', path: 'testModuleCtrl'},'js!testModuleService','less!testModuleLessFile']);

您可以加载外部库（不是角度）：

$ocLazyLoad.load(['testModule.js','bower_components/bootstrap/dist/js/bootstrap.js', 'anotherModule.js']);

您还可以加载css和模板文件：

 $ocLazyLoad.load(['bower_components/bootstrap/dist/js/bootstrap.js','bower_components/bootstrap/dist/css/bootstrap.css','partials/template1.html']);

这是一个使用超文本标记语言导入的解决方法为浏览器（不是Node.js）。

首先，所有JavaScript类和脚本都不在.js文件中，而是在.js.html文件中（. js.html只是为了识别超文本标记语言页面和完整的JavaScript脚本/类），在<script>标签中，如下所示：

MyClass.js.html：

<script>class MyClass {
// Your code here..
}
</script>

然后，如果你想导入你的类，你只需要使用超文本标记语言导入：

<link rel="import" href="relative/path/to/MyClass.js.html"/>
<script>var myClass = new MyClass();// Your code here..</script>

编辑：超文本标记语言导入将被删除

超文本标记语言导入被删除，支持ES6模块。你应该使用ES6模块。