функцию - Как включить файл 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 : смесь прекращается. Старые выпуски смеси по-прежнему доступны

Лучше использовать способ jQuery . Чтобы задержать готовое событие, сначала вызовите $.holdReady(true). Пример ( source ):

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

Существует также 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. Увидев некоторые из решений здесь, я придумал следующее:

  1. Настройте файл под названием «plugins.js» (или extensions.js или что у вас есть). Храните файлы плагинов вместе с одним основным файлом.

  2. plugins.js будет иметь массив под названием «pluginNames []», который мы будем перебирать по каждому (), а затем добавим тег в голову для каждого плагина

    // устанавливаем массив для обновления при добавлении или удалении файлов плагинов var pluginNames = ["надпись", "fittext", "butterjam" и т. д.]; // один тег скрипта для каждого плагина $ .each (pluginNames, function () {$ ('head'). append ('');});

  3. вручную вызовите только один файл в голове:
    <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);
}



функцию   функции   файла   файл   теги   структура   скрипт   подключить   подключение   подгрузка   как   загрузить   другой   вызов   вызвать   внешний   javascript   file   import   include  


include