เราสามารถเรียกใช้ฟังก์ชั่นที่เขียนด้วย JavaScript หนึ่งไฟล์ในไฟล์ JS อื่นได้หรือไม่

193

เราสามารถเรียกใช้ฟังก์ชันที่เขียนในไฟล์ JS หนึ่งไฟล์ในไฟล์ JS อื่นได้หรือไม่ ทุกคนสามารถช่วยฉันวิธีเรียกใช้ฟังก์ชันจากไฟล์ JS อื่นได้หรือไม่

javascript include

— Hemant Kumar
แหล่งที่มา

213

สามารถเรียกใช้ฟังก์ชันได้ราวกับว่าอยู่ในไฟล์ JS เดียวกันตราบใดที่ไฟล์ที่มีคำจำกัดความของฟังก์ชั่นถูกโหลดก่อนการใช้งานครั้งแรกของฟังก์ชัน

กล่าวคือ

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>

~~วิธีอื่นจะไม่ทำงาน~~ ชี้เป็นได้อย่างถูกต้องโดยStuart เวก วิธีอื่นจะใช้งานได้เช่นกัน

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)

— Edgar Hernandez
แหล่งที่มา

อะไรคือความแตกต่างระหว่างตัวอย่างของคุณโดยการรวมไฟล์ JS ในไฟล์ Index.html ไปยังแนวทางอื่นที่เราใช้วิธีการนำเข้า JS เพื่อนำเข้าวิธีการจากไฟล์ JS อื่นที่มีวิธีสคริปต์ JS ส่งออกไปยังวิธีการส่งออก

— ฟิล

68

คำตอบข้างต้นมีข้อสันนิษฐานที่ไม่ถูกต้องว่าลำดับของการรวมไฟล์มีความสำคัญ เนื่องจากไม่ได้เรียกใช้ฟังก์ชัน alertNumber จนกว่าจะเรียกใช้ฟังก์ชัน alertOne ตราบใดที่ไฟล์ทั้งสองถูกรวมไว้โดย time alertOne เรียกว่าลำดับของไฟล์นั้นไม่สำคัญ:

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

ถ้าอย่างนั้นคุณต้องระวัง

— Stuart Wakefield
แหล่งที่มา

1

เช่นเดียวกันกับที่น้อยเกินไป

— Stuart Wakefield

1

สิ่งนี้อาจฟังดูเป็นเรื่อง nitpicking แต่การรวมนั้นไม่เหมือนกับสคริปต์ที่ต่อกัน พิจารณา script1: function myfunction() {และ script2: alert();}มันไม่ทำงาน มันลำบากสำหรับฉันเพราะฉันกำลังพยายามทำให้โมดูล js ที่ยาวเกินไป ดูstackoverflow.com/questions/20311604/…

— Boyang

ฟังก์ชั่นนี้จะแบ่งปันthisบริบทหรือไม่หากหนึ่งในฟังก์ชันนั้นอยู่ในคลาส?

— aks

thisถูกผูกไว้ที่จุดที่ฟังก์ชันถูกเรียกใช้ (ยกเว้นว่าbindถูกเรียกมาก่อน) ทั้งสองฟังก์ชั่นในไฟล์ที่แยกกันสองไฟล์จะไม่แบ่งปันthisบริบทโดยอัตโนมัติในตัวอย่างข้างต้นไม่มีthisบริบทเช่นwindowในundefinedโหมดที่ไม่เข้มงวดหรือในโหมดเข้มงวด คุณสามารถทำให้ฟังก์ชั่นในสคริปต์อื่น ๆ แบ่งปันthisค่าเดียวกันโดยการกำหนดฟังก์ชั่นเป็นสมาชิกของวัตถุ (เช่นภายในตัวสร้างthis.method = myOtherFunc) หรือใช้ผูก โปรดโพสต์คำถาม SO พร้อมรายละเอียดเพิ่มเติมหากคุณต้องการคำตอบเชิงลึกเพิ่มเติม ไชโยสจวร์ต

— Stuart Wakefield

13

ตราบเท่าที่ทั้งสองมีการอ้างอิงโดยหน้าเว็บใช่

คุณเพียงเรียกฟังก์ชั่นราวกับว่าพวกเขาอยู่ในไฟล์ JS เดียวกัน

— jball
แหล่งที่มา

7

หากรวมไฟล์ทั้งหมดคุณสามารถเรียกคุณสมบัติจากไฟล์หนึ่งไปยังอีกไฟล์หนึ่ง (เช่นฟังก์ชั่นตัวแปรวัตถุ ฯลฯ )

ฟังก์ชั่น js และตัวแปรที่คุณเขียนในไฟล์. js หนึ่งไฟล์ - พูดว่าa.jsจะสามารถใช้ได้กับไฟล์ js อื่น ๆ - พูดว่าb.jsตราบใดที่ทั้งa.jsและb.jsรวมอยู่ในไฟล์โดยใช้รายการต่อไปนี้ กลไก (และในลำดับเดียวกันถ้าฟังก์ชั่นใน b.js เรียกหนึ่งใน a.js)

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

— Pramendra Gupta
แหล่งที่มา

4

ES6:แทนที่จะรวมไฟล์ js จำนวนมากที่ใช้<script>ใน. html คุณสามารถรวมไฟล์หลักเพียงไฟล์เดียวเช่นการ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";
}

การทำงานตัวอย่างเช่นที่นี่

— Kamil Kiełczewski
แหล่งที่มา

3

ใช่คุณสามารถ . คุณต้องดูทั้งสอง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");
}

— anishMarokey
แหล่งที่มา

0

คุณสามารถเรียกใช้ฟังก์ชั่นที่สร้างขึ้นในไฟล์ js อื่นจากไฟล์ที่คุณกำลังทำงานดังนั้นก่อนอื่นคุณต้องเพิ่มไฟล์ js ภายนอกลงในเอกสาร html เป็น -

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

ฟังก์ชั่นที่กำหนดไว้ในไฟล์จาวาสคริปต์ภายนอก -

$.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');

— Sheetal
แหล่งที่มา

1

โปรดอย่าสันนิษฐาน jQuery ทุกที่ นอกจากนี้การห่อ$.fnงานที่มอบหมายในเอกสารพร้อมส่วนคำสั่งไม่มีจุดหมาย

— Bergi

โอเคฉันจะเก็บไว้ในใจในครั้งต่อไป :) แต่คุณสามารถอธิบายได้ว่าทำไมการมอบหมาย $ .fn ไม่มีจุดหมาย?

— แบบแผน

ไม่ใช่งานที่ได้รับมอบหมาย

— Bergi

ตกลงดังนั้นหมายความว่าเมื่อเอกสารไม่พร้อมใช้งานควรใช้เพียง $ .fn เท่านั้นสำหรับการสร้างฟังก์ชั่น

— sheetal

แต่ทำไม การประกาศฟังก์ชั่นไม่จำเป็นต้องรอ DOM แม้ว่าการโทรอาจ (แต่บ่อยครั้งพอไม่ได้)

— Bergi

0

นี่เป็นตัวอย่างที่เป็นคำอธิบายเพิ่มเติมพร้อมแนบตัวอย่าง CodePen:

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>

เอาท์พุต

ลองนี้ข้อมูลโค้ด CodePen: การเชื่อมโยง

— คอนสตากอร์แกน
แหล่งที่มา

0

ฉันเจอวิธีแก้ปัญหาอันหอมหวานอื่นแล้ว

window['functioName'](params);

— Digvijay
แหล่งที่มา

0

สำหรับผู้ที่ต้องการที่จะทำเช่นนี้ในNode.js (ทำงานสคริปต์บนฝั่งเซิร์ฟเวอร์) อีกทางเลือกหนึ่งคือการใช้และrequire module.exportsนี่เป็นตัวอย่างสั้น ๆ เกี่ยวกับวิธีสร้างโมดูลและส่งออกเพื่อใช้งานที่อื่น:

file1.js

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

exports.print = print;

file2.js

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

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

— ronatory
แหล่งที่มา