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

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

181 голосов
/ 28 сентября 2010

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

Ответы [ 8 ]

196 голосов
/ 28 сентября 2010

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

* 1003 Т.е. *

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

65 голосов
/ 28 сентября 2010

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

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

12 голосов
/ 28 сентября 2010

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

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

5 голосов
/ 28 сентября 2010

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

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">
3 голосов
/ 28 сентября 2010

да, вы можете.вам нужно ссылаться на 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");
}
0 голосов
/ 25 апреля 2019

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";
}

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

0 голосов
/ 17 сентября 2018

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

выход

Output. Button + Result

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

0 голосов
/ 29 марта 2017

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

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

1013

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

$('#element').functionWithParameters('some parameter', 'another parameter');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...