Paano isama ang javascript file sa ibang javascript file?

Ang JavaScript ba ay may katulad na katulad sa @import sa CSS na nagbibigay-daan sa iyo upang isama ang isang javascript file sa ibang javascript file?

4465
04 июня '09 в 14:59 2009-06-04 14:59 Alec Smart ay naka-set para sa Hunyo 4, '09 at 14:59 2009-06-04 14:59
@ 56 sagot
  • 1
  • 2

Sa mas lumang mga bersyon ng JavaScript, wa>

Ngunit mula noong 2015 (ES6), ang pamantayan ng ES6 modules para sa pag-import ng mga module sa Node.js ay lumitaw sa JavaScript, na sinusuportahan din ng karamihan sa mga modernong browser .

Para sa pagiging tugma sa mas lumang mga browser, maaari mong gamitin ang mga build at / o mga tool sa paglipat .

ES6 Modules

Ang mga module ng ECMAScript (ES6) ay sinusuportahan sa Node.js dahil ang bersyon - mga --experimental-modules bandila - mga --experimental-modules . Ang lahat ng mga .mjs file ay dapat may extension na .mjs .

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

ECMAScript modules sa mga browser

Sinusuportahan ng mga browser ang paglo-load ng mga module ng ECMAScript nang direkta (wa>nagsisimula sa Safari 10.1, Chrome 61, Firefox 60 at Edge 16. Tingnan ang kasalukuyang suporta sa caniuse .

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

Matuto nang higit pa sa https://jakearchibald.com/2017/es-modules-in-browsers/

Dynamic na pag-import sa mga browser

Pinapayagan ng dynamic na pag-import ang script na mag-load ng iba pang mga script kung kinakai>

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

Kinakai>

Ang lumang estilo ng estilo ng pag-import, na malawakang ginagamit sa Node.js, ay ang module.exports / nangangai> .

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

May iba pang mga paraan upang paganahin ang panlabas na nilalaman ng JavaScript sa mga browser na hindi nangangai>

AJAX Download

Maaari kang mag-load ng karagdagang script gamit ang isang tawag sa AJAX, at pagkatapos ay gamitin ang eval upang patakbuhin ito. Ito ang pinakamadaling paraan, ngunit limitado ito sa iyong domain dahil sa JavaScript sandbox security model. Ang paggamit ng eval ay nagbubukas rin ng paraan sa mga bug, pag-hack at mga isyu sa seguridad.

I-download ang Download

Tulad ng mga dynamic na import, maaari mong i-load ang isa o higit pang mga script sa pamamagitan ng pagtawag sa fetch pangako upang makontrol ang pagkakasunud-sunod kung saan ang mga dependency ng script ay tumatakbo gamit ang Fetch Inject library:

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

Pag-load ng JQuery

Nagbibigay ang jQuery library ng pag - load ng single-line :

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

Ang function na ito ay magdaragdag ng isang bagong <script> sa dulo ng seksyon ng ulo ng pahina, kung saan ang katangian ng src ay naka-set sa URL, na ipinapasa sa function bi>

Ang parehong mga solusyon ay tinalakay at inilarawan sa JavaScript Madness: dynamic script loading .

Deteksiyon kapag isinagawa ang script

Ngayon ay may isang malaking problema dapat mong malaman. Nangangahulugan ito na iyong i-download ang code nang malayuan. Ang mga modernong web browser ay nag-load ng file at patuloy na isasagawa ang iyong kasalukuyang script, dahil ini-load nila ang lahat ng bagay nang wa>

Nangangahulugan ito na kung ginamit mo nang direkta ang mga trick na ito, hindi mo magagawang gamitin ang iyong bagong nai-download na code sa susunod na linya pagkatapos mong hilingin na i-download ito, dahil ito ay mai-load pa rin.

Halimbawa: my_lovely_script.js naglalaman ng MySuperObject :

Pagkatapos ay isulat mo ang code na nais mong gamitin PAGKATAPOS ang script ay ikinarga sa pag- andar ng lambda :

 loadScript("my_lovely_script.js", myPrettyCode); 

Tandaan na maisasakatuparan ang script pagkatapos ma-load ang DOM o mas maaga, depende sa browser at sa kung script.async = false; ang script.async = false; line script.async = false; May isang mahusay na artikulo sa pag-download ng Javascript sa pangkalahatan, na tinatalakay ito.

Pinagsama ang code ng pinagmulan / preprocessing

Tulad ng nabanggit sa itaas ng sagot na ito, maraming mga developer ang gumagamit ng build / transfer tools sa kani>

3838
04 июня '09 в 15:13 2009-06-04 15:13 ang sagot ay ibinigay e-satis 04 Hunyo '09 sa 15:13 2009-06-04 15:13

Kung ang isang tao ay naghahanap ng isang bagay na mas advanced, subukan RequireJS . Makakakuha ka ng karagdagang mga benepisyo tulad ng pamamahala ng dependency, pinabuting concurrency at pag-iwas sa pagkopya (ibig sabihin, nakakakuha ng script nang higit sa isang beses).

Maaari mong isulat ang iyong mga file sa JavaScript sa "mga module" at pagkatapos ay sumangguni sa mga ito bi>

Halimbawa:

Tukuyin ang mga dependency bi>

some-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 ay ang iyong "pangunahing" javascript na file, na depende sa some-dependency.js

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

Sipi mula sa GitHub README:

Ang mga kinakai>

Ginagamit ng RequireJS ang mga simpleng tag ng script upang i-load ang mga module / file, kaya dapat itong magbigay ng madaling pag-debug. Maaari itong magamit upang i-load ang mga umiiral na mga file ng JavaScript, kaya maaari mo itong idagdag sa isang umiiral na proyekto nang hindi na muling isulat ang mga file ng JavaScript.

...

532
07 июня '12 в 23:55 2012-06-07 23:55 Ang sagot ay ibinigay ni John Strickler noong Hunyo 07 '12 sa 23:55 2012-06-07 23:55

Sa katunayan, mayroong isang paraan upang i-download ang isang javascript file na hindi asynchronously, kaya maaari mong gamitin ang mga function na kasama sa iyong bagong na-upload na file kaagad pagkatapos ng pag-download, at sa palagay ko ito ay gumagana sa lahat ng mga browser.

Kai>jQuery.append() sa elemento ng <head> ng iyong pahina, iyon ay:

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

Gayunpaman, ang paraan na ito ay mayroon ding problema: kung ang isang error ay nangyayari sa na-import na file ng JavaScript, ang Firebug (gayundin ang Firefox Error Console at Chrome Developer Tools ay mag-ulat din ng kani>HTML at magkakaroon ka ng mga problema sa paghahanap ng tunay na sanhi ng error.

Ngunit kung ito ay hindi isang problema para sa iyo, pagkatapos ay ang paraan na ito ay dapat gumana.

Sa katunayan, sumulat ako ng isang jQuery plugin na tinatawag na $ .import_js () na gumagamit ng pamamaraang ito:

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

Samakatuwid, ang kai>

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

Gumawa din ako ng isang simpleng pagsubok para dito sa Halimbawa .

Kabi>main.js file sa pangunahing HTML, at pagkatapos ay ang script sa main.js gumagamit ng $.import_js() upang mag-import ng isang karagdagang file na tinatawag na included.js , na tumutukoy sa function na ito:

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

At kaagad pagkatapos isama ang included.js , ang hello() function ay tinatawag na at makakatanggap ka ng isang abiso.

(Ang sagot na ito ay isang sagot sa komento ng e-sat).

173
28 апр. Sumagot Kipras 28 apr. 2011-04-28 18:25 '11 sa 18:25 2011-04-28 18:25

Ang isa pang paraan na, sa palagay ko, ay mas malinis, ay upang makagawa ng kasabay na kahilingan ng Ajax sa halip ng paggamit ng <script> . Bi>Node.js.

Narito ang isang halimbawa ng paggamit ng 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); } }); } 

Pagkatapos ay maaari mo itong gamitin sa iyong code, tulad ng karaniwan mong ginagamit kasama ang:

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

At maaari mong tawagan ang pag-andar mula sa kinakai>

 subscript.doSomethingCool(); 
138
08 сент. Ang sagot ay ibinigay ni Ariel Sep 08 2011-09-08 21:22 '11 sa 21:22 2011-09-08 21:22

Magandang balita para sa iyo. Sa lalong madaling panahon magagawa mong madaling i-load ang JavaScript code. Ito ang magiging karaniwang paraan upang mag-import ng mga module ng JavaScript code at maging bahagi ng core ng JavaScript mismo.

Kai>import cond from 'cond.js'; load ang macro na pinangalanang cond mula sa cond.js file

Kaya, hindi mo kai>Ajax .

Sumangguni sa:

90
03 июля '12 в 16:32 2012-07-03 16:32 ang sagot ay ibinigay Imdad Hulyo 03 '12 sa 4:32 2012-07-03 16:32

Maaari mong dynamic na bumuo ng isang JavaScript na tag at idagdag ito sa isang HTML na dokumento mula sa iba pang JavaScript code. I-load nito ang target javascript file.

 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 sumagot sa Svitlana Maksymchuk sa Hunyo 4, 2009 sa 15:02 2009-06-04 15:02

import operator sa ECMAScript 6.

Syntax

 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 апр. Sumagot na ibinigay ni draupnie noong Abril 17 2015-04-17 04:56 '15 sa 4:56 2015-04-17 04:56

Siguro maaari mong gamitin ang function na ito na nakita ko sa pahinang ito. Paano ko isasama ang isang javascript file sa isang javascript file? :

 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 Ang sagot ay ibinigay sa pamamagitan ng Arnaud Gouder de Beauregard Hunyo 4, 2009

Narito ang kasabay na bersyon nang wa> :

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

Tandaan na upang makuha ang nagtatrabaho na domain na ito, ang server ay magkakaroon upang magtakda ng isang allow-origin header sa tugon nito.

47
11 дек. Ang sagot ay ibinigay ng heinob 11 Disyembre. 2013-12-11 14:54 '13 sa 14:54 2013-12-11 14:54

Isinulat ko >prototype upang mamanipula ang 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); } }); })(); 

Gamitin ang:

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

Ang ilalim na linya: http://gist.github.com/284442 .

43
23 янв. reply given nornagon Jan 23 2010-01-23 08:20 '10 sa 8:20 2010-01-23 08:20

Narito ang isang pangkalahatan na bersyon kung paano ginagawa ito ng Facebook para sa kani>

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

36
08 июля '15 в 5:41 2015-07-08 05:41 ang sagot ay ibinigay Dan Dascalescu Hulyo 08 '15 sa 5:41 2015-07-08 05:41

Kung gusto mong purong javascript, maaari mong gamitin ang document.write .

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

Kung gagamitin mo ang jQuery library, maaari mong gamitin ang $.getScript paraan.

 $.getScript("another_script.js"); 
30
13 нояб. Ang sagot ay ibinigay ng Venu immadi Nobyembre 13. 2013-11-13 12:18 '13 sa 12:18 2013-11-13 12:18

Ito ay marahil ang pinakamalaking kahinaan ng JavaScript sa aking opinyon. Sa paglipas ng mga taon, wala akong problema sa mga dependency sa pagsubaybay. Sa anumang kaso, tila ang tanging praktikal na solusyon ay ang paggamit ng script na kasama sa HTML file, at sa gayon ito ay kahila-hilakbot na gawin ang iyong JavaScript code na nakasalalay sa gumagamit, kabi>

Paumanhin kung ito ay parang isang panayam;) Ito ang aking (masamang) ugali, ngunit nais kong bigyang-diin ito.

Ang problema ay bumalik sa lahat ng bagay sa web, sa kasaysayan ng javascript. Ito ay talagang hindi idinisenyo upang gamitin sa kalat na ginagamit ito ngayon. Netscape ay lumikha ng isang wika na magpapahintulot sa iyo na pamahalaan ang i>

Ito ay hindi isa, siyempre. Ang HTML ay hindi idinisenyo para sa isang modernong web page; ito ay dinisenyo upang ipahayag ang lohika ng dokumento, upang ang mga mambabasa (mga browser sa modernong mundo) ay maipakita ito sa isang naaangkop na form na nasa loob ng mga kakayahan ng system, at umabot ng mga taon upang malutas (maliban sa pag-hack ng MS at Netscape). Malulutas ng CSS ang problemang ito, ngunit ito ay isang mahabang panahon at mas matanda pa upang makakuha ng mga tao na gamitin ito, kaysa sa itinatag na mga pamamaraan ng BAD. Nangyari ito, papuri.

Inaasahan namin na JavaScript (lalo na ngayon ito ay bahagi ng pamantayan) ay bubuuin upang tanggapin ang konsepto ng tamang modularity (pati na rin ang i>

30
24 мая '12 в 12:51 2012-05-24 12:51 Ang sagot ay ibinigay ni Stephen Whipp noong Mayo 24 '12 sa 12:51 2012-05-24 12:51

Karamihan sa mga solusyon na ipinakita dito ay ipinapalagay na dynamic loading. Sa halip, ako ay naghahanap ng isang tagatala na nangongolekta ng lahat ng mga nakasalalay na file sa isang output file. Tulad ng Less / Sass @import sa CSS @import rule. Dahil wala akong nakitang anumang disente tulad nito, sumulat ako ng isang simpleng kasangkapan para sa paglutas ng problema.

Kaya, narito ang https://github.com/dsheiko/jsic compiler, na mapagkakatiwalaan pumapalit sa $import("file-path") hiniling na mga nilalaman ng file. Narito ang naaangkop na plugin ng Grunt : https://github.com/dsheiko/grunt-jsic .

Sa pangunahing thread ng jQuery, intro.js lamang sila ng mga atomic source file sa isa, simula sa intro.js at nagtatapos sa outtro.js . Hindi ito angkop sa akin, dahil hindi ito nagbibigay ng kakayahang umangkop sa pagbuo ng source code. Tingnan kung paano ito gumagana sa JSIC:

Src / main.js

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

SRC / Form / login /Tel.js

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

Ngayon ay maaari naming patakbuhin ang compiler:

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

At makuha ang pinagsama na file

magtayo /main.js

 var foo = function() { return { prop: "", method: function(){} } }; 
24
14 июля '13 в 0:44 2013-07-14 00:44 ang sagot ay ibinigay ni Dmitry Sheiko Hulyo 14, '13 sa 0:44 2013-07-14 00:44

Maaari mo ring buuin ang iyong mga script gamit ang 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 дек. Ang sagot ay ibinigay ni Calmarius Disyembre 28. 2010-12-28 00:03 '11 sa 0:03 2010-12-28 00:03

Kung ang iyong intensyon na mag-upload ng JavaScript file ay gumagamit ng mga pag-andar mula sa na-import / kasama na file , maaari mo ring tukuyin ang isang pandaigdigang bagay at itakda ang mga function bi>

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

Kai>

 <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 ang sagot ay ibinigay sa pamamagitan ng Adem İlhan Hulyo 24, '15 sa 9:53 2015-07-24 09:53

Dapat itong gawin:

 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 ang sagot ay ibinigay tggagne Marso 24, '13 sa 10:32 2013-03-24 22:32

O sa halip na i-on ito sa runtime, gumamit ng isang script upang magsama bago i-load.

Gumagamit ako ng mga Asterisk (hindi ko alam kung may iba pa). Itinayo mo ang iyong JavaScript code sa hiwalay na mga file at isama ang mga komento na naproseso ng mekanismo ng Sprockets, tulad ng mga kasama. Para sa pag-unlad, maaari mong isama ang mga file nang sunud-sunod, at pagkatapos ay para sa produksyon, upang pagsamahin ang mga ito ...

Tingnan din ang:

17
07 июня '12 в 23:48 2012-06-07 23:48 ang sagot ay ibinigay ni JMawer noong Hunyo 07 '12 sa 23:48 2012-06-07 23:48

Kung gumagamit ka ng mga Web Worker at gusto mong isama ang mga karagdagang script sa lugar ng empleyado, iba pang mga sagot tungkol sa pagdaragdag ng mga script sa tag ng head , atbp. Hindi gagana para sa iyo.

Sa kabutihang palad, ang Web Worker ay may sariling importScripts andar ng importScripts na isang pandaigdigang function sa lugar ng Web Worker, na naka-embed sa browser mismo, dahil ito ay bahagi ng detalye .

Bi>bi> rate na sagot sa iyong tanong , maaari ring hawakan ng RequireJS ang pagsasama ng mga script sa loob ng Web Worker (marahil ang pagtawag ng importScripts mismo, ngunit may i>

14
01 янв. Ang sagot ay ibinigay ng Turnerj Jan 01 2015-01-01 11:58 '15 sa 11:58 2015-01-01 11:58

Mayroon akong simpleng problema, ngunit ako ay nalilito sa mga sagot sa tanong na ito.

Kinai>