web-dev-qa-db-ja.com

あるJavaScriptで書かれた関数を別のJSファイルで呼び出すことはできますか？

あるJSファイルに書かれた関数を別のJSファイルに呼び出せますか？他のJSファイルから関数を呼び出す方法を誰かが手伝ってくれる？

javascriptinclude
181
Hemant Kumar

関数の定義を含むファイルが関数の最初の使用の前にロードされている限り、関数は同じ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>

他の方法はうまくいきません。 Stuart Wakefield で正しく指摘されています。他の方法でもうまくいくでしょう。

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）を使用しています。

196
Edgar Hernandez

上記の答えには、ファイルを含める順序が重要であるという誤った仮定があります。 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>

それからあなたは注意する必要があります。

65
Stuart Wakefield

両方ともWebページで参照されている限り、はい。

単に同じJSファイルにあるかのように関数を呼び出すだけです。

12
jball

すべてのファイルが含まれている場合は、あるファイルから別のファイルにプロパティを呼び出すことができます（関数、変数、オブジェクトなど）。

1つの.jsファイルに記述したjs関数と変数 - say a.js は、他のjsファイルでも使用できます - say b.js 両方が aである限り.js および b.js は、次のインクルードメカニズムを使用してファイルにインクルードされます（b.jsの関数がaの関数を呼び出す場合は same の順になります）。 js）.

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

はい、できます。両方の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
anishMarokey

ES6：.htmlに<script>を使用して多数のjsファイルを含める代わりに、メインファイルを1つだけ含めることができます。属性script.js（ support ）を使用したtype="module"およびscript.js内に他のファイルを含めることができます。

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

script.jsファイルには、次のような別のファイルを含めます。

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

'module.js'では、 export function/class をインポートする必要があります。

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

Working example here 。

0
Kamil Kiełczewski

作業中のファイルから別の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
sheetal

これは、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
Consta Gorgan