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

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

document.write('');

如果使用jQuery库,则可以使用该$.getScript方法.

$.getScript("another_script.js");

您还可以使用PHP组装脚本:

档案main.js.php:

// Main JavaScript code goes here

此处显示的大多数解决方案都意味着动态加载.我正在搜索一个编译器,它将所有依赖的文件组合成一个输出文件.与Less/Sass预处理器相同,处理CSS @importat-rule.由于我没有找到这种类似的东西,我写了一个简单的工具来解决这个问题.

所以这里是编译器,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

并获得组合文件

建立/ main.js

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

如果您要加载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文件中包含脚本时,您需要小心.订单应如下所示:

这应该做:

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

或者不是在运行时包括在上载之前使用脚本连接.

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

也可以看看:

介绍Sprockets:JavaScript依赖关系管理和连接

如果您正在使用Web Workers并希望在worker的范围内包含其他脚本,则提供有关向head标记添加脚本等的其他答案将不适合您.

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

或者,作为对您的问题突出显示的第二高投票答案,RequireJS还可以处理包含Web Worker中的脚本(可能调用importScripts自身,但具有一些其他有用的功能).

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

我不得不在另一个JavaScript文件(main.js)中使用一个JavaScript文件(myvariables.js)中定义的变量(myVar1).

为此,我做了如下:

以正确的顺序加载HTML文件中的JavaScript代码,首先是myvariables.js,然后是main.js:

文件: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文件中自动访问.

这节省了我的一天.我希望这有帮助.

在@import实现CSS-像JavaScript语法进口可能使用的工具,如通过其特殊的混合.mix文件类型(见这里).我想应用程序只是在内部使用上述方法之一,但我不知道.

从文件的混合文档.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样板中)并且有点困惑("你能做到这一点吗？"我想到了自己)时遇到了这个问题.然后我意识到这是一个特定于应用程序的文件类型(有点令人失望,同意).然而,认为这些知识可能对其他人有所帮助.

更新:混合物现在是免费的(离线).

更新:混合物现已停产.旧的混合物发布仍然可用

我通常的方法是:

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方法(其他一个答案),但它似乎对我来说效果不佳.

下面解释代码如何为那些好奇的代码工作:实际上,它创建了一个新的脚本标记(在第一个之后).它将其设置为异步模式,因此它不会阻止其余代码,但在readyState(要加载的内容的状态)更改为"已加载"时调用回调.

用现代语言来说就是这样

function loadJs( url ){
  return new Promise( resolve => {
    const script = document.createElement( "script" );
    script.src = url;
    script.onload = resolve;
    document.head.appendChild( script );
  });
}

var js = document.createElement("script");

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

document.body.appendChild(js);

我编写了一个简单的模块,可以自动执行在JavaScript中导入/包含模块脚本的工作.有关代码的详细说明,请参阅博客文章JavaScript require/import/include模块.

// ----- 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);
};

虽然这些答案很棒,但是存在一个简单的"解决方案",因为脚本加载已存在,它将覆盖大多数人的99.999%的用例.只需在需要它的脚本之前包含所需的脚本.对于大多数项目,确定需要哪些脚本以及按什么顺序排列并不需要很长时间.

如果script2需要script1,这确实是做这样的事情的绝对最简单的方法.我很惊讶没有人提出这个问题,因为这是几乎每一个案例中最明显和最简单的答案.

我来到这个问题是因为我正在寻找一种简单的方法来维护一组有用的JavaScript插件.在看到这里的一些解决方案之后,我想出了这个:

设置一个名为"plugins.js"(或extensions.js或者你有什么)的文件.将插件文件与一个主文件保持在一起.

plugins.js将有一个名为"pluginNames []"的数组,我们将遍历每个(),然后为每个插件追加一个标记到头部

//当我们添加或删除插件文件时设置要更新的数组var pluginNames = ["lettering","fittext","butterjam"等]; //每个插件的一个脚本标签$ .each(pluginNames,function(){$('head').append('');});

手动调用你头脑中的一个文件:

我发现即使所有的插件都按照它们应该的方式放入头标签,但当你点击页面或刷新时,它们并不总是被浏览器运行.

我发现在PHP包中编写脚本标记更可靠.您只需编写一次,这与使用JavaScript调用插件一样重要.

此脚本将JavaScript文件添加到任何其他

mobiledu2402851377

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

• actionscrip
• bash
• c#
• c++
• c语言
• erlang
• flutter
• go
• golang
• java
• javascript
• lua
• node.js
• perl
• php
• python
• scala
• typescript

RankList | 热门文章

• 1Spring Entities应该在服务中转换为Dto吗？
• 2Spring REST @RequestBody总是空的
• 3`loop {}`与`loop {sleep 1}`
• 4将图例移动到ggplot2的底部
• 5组合两个表并水平输出日期PHPExcel
• 6如何设置密码的最小长度
• 7React-Bootstrap拉右导航栏
• 8Apache和NodeJS over SSL
• 9Visual Studio 2015 Update 1垃圾邮件localhost
• 10查看kubernetes中崩溃的pod的日志文件
• 11从导航堆栈中删除页面 - xamarin.forms
• 12Visual Studio代码,MAC OS X,OmniSharp服务器未运行
• 13Bootstrap Datepicker未加载
• 14架构的重复符号x86_64从CocoaPods添加pod时
• 15如何在实现接口但不扩展另一个类的Java类中引用super方法？
• 16"git无法读取当前工作目录没有错误" - posh git(windows 10)
• 17我可以让nodejs --debug标志等待远程连接
• 18CakePHP 3 QueryBuilder:少数值的条件不会生成'IN'语句
• 19lxml无法解析xml(其他编码是否为utf-8)[python]
• 20移动 - iOS - Safari - window.outerHeight返回0