Bir JavaScript'te yazılmış işlevi başka bir JS dosyasında arayabilir miyiz?

193

Bir JS dosyasına yazılan işlevi başka bir JS dosyasında arayabilir miyiz? Herkes başka bir JS dosyasından işlevi nasıl çağırmak için bana yardımcı olabilir?

javascript include

— Hemant Kumar
kaynak

213

Fonksiyonun tanımını içeren dosya, fonksiyonun ilk kullanımından önce yüklenmiş olduğu sürece fonksiyon aynı JS Dosyasındaymış gibi çağrılabilir.

yani

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>

~~Diğer yol çalışmaz.~~ Stuart Wakefield tarafından doğru bir şekilde işaret edildiği gibi . Diğer yol da işe yarayacaktır.

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>

Ne işe yaramaz:

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>

Her ne kadar alertOneçağrılırken tanımlansa da, dahili olarak hala tanımlanmamış bir işlev kullanır ( alertNumber).

— Edgar Hernandez
kaynak

JS dosyasını Index.html dosyasına, JS komut yöntemini dışa aktarma yöntemine sahip başka bir JS dosyasından içe aktarmak için JS içe aktarma yöntemini kullandığımız diğer yaklaşıma dahil ederek örneğiniz arasındaki fark nedir?

— Phil

68

Yukarıdaki cevap, dosyaların dahil edilme sırasının önemli olduğu varsayımına sahiptir. AlertNumber işlevi alertOne işlevi çağrılıncaya kadar çağrılmadığından. Her iki dosya da time alertOne olarak dahil edildiği sürece dosyaların sırası önemli değildir:

[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

Veya aşağıdaki gibi sipariş edilebilir:

[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

Ama eğer bunu yapacak olsaydınız:

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

Yalnızca yürütme sırasında kullanılabilen değişkenler ve işlevler hakkında önemlidir. Bir işlev tanımlandığında, o işlev daha sonra çağrılıncaya kadar içinde bildirilen değişkenlerin hiçbirini yürütmez veya çözmez.

Ertelenen komut dosyaları dışında, farklı komut dosyası dosyalarının eklenmesi, komut dosyasının aynı dosyada yer almasından farklı değildir:

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

o zaman dikkatli olmalısın.

— Stuart Wakefield
kaynak

1

Aynı şekilde çok az

— Stuart Wakefield

1

Bu nitpick gibi gelebilir, ancak içerme komut dizilerini birleştirmekle tam olarak aynı değildir. Script1: function myfunction() {ve script2: alert();}işe yaramaz. Çok uzun bir js dosyasını modülerleştirmeye çalıştığım için beni rahatsız ediyor. Bkz. Stackoverflow.com/questions/20311604/…

— Boyang

İşlevlerden thisbiri bir sınıftaysa, bu işlev bağlamı paylaşır mı?

— aks

thisfonksiyonun çağrıldığı noktaya bağlıdır ( bindönceden çağrılmadığı sürece ). İki ayrı dosyadaki iki işlev thisbağlamı otomatik olarak paylaşmaz, yukarıdaki örnekte ne thisbağlam vardır, yani windowkatı olmayan veya undefinedkatı modda. Diğer komut dosyasındaki thisişlevin, işlevi nesnenin bir üyesi olarak atadığı (yani yapıcı içinde this.method = myOtherFunc) veya bind kullanarak aynı değeri paylaşmasını sağlayabilirsiniz . Daha ayrıntılı bir cevaba ihtiyacınız varsa lütfen bir SO sorusunu daha ayrıntılı olarak gönderin. Şerefe, Stuart

— Stuart Wakefield

13

Her ikisine de web sayfası tarafından atıfta bulunulduğu sürece, evet.

İşlevleri aynı JS dosyasındaymış gibi çağırmanız yeterlidir.

— JBall
kaynak

7

Tüm dosyalar dahil edilirse, özellikleri bir dosyadan diğerine çağırabilirsiniz (işlev, değişken, nesne vb.)

Js fonksiyonlar ve tek bir .js dosyasında yazma bunu değişkenler - diyelim ki a.js diğer js dosyalarına sunulacak - diyelim ki b.js sürece hem de a.js ve b.js şu şunlardır kullanarak dosyada mevcuttur mekanizması (ve b.js'deki işlev a.js'deki işlevi çağırırsa aynı sırada).

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

— Pramendra Gupta
kaynak

4

ES6:<script> .html dosyasında birçok js dosyası eklemek yerine yalnızca bir ana dosya ekleyebilir, örneğin script.jsöznitelik type="module"( destek ) kullanarak içeride script.jsbaşka dosyalar da ekleyebilirsiniz:

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

Ve script.jsdosyaya bunun gibi başka bir dosya ekleyin:

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

'Module.js'de içe aktaracağınız işlevi / sınıfı dışa aktarmanız gerekir

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

Burada çalışma örneği .

— Kamil Kiełczewski
kaynak

3

Evet yapabilirsin . her ikisini JS filede .aspxsayfaya göndermeniz gerekir

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

0

Çalıştığınız dosyadan başka bir js dosyasında oluşturulan işlevi çağırabilirsiniz. Bu nedenle öncelikle harici js dosyasını html belgesine eklemeniz gerekir.

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

Harici javascript dosyasında tanımlanan işlev -

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

Bu işlevi geçerli dosyanızda çağırmak için işlevi -

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

Parametreleri işleve iletmek istiyorsanız, işlevi şu şekilde tanımlayın:

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

Ve mevcut dosyanızdaki bu işlevi -

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

— sheetal
kaynak

1

Lütfen her yerde jQuery olduğunu varsaymayın. Ayrıca, $.fnödevi bir belgeye hazır cümlesine sarmak anlamsızdır

— Bergi

tamam bir dahaki sefere aklıma devam edeceğim :), ama neden $ .fn atamasının anlamsız olduğunu açıklayabilir misiniz?

— sheetal

Ödev değil, ambalaj.

— Bergi

tamam, bu belge hazır olmadığında, ancak işlev oluşturmak için yalnızca $ .fn kullanılması gerektiği anlamına gelir

— sheetal

Ama neden? İşlevin DOM için beklemesi gerekmediği bildirimi. Çağrı olsa bile (ancak genellikle yeterli değildir).

— Bergi

0

Aşağıda, bir CodePen snippet'inin eklendiği daha açıklayıcı bir örnek verilmiştir:

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>

çıktı

Bu CodePen snippet: bağlantısını deneyin .

— Consta Gorgan
kaynak

0

Başka bir tatlı çözümle karşılaştım.

window['functioName'](params);

— Digvijay
kaynak

0

Bunu yapmak isteyenler için node.js başka bir seçenek kullanmaktır (sunucu tarafında komut dosyalarını çalıştıran) requireve module.exports. Bir modülün nasıl oluşturulacağına ve başka bir yerde kullanılmak üzere nasıl dışa aktarılacağına dair kısa bir örnek:

file1.js

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

exports.print = print;

file2.js

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

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

— ronatory
kaynak