JavaScript中是否有类似于CSS中@import
的内容,可让您在另一个JavaScript文件中包含一个JavaScript文件?
#1楼
而不是在运行时添加,而是使用脚本在上传之前进行串联。
我使用链轮 (我不知道是否还有其他链轮 )。 您将JavaScript代码构建在单独的文件中,并包含由Sprockets引擎处理的注释(包括)。 对于开发,您可以依次包含文件,然后在生产中将它们合并...
也可以看看:
#2楼
如果有人在寻找更高级的东西,请尝试RequireJS 。 您将获得更多好处,例如依赖管理,更好的并发性,并避免重复(也就是说,多次检索脚本)。
您可以在“模块”中编写JavaScript文件,然后在其他脚本中将它们作为依赖项引用。 或者,您可以将RequireJS用作简单的“获取此脚本”解决方案。
例:
将依赖项定义为模块:
some-dependency.js
define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) {
//Your actual script goes here.
//The dependent scripts will be fetched if necessary.
return libraryObject; //For example, jQuery object
});
Implementation.js是您的“主要” JavaScript文件,它取决于some-dependency.js
require(['some-dependency'], function(dependency) {
//Your script goes here
//some-dependency.js is fetched.
//Then your script is executed
});
摘自GitHub自述文件:
RequireJS加载普通的JavaScript文件以及更多定义的模块。 它针对浏览器内使用进行了优化,包括在Web Worker中使用,但可以在其他JavaScript环境(例如Rhino和Node)中使用。 它实现了异步模块API。
RequireJS使用简单的脚本标签来加载模块/文件,因此应便于调试。 它可以简单地用于加载现有的JavaScript文件,因此您可以将其添加到现有项目中,而无需重新编写JavaScript文件。
...
#3楼
有个好消息对你来说。 很快,您将能够轻松加载JavaScript代码。 这将成为导入JavaScript代码模块的标准方法,并将成为核心JavaScript本身的一部分。
您只需import cond from 'cond.js';
编写import cond from 'cond.js';
从文件cond.js
加载名为cond
的宏。
因此,您不必依赖任何JavaScript框架,也不必显式进行Ajax调用。
参考:
#4楼
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
#5楼
应该这样做:
xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);
#6楼
我编写了一个简单的模块,该模块可以自动执行导入/包含JavaScript中的模块脚本的工作。 有关代码的详细说明,请参阅博客文章JavaScript require / import / include modules 。
// ----- 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);
};
#7楼
我通常的方法是:
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(要加载的内容的状态)更改为“已加载”时调用回调。
#8楼
此处显示的大多数解决方案都暗含动态载荷。 我搜索的是一个将所有依赖文件组合成单个输出文件的编译器。 与