Bagaimana cara memasukkan file javascript dalam file javascript lain?

Apakah JavaScript memiliki sesuatu yang mirip dengan @import di CSS yang memungkinkan Anda untuk memasukkan file javascript dalam file javascript lain?

4465
04 июня '09 в 14:59 2009-06-04 14:59 Alec Smart diatur untuk 04 Juni 2009 pada 14:59 2009-06-04 14:59
@ 56 jawaban
  • 1
  • 2

Dalam versi JavaScript yang lebih lama, tidak ada impor, inklusi, atau persyaratan, sehingga banyak pendekatan berbeda untuk masalah ini dikembangkan.

Namun sejak 2015 (ES6), standar modul ES6 untuk mengimpor modul ke Node.js telah muncul dalam JavaScript, yang juga didukung oleh sebagian besar peramban modern .

Untuk kompatibilitas dengan browser lama, Anda dapat menggunakan alat build dan / atau transfer .

Modul ES6

Modul ECMAScript (ES6) didukung di Node.js sejak versi - --experimental-modules flag - --experimental-modules . Semua file yang .mjs harus memiliki ekstensi .mjs .

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

Modul ECMAScript di browser

Peramban mendukung pemuatan modul ECMAScript secara >dimulai dengan Safari 10.1, Chrome 61, Firefox 60 dan Edge 16. Lihat dukungan saat ini di caniuse .

 // hello.mjs export function hello(text) { const div = document.createElement('div'); div.textContent = 'Hello ${text}'; document.body.appendChild(div); } 

Pelajari lebih lanjut di https://jakearchibald.com/2017/es-modules-in-browsers/

Impor dinamis di browser

Impor dinamis memungkinkan skrip untuk memuat skrip lain sesuai kebutuhan:

https://developers.google.com/web/updates/2017/11/dynamic-import. 

Node.js membutuhkan

Gaya impor modul lama, masih banyak digunakan di Node.js, adalah module.exports / membutuhkan sistem .

 // server.js const myModule = require('./mymodule'); let val = myModule.hello(); // val is "Hello" 

Ada cara lain untuk mengaktifkan konten eksternal JavaScript di browser yang tidak memerlukan preprocessing.

Unduh AJAX

Anda dapat memuat skrip tambahan menggunakan panggilan AJAX, dan kemudian gunakan eval untuk menjalankannya. Ini adalah cara termudah, tetapi terbatas pada domain Anda karena model keamanan kotak pasir JavaScript. Menggunakan eval juga membuka jalan bagi masalah bug, peretasan, dan keamanan.

Unduh Unduh

Seperti impor dinamis, Anda dapat memuat satu atau lebih skrip dengan memanggil fetch menggunakan janji untuk mengontrol urutan di mana dependensi skrip dijalankan menggunakan pustaka Inject Ambil :

 fetchInject([ 'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js' ]).then(() => { console.log('Finish in less than ${moment().endOf('year').fromNow(true)}') }) 

Pemuatan JQuery

Perpustakaan jQuery menyediakan pemuatan satu baris :

 function dynamicallyLoadScript(url) { var script = document.createElement("script"); // create a script DOM node script.src = url; // set its src to the provided URL document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead) } 

Fungsi ini akan menambahkan <script> ke akhir bagian kepala halaman, di mana atribut src diatur ke URL, yang diteruskan ke fungsi sebagai parameter pertama.

Kedua solusi ini dibahas dan diilustrasikan dalam JavaScript Madness: pemuatan skrip dinamis .

Deteksi ketika skrip dieksekusi

Sekarang ada masalah besar yang harus Anda waspadai. Ini berarti Anda mengunduh kode dari jarak jauh. Browser web modern memuat file dan terus menjalankan skrip Anda saat ini, karena mereka memuat semuanya secara tidak sinkron untuk meningkatkan kinerja. (Ini berlaku untuk metode jQuery dan metode pemuatan skrip dinamis manual.)

Ini berarti bahwa jika Anda menggunakan trik ini secara >

Misalnya: my_lovely_script.js berisi MySuperObject :

 function loadScript(url, callback) { // Adding the script tag to the head as suggested before var head = document.head; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; // Then bind the event to the callback function. // There are several events for cross browser compatibility. script.onreadystatechange = callback; script.onload = callback; // Fire the loading head.appendChild(script); } 

Kemudian Anda menulis kode yang ingin Anda gunakan SETELAH skrip dimuat ke dalam fungsi lambda :

 loadScript("my_lovely_script.js", myPrettyCode); 

Perhatikan bahwa skrip dapat dieksekusi setelah DOM dimuat atau sebelumnya, tergantung pada browser dan apakah script.async = false; baris script.async = false; diaktifkan script.async = false; Ada artikel bagus untuk mengunduh Javascript secara umum, yang membahas hal ini.

Penggabungan / preprocessing kode sumber

Seperti yang disebutkan di bagian atas jawaban ini, banyak pengembang menggunakan alat build / transfer dalam proyek mereka, seperti Parcel, Webpack atau Babel, yang memungkinkan mereka untuk menggunakan sintaks JavaScript yang akan datang, memberikan kompatibilitas ke belakang untuk browser lama, menggabungkan file, meminimalkan, memecah kode dan seterusnya

3838
04 июня '09 в 15:13 2009-06-04 15:13 jawabannya diberikan e-satis 04 Juni '09 pada 15:13 2009-06-04 15:13

Jika seseorang mencari sesuatu yang lebih maju, cobalah RequireJS . Anda akan mendapatkan manfaat tambahan seperti manajemen ketergantungan, peningkatan konkurensi dan menghindari duplikasi (yaitu, mendapatkan skrip lebih dari sekali).

Anda dapat menulis file JavaScript ke "modul" dan kemudian merujuknya sebagai dependensi di skrip lain. Atau Anda dapat menggunakan RequireJS sebagai solusi "pergi dan dapatkan skrip ini" yang sederhana.

Contoh:

Tentukan dependensi sebagai modul:

some-dependency.js

 define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) { //Your actual script goes here. //The dependent scripts will be fetched if necessary. return libraryObject; //For example, jQuery object }); 

creation.js adalah file javascript "utama" Anda, yang tergantung pada some-dependency.js

 require(['some-dependency'], function(dependency) { //Your script goes here //some-dependency.js is fetched. //Then your script is executed }); 

Kutipan dari GitHub README:

RequireJS memuat file JavaScript sederhana, serta modul yang lebih spesifik. Ini dioptimalkan untuk digunakan di browser, termasuk Pekerja Web, tetapi dapat digunakan di lingkungan JavaScript lain seperti Badak dan Node. Ini mengimplementasikan API modul asinkron.

RequireJS menggunakan tag skrip sederhana untuk memuat modul / file, sehingga harus menyediakan debugging yang mudah. Ini dapat digunakan hanya untuk memuat file JavaScript yang ada, sehingga Anda dapat menambahkannya ke proyek yang ada tanpa harus menulis u>

...

532
07 июня '12 в 23:55 2012-06-07 23:55 Jawaban diberikan oleh John Strickler pada 07 Juni '12 pada 23:55 2012-06-07 23:55

Bahkan, ada cara untuk mengunduh file javascript tidak serempak, sehingga Anda dapat menggunakan fungsi yang termasuk dalam file yang baru Anda unggah segera setelah unduhan, dan saya pikir itu berfungsi di semua browser.

Anda perlu menggunakan jQuery.append() di elemen <head> halaman Anda, yaitu:

 $("head").append('<script type="text/javascript" src="' + script + '"></script>'); 

Namun, metode ini juga memiliki masalah: jika terjadi kesalahan pada file JavaScript yang diimpor, Firebug (serta Konsol Kesalahan Firefox dan Alat Pengembang Chrome juga akan melaporkan lokasi mereka secara tidak benar, yang merupakan masalah besar jika Anda menggunakan Firebug untuk melacak banyak kesalahan JavaScript (saya lakukan Untuk beberapa alasan, Firebug tidak tahu tentang file yang baru diunggah, jadi jika terjadi kesalahan pada file ini, ia melaporkan bahwa itu terjadi di file HTML utama Anda dan Anda akan mengalami masalah dalam menemukan penyebab sebenarnya dari kesalahan tersebut.

Tetapi jika ini bukan masalah bagi Anda, maka metode ini akan berhasil.

Bahkan, saya menulis plugin jQuery yang disebut $ .import_js () yang menggunakan metode ini:

 (function($) {  var import_js_imported = []; $.extend(true, { import_js : function(script) { var found = false; for (var i = 0; i < import_js_imported.length; i++) if (import_js_imported[i] == script) { found = true; break; } if (found == false) { $("head").append('<script type="text/javascript" src="' + script + '"></script>'); import_js_imported.push(script); } } }); })(jQuery); 

Karena itu, yang perlu Anda lakukan untuk mengimpor JavaScript adalah:

 $.import_js('/path_to_project/scripts/somefunctions.js'); 

Saya juga membuat tes sederhana untuk ini dalam Contoh .

Ini termasuk file main.js di HTML utama, dan kemudian script di main.js menggunakan $.import_js() untuk mengimpor file tambahan yang disebut $.import_js() , yang mendefinisikan fungsi ini:

 function hello() { alert("Hello world!"); } 

Dan segera setelah memasukkan included.js , fungsi hello() dipanggil dan Anda akan menerima pemberitahuan.

(Jawaban ini adalah jawaban untuk komentar e-sat).

173
28 апр. Balas Kipras 28 April 2011-04-28 18:25 '11 pada 18:25 2011-04-28 18:25

Cara lain yang, menurut saya, jauh lebih bersih, adalah dengan membuat permintaan Ajax yang sinkron alih-alih menggunakan <script> . Selain itu, ia memproses Node.js.

Berikut adalah contoh penggunaan jQuery:

 function require(script) { $.ajax({ url: script, dataType: "script", async: false, // <-- This is the key success: function () { // all good... }, error: function () { throw new Error("Could not load script " + script); } }); } 

Kemudian Anda dapat menggunakannya dalam kode Anda, seolah-olah Anda biasanya menggunakan termasuk:

 require("/scripts/subscript.js"); 

Dan Anda dapat memanggil fungsi dari skrip yang diperlukan di baris berikut:

 subscript.doSomethingCool(); 
138
08 сент. Jawabannya diberikan oleh Ariel 08 Sep 2011-09-08 21:22 '11 pada 21:22 2011-09-08 21:22

Berita bagus untukmu. Segera Anda akan dapat dengan mudah memuat kode JavaScript. Ini akan menjadi cara standar untuk mengimpor modul kode JavaScript dan menjadi bagian dari inti JavaScript itu sendiri.

Anda hanya perlu menulis import cond from 'cond.js'; memuat nama makro cond dari file cond.js

Dengan demikian, Anda tidak perlu bergantung pada infrastruktur JavaScript apa pun dan tidak secara eksplisit melakukan panggilan Ajax .

Lihat:

90
03 июля '12 в 16:32 2012-07-03 16:32 jawabannya diberikan Imdad 03 Juli '12 di 4:32 2012-07-03 16:32

Anda dapat secara dinamis membuat tag JavaScript dan menambahkannya ke dokumen HTML dari kode JavaScript lainnya. Ini akan memuat file javascript target.

 function includeJs(jsFilePath) { var js = document.createElement("script"); js.type = "text/javascript"; js.src = jsFilePath; document.body.appendChild(js); } includeJs("/path/to/some/file.js"); 
78
04 июня '09 в 15:02 2009-06-04 15:02 membalas Svitlana Maksymchuk pada 04 Juni 2009 di 15:02 2009-06-04 15:02

operator import dalam ECMAScript 6.

Sintaks

 import name from "module-name"; import { member } from "module-name"; import { member as alias } from "module-name"; import { member1 , member2 } from "module-name"; import { member1 , member2 as alias2 , [...] } from "module-name"; import name , { member [ , [...] ] } from "module-name"; import "module-name" as name; 
61
17 апр. Balas diberikan oleh draupnie pada 17 Apr 2015-04-17 04:56 '15 pada 4:56 2015-04-17 04:56

Mungkin Anda dapat menggunakan fungsi ini yang saya temukan di halaman ini. Bagaimana cara saya memasukkan file javascript dalam file javascript? :

 function include(filename) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = filename; script.type = 'text/javascript'; head.appendChild(script) } 
51
04 июня '09 в 15:04 2009-06-04 15:04 Jawaban diberikan oleh Arnaud Gouder de Beauregard 04 Juni 09 di 15:04 2009-06-04 15:04

Ini adalah versi sinkron tanpa jQuery :

 function myRequire( url ) { var ajax = new XMLHttpRequest(); ajax.open( 'GET', url, false ); // <-- the 'false' makes it synchronous ajax.onreadystatechange = function () { var script = ajax.response || ajax.responseText; if (ajax.readyState === 4) { switch( ajax.status) { case 200: eval.apply( window, [script] ); console.log("script loaded: ", url); break; default: console.log("ERROR: script not loaded: ", url); } } }; ajax.send(null); } 

Perhatikan bahwa untuk mendapatkan domain yang berfungsi ini, server harus menetapkan header allow-origin dalam responsnya.

47
11 дек. Jawabannya diberikan oleh heinob 11 Des. 2013-12-11 14:54 '13 pada 14:54 2013-12-11 14:54

Saya baru saja menulis kode javascript ini (menggunakan prototipe untuk memanipulasi DOM ):

 var require = (function() { var _required = {}; return (function(url, callback) { if (typeof url == 'object') { // We've (hopefully) got an array: time to chain! if (url.length > 1) { // Load the nth file as soon as everything up to the // n-1th one is done. require(url.slice(0, url.length - 1), function() { require(url[url.length - 1], callback); }); } else if (url.length == 1) { require(url[0], callback); } return; } if (typeof _required[url] == 'undefined') { // Haven't loaded this URL yet; gogogo! _required[url] = []; var script = new Element('script', { src: url, type: 'text/javascript' }); script.observe('load', function() { console.log("script " + url + " loaded."); _required[url].each(function(cb) { cb.call(); // TODO: does this execute in the right context? }); _required[url] = true; }); $$('head')[0].insert(script); } else if (typeof _required[url] == 'boolean') { // We already loaded the thing, so go ahead. if (callback) { callback.call(); } return; } if (callback) { _required[url].push(callback); } }); })(); 

Gunakan:

 <script src="prototype.js"></script> <script src="require.js"></script> <script> require(['foo.js','bar.js'], function () {  }); </script> 

Intinya: http://gist.github.com/284442 .

43
23 янв. jawab diberikan nornagon 23 Jan 2010-01-23 08:20 '10 pada 8:20 2010-01-23 08:20

Berikut adalah versi umum tentang bagaimana Facebook melakukan ini untuk tombol Suka yang ada di mana-mana:

http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/ . 

36
08 июля '15 в 5:41 2015-07-08 05:41 jawabannya diberikan Dan Dascalescu 08 Juli '15 di 5:41 2015-07-08 05:41

Jika Anda ingin javascript murni, Anda dapat menggunakan document.write .

 document.write('<script src="myscript.js" type="text/javascript"></script>'); 

Jika Anda menggunakan perpustakaan jQuery, Anda dapat menggunakan metode $.getScript .

 $.getScript("another_script.js"); 
30
13 нояб. Jawabannya diberikan oleh Venu immadi 13 November. 2013-11-13 12:18 '13 pada 12:18 2013-11-13 12:18

Ini mungkin kelemahan terbesar JavaScript menurut saya. Selama bertahun-tahun, saya tidak punya masalah melacak ketergantungan. Dalam kasus apa pun, tampaknya satu-satunya solusi praktis adalah dengan menggunakan skrip yang disertakan dalam file HTML, dan karenanya sangat mengerikan untuk membuat kode JavaScript Anda bergantung pada pengguna, termasuk sumber yang Anda butuhkan, dan membuatnya digunakan kembali secara tidak ramah.

Maaf jika ini kedengarannya seperti ceramah;) Ini adalah kebiasaan (buruk) saya, tetapi saya ingin menekankan ini.

Masalahnya kembali ke semua hal lain di web, ke riwayat javascript. Itu benar-benar tidak dirancang untuk digunakan dalam penyebaran yang digunakan saat ini. Netscape menciptakan bahasa yang memungkinkan Anda mengelola beberapa hal, tetapi mereka tidak menganggap penggunaannya secara luas untuk banyak hal, seperti yang biasa terjadi sekarang, dan karena satu dan lain alasan ia berkembang dari sana, tanpa memengaruhi beberapa kelemahan mendasar dari strategi asli.

Ini bukan satu, tentu saja. HTML tidak dirancang untuk halaman web modern; itu dirancang untuk mengekspresikan logika dokumen, sehingga pembaca (browser di dunia modern) dapat menampilkannya dalam bentuk yang sesuai yang berada dalam kemampuan sistem, dan butuh bertahun-tahun untuk menyelesaikannya (selain meretas MS dan Netscape). CSS memecahkan masalah ini, tetapi sudah lama dan bahkan lebih lama untuk membuat orang menggunakannya, daripada metode BAD yang sudah ada. Itu terjadi, pujian.

Kami berharap bahwa JavaScript (terutama sekarang ini adalah bagian dari standar) akan dikembangkan untuk menerima konsep modularitas yang benar (serta beberapa hal lainnya), seperti bahasa pemrograman lain (yang ada) di dunia, dan omong kosong ini akan hi>

30
24 мая '12 в 12:51 2012-05-24 12:51 Jawaban diberikan oleh Stephen Whipp pada 24 Mei 12 pada 12:51 2012-05-24 12:51

Sebagian besar solusi yang disajikan di sini mengasumsikan pemuatan dinamis. Sebagai gantinya, saya mencari kompiler yang mengumpulkan semua file dependen menjadi satu file output. Sama seperti @import Less / Sass @import dengan aturan CSS @import . Karena saya tidak menemukan sesuatu yang layak seperti itu, saya menulis alat sederhana untuk menyelesaikan masalah.

Jadi, inilah kompiler https://github.com/dsheiko/jsic , yang andal menggantikan $import("file-path") konten file yang diminta. Berikut ini adalah plugin Grunt yang sesuai: https://github.com/dsheiko/grunt-jsic .

Di utas jQuery utama, mereka hanya menggabungkan file sumber atom menjadi satu, dimulai dengan intro.js dan berakhir dengan outtro.js . Ini tidak cocok untuk saya, karena tidak memberikan fleksibilitas dalam mengembangkan kode sumber. Lihat cara kerjanya dengan JSIC:

Src / main.js

 var foo = $import("./Form/Input/Tel"); 

SRC / Form / login /Tel.js

 function() { return { prop: "", method: function(){} } } 

Sekarang kita dapat menjalankan kompiler:

 node jsic.js src/main.js build/mail.js 

Dan dapatkan file yang digabungkan

build /main.js

 var foo = function() { return { prop: "", method: function(){} } }; 
24
14 июля '13 в 0:44 2013-07-14 00:44 jawabannya diberikan oleh Dmitry Sheiko 14 Juli '13 pada 0:44 2013-07-14 00:44

Anda juga dapat membuat skrip menggunakan PHP :

File main.js.php :

 <?php header('Content-type:text/javascript; charset=utf-8'); include_once("foo.js.php"); include_once("bar.js.php"); ?> // Main JavaScript code goes here 
24
28 дек. Jawaban diberikan oleh Calmarius 28 Des. 2010-12-28 00:03 '11 pada 0:03 2010-12-28 00:03

Jika niat Anda untuk mengunggah file JavaScript menggunakan fungsi dari file yang diimpor / disertakan , Anda juga dapat menentukan objek global dan mengatur fungsi sebagai elemen objek. Sebagai contoh:

global.js

 A = {}; 

file1.js

 A.func1 = function() { console.log("func1"); } 

file2.js

 A.func2 = function() { console.log("func2"); } 

main.js

 A.func1(); A.func2(); 

Anda hanya perlu berhati-hati saat memasukkan skrip ke dalam file HTML. Urutannya harus seperti yang ditunjukkan di bawah ini:

 <head> <script type="text/javascript" src="global.js"></script> <script type="text/javascript" src="file1.js"></script> <script type="text/javascript" src="file2.js"></script> <script type="text/javascript" src="main.js"></script> </head> 
20
24 июля '15 в 9:53 2015-07-24 09:53 jawabannya diberikan oleh Adem İlhan 24 Juli, '15 pukul 9:53 2015-07-24 09:53

Ini harus dilakukan:

 xhr = new XMLHttpRequest(); xhr.open("GET", "/soap/ajax/11.0/connection.js", false); xhr.send(); eval(xhr.responseText); 
18
24 марта '13 в 22:32 2013-03-24 22:32 jawabannya diberikan tggagne 24 Maret '13 pada 10:32 2013-03-24 22:32

Atau alih-alih menyalakannya saat runtime, gunakan skrip untuk menggabungkan sebelum memuat.

Saya menggunakan tanda bintang (saya tidak tahu apakah ada orang lain). Anda membuat kode JavaScript dalam file yang terpisah dan memasukkan komentar yang diproses oleh mekanisme Sprocket, seperti yang disertakan. Untuk pengembangan, Anda dapat memasukkan file secara berurutan, dan kemudian untuk produksi, untuk menggabungkannya ...

Lihat juga:

17
07 июня '12 в 23:48 2012-06-07 23:48 jawabannya diberikan oleh JMawer pada 07 Juni '12 pada 23:48 2012-06-07 23:48

Jika Anda menggunakan Pekerja Web dan ingin menyertakan skrip tambahan di area karyawan, jawaban lain tentang menambahkan skrip ke tag head , dll. Tidak akan bekerja untukmu

Untungnya, Pekerja Web memiliki fungsi importScripts sendiri yang merupakan fungsi global di area Pekerja Web, yang tertanam di browser itu sendiri, karena merupakan bagian dari spesifikasi .

Selain itu, sebagai jawaban dengan peringkat kedua tertinggi untuk pertanyaan Anda , RequireJS juga dapat menangani penyertaan skrip dalam Pekerja Web (mungkin importScripts itu sendiri, tetapi dengan beberapa fitur bermanfaat lainnya).

14
01 янв. Jawaban diberikan oleh Turnerj 01 Jan 2015-01-01 11:58 '15 pada 11:58 2015-01-01 11:58