Memanggil fungsi javascript di file js lain

Question 1

Saya ingin memanggil fungsi yang ditentukan dalam file first.js di file second.js. kedua file didefinisikan dalam file HTML seperti:

<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>

Saya ingin menelepon fn1()ditentukan first.jsdalam second.js. Dari pencarian saya, jawaban jika first.jsditentukan terlebih dahulu itu mungkin tetapi dari tes saya, saya belum menemukan cara untuk melakukan itu.

Ini kode saya:

second.js

document.getElementById("btn").onclick = function() {
    fn1();
}

first.js

function fn1() {
    alert("external fn clicked");
}

Question 2

Suatu fungsi tidak dapat dipanggil kecuali ia didefinisikan dalam file yang sama atau yang dimuat sebelum upaya untuk memanggilnya.

Suatu fungsi tidak dapat dipanggil kecuali jika berada dalam cakupan yang sama atau lebih besar dari yang mencoba memanggilnya.

Anda mendeklarasikan fungsi fn1di first.js, lalu di detik Anda bisa memilikifn1();

1.js:

function fn1 () {
    alert();
}

2.js:

fn1();

index.html:

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

Question 3

JS ke-1:

function fn(){
   alert("Hello! Uncle Namaste...Chalo Kaaam ki Baat p Aate h...");
}

JS ke-2:

$.getscript("url or name of 1st Js File",function(){
fn();
});

Semoga Ini Membantu ... Selamat Coding.

Question 4

Anda dapat membuat fungsi sebagai variabel global first.js dan melihat closure dan jangan meletakkannya di document.readyluar

Anda juga bisa menggunakan ajax

    $.ajax({
      url: "url to script",
      dataType: "script",
      success: success
    });

dengan cara yang sama Anda dapat menggunakan jquery getScript

$.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

Question 5

Anda dapat mempertimbangkan untuk menggunakan sintaks ekspor impor es6. Dalam file 1;

export function f1() {...}

Dan kemudian di file 2;

import { f1 } from "./file1.js";
f1();

Harap dicatat bahwa ini hanya berfungsi jika Anda menggunakan <script src="./file2.js" type="module">

Anda tidak memerlukan dua tag skrip jika Anda melakukannya dengan cara ini. Anda hanya membutuhkan skrip utama, dan Anda dapat mengimpor semua barang Anda yang lain di sana.

Question 6

Ini harus bekerja seperti ini:

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>

keluaran

Coba cuplikan CodePen ini: link .

Question 7

Harap dicatat ini hanya berfungsi jika

<script>

tag ada di tubuh dan BUKAN di kepala.

Begitu

<head>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</head>

=> fungsi tidak diketahui fn1 ()

Gagal dan

<body>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</body>

bekerja.

Question 8

Gunakan cache jika server Anda memungkinkan untuk meningkatkan kecepatan.

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
}

Dan kemudian gunakan seperti ini:

ext('somefile.js',()=>              
    myFunc(args)
);

Secara opsional, buat prototipe agar lebih fleksibel. Sehingga Anda tidak perlu menentukan file setiap saat, jika Anda memanggil fungsi atau jika Anda ingin mengambil kode dari banyak file.

Question 9

first.js

function first() { alert("first"); }

Second.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.html

 <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>

Question 10

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

Question 11

mendeklarasikan fungsi dalam lingkup global dengan jendela

first.js

window.fn1 = function fn1() {
    alert("external fn clicked");
}

second.js

document.getElementById("btn").onclick = function() {
   fn1();
}

termasuk seperti ini

<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>

Question 12

Ini sebenarnya datang sangat terlambat, tapi saya pikir saya harus berbagi,

di index.html

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

di 1.js

fn1 = function() {
    alert("external fn clicked");
}

di 2.js

fn1()

Question 13

gunakan "var" saat membuat fungsi, lalu Anda dapat mengaksesnya dari file lain. pastikan kedua file terhubung dengan baik ke proyek Anda dan dapat mengakses satu sama lain.

file_1.js

var firstLetterUppercase = function(str) {
   str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
      return letter.toUpperCase();
   });
   return str;
}

mengakses file format file_2.js fungsi / variabel ini

firstLetterUppercase("gobinda");

keluaran => Gobinda

Semoga ini bisa membantu seseorang, selamat membuat kode !!!

Question 14

Ide saya adalah membiarkan dua fungsi panggilan JavaScript melalui DOM.

Cara melakukannya sederhana ... Kita hanya perlu mendefinisikan tag html js_ipc yang tersembunyi. Setelah callee register klik dari tag js_ipc yang tersembunyi, maka Penelepon dapat mengirimkan event click untuk memicu callee. Dan argumennya disimpan jika Anda ingin lulus.

Kapan kita perlu menggunakan cara di atas?

Terkadang, dua kode javascript sangat rumit untuk diintegrasikan dan begitu banyak kode asinkron di sana. Dan kode yang berbeda menggunakan kerangka kerja yang berbeda tetapi Anda masih perlu memiliki cara sederhana untuk mengintegrasikannya bersama.

Jadi, dalam hal itu, tidak mudah melakukannya.

Dalam implementasi proyek saya, saya menemui kasus ini dan sangat rumit untuk mengintegrasikannya. Dan akhirnya saya menemukan bahwa kita dapat membiarkan dua javascript saling memanggil melalui DOM.

Saya menunjukkan cara ini dalam kode git ini. Anda bisa mendapatkannya dengan cara ini. (Atau baca dari https://github.com/milochen0418/javascript-ipc-demo )

git clone https://github.com/milochen0418/javascript-ipc-demo
cd javascript-ipc-demo
git checkout 5f75d44530b4145ca2b06105c6aac28b764f066e

Di mana saja, Di sini, saya mencoba menjelaskan dengan kasus sederhana berikut. Saya berharap cara ini dapat membantu Anda dalam mengintegrasikan dua kode javascript yang berbeda dengan lebih mudah dari sebelumnya tidak ada library JavaScript untuk mendukung komunikasi antara dua file javascript yang dibuat oleh tim yang berbeda.

<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>

Dan kode css / style.css

.btn {
    background-color:grey;
    cursor:pointer;
    display:inline-block;
}

js / caller.js

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

Question 15

// module.js
export function hello() {
  return "Hello";
}

// main.js
import {hello} from 'module'; // or './module'
let val = hello(); // val is "Hello";

referensi dari https://hype.codes/how-include-js-file-another-js-file

Question 16

Saya memiliki masalah yang sama. Saya telah mendefinisikan fungsi di dalam fungsi siap dokumen jquery .

$(document).ready(function() {
   function xyz()
   {
       //some code
   }
});

Dan fungsi ini xyz () saya panggil di file lain. Ini tidak bekerja :) Anda harus menyiapkan fungsi di atas dokumen .