Как включить файл JavaScript в другой файл JavaScript?

Есть ли в JavaScript что-то похожее на @import в CSS, что позволяет включать файл JavaScript в другой файл JavaScript?

4465
04 июня '09 в 14:59
источник поделиться
56 ответов
  • 1
  • 2

Вот плагин Grunt, позволяющий вам использовать @import "path/to/file.js"; синтаксис в любом файле, включая файлы JavaScript. Это может быть в паре с Uglify или часы или любой другой плагин.

Его можно установить с помощью npm install: https://npmjs.org/package/grunt-import

6
06 нояб. '13 в 20:35
источник

Хотя эти ответы хороши, существует простое "решение", существующее с момента загрузки скрипта, и оно охватит 99,999% случаев использования большинства людей. Просто включите сценарий, который вам нужен, прежде чем сценарий, который требует этого. Для большинства проектов не требуется много времени, чтобы определить, какие сценарии нужны и в каком порядке.

<!DOCTYPE HTML>
<html>
    <head>
        <script src="script1.js"></script>
        <script src="script2.js"></script>
    </head>
    <body></body>
</html>

Если script2 требует script1, это действительно самый простой способ сделать что-то подобное. Я очень удивлен, что никто не поднял этот вопрос, так как это самый очевидный и самый простой ответ, который будет применяться почти в каждом отдельном случае.

6
12 апр. '18 в 22:38
источник

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

$.holdReady(true);
$.getScript("myplugin.js", function() {
    $.holdReady(false);
});
6
25 авг. '12 в 23:17
источник

Вот обходной путь для браузеров (не Node.js), использующих импорт HTML.

Во- первых, все классы JavaScript и скрипты не в .js файлах, но в .js.html файлы (.js. html только распознавать между HTML - страниц и полных JavaScript сценариев/классы), внутри <script> теги, как это:

MyClass.js.html:

<script>
   class MyClass {

      // Your code here..

   }

</script>

Тогда, если вы хотите импортировать свой класс, вам просто нужно использовать импорт HTML:

<link rel="import" href="relative/path/to/MyClass.js.html"/>

<script>
   var myClass = new MyClass();
   // Your code here..
</script>

РЕДАКТИРОВАТЬ: импорт HTML будет прекращен

Импорт HTML и модули ES6 уже хорошо реализованы в большинстве браузеров по всему миру. Но так как импорт HTML определенно не будет частью стандартов, в отличие от модулей ES6, его разработка будет прекращена, тогда вам определенно следует начать использовать модули ES6.

6
04 мая '17 в 18:16
источник

Существует несколько способов реализации модулей в Javascript. Вот два наиболее популярных из них:

ES6 Модули

Браузеры пока не поддерживают эту систему модуляции, поэтому для использования этого синтаксиса вы должны использовать такой пакет, как webpack. В любом случае лучше использовать упаковщик, потому что он может объединить все ваши разные файлы в один (или пару связанных) файлов. Это позволит быстрее передавать файлы с сервера на клиент, поскольку с каждым HTTP-запросом связаны некоторые накладные расходы. Таким образом, уменьшая общий HTTP-запрос, мы улучшаем производительность. Вот пример модулей ES6:

// main.js file

export function add (a, b) {
  return a + b;
}

export default function multiply (a, b) {
  return a * b;
}


// test.js file

import {add}, multiply from './main';   // for named exports between curly braces {export1, export2}
                                        // for default exports without {}

console.log(multiply(2, 2));  // logs 4

console.log(add(1, 2));  // logs 3

CommonJS (используется в NodeJS)

Эта система модуляции используется в NodeJS. Вы в основном добавляете свои экспорты к объекту, который называется module.exports. Затем вы можете получить доступ к этому объекту через require('modulePath'). Важно понимать, что эти модули кэшируются, поэтому, если вам require() определенный модуль дважды, он вернет уже созданный модуль.

// main.js file

function add (a, b) {
  return a + b;
}

module.exports = add;  // here we add our add function to the exports object


// test.js file

const add = require('./main'); 

console.log(add(1,2));  // logs 3
6
10 авг. '18 в 20:11
источник

Только для NodeJS, это сработало для меня лучше всего!

Я попробовал большинство решений здесь, но ни одно из них не помогло мне просто загрузить другой файл без изменения области действия. Наконец-то я это использовал. Который сохраняет сферу и все. Это так же хорошо, как ваш код в этой точке.

const fs = require('fs');
eval(fs.readFileSync('file.js')+'');
5
23 июня '18 в 9:15
источник

Я делаю это следующим образом, создавая новый элемент и прикрепляя его к заголовку:

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.
});
5
25 мая '16 в 3:06
источник

Делайте это красиво, коротко, просто и легко! :]

// 3rd party plugins / script (don't forget the full path is necessary)
var FULL_PATH = '', s =
[
    FULL_PATH + 'plugins/script.js'      // Script example
    FULL_PATH + 'plugins/jquery.1.2.js', // jQuery Library 
    FULL_PATH + 'plugins/crypto-js/hmac-sha1.js',      // CryptoJS
    FULL_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 load 
load('plugins/script.js');

// initialize a full load of scripts
if (s.length > 0)
{
    for (i = 0; i < s.length; i++)
    {
        load(s[i]);
    }
}

Этот код является просто кратким функциональным примером, который может потребовать дополнительных функциональных возможностей для полной поддержки на любой (или данной) платформе.

5
08 февр. '15 в 4:19
источник

У меня есть требование асинхронно загружать массив файлов JavaScript и в конце сделать обратный вызов. В основном мой лучший подход заключается в следующем:

// Load a JavaScript file from other JavaScript file
function 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 before
    var 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 loading
    head.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); });

Второй скрипт не загрузится, пока первый полностью не загрузится, и так...

Результаты:

Result

4
07 авг. '16 в 22:14
источник

Это очень просто. Предположим, вы хотите импортировать файл A.js в файл B.js.

Теперь убедитесь, что вы связали B.js в файле HTML, а затем просто связывайте A.js перед B.js в этом файле HTML. Тогда открытые переменные A.js будут доступны внутри B.js

Это не требует сложного ответа.

4
15 мая '17 в 8:00
источник

Если вы используете Angular, то модуль плагина $ ocLazyLoad может помочь вам сделать это.

Вот некоторые цитаты из его документации:

Загрузите один или несколько модулей и компонентов с несколькими файлами:

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

Загрузите один или несколько модулей с несколькими файлами и укажите необходимый тип: Примечание. При использовании форматирования в стиле requireJS (например, с 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'
 ]);
4
13 апр. '17 в 13:42
источник

Теперь я могу быть совершенно заблуждающимся, но вот что я недавно начал делать... Запустите и завершите ваши файлы JavaScript с помощью возврата каретки, вставьте в скрипт PHP, а затем еще один возврат каретки. Комментарий JavaScript "//" игнорируется PHP, поэтому включение происходит в любом случае. Целью возврата каретки является то, что первая строка вашего включенного JavaScript не закомментирована.

Технически, вам не нужен комментарий, но он публикует сообщения об ошибках в Dreamweaver, которые меня раздражают. Если вы пишете сценарий в среде IDE, которая не публикует сообщения об ошибках, вам не нужны комментарии или возврат каретки.

\n
//<?php require_once("path/to/javascript/dependency.js"); ?>

function myFunction(){
    // stuff
}
\n
3
07 марта '13 в 18:50
источник

Я также написал менеджер зависимостей JavaScript для веб-приложений Java: JS-Class-Loader.

3
01 нояб. '13 в 3:15
источник
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)
};
3
10 марта '13 в 16:55
источник

Не забудьте проверить LAB.js !

<script type="text/javascript">
       $LAB
       .script("jquery-1.8.3.js").wait()
       .script("scripts/clientscript.js");      
</script>
3
16 янв. '13 в 17:04
источник

Импорт и экспорт модулей с использованием ES6, которые работают с Node.js

Назовите файлы с расширением .mjs вместо .js

Создавать файлы

touch main.mjs lib.mjs

main.js

import { add } from './lib.mjs';
console.log(add(40, 2));

lib.mjs

export let add = (x,y) => {
  return x + y
}

Бежать

node --experimental-modules main.js
3
24 июля '18 в 4:45
источник

В прошлом проекте я довольно успешно использовал ajile для импорта повторно используемых файлов JavaScript. Я всегда хотел, чтобы была функция для этого встроенная в сам JavaScript.

3
04 марта '12 в 7:19
источник

Вот, может быть, другой путь! В Node.js вы делаете это, как показано ниже! http://requirejs.org/docs/node.html

sub.js

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

main.js

var mylog =require('./sub');

mylog.log('Hurray, it works! :)');
mylog.mylog();
2
04 окт. '16 в 16:47
источник

Другой подход заключается в использовании импорта HTML. Они могут содержать ссылки на скрипты, а также ссылки на таблицы стилей.

Вы можете просто связать файл HTML, как

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

Посмотрите на HTML Imports для более подробной информации.

К сожалению, это работает только в Chrome.

2
17 нояб. '16 в 1:36
источник

Да, есть...

Продолжайте читать, в ES6 мы можем export и import часть или весь файл JavaScript в другой файл...

Но подождите, ES6 поддерживается не во всех браузерах, так что вам нужно перенести его, например, с помощью babel.js...

Итак, вы создаете класс, как показано ниже:

class Person {
  constructor(name) {
    this.name = name;
  }

  build() {
    return new Person(this);
  }
}

module.exports = Person;

в другом файле JavaScript выполните импорт следующим образом:

import { Person } from 'Person';

Вы также можете потребовать файл как:

const Person = require('./Person');

Если вы используете более старую версию JavaScript, вы можете использовать requirejs:

requirejs(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

Если вы хотите придерживаться более старых версий таких вещей, как jQuery, вы также можете использовать что-то вроде getScript:

jQuery.getScript('./another-script.js', function() {
    // Call back after another-script loaded
});

И последнее, но не менее важное: не забывайте, что вы можете сделать традиционный способ объединения сценариев, используя <script>...

<script src="./first-script.js"></script>
<script src="./second-script.js"></script>
<script src="./third-script.js"></script>

Есть также атрибут async и defer, о котором я должен упомянуть здесь...

Примечание. Существует несколько способов выполнения внешнего скрипта:

  • Если присутствует асинхронность: сценарий выполняется асинхронно с остальной частью страницы (сценарий будет выполняться, пока страница продолжает анализ)
  • Если async отсутствует, а defer присутствует: скрипт выполняется после завершения анализа страницы
  • Если нет ни асинхронного, ни отсроченного: скрипт извлекается и выполняется немедленно, прежде чем браузер продолжит синтаксический анализ страницы.
2
22 мая '18 в 15:41
источник

Вы не можете импортировать, но вы можете ссылаться.

PhpShtorm IDE. Для ссылки в одном файле .js на другой файл .js просто добавьте это в начало файла:

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

Конечно, вы должны использовать свой собственный путь к файлу JavaScript.

Я не знаю, будет ли это работать в других IDE. Наверное, да, просто попробуйте. Это должно работать и в Visual Studio.

2
12 авг. '16 в 14:18
источник

Если вы обнаружите, что два или более сценария занимают одну и ту же функцию при вызове, мы не можем включить их в одно и то же время, нам нужно сделать это динамически по выбору пользователя.

Включение других файлов в jQuery с использованием $.getScript работает, так как скрипт не будет кэшироваться по умолчанию. Таким образом, мы сохраняем, чтобы вызывать другие сценарии. Звонки могут быть организованы так:

HTML

<select class="choice">
  <option value="script1" selected>Script-1</option>
  <option value="script2">Script-2</option>
</select>

JS

  $(".choice").change(on_change);

    var url = "https://example.com";
    $.url1 = url + "/script1.js";
    $.url2 = url + "/script2.js";

  function on_change() {
    if ($(".choice").val()=="script1") {
        script1();
    } else {
        script2();
    }

    // script1
    function script1() {   
      $.getScript($.url1, function( data, textStatus, jqxhr ) {
          //excecute here
      });  
    }

    // script2
    function script2() {
       $.getScript($.url2, function( data, textStatus, jqxhr ) {
          //excecute here
      });  
    }
0
15 мая '18 в 14:57
источник

Я пробовал эту проблему с другим подходом,

Порядок импорта скриптов здесь никак не сказывается.

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Trials</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="main.js"></script>
    <script src="scriptA.js"></script>
</head>

<body>
<h3>testing js in js (check console logs)</h3>
<button onclick="fnClick()">TEST</button>
</body>

</html>

main.js

function fnClick() {
  console.log('From\tAAAAA');
  var pro = myExpo.hello();
  console.log(pro);
}

scriptA.js

myExpo = {
    hello: function () {
        console.log('From\tBBBBB');
        return "Hello";
    }
}

и результат

From    AAAAA
From    BBBBB
Hello
0
17 янв. '19 в 13:46
источник
var xxx = require("../lib/your-library.js")

или же

import xxx from "../lib/your-library.js" //get default export
import {specificPart} from '../lib/your-library.js' //get named export
import * as _name from '../lib/your-library.js'  //get full export to alias _name
0
19 окт. '16 в 11:18
источник

Обратите внимание, что мы обычно используем статические скрипты. Итак, мы хотим, чтобы из кеша как можно больше брались. Это экономит сетевой трафик и ускоряет посадку.

использование

$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
  console.log( textStatus );
});

Параметр cache: true добавлен в метод ajax

0
23 апр. '18 в 22:35
источник
function include(js)
{
    document.writeln("<script src=" + js + "><" + "/script>");
}
-3
09 окт. '13 в 2:09
источник
  • 1
  • 2

Посмотрите другие вопросы по меткам или Задайте вопрос