Можем ли мы вызвать функцию, написанную на одном JavaScript в другом файле JS?

193

Можем ли мы вызвать функцию, написанную в одном файле JS, в другом файле JS? Может кто-нибудь помочь мне, как вызвать функцию из другого файла JS?

javascript include

— Хемант Кумар
источник

213

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

Т.е.

File1.js

function alertNumber(number) {
    alert(number);
}

File2.js

function alertOne() {
     alertNumber("one");
}

HTML

<head>
....
    <script src="File1.js" type="text/javascript"></script> 
    <script src="File2.js" type="text/javascript"></script> 
....
</head>
<body>
....
    <script type="text/javascript">
       alertOne();
    </script>
....
</body>

~~Другой способ не сработает.~~ Как правильно указал Стюарт Уэйкфилд . Другой способ также будет работать.

HTML

<head>
....
    <script src="File2.js" type="text/javascript"></script> 
    <script src="File1.js" type="text/javascript"></script> 
....
</head>
<body>
....
    <script type="text/javascript">
       alertOne();
    </script>
....
</body>

То, что не будет работать, будет:

HTML

<head>
....
    <script src="File2.js" type="text/javascript"></script> 
    <script type="text/javascript">
       alertOne();
    </script>
    <script src="File1.js" type="text/javascript"></script> 
....
</head>
<body>
....
</body>

Хотя alertOneопределяется при вызове, внутри он использует функцию, которая до сих пор не определена ( alertNumber).

— Эдгар Эрнандес
источник

Чем отличается ваш пример от включения файла JS в файл Index.html по сравнению с другим подходом, в котором мы используем метод импорта JS для импорта метода из другого файла JS, в котором метод сценария JS экспортирован в метод экспорта.

— Фил

68

Ответ выше имеет неверное предположение, что порядок включения файлов имеет значение. Поскольку функция alertNumber не вызывается, пока не будет вызвана функция alertOne. Пока оба файла включены по времени, вызывается alertOne, порядок файлов не имеет значения:

[HTML]

<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
    alertOne( );
</script>

[JS]

// File1.js
function alertNumber( n ) {
    alert( n );
};
// File2.js
function alertOne( ) {
    alertNumber( "one" );
};
// Inline
alertOne( ); // No errors

Или это можно заказать следующим образом:

[HTML]

<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript">
    alertOne( );
</script>

[JS]

// File2.js
function alertOne( ) {
    alertNumber( "one" );
};
// File1.js
function alertNumber( n ) {
    alert( n );
};
// Inline
alertOne( ); // No errors

Но если бы вы сделали это:

[HTML]

<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
    alertOne( );
</script>
<script type="text/javascript" src="file1.js"></script>

[JS]

// File2.js
function alertOne( ) {
    alertNumber( "one" );
};
// Inline
alertOne( ); // Error: alertNumber is not defined
// File1.js
function alertNumber( n ) {
    alert( n );
};

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

Включение различных файлов сценариев ничем не отличается от сценария, находящегося в том же порядке в одном и том же файле, за исключением отложенных сценариев:

<script type="text/javascript" src="myscript.js" defer="defer"></script>

тогда вам нужно быть осторожным.

— Стюарт Уэйкфилд
источник

1

Точно так же со слишком маленьким

— Стюарт Уэйкфилд

1

Это может показаться придирчивым, но включение не совсем то же самое, что объединение сценариев. Рассмотрим script1: function myfunction() {и script2: alert();}он не будет работать. Это беспокоит меня, потому что я пытался модульный файл JS, который слишком длинный. См. Stackoverflow.com/questions/20311604/…

— Боянг

Будет ли эта функция иметь общий thisконтекст, если одна из функций находится в классе?

— AKS

thisограничен в точке, где вызывается функция (если только bindона не была вызвана заранее). Две функции в двух отдельных файлах не будут совместно использовать thisконтекст автоматически, в вышеприведенном примере также не имеет thisконтекста, то есть windowв нестрогом или undefinedв строгом режиме. Вы можете сделать так, чтобы функция в другом скрипте имела такое же thisзначение, либо назначив функцию как член объекта (то есть внутри конструктора this.method = myOtherFunc), либо используя связывание. Пожалуйста, оставьте вопрос SO с более подробной информацией, если вам нужен более глубокий ответ. Приветствия, Стюарт

— Стюарт Уэйкфилд

13

До тех пор, пока на обе страницы ссылается веб-страница, да.

Вы просто вызываете функции, как если бы они были в одном файле JS.

— jball
источник

7

Если включены все файлы, вы можете вызывать свойства из одного файла в другой (например, функцию, переменную, объект и т. Д.)

Функции и переменные js, которые вы записываете в один файл .js - скажем, a.js будут доступны для других файлов js - скажем, b.js, если в файл включены и a.js, и b.js , используя следующие механизм (и в том же порядке, если функция в b.js вызывает функцию в a.js).

<script language="javascript" src="a.js"> and 
<script language="javascript" src="b.js">

— Прамендра Гупта
источник

4

ES6: Вместо включения многих js-файлов с использованием <script>в .html вы можете включить только один основной файл, например, script.jsиспользуя атрибут type="module"( support ), а внутри script.jsвы можете включить другие файлы:

<script type="module" src="script.js"></script>

И в script.jsфайл включить еще один файл, как это:

import { hello } from './module.js';
...
// alert(hello());

В 'module.js' вы должны экспортировать функцию / класс, который вы будете импортировать

export function hello() {
    return "Hello World";
}

Рабочий пример здесь .

— Камил Келчевски
источник

3

Да, ты можешь . вам нужно сослаться как JS fileна .aspxстраницу

<script language="javascript" type="text/javascript" src="JScript1.js">
 </script>

    <script language="javascript" type="text/javascript" src="JScript2.js">
    </script>

JScript1.js

function ani1() {
    alert("1");
    ani2();
}

JScript2.js

function ani2() {
    alert("2");
}

— anishMarokey
источник

0

Вы можете вызвать функцию, созданную в другом js-файле, из файла, в котором вы работаете. Поэтому для этого сначала вам нужно добавить внешний js-файл в html-документ как

<html>
<head>
    <script type="text/javascript" src='path/to/external/js'></script>
</head>
<body>
........

Функция, определенная во внешнем файле JavaScript -

$.fn.yourFunctionName = function(){
    alert('function called succesfully for - ' + $(this).html() );
}

Чтобы вызвать эту функцию в вашем текущем файле, просто вызовите функцию как -

......
<script type="text/javascript">
    $(function(){
        $('#element').yourFunctionName();
    });
</script>

Если вы хотите передать параметры в функцию, то определите функцию как

$.fn.functionWithParameters = function(parameter1, parameter2){
        alert('Parameters passed are - ' + parameter1 + ' , ' + parameter2);
}

И вызвать эту функцию в вашем текущем файле как -

$('#element').functionWithParameters('some parameter', 'another parameter');

— Sheetal
источник

1

Пожалуйста, не принимайте jQuery везде. Кроме того , обертывание $.fnназначение в документ , готовый п бессмысленно

— Берги

хорошо, я буду держать это в уме в следующий раз :), но можете ли вы объяснить, почему назначение $ .fn бессмысленно?

— Sheal

Не назначение, упаковка.

— Берги

Хорошо, это означает, что когда документ не готов, только тогда $ .fn следует использовать для создания функции

— sheetal

Но почему? Объявление функции не должно ждать DOM. Даже если вызов может (но достаточно часто это не так).

— Берги

0

Вот более наглядный пример с прикрепленным фрагментом CodePen:

1.js

function fn1() {
  document.getElementById("result").innerHTML += "fn1 gets called";
}

2.js

function clickedTheButton() {
  fn1();
}

index.html

<html>
  <head>
  </head>
  <body>
    <button onclick="clickedTheButton()">Click me</button>
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript" src="2.js"></script>
  </body>
 </html>

вывод

Попробуйте этот фрагмент CodePen: ссылка .

— Конста Горган
источник

0

Ну вот, я наткнулся на другое сладкое решение

window['functioName'](params);

— Digvijay
источник

0

Для тех, кто хочет сделать это в Node.js (запуск скриптов на стороне сервера), можно использовать requireи module.exports. Вот краткий пример того, как создать модуль и экспортировать его для использования в другом месте:

file1.js

const print = (string) => {
    console.log(string);
};

exports.print = print;

file2.js

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

function printOne() {
    file1.print("one");
};

— ronatory
источник