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

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

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

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

Ответы [ 55 ]

4 голосов
/ 15 мая 2017

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

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

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

3 голосов
/ 04 марта 2012

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

3 голосов
/ 07 марта 2013

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

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

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

function myFunction(){
    // stuff
}
\n
3 голосов
/ 10 марта 2013 
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 голосов
/ 16 января 2013

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

<script type="text/javascript">
       $LAB
       .script("jquery-1.8.3.js").wait()
       .script("scripts/clientscript.js");      
</script>
3 голосов
/ 24 июля 2018

Импорт и экспорт модулей с использованием 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
}

Run 

node --experimental-modules main.js
2 голосов
/ 04 октября 2016

Вот, может быть, другой путь! В 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 голосов
/ 17 ноября 2016

Другой подход заключается в использовании импорта 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 голосов
/ 12 августа 2016

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

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

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

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

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

2 голосов
/ 17 января 2019

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

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

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
Страница:
...