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

Question

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

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

208

javascript include

Источник

user412982 28 сен '10 в 05:13

7 ответов

Решение

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

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

71

Источник

user459516 28 сен '10 в 10:22

Пока обе ссылки упоминаются на веб-странице, да.

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

15

Источник

user223391 28 сен '10 в 05:15

ES6: вместо включения многих файлов JS с помощью <script> в.html вы можете включить только один основной файл, например script.js используя атрибут type="module" ( поддержка) и внутри 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";
}

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

11

Источник

user860099 25 апр '19 в 05:23

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

Функции и переменные 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">

7

Источник

user282000 28 сен '10 в 05:24

Да, ты можешь. вам нужно сослаться как 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");
}

3

Источник

user131870 28 сен '10 в 05:19

Вот более наглядный пример с прикрепленным фрагментом 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: ссылка.

1

Источник

user5941462 17 сен '18 в 15:12

Для тех, кто хочет сделать это в 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");
};

1

Источник

user5327882 26 май '20 в 21:08

Вы можете вызвать функцию, созданную в другом 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');

0

Источник

user5331171 29 мар '17 в 07:33

Что ж, я нашел еще одно приятное решение.

window['functioName'](params);

-1

Источник

user5326191 21 апр '20 в 16:16

Другие вопросы по тегам javascript include

user149885 28 сен '10 в 05:22 2010-09-28 05:22 · Accepted Answer · 2010-09-28 05:22

Функцию можно вызывать так, как если бы она находилась в том же файле 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).