다른 js 파일에서 JavaScript 함수 호출
second.js 파일의 first.js 파일에 정의되어 있는 함수를 호출하고 싶었습니다.두 파일 모두 다음과 같은 HTML 파일로 정의됩니다.
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
전화하고 싶다fn1()에 정의되어 있다.first.js에second.js제가 검색한 바로는 다음과 같습니다.first.js일단은 가능하지만 제 테스트 결과로는 그렇게 할 방법을 찾지 못했습니다.
코드는 다음과 같습니다.
second.js
document.getElementById("btn").onclick = function() {
fn1();
}
first.js
function fn1() {
alert("external fn clicked");
}
함수를 호출하기 전에 동일한 파일에 정의되거나 로드된 함수가 아니면 함수를 호출할 수 없습니다.
함수를 호출하려는 함수와 같거나 더 큰 범위에 있지 않으면 함수를 호출할 수 없습니다.
함수를 선언합니다.fn1첫 번째, 첫 번째, 두 번째, 두 번째, 두 번째, 두 번째, 두 번째, 두 번째, 두 번째,fn1();
1.120:
function fn1 () {
alert();
}
2.120:
fn1();
index.syslog:
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
es6 import export 구문을 사용할 수 있습니다.파일 1의 경우
export function f1() {...}
그리고 파일 2에 있습니다.
import { f1 } from "./file1.js";
f1();
이 기능은, 를 사용하고 있는 경우에만 유효합니다.<script src="./file2.js" type="module">
이렇게 하면 스크립트태그가 2개 필요 없습니다.메인 스크립트만 있으면 됩니다.다른 모든 것을 Import 할 수 있습니다.
첫 번째 JS:
function fn(){
alert("Hello! Uncle Namaste...Chalo Kaaam ki Baat p Aate h...");
}
두 번째 JS:
$.getscript("url or name of 1st Js File",function(){
fn();
});
함수를 글로벌 변수로 만들 수 있습니다.first.js그리고 닫는 부분을 보고 넣지 마세요.document.ready밖으로 내보내다
에이잭스도 쓸 수 있어요
$.ajax({
url: "url to script",
dataType: "script",
success: success
});
jquery getScript를 사용하는 것과 동일한 방법으로
$.getScript( "ajax/test.js" )
.done(function( script, textStatus ) {
console.log( textStatus );
})
.fail(function( jqxhr, settings, exception ) {
$( "div.log" ).text( "Triggered ajaxError handler." );
});
창을 사용하여 글로벌 범위에서 기능을 선언하다
first.first.first.first.first.
window.fn1 = function fn1() {
alert("external fn clicked");
}
second.second.discloss(세컨드).
document.getElementById("btn").onclick = function() {
fn1();
}
다음과 같이 포함하다
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
함수를 만들 때 "var"를 사용하면 다른 파일에서 액세스할 수 있습니다. 두 파일이 프로젝트에 잘 연결되어 있고 서로 액세스할 수 있는지 확인하십시오.
file_1.filename
var firstLetterUppercase = function(str) {
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
});
return str;
}
file_2.filename 파일에서 이 함수/파일에 액세스
firstLetterUppercase("gobinda");
출력 => Gobinda
다음과 같이 동작합니다.
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를 사용해 보십시오.
이것은, 다음의 경우에 한해 동작하는 것에 주의해 주세요.
<script>
태그는 머리 부분이 아니라 몸 안에 있습니다.
그렇게
<head>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</head>
=> 알 수 없는 함수 fn1()
실패 및
<body>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</body>
작동하다.
서버에서 캐시를 허용하면 캐시를 사용하여 속도를 향상시킵니다.
var extern =(url)=> { // load extern javascript
let scr = $.extend({}, {
dataType: 'script',
cache: true,
url: url
});
return $.ajax(scr);
}
function ext(file, func) {
extern(file).done(func); // calls a function from an extern javascript file
}
그리고 이렇게 사용하세요.
ext('somefile.js',()=>
myFunc(args)
);
또는 시제품을 만들어 보다 유연하게 만들 수 있습니다.따라서 함수를 호출하거나 여러 파일에서 코드를 가져오려는 경우 매번 파일을 정의할 필요가 없습니다.
first.first.first.first.first.
function first() { alert("first"); }
세컨드.js
var imported = document.createElement("script");
imported.src = "other js/first.js"; //saved in "other js" folder
document.getElementsByTagName("head")[0].appendChild(imported);
function second() { alert("Second");}
index.displaces를 표시합니다.
<HTML>
<HEAD>
<SCRIPT SRC="second.js"></SCRIPT>
</HEAD>
<BODY>
<a href="javascript:second()">method in second js</a><br/>
<a href="javascript:first()">method in firstjs ("included" by the first)</a>
</BODY>
</HTML>
사실 너무 늦은 감이 있지만 공유해야 할 것 같아서
index.displaces에 있습니다.
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
1 . 8 . 1 . 8 .
fn1 = function() {
alert("external fn clicked");
}
2.208에서
fn1()
window.onload = function(){
document.getElementById("btn").onclick = function(){
fn1();
}
// this should work, It calls when all js files loaded, No matter what position you have written
});
// module.js
export function hello() {
return "Hello";
}
// main.js
import {hello} from 'module'; // or './module'
let val = hello(); // val is "Hello";
https://filename.file/how-filename-another-filename-file 참조
DOM을 통해 두 개의 JavaScript 호출이 기능하도록 하는 것이 제 생각입니다.
방법은 간단합니다...숨겨진 js_ipc html 태그를 정의하기만 하면 됩니다.숨겨진 js_ipc 태그에서 착신측 레지스터를 클릭하면 발신자는 착신측을 트리거하기 위해 클릭이벤트를 디스패치할 수 있습니다.또한 인수는 통과시키고 싶은 경우에 저장됩니다.
위의 방법을 사용해야 할 때?
때때로 두 개의 Javascript 코드는 통합하기가 매우 복잡하고 비동기 코드가 매우 많습니다.또한 코드마다 사용하는 프레임워크는 다르지만 이들을 통합할 수 있는 간단한 방법이 필요합니다.
그래서 그런 경우에는 하기가 쉽지 않아요.
프로젝트의 실장에서는, 이 케이스에 부딪쳐, 통합이 매우 복잡합니다.그리고 마침내 두 명의 Javascript가 DOM을 통해 서로 통화할 수 있다는 것을 알게 되었습니다.
이 Git 코드로 이 방법을 시연합니다.이 방법으로 입수할 수 있습니다.(또는 https://github.com/milochen0418/javascript-ipc-demo)에서 읽어보십시오.
git clone https://github.com/milochen0418/javascript-ipc-demo
cd javascript-ipc-demo
git checkout 5f75d44530b4145ca2b06105c6aac28b764f066e
어디든지, 여기에서는 다음과 같은 간단한 사례를 통해 설명하겠습니다.다른 팀에서 만든 두 개의 Javascript 파일 간의 통신을 지원하는 JavaScript 라이브러리가 없을 때보다 더 쉽게 두 개의 다른 Javascript 코드를 통합할 수 있기를 바랍니다.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="js_ipc" style="display:none;"></div>
<div id="test_btn" class="btn">
<a><p>click to test</p></a>
</div>
</body>
<script src="js/callee.js"></script>
<script src="js/caller.js"></script>
</html>
코드 css/style.css는
.btn {
background-color:grey;
cursor:pointer;
display:inline-block;
}
js/syslog.syslog
function caller_add_of_ipc(num1, num2) {
var e = new Event("click");
e.arguments = arguments;
document.getElementById("js_ipc").dispatchEvent(e);
}
document.getElementById("test_btn").addEventListener('click', function(e) {
console.log("click to invoke caller of IPC");
caller_add_of_ipc(33, 22);
});
js/callee.js
document.getElementById("js_ipc").addEventListener('click', (e)=>{
callee_add_of_ipc(e.arguments);
});
function callee_add_of_ipc(arguments) {
let num1 = arguments[0];
let num2 = arguments[1];
console.log("This is callee of IPC -- inner-communication process");
console.log( "num1 + num2 = " + (num1 + num2));
}
늦더라도 안 하느니보다는 낫다
(function (window) {const helper = { fetchApi: function () { return "oke"}
if (typeof define === 'function' && define.amd) {
define(function () { return helper; });
}
else if (typeof module === 'object' && module.exports) {
module.exports = helper;
}
else {
window.helper = helper;
}
}(window))
html "html" html<script src="helper.js"></script> <script src="test.js"></script>
test 파일테스트에서 합니다.filename " " " "helper.fetchApi()
저도 같은 문제가 있었어요.jquery document ready 함수에 함수를 정의했습니다.
$(document).ready(function() {
function xyz()
{
//some code
}
});
그리고 이 함수 xyz()는 다른 파일을 호출했습니다.이것은 동작하지 않습니다:) 문서 위에 함수를 정의해야 합니다.
언급URL : https://stackoverflow.com/questions/25962958/calling-a-javascript-function-in-another-js-file
'sourcecode' 카테고리의 다른 글
| Linux Mint에서 MariaDB를 시작할 때 /etc/mysql/debian-start에서 이 오류가 발생하는 이유는 무엇입니까? (0) | 2022.09.13 |
|---|---|
| MariaDB CURRENT_TIMESTamp 기본값 (0) | 2022.09.13 |
| Eclipse에서 소스를 쉽게 첨부할 수 있는 방법이 있나요? (0) | 2022.09.13 |
| Java/Java EE 개발자가 대답할 수 있는 질문 (0) | 2022.09.13 |
| 기본 패키지에서 클래스를 가져오는 방법 (0) | 2022.09.13 |