Как включить файл JavaScript в другой файл JavaScript? - PullRequest
Новая
       355

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

4674 голосов
/ 04 июня 2009

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

Ответы [ 55 ]

6 голосов
/ 04 мая 2017

Вот обходной путь для браузеров (не 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 голосов
/ 06 ноября 2013

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

Может быть установлен с установкой npm: https://npmjs.org/package/grunt-import

6 голосов
/ 10 августа 2018

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

Модули 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 голосов
/ 26 августа 2012

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

$.holdReady(true);
$.getScript("myplugin.js", function() {
    $.holdReady(false);
});
6 голосов
/ 25 мая 2016

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

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.
});
6 голосов
/ 08 февраля 2015

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

// 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 голосов
/ 23 июня 2018

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

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

const fs = require('fs');
eval(fs.readFileSync('file.js')+'');
4 голосов
/ 13 апреля 2017

Если вы используете 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 голосов
/ 07 августа 2016

У меня есть требование асинхронно загружать массив файлов 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 голосов
/ 22 мая 2018

Да, есть ...

Продолжайте читать, в 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's 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 , о которых я должен упомянуть здесь ...

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

  • Если присутствует асинхронный: скрипт выполняется асинхронно с остальной частью страницы (сценарий будет выполняться, пока страница продолжает анализ)
  • Если асинхронный режим отсутствует и отсрочка присутствует: скрипт выполняется по завершении страницы парсинг
  • Если нет ни асинхронного, ни отсроченного: скрипт извлекается и выполняется немедленно, прежде чем браузер продолжит работу парсинг страницы
Страница:
...