функцию - Как включить файл JavaScript в другой файл JavaScript?
теги javascript (20)
Большинство приведенных здесь решений подразумевают динамическую загрузку. Я искал вместо этого компилятор, который собирал все зависящие файлы в один выходной файл. То же, что и препроцессоры Less / Sass @import
с CSS @import
at-rule. Поскольку я не нашел ничего подходящего в этом роде, я написал простой инструмент для решения проблемы.
Итак, вот компилятор 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");
ЦСИ / Форма / вход / 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(){}
}
};
https://code.i-harness.com
Есть ли что-то в JavaScript, подобное @import
в CSS, которое позволяет вам включать файл JavaScript в другой файл JavaScript?
Вместо того, чтобы включать во время выполнения, используйте сценарий для конкатенации перед загрузкой.
Я использую Sprockets (я не знаю, есть ли другие). Вы создаете свой код JavaScript в отдельных файлах и включаете комментарии, которые обрабатываются движком Sprockets, в том числе. Для разработки вы можете включать файлы последовательно, затем для их слияния ...
Смотрите также:
Возможно, вы можете использовать эту функцию, которую я нашел на этой странице. Как включить файл JavaScript в файл JavaScript? :
function include(filename)
{
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
head.appendChild(script)
}
Вот синхронная версия без jQuery :
function myRequire( url ) {
var ajax = new XMLHttpRequest();
ajax.open( 'GET', url, false ); // <-- the 'false' makes it synchronous
ajax.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
в своем ответе.
Вы также можете собрать свои скрипты с помощью PHP :
Файл main.js.php
:
<?php
header('Content-type:text/javascript; charset=utf-8');
include_once("foo.js.php");
include_once("bar.js.php");
?>
// Main JavaScript code goes here
Для вас есть хорошая новость. Очень скоро вы сможете легко загрузить код JavaScript. Он станет стандартным способом импорта модулей кода JavaScript и будет частью самого основного JavaScript.
Вам просто нужно написать import cond from 'cond.js';
для загрузки макроса с именем cond
из файла cond.js
Таким образом, вам не нужно полагаться на какие-либо рамки JavaScript, и вам не нужно явно делать вызовы Ajax .
Ссылаться на:
Если ваше намерение загрузить файл 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>
Если вы используете веб-работников и хотите включить дополнительные сценарии в сферу действия рабочего, другие ответы, связанные с добавлением скриптов в head
тег и т. Д., Не будут работать для вас.
К счастью, у веб-рабочих есть своя функция importScripts
которая является глобальной функцией в рамках Web Worker, родной самому браузеру, поскольку она является частью спецификации .
В качестве альтернативы, в качестве второго наиболее высоко RequireJS ответа на ваш вопрос подчеркивается , RequireJS также может обрабатывать в том числе скрипты внутри Web Worker (вероятно, сам вызов importScripts
, но с несколькими другими полезными функциями).
Если кто-то ищет что-то более продвинутое, попробуйте RequireJS . Вы получите дополнительные преимущества, такие как управление зависимостями, лучший параллелизм и избегайте дублирования (т. Е. Извлекаете сценарий несколько раз).
Вы можете писать свои файлы JavaScript в «modules», а затем ссылаться на них как на зависимости в других сценариях. Или вы можете использовать RequireJS как простое решение «get get this script».
Пример:
Определить зависимости как модули:
некоторые-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 README:
RequireJS загружает простые файлы JavaScript, а также более определенные модули. Он оптимизирован для использования в браузере, в том числе в Web Worker, но его можно использовать в других средах JavaScript, таких как Rhino и Node. Он реализует API асинхронного модуля.
RequireJS использует теги обычного сценария для загрузки модулей / файлов, поэтому он должен обеспечивать легкую отладку. Его можно использовать просто для загрузки существующих файлов JavaScript, поэтому вы можете добавить его в свой существующий проект, не переписывая файлы JavaScript.
...
На самом деле есть способ загрузить файл JavaScript не асинхронно, поэтому вы можете использовать функции, включенные в ваш загруженный файл, сразу после его загрузки, и я думаю, что он работает во всех браузерах.
Вам нужно использовать jQuery.append()
в элементе <head>
вашей страницы, то есть:
$("head").append('<script type="text/javascript" src="' + script + '"></script>');
Однако этот метод также имеет проблему: если в импортированном файле JavaScript произошла ошибка, Firebug (а также Firefox Error Console и инструменты разработчика Chrome ) также сообщают о своем месте неправильно, что является большой проблемой, если вы используете Firebug для отслеживания Ошибок JavaScript много (я). По какой-то причине Firebug просто не знает о недавно загруженном файле, поэтому, если в этом файле произошла ошибка, он сообщает, что он произошел в вашем основном HTML файле, и у вас возникнут проблемы с поиском истинной причины ошибки.
Но если это не проблема для вас, тогда этот метод должен работать.
Я на самом деле написал плагин jQuery с именем $ .import_js (), который использует этот метод:
(function($)
{
/*
* $.import_js() helper (for JavaScript importing within JavaScript code).
*/
var import_js_imported = [];
$.extend(true,
{
import_js : function(script)
{
var found = false;
for (var i = 0; i < import_js_imported.length; i++)
if (import_js_imported[i] == script) {
found = true;
break;
}
if (found == false) {
$("head").append('<script type="text/javascript" src="' + script + '"></script>');
import_js_imported.push(script);
}
}
});
})(jQuery);
Итак, все, что вам нужно будет сделать для импорта JavaScript:
$.import_js('/path_to_project/scripts/somefunctions.js');
Я также сделал простой Example этого Example .
Он включает файл main.js
в основном HTML, а затем скрипт в main.js
использует $.import_js()
для импорта дополнительного файла с именем included.js
, который определяет эту функцию:
function hello()
{
alert("Hello world!");
}
И сразу после включения included.js
вызывается функция hello()
, и вы получаете предупреждение.
(Этот ответ отвечает на комментарий e-satis).
У меня была простая проблема, но я был озадачен ответами на этот вопрос.
Мне пришлось использовать переменную (myVar1), определенную в одном файле JavaScript (myvariables.js) в другом файле JavaScript (main.js).
Для этого я сделал следующее:
Загрузите код JavaScript в файл HTML в правильном порядке, сначала 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 автоматически.
Это спасло мой день. Надеюсь, это поможет.
Это должно сделать:
xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);
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;
Мой обычный метод:
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 (состояние загружаемого содержимого) изменяется на «загружен».
@import
Синтаксис для достижения CSS-как JavaScript импортирования можно с помощью такого инструмента, как смеси через их особый .mix
тип файла (см here ). Я полагаю, что приложение просто использует один из вышеупомянутых методов, хотя я не знаю.
Из документации по .mix
файлам Mixture :
Файлы Mix - это файлы .js или .css с .mix. в имени файла. Микс-файл просто расширяет функциональность обычного стиля или файла сценария и позволяет импортировать и комбинировать.
Вот пример .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";
Смесь выводит это как, scripts-global.js
а также как сокращенную версию ( scripts-global.min.js
).
Примечание. Я никоим образом не связан с Mixture, кроме использования его в качестве средства разработки на начальном этапе. Я столкнулся с этим вопросом, увидев .mix
файл JavaScript в действии (в одном из шаблонов Mixture) и немного смущенный им («вы можете это сделать?» Подумал я про себя). Затем я понял, что это тип файла приложения (несколько разочаровывающий, согласованный). Тем не менее, полагал, что знание может быть полезным для других.
UPDATE : смесь теперь бесплатна (офлайн).
UPDATE : смесь прекращается. Старые выпуски смеси по-прежнему доступны
Существует также Head.js . С этим очень легко справиться:
head.load("js/jquery.min.js",
"js/jquery.someplugin.js",
"js/jquery.someplugin.css", function() {
alert("Everything is ok!");
});
Как вы видите, это проще, чем Require.js и так же удобно, как $.getScript
метод jQuery . Он также имеет некоторые дополнительные функции, такие как условная загрузка, обнаружение функций и многое другое .
Этот скрипт добавит файл JavaScript в начало любого другого <script>
тега:
(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);
})();
Я пришел к этому вопросу, потому что я искал простой способ поддерживать набор полезных плагинов JavaScript. Увидев некоторые из решений здесь, я придумал следующее:
Настройте файл под названием «plugins.js» (или extensions.js или что у вас есть). Храните файлы плагинов вместе с одним основным файлом.
plugins.js будет иметь массив под названием «pluginNames []», который мы будем перебирать по каждому (), а затем добавим тег в голову для каждого плагина
// устанавливаем массив для обновления при добавлении или удалении файлов плагинов var pluginNames = ["надпись", "fittext", "butterjam" и т. д.]; // один тег скрипта для каждого плагина $ .each (pluginNames, function () {$ ('head'). append ('');});
вручную вызовите только один файл в голове:
<script src="js/plugins/plugins.js"></script>
Я обнаружил, что, несмотря на то, что все плагины попадают в заголовок так, как им следовало бы, они не всегда запускались браузером при нажатии на страницу или обновлении.
Я обнаружил, что более надежно просто писать теги скриптов в PHP include. Вам нужно только написать его один раз, и это так же много работает, как вызвать плагин с использованием JavaScript.
Я создал функцию, которая позволит вам использовать схожие формулировки с C # / Java для включения файла JavaScript. Я тестировал его немного даже изнутри другого файла JavaScript и, похоже, работает. Это требует jQuery, хотя для немного «магии» в конце.
Я поместил этот код в файл в корень моего каталога сценариев (я его назвал global.js
, но вы можете использовать все, что захотите. Если я не ошибаюсь, это и jQuery должны быть единственными необходимыми сценариями на данной странице. в значительной степени непроверен за пределами некоторого базового использования, поэтому могут быть или не быть какие-либо проблемы с тем, как я это сделал, использовать на свой страх и риск yadda yadda Я не несу ответственности, если вы ввернете что-нибудь в yadda yadda:
/**
* @fileoverview This file stores global functions that are required by other libraries.
*/
if (typeof(jQuery) === 'undefined') {
throw 'jQuery is required.';
}
/** Defines the base script directory that all .js files are assumed to be organized under. */
var BASE_DIR = 'js/';
/**
* Loads the specified file, outputting it to the <head> HTMLElement.
*
* This method mimics the use of using in C# or import in Java, allowing
* JavaScript files to "load" other JavaScript files that they depend on
* using a familiar syntax.
*
* This method assumes all scripts are under a directory at the root and will
* append the .js file extension automatically.
*
* @param {string} file A file path to load using C#/Java "dot" syntax.
*
* Example Usage:
* imports('core.utils.extensions');
* This will output: <script type="text/javascript" src="/js/core/utils/extensions.js"></script>
*/
function imports(file) {
var fileName = file.substr(file.lastIndexOf('.') + 1, file.length);
// Convert PascalCase name to underscore_separated_name
var regex = new RegExp(/([A-Z])/g);
if (regex.test(fileName)) {
var separated = fileName.replace(regex, ",$1").replace(',', '');
fileName = separated.replace(/[,]/g, '_');
}
// Remove the original JavaScript file name to replace with underscore version
file = file.substr(0, file.lastIndexOf('.'));
// Convert the dot syntax to directory syntax to actually load the file
if (file.indexOf('.') > 0) {
file = file.replace(/[.]/g, '/');
}
var src = BASE_DIR + file + '/' + fileName.toLowerCase() + '.js';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
$('head').find('script:last').append(script);
}