Javascript dosyası başka bir javascript dosyasına nasıl dahil edilir?

JavaScript’in @import benzer bir özelliği var mı, bir javascript dosyasını başka bir javascript dosyasına eklemenize izin veriyor mu?

4465
04 июня '09 в 14:59 2009-06-04 14:59 Alec Smart , 04: 09’a, 14:59 'de ayarlandı 2009-06-04 14:59
@ 56 cevaplar
  • 1
  • 2

JavaScript'in eski sürümlerinde, içe aktarma, ekleme veya gereksinim yoktu, bu soruna çok farklı yaklaşımlar geliştirildi.

Ancak, 2015'ten beri (ES6), Node.js'e modülleri içe aktarmak için kullanılan ES6 modüllerinin standardı, çoğu modern tarayıcı tarafından da desteklenen JavaScript'te ortaya çıkmıştır.

Eski tarayıcılarla uyumluluk için, derleme ve / veya aktarma araçlarını kullanabilirsiniz.

ES6 Modülleri

ECMAScript (ES6) modülleri Node.js'de desteklenmektedir - sürümüyle bayrak --experimental-modules - --experimental-modules . .mjs tüm dosyalar .mjs uzantısına sahip olmalıdır.

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

Tarayıcılarda ECMAScript modülleri

Tarayıcılar , Safari 10.1, Chrome 61, Firefox 60 ve Edge 16'dan başlayarak doğrudan ECMAScript modüllerinin yüklenmesini destekler (Webpack gibi bir araç gerekmez).

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

Https://jakearchibald.com/2017/es-modules-in-browsers/ adresinde daha fazla bilgi alabilirsiniz.

Tarayıcılarda dinamik içe aktarma

Dinamik içe aktarma, komut dosyasının gerektiği gibi diğer komut dosyalarını da yüklemesini sağlar:

Https://developers.google.com/web/updates/2017/11/dynamic-import adresinde daha fazla bilgi bulabilirsiniz . 

Node.js gerektirir

Hala yaygın olarak Node.js'de kullanılan eski modül içe aktarma stili, module.exports / needs sistemidir .

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

Ön işleme gerektirmeyen tarayıcılarda JavaScript dış içeriğini etkinleştirmenin başka yolları da vardır.

AJAX İndir

Bir AJAX çağrısı kullanarak ek bir komut dosyası yükleyebilir ve sonra onu çalıştırmak için eval kullanabilirsiniz. Bu en kolay yoldur, ancak JavaScript sanal alan güvenlik modeli nedeniyle etki alanınızla sınırlıdır. eval kullanmak ayrıca hatalara, bilgisayar korsanlığına ve güvenlik sorunlarına yol açar.

İndir İndir

Dinamik içe aktarma işlemlerinde olduğu gibi, bir veya daha fazla komut dosyasını Fetch Inject kitaplığını kullanarak komut dosyası bağımlılıklarının hangi sırayla çalıştığını kontrol etmek için sözler kullanarak fetch'i çağırın :

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

JQuery yükleme

JQuery kütüphanesi, tek satırlı yükleme sağlar:

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

Bu işlev, sayfanın baş kısmının sonuna, src niteliğinin URL'ye ayarlandığı ve ilk parametre olarak işleve iletilen URL'ye eklenir.

Bu çözümlerin her ikisi de JavaScript Madness'da tartışılmış ve gösterilmiştir : dinamik komut dosyası yükleme .

Komut dosyasının yürütüldüğü zaman algılama

Şimdi bilmeniz gereken büyük bir sorun var. Bu, kodu uzaktan indirdiğiniz anlamına gelir. Modern web tarayıcıları dosyayı yükler ve mevcut betiğinizi çalıştırmaya devam eder, çünkü performansı geliştirmek için her şeyi zaman uyumsuz olarak yüklerler. (Bu hem jQuery yöntemi hem de manuel dinamik komut dosyası yükleme yöntemi için geçerlidir.)

Bu, eğer bu hileleri doğrudan kullanırsanız, indirdiğiniz sorulduktan sonra yeni indirilen kodunuzu bir sonraki satırda kullanamayacağınız anlamına gelir, çünkü hala yüklenecektir.

Örneğin: my_lovely_script.js içerir:

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

Sonra senaryonun lambda fonksiyonuna yüklenmesinden SONRA kullanmak istediğiniz kodu yazarsınız:

 loadScript("my_lovely_script.js", myPrettyCode); 

Komut dosyasının, tarayıcıya bağlı olarak ve script.async = false; satırının etkin olup olmadığına bağlı olarak DOM yüklendikten sonra veya daha önce çalıştırılabileceğini unutmayın script.async = false; Genel olarak Javascript'i indirmeye yönelik, bu konuyu tartışan harika bir makale var .

Kaynak kodu birleştirme / ön işleme

Bu cevabın başında da belirtildiği gibi, birçok geliştirici, Parsel, Webpack veya Babel gibi projelerinde derleme / aktarma araçlarını kullanmaktadır; bu, yaklaşan JavaScript sözdizimini kullanmalarına, eski tarayıcılar için geriye dönük uyumluluk sağlamalarına, dosyaları birleştirmelerine, kodları küçültmelerine, bölünmelerine izin verme ve benzeri

3838
04 июня '09 в 15:13 2009-06-04 15:13 Cevap e-satis 04 Haziran '09' de 15:13 de yapıldı 2009-06-04 15:13

Birisi daha gelişmiş bir şey arıyorsa, RequireJS'i deneyin. Bağımlılık yönetimi, gelişmiş eşzamanlılık ve yinelemeden kaçınma gibi ek avantajlar elde edersiniz (yani betiği birden fazla kez almak).

JavaScript dosyalarınızı "modüllere" yazabilir ve ardından diğer komut dosyalarındaki bağımlılıklar olarak başvurabilirsiniz. Veya RequireJS'i basit bir "git ve bu betiği al" çözümü olarak kullanabilirsiniz.

örnek:

Bağımlılıkları modüller olarak tanımlayın:

Bazı-dependency.js

border=0
 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 " bazı" bağımlılık dosyalarına dayanan "ana" javascript dosyanızdır.

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

GitHub README'den bir alıntı:

RequireJS, basit JavaScript dosyalarını ve daha belirli modülleri yükler. Web Çalışanı dahil tarayıcıda kullanım için optimize edilmiştir, ancak Rhino ve Node gibi diğer JavaScript ortamlarında da kullanılabilir. Asenkron modül API'sini uygular.

RequireJS, modülleri / dosyaları yüklemek için basit script etiketleri kullanır, bu yüzden kolay hata ayıklama sağlamalıdır. Yalnızca mevcut JavaScript dosyalarını yüklemek için kullanılabilir, böylece JavaScript dosyalarını yeniden yazmak zorunda kalmadan mevcut bir projeye ekleyebilirsiniz.

...

532
07 июня '12 в 23:55 2012-06-07 23:55 Cevap John Strickler tarafından 07 Haziran 12'de 23:55 2012-06-07 23:55 tarihinde verilmiştir.

Aslında, bir javascript dosyasını eşzamansız olarak indirmenin bir yolu vardır, bu nedenle indirme işleminden hemen sonra yeni yüklenen dosyanızda bulunan işlevleri kullanabilirsiniz ve tüm tarayıcılarda çalıştığını düşünüyorum.

jQuery.append() <head> öğesinde jQuery.append() kullanmanız gerekir, yani:

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

Ancak, bu yöntemin de sorunu var: Alınan JavaScript dosyasında bir hata oluşursa, Firebug (yanı sıra Firefox Hata Konsolu ve Chrome Geliştirici Araçları da konumlarını hatalı olarak bildirir; bu, JavaScript hatalarını çok fazla izlemek için Firebug kullanıyorsanız büyük bir sorundur. Bazı nedenlerden dolayı, Firebug kısa süre önce yüklenen dosyayı bilmez, bu nedenle bu dosyada bir hata oluşursa, ana HTML dosyanızda olduğunu bildirir ve hatanın asıl nedenini bulmakta sorun yaşayacağınızı bildirir.

Fakat bu sizin için bir sorun değilse, o zaman bu yöntem işe yaramalı.

Aslında, bu yöntemi kullanan $ .import_js () adlı bir jQuery eklentisi yazdım:

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

Bu nedenle, JavaScript'i içe aktarmak için yapmanız gereken tek şey:

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

Ayrıca bunun için Örnek'te basit bir test yaptım.

Ana HTML'deki main.js dosyasını içerir ve daha sonra main.js komut dosyası, bu işlevi tanımlayan ilave bir dosyayı içe aktarmak için $.import_js() işlevini kullanır:

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

İnclude.js'yi ekledikten hemen sonra, hello() işlevi çağrılır ve bir bildirim alırsınız.

(Bu cevap e-sat yorumuna bir cevaptır).

173
28 апр. Cevap Kipras 28 nis. 2011-04-28 18:25 '11 18:25 2011-04-28 18:25

Benim görüşüme göre, daha temiz bir başka yol, <script> kullanmak yerine senkronize bir Ajax isteği yapmaktır. Ayrıca, Node.js.'yi işler.

JQuery kullanmanın bir örneği:

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

Ardından, kodunuzu kullanın, genellikle şunları içeriyormuşsunuz gibi kullanın:

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

Ve aşağıdaki satırda gerekli betişten fonksiyonu çağırabilirsiniz:

 subscript.doSomethingCool(); 
138
08 сент. Cevap Ariel 08 Eylül tarafından verildi 2011-09-08 21:22 '11 21:22 2011-09-08 21:22

Senin için iyi haber. Çok yakında, kolayca JavaScript kodunu yükleyebileceksiniz. Bu, JavaScript kod modüllerini içe aktarmanın standart yolu ve JavaScript çekirdeğinin kendisinin bir parçası haline gelecektir.

Siz sadece import cond from 'cond.js'; cond adlı dosyayı cond.js dosyasından cond.js

Bu nedenle, herhangi bir JavaScript altyapısına güvenmeniz ve açıkça Ajax aramaları yapmanız gerekmez.

Bakınız:

90
03 июля '12 в 16:32 2012-07-03 16:32 Cevap Imdad Temmuz 03 '12' de verilmiştir 4:32 2012-07-03 16:32

Dinamik olarak bir JavaScript etiketi oluşturabilir ve diğer JavaScript kodundan bir HTML belgesine ekleyebilirsiniz. Bu hedef javascript dosyasını yükleyecektir.

 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 Svitlana Maksymchuk'a 04.09 099 tarihinde 15:02 de yanıtladı 2009-06-04 15:02

ECMAScript 6'daki import operatörü.

sözdizimi

 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 апр. Tarafından verilen cevap draupnie tarafından Nis 17 2015-04-17 04:56 '15 4:56, 2015-04-17 04:56

Belki bu sayfada bulduğum bu fonksiyonu kullanabilirsiniz.Bir javascript dosyasına javascript dosyası nasıl eklerim? :

 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 Tarafından verilen cevap Arnaud Gouder de Beauregard 04 Haziran '09' te 15:04 2009-06-04 15:04

İşte jQuery olmadan senkronize versiyonu:

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

Bu çalışma etki alanını elde etmek için, sunucunun yanıtında allow-origin başlığı ayarlamak zorunda kalacağını unutmayın.

47
11 дек. Cevap Heinob tarafından 11 Aralık'ta verildi. 2013-12-11 14:54 '13, 14:54 2013-12-11 14:54

Ben sadece bu javascript kodunu yazdım ( DOM'u manipüle etmek için bir prototip kullanarak):

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

kullanın:

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

Alt satırda: http://gist.github.com/284442 .

43
23 янв. verilen cevap nornagon 23 Oca 2010-01-23 08:20 '10 8:20 2010-01-23 08:20

Facebook'un her yerde bulunan Beğen düğmesi için bunu nasıl yaptığının genelleştirilmiş bir sürümü:

36
08 июля '15 в 5:41 2015-07-08 05:41 Cevap Dan Dascalescu 08 '15 Temmuz 5:41' de verilmiştir 2015-07-08 05:41

Saf javascript istiyorsanız, document.write kullanabilirsiniz.

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

JQuery kütüphanesini kullanıyorsanız, $.getScript yöntemini kullanabilirsiniz.

 $.getScript("another_script.js"); 
30
13 нояб. Cevap Venu immadi 13 Kasım'da verildi . 2013-11-13 12:18 '13 12:18 2013-11-13 12:18

Bu muhtemelen bence JavaScript'in en büyük zayıflığı. Yıllar geçtikçe sorun izleme bağımlılığım olmadı. Her durumda, tek pratik çözüm HTML dosyasına dahil edilen betiği kullanmaktır ve bu nedenle JavaScript kodunuzu, ihtiyacınız olan kaynak da dahil olmak üzere kullanıcıya bağımlı hale getirmek ve onu yeniden dostça kullanmak korkunçtur.

Bu bir konferansa benziyorsa üzgünüm;) Bu benim (kötü) alışkanlığım, ama bunu vurgulamak istiyorum.

Sorun, web'deki diğer her şeye, javascript tarihine kadar geri döner. Gerçekten bugün kullandığı yaygın kullanım için tasarlanmamıştır. Netscape , birkaç şeyi yönetmenize izin verecek bir dil yarattı, ancak birçok şey için, şimdiki zamanki gibi ve bir nedenden ötürü, orijinal stratejinin bazı temel zayıflıklarını etkilemeden yaygın bir şekilde kullandığını varsaymadı.

Bu elbette değil. HTML, modern bir web sayfası için tasarlanmadı; Belgenin mantığını ifade etmek için tasarlandı, böylece okuyucular (modern dünyadaki tarayıcılar) sistemin yetenekleri dahilinde uygun bir biçimde gösterebildiler ve çözmesi yıllar aldı (MS ve Netscape’i hacklemekten başka). CSS bu sorunu çözer, ancak insanların BAD yöntemlerinden ziyade kullanmalarını sağlamak çok uzun zaman oldu ve hatta daha uzun sürdü. Oldu, övgü.

Umarız, JavaScript'in (özellikle şu anda standardın bir parçası olduğu), dünyadaki diğer (mevcut) programlama dilleri gibi doğru modülerlik kavramını (ve bazı diğer şeyleri) kabul etmek için geliştirileceğini umarız ve bu saçmalık ortadan kalkar. Siz aynen hoşlanıncaya kadar kabul etmeyinceye kadar, korkarım.

30
24 мая '12 в 12:51 2012-05-24 12:51 Cevap 24 Ocak'ta Stephen Whipp tarafından 12:51 2012-05-24 12:51 tarihinde verilir.

Burada sunulan çözümlerin çoğu, dinamik yüklemeyi üstlenir. Bunun yerine, tüm bağımlı dosyaları bir çıktı dosyasına toplayan bir derleyici arıyordum. Tıpkı CSS @import kuralına sahip Less / Sass @import gibi. Böyle iyi bir şey bulamadığım için bir problemi çözmek için basit bir araç yazdım.

Yani, burada https://github.com/dsheiko/jsic derleyici var; $import("file-path") istenen dosya içeriğiyle güvenilir bir şekilde yerini alıyor. İşte uygun Grunt eklentisi: https://github.com/dsheiko/grunt-jsic .

Ana jQuery iş parçacığında, atomik kaynak dosyalarını intro.js ile başlayan ve intro.js ile biten tek bir outtro.js . Bu bana uygun değil, çünkü kaynak kodunu geliştirmede esneklik sağlamıyor. JSIC ile nasıl çalıştığını inceleyin:

Src / main.js

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

SRC / Form / giriş /Tel.js

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

Şimdi derleyiciyi çalıştırabiliriz:

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

Ve birleştirilmiş dosyayı al

build /main.js

 var foo = function() { return { prop: "", method: function(){} } }; 
24
14 июля '13 в 0:44 2013-07-14 00:44 Cevap, Dmitry Sheiko tarafından 14 Temmuz ' 13'te 0:44 2013-07-14 00:44 tarihinde verilmiştir.

Komut dosyalarınızı PHP kullanarak da oluşturabilirsiniz:

main.js.php dosyası:

 <?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 дек. Cevap Calmarius 28 Dec. 2010-12-28 00:03 '11 0:03 2010-12-28 00:03

Bir JavaScript dosyası yükleme niyetiniz içe aktarılan / dahil edilen dosyadaki işlevleri kullanıyorsa , genel bir nesneyi tanımlayabilir ve işlevleri nesne öğeleri olarak ayarlayabilirsiniz. Örneğin:

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

Sadece HTML dosyasına komut dosyaları eklerken dikkatli olmanız gerekir. Sipariş aşağıda gösterildiği gibi olmalıdır:

 <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 Cevap, Adem İlhan tarafından 24 Temmuz, 15'te 9: 53'te 2015-07-24 09:53

Bu yapmalı:

 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 Cevap 24 Mart 1913’te tggagne’de verilmiş , 10:32 2013-03-24 22:32

Ya da çalışma zamanında açmak yerine, yüklemeden önce birleştirmek için bir komut dosyası kullanın.

Yıldız kullanıyorum (başkaları var mı bilmiyorum). JavaScript kodunuzu ayrı dosyalar halinde oluşturursunuz ve Sprockets mekanizması tarafından işlenen yorumları (dahil olanlar gibi) eklersiniz. Geliştirme için, sırayla ve ardından üretim için bunları birleştirmek için dosyaları dahil edebilirsiniz ...

Ayrıca bakınız:

17
07 июня '12 в 23:48 2012-06-07 23:48 Cevap JMawer tarafından 07 Haziran 12'de 23:48 2012-06-07 23:48 tarihinde verilmiştir.

Web İşçileri kullanıyorsanız ve çalışan alanına ek komut dosyaları eklemek istiyorsanız, head etiketine komut dosyası ekleme ile ilgili diğer yanıtlar, vb. Senin için işe yaramayacak.

Neyse ki, Web İşçileri, Web Çalışanı alanında, tarayıcının içine gömülü , belirtimin bir parçası olduğu için , küresel bir işlev olan kendi importScripts işlevine sahiptir.

Ek olarak, sorunuza en çok oy alan ikinci cevap olan RequireJS , Web Çalışanı içine komut dosyalarının dahil edilmesini de kullanabilir (muhtemelen arayan importScripts kendisi, ancak diğer birçok yararlı özellik ile).

14
01 янв. Cevap Turnerj tarafından Ocak 01 2015-01-01 11:58 '15 11:58, 2015-01-01 11:58

Basit bir problemim vardı, ama bu sorunun cevaplarından şaşırmıştım.