한 자바스크립트로 작성된 함수를 다른 JS파일로 호출할 수 있습니까?
하나의 JS 파일에 쓰여진 함수를 다른 JS 파일에 호출할 수 있습니까?다른 JS 파일에서 함수를 호출하는 방법을 누가 도와줄 수 있나요?
함수를 처음 사용하기 전에 함수의 정의를 포함하는 파일이 로드되어 있는 한 함수는 동일한 JS 파일에 있는 것처럼 호출할 수 있습니다.
예.
파일 1.js
function alertNumber(number) {
alert(number);
}
파일 2.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).
위의 답변은 파일의 포함 순서가 중요하다는 잘못된 가정을 하고 있습니다.alert Number 함수는 alert One 함수가 호출될 때까지 호출되지 않습니다.두 파일이 모두 시간 경고에 포함되어 있는 한 파일 순서는 중요하지 않습니다.
[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>
조심하셔야 합니다.
둘 다 웹 페이지에서 참조되는 경우만 해당됩니다.
함수가 같은 JS 파일에 있는 것처럼 호출하기만 하면 됩니다.
ES6: 많은 js 파일을 포함하는 대신<script>.dll에는 메인파일을 1개만 포함할 수 있습니다. 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";
}
모든 파일이 포함된 경우 파일 간에 속성(함수, 변수, 객체 등)을 호출할 수 있습니다.
하나의 .js 파일에 쓰는 js 함수 및 변수(예를 들어 a.js는 다른 js 파일에서 사용할 수 있습니다)는 a.js와 b.js가 모두 다음 메커니즘을 사용하여 파일에 포함되어 있는 한 b.js라고 합니다(b.js의 함수가 a.js의 함수를 호출하는 경우 같은 순서로).
<script language="javascript" src="a.js"> and
<script language="javascript" src="b.js">
할 수 있어요. 둘 다 요. 당신은 둘 다 참조할 필요가 있습니다.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");
}
Node.js(서버측에서 스크립트를 실행)에서 이 작업을 수행하는 사용자에게 다른 옵션은 다음과 같습니다.require ★★★★★★★★★★★★★★★★★」module.exports다음으로 모듈을 생성하여 다른 곳에서 사용하기 위해 내보내는 간단한 예를 나타냅니다.
파일1. 파일
const print = (string) => {
console.log(string);
};
exports.print = print;
파일2.displaces
const file1 = require('./file1');
function printOne() {
file1.print("one");
};
작업 중인 파일에서 다른 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');
다음은 CodePen 스니펫을 첨부한 보다 자세한 예입니다.
1. 1개
function fn1() {
document.getElementById("result").innerHTML += "fn1 gets called";
}
2. 삭제
function clickedTheButton() {
fn1();
}
index.displaces를 표시합니다.
<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를 사용해 보십시오.
아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아.
window['functioName'](params);
언급URL : https://stackoverflow.com/questions/3809862/can-we-call-the-function-written-in-one-javascript-in-another-js-file
'programing' 카테고리의 다른 글
| 임시 테이블에 결합하면 쿼리가 느려지는 이유는 무엇입니까? (0) | 2022.10.06 |
|---|---|
| Python은 테일 재귀를 최적화합니까? (0) | 2022.10.06 |
| HTML5/JavaScript를 사용하여 파일 생성 및 저장 (0) | 2022.10.06 |
| 기능성 데코레이터를 만들고 어떻게 묶어야 하나요? (0) | 2022.10.06 |
| 로컬 호스트에서의 XAMPP에서의 MySQL 루트 패스워드 리셋 (0) | 2022.10.06 |