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スクリプトメソッドexport to exportメソッドを持つ別のJSファイルからJSインポートメソッドを使用してメソッドをインポートする他のアプローチに、Index.htmlファイルにJSファイルを含めることによる例の違いは何ですか。
— フィル
68

上記の答えには、ファイルを含める順序が重要であるという誤った仮定があります。alertOne関数が呼び出されるまで、alertNumber関数は呼び出されません。時間によって両方のファイルが含まれている限り、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/…を
— Boyang
関数のthis1つがクラス内にある場合、この関数はコンテキストを共有しますか？
— 16
this関数が呼び出された時点でバインドされます（bind事前に呼び出されない限り）。2つの別個のファイル内の2つの関数は、thisコンテキストを自動的に共有しません。上記の例では、thisコンテキストはありません。つまりwindow、非undefined厳密モードまたは厳密モードです。他のスクリプトthisの関数は、オブジェクトのメンバーとして（つまり、コンストラクター内でthis.method = myOtherFunc）関数を割り当てるか、バインドを使用して、同じ値を共有できます。より詳細な回答が必要な場合は、SOの質問をより詳細に投稿してください。乾杯、スチュアート
— スチュアートウェイクフィールド
13

両方がウェブページで参照されている限り、はい。

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

— jball
ソース
6

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

あなたは1 .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：<script> .htmlを使用して多くのjsファイルを含める代わりに、script.js属性type="module"（support）を使用してメインファイルを1つだけ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");
}
— アニッシュ・マロキー
ソース
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');
— シート
ソース
1
どこでもjQueryを想定しないでください。また、$.fnドキュメントの準備ができた句で割り当てをラップしても意味がありません
— Bergi
次回は覚えておきますが、$。fn割り当てが無意味な理由を説明していただけますか？
— シート
割り当てではなく、ラッピング。
— ベルギ
つまり、ドキュメントの準備ができていない場合にのみ、関数の作成に$ .fnを使用する必要があります
— シート
しかし、なぜ？関数が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

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");
};
— 名誉
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.