Bisakah kita memanggil fungsi yang ditulis dalam satu JavaScript dalam file JS lain?

193

Bisakah kita memanggil fungsi yang ditulis dalam satu file JS dalam file JS lainnya? Adakah yang bisa membantu saya cara memanggil fungsi dari file JS lain?

javascript include

— Hemant Kumar
sumber

213

Fungsi ini dapat disebut seolah-olah berada di File JS yang sama selama file yang mengandung definisi fungsi telah dimuat sebelum penggunaan pertama fungsi tersebut.

Yaitu

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>

~~Cara lain tidak akan berhasil.~~ Seperti yang ditunjukkan dengan tepat oleh Stuart Wakefield . Cara lain juga akan berhasil.

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>

Apa yang tidak akan berhasil adalah:

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>

Meskipun alertOnedidefinisikan saat memanggilnya, secara internal ia menggunakan fungsi yang masih belum didefinisikan ( alertNumber).

— Edgar Hernandez
sumber

Apa perbedaan antara contoh Anda dengan memasukkan file JS dalam file Index.html ke pendekatan lain di mana kami menggunakan metode impor JS untuk mengimpor metode dari file JS lain yang memiliki metode skrip JS ekspor ke metode ekspor.

— Phil

68

Jawaban di atas memiliki asumsi yang salah bahwa urutan penyertaan file penting. Karena fungsi alertNumber tidak dipanggil sampai fungsi alertOne dipanggil. Selama kedua file dimasukkan oleh waktu waspada, satu disebut urutan file tidak masalah:

[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

Atau bisa dipesan seperti berikut:

[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

Tetapi jika Anda melakukan ini:

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

Itu hanya masalah tentang variabel dan fungsi yang tersedia pada saat eksekusi. Ketika suatu fungsi didefinisikan, ia tidak menjalankan atau menyelesaikan variabel apa pun yang dideklarasikan di dalam sampai fungsi itu kemudian dipanggil.

Memasukkan file skrip yang berbeda tidak berbeda dengan skrip yang berada dalam urutan itu dalam file yang sama, dengan pengecualian skrip yang ditangguhkan:

<script type="text/javascript" src="myscript.js" defer="defer"></script>

maka kamu perlu hati-hati.

— Stuart Wakefield
sumber

1

Demikian juga dengan terlalu sedikit

— Stuart Wakefield

1

Ini mungkin terdengar membingungkan, tetapi penyertaan tidak persis sama dengan skrip penyambung. Pertimbangkan script1: function myfunction() {dan script2: alert();}Ini tidak akan bekerja. Itu mengganggu saya karena saya mencoba memodulasi file js yang terlalu panjang. Lihat stackoverflow.com/questions/20311604/...

— Boyang

Apakah fungsi ini akan berbagi thiskonteks, jika salah satu fungsi ada di kelas?

— aks

thisterikat pada titik fungsi dipanggil (kecuali binddisebut sebelumnya). Dua fungsi dalam dua file terpisah tidak akan berbagi thiskonteks secara otomatis, dalam contoh di atas tidak ada thiskonteks, yaitu windowdalam undefinedmode non-ketat atau ketat. Anda bisa membuat fungsi di skrip lain berbagi nilai yang sama thisdengan menetapkan fungsi sebagai anggota objek (yaitu di dalam konstruktor this.method = myOtherFunc) atau menggunakan bind. Silakan kirim pertanyaan SO dengan lebih detail jika Anda membutuhkan jawaban yang lebih mendalam. Cheers, Stuart

— Stuart Wakefield

13

Selama keduanya dirujuk oleh halaman web, ya.

Anda cukup memanggil fungsi seolah-olah mereka berada di file JS yang sama.

— jball
sumber

6

Jika semua file disertakan, Anda dapat memanggil properti dari satu file ke yang lain (seperti fungsi, variabel, objek dll.)

Js fungsi dan variabel yang Anda tulis dalam satu file js - katakanlah a.js akan tersedia untuk file js lain - katakanlah b.js selama kedua a.js dan b.js disertakan dalam file menggunakan berikut termasuk mekanisme (dan dalam urutan yang sama jika fungsi dalam b.js memanggil satu dalam a.js).

<script language="javascript" src="a.js"> and 
<script language="javascript" src="b.js">

— Pramendra Gupta
sumber

4

ES6: Alih-alih memasukkan banyak file js menggunakan <script>dalam .html Anda dapat memasukkan hanya satu file utama misalnya script.jsmenggunakan atribut type="module"( dukungan ) dan di dalamnya script.jsAnda dapat memasukkan file lain:

<script type="module" src="script.js"></script>

Dan dalam script.jsfile termasuk file lain seperti itu:

import { hello } from './module.js';
...
// alert(hello());

Dalam 'module.js' Anda harus mengekspor fungsi / kelas yang akan Anda impor

export function hello() {
    return "Hello World";
}

Contoh kerja di sini .

— Kamil Kiełczewski
sumber

3

ya kamu bisa . Anda perlu merujuk keduanya JS fileke .aspxhalaman tersebut

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

— anishMarokey
sumber

0

Anda dapat memanggil fungsi yang dibuat dalam file js lain dari file yang sedang Anda kerjakan. Jadi untuk ini pertama-tama Anda perlu menambahkan file js eksternal ke dalam dokumen html sebagai-

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

Fungsi yang ditentukan dalam file javascript eksternal -

$.fn.yourFunctionName = function(){
    alert('function called succesfully for - ' + $(this).html() );
}

Untuk memanggil fungsi ini di file Anda saat ini, panggil saja fungsi sebagai -

......
<script type="text/javascript">
    $(function(){
        $('#element').yourFunctionName();
    });
</script>

Jika Anda ingin meneruskan parameter ke fungsi, maka tentukan fungsi sebagai-

$.fn.functionWithParameters = function(parameter1, parameter2){
        alert('Parameters passed are - ' + parameter1 + ' , ' + parameter2);
}

Dan panggil fungsi ini dalam file Anda saat ini sebagai -

$('#element').functionWithParameters('some parameter', 'another parameter');

— sheetal
sumber

1

Tolong jangan berasumsi jQuery di mana-mana. Juga, membungkus $.fnpenugasan dalam klausa siap dokumen tidak ada gunanya

— Bergi

oke saya akan mengingatnya lain kali :), tetapi bisakah Anda menjelaskan mengapa tugas $ .fn tidak ada gunanya?

— sheetal

Bukan tugas, pembungkus.

— Bergi

oke jadi itu berarti ketika dokumen tidak siap, hanya $ ff harus digunakan untuk membuat fungsi

— sheetal

Tapi kenapa? Deklarasi fungsi tidak perlu menunggu DOM. Sekalipun panggilan mungkin (tapi cukup sering tidak).

— Bergi

0

Berikut adalah contoh yang lebih deskriptif dengan cuplikan CodePen terlampir:

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 snippet CodePen ini: tautan .

— Consta Gorgan
sumber

0

Yah, saya menemukan solusi manis lain.

window['functioName'](params);

— Digvijay
sumber

0

Bagi mereka yang ingin melakukan ini di Node.js (menjalankan skrip di sisi server) opsi lain adalah menggunakan requiredan module.exports. Berikut adalah contoh singkat tentang cara membuat modul dan mengekspornya untuk digunakan di tempat lain:

file1.js

const print = (string) => {
    console.log(string);
};

exports.print = print;

file2.js

const file1 = require('./file1');

function printOne() {
    file1.print("one");
};

— ronatory
sumber