하나의 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 가져 오기 메소드를 사용하여 JS 스크립트 메소드 내보내기가있는 다른 JS 파일에서 메소드를 가져 오는 방법에 Index.html 파일에 JS 파일을 포함시켜 예제와 다른 점은 무엇입니까?

— Phil

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

너무 조금도 마찬가지로

— 스튜어트 웨이크 필드 8

1

이것은 nitpicking처럼 들리지만 포함은 스크립트를 연결하는 것과 정확히 동일하지 않습니다. 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 :<script> .html에서 사용하는 많은 js 파일을 포함하는 대신 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");
}

— 마키
소스

0

작업중인 파일에서 다른 js 파일로 작성된 함수를 호출 할 수 있습니다. 따라서이를 위해 먼저 외부 js 파일을 HTML 문서에 다음과 같이 추가해야합니다.

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

외부 자바 스크립트 파일에 정의 된 함수-

$.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 대입이 의미가 없는지 설명 할 수 있습니까?

— sheetal

할당이 아니라 포장.

— Bergi

문서가 준비되지 않은 경우에만 $ .fn 만 함수 작성에 사용해야합니다.

— sheetal

그런데 왜? 함수가 DOM을 기다릴 필요가 없다는 선언. 전화가 오더라도 (그러나 종종 충분하지는 않습니다).

— Bergi

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 코드 조각을 사용해보십시오 : link .

— 콘 스타 고간
소스

0

글쎄, 나는 또 다른 달콤한 해결책을 발견했습니다.

window['functioName'](params);

— 디그 비제이
소스

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

— 환상의
소스