Javascript faylını başqa bir javascript faylına necə əlavə etmək olar?

JavaScript-də javascript faylını başqa bir javascript faylına daxil etməyə imkan verən CSS-də @import oxşar bir şey varmı?

4465
04 июня '09 в 14:59 2009-06-04 14:59 Alec Smart 04.06.2009 tarixində saat 14: 59-da təyin olunacaq
@ 56 cavab
  • 1
  • 2

JavaScript-nin köhnə versiyalarında idxal, əlavə etmə və ya tələb edilməmişdir, bu problemə bir çox müxtəlif yanaşmalar hazırlanmışdır.

Lakin 2015-ci ildən etibarən (ES6), Node.js modullarını idxal etmək üçün ES6 modulunun standartı JavaScript-də yaranıb, bu da ən müasir brauzerlər tərəfindən dəstəklənir.

Köhnə brauzerlər ilə uyğunluq üçün qurma və / və ya ötürmə vasitələrindən istifadə edə bilərsiniz.

ES6 Modulları

ECMAScript (ES6) modulları node.js-də versiya - --experimental-modules --experimental-modules dəstəklənir. Bütün .mjs fayllarda .mjs uzadılması .mjs .

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

Brauzerlərdə ECMAScript modulları

Brauzerlər , Safari 10.1, Chrome 61, Firefox 60 və Edge 16 ilə başlayan birbaşa ECMAScript modulunu yükləməyə kömək edir (Webpack kimi heç bir vasitə tələb olunmur). Caniuse- də mövcud dəstəyi yoxlayın.

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

Daha çox məlumat əldə edin https://jakearchibald.com/2017/es-modules-in-browsers/

Brauzerlərdə dinamik idxal

Dinamik idxal skriptə lazım olduqda digər skriptləri yükləməyə imkan verir:

Https://developers.google.com/web/updates/2017/11/dynamic-import ünvanından ətraflı oxuyun . 

Node.js tələb edir

Node.js-də geniş istifadə olunan köhnə modul idxal tərzi modul moduludur. Sistem tələb edir .

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

Öncədən işləmə tələb etməyən brauzerlərdə JavaScript xarici məzmunu təmin etmək üçün başqa yollar da var.

AJAX Yüklə

AJAX zəngindən istifadə edərək, əlavə bir skript yükləyə və sonra da bunu eval üçün istifadə edin. Bu, ən asan yoludur, ancaq JavaScript-nin sandbox təhlükəsizlik modeli səbəbiylə domeninizlə məhdudlaşır. eval istifadə də səhvlər, hack və təhlükəsizlik məsələlərinə yol açır.

Yüklə Yüklə

Dinamik idxallarla olduğu kimi, Fetch Inject kitabxanasını istifadə edərək, script bağımlılıklarının işlədilməsini əmr etmək üçün vədlərdən istifadə edərək, bir və ya bir neçə skript yükləyə bilərsiniz:

 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 loading

JQuery kitabxanası bir xətt yükləmə təmin edir:

 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 funksiya, src özniteliğinin ilk parametr kimi funksiyaya ötürülən URL- src təyin olduğu səhifənin baş hissəsinin sonuna yeni bir <script> əlavə edəcəkdir.

Bu həllərin hər ikisi də müzakirə olunur və JavaScript Madness ilə təsvir olunur : dinamik skript loading .

Ssenarinin icrası zamanı aşkarlanma

İndi bildiyiniz böyük bir problem var. Bu, kodu uzaqdan yüklədiyinizi bildirir. Müasir veb brauzerlər fayl yükləyir və mövcud scriptinizi yerinə yetirməyə davam edirlər, çünki onlar məhsuldarlığı artırmaq üçün hər şeyi asynchronously yükləyirlər. (Bu jQuery metodu və manual dinamik skript yükləmə üsulu üçün də tətbiq olunur.)

Bu deməkdir ki, əgər siz bu fəndləri birbaşa istifadə etsəniz, yükləməyiniz tələb olunduqdan sonra yeni yüklənmiş kodunuzu növbəti xəttdə istifadə edə bilməyəcəksiniz.

Məsələn: my_lovely_script.js 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); } 

Sonra istifadə etmək istədiyiniz kodu yazın script sonra lambda funksiyası yüklənir:

 loadScript("my_lovely_script.js", myPrettyCode); 

Qeyd edək ki, skript DOM yükləndikdən və ya əvvəllər brauzerdən asılı olaraq və script.async = false; xəttin aktiv olub-olmamasından asılı ola bilər script.async = false; Ümumiyyətlə, Javascriptin yüklənməsində böyük bir məqalə var və bunu müzakirə edir.

Kaynak kod birleştirme / önişleme

Bu cavabın yuxarı hissəsində qeyd edildiyi kimi, bir çox layihələndiricilər, gələcək JavaScript sintaksisindən istifadə etməyə, köhnə brauzerlər üçün geri uyğunluq təmin etməyə, faylları birləşdirməyə, minimuma endirməyə, bölüşdürməyə imkan verməyən Parcel, Webpack və ya Babel kimi layihələrdə qurma / transfer vasitələrini istifadə edir və s

3838
04 июня '09 в 15:13 2009-06-04 15:13 cavab 04 iyun '09 saat 15: 13 -da e-satılır. 2009-06-04 15:13

Biri daha qabaqcıl bir şey axtarırsa, tələbatını test edin. Əlilliyin idarə edilməsi, təkmilləşdirilmiş paralellik və təkrarlanmanı aradan qaldırmaq (yəni bir neçə dəfə skript almaq) kimi əlavə fayda əldə edəcəksiniz.

JavaScript fayllarınızı "modullara" yaza bilərsiniz və sonra onları digər skriptlərdə bağımlılıqlar kimi istinad edə bilərsiniz. Yoxsa, tələffüz etmək üçün, tələffüz etmək lazımdır.

Məsələn:

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

bəzi bağımlılık.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 sizin "əsas" javascript fayldır, bu da bəzi bağımlılıklara əsaslanır

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

GitHub README'dan alıntı:

RequireJS, sadə JavaScript faylları, həmçinin daha spesifik modulları yükləyir. Brauzerdə, Web Worker daxil olmaqla, istifadə üçün optimize edilmişdir, lakin Rhino və Node kimi digər JavaScript mühitlərdə istifadə edilə bilər. Asynchronous modul API tətbiq edir.

RequireJS modulları / faylları yükləmək üçün sadə komediya yazıları istifadə edir, belə ki, bu, asan ayıklama təmin etməlidir. Bu, mövcud JavaScript faylları yükləmək üçün sadəcə istifadə oluna bilər, belə ki, siz JavaScript fayllarını yenidən yazmamaqla mövcud bir layihəyə əlavə edə bilərsiniz.

...

532
07 июня '12 в 23:55 2012-06-07 23:55 Cavab John Strickler tərəfindən 07 İyun 2012 tarixində 23:55 'də verildi. 2012-06-07 23:55

Əslində, javascript faylını asynchronously yükləməyin bir yolu var, beləliklə yüklədikdən sonra dərhal yeni yüklənmiş dosyanıza daxil olan funksiyaları istifadə edə bilərsiniz və məncə, bu, bütün brauzerlərdə işləyir.

jQuery.append() <head> elemanına jQuery.append() istifadə etmək lazımdır, yəni:

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

Bununla yanaşı, bu metod da bir problem var: idxal JavaScript faylında bir səhv baş verərsə, Firebug (Firefox Error Console və Chrome Developer Tools kimi yanlış səhv hesabat verəcəkdir, əgər JavaScript-də səhvləri izləmək üçün Firebug istifadə etsəniz, Nədənsə, Firebug sadəcə yaxın zamanda yüklənmiş fayl haqqında məlumat vermir, belə ki, bu faylda bir səhv baş verərsə, bu əsas HTML faylında baş verdiyini bildirir və səhvən əsl səbəb tapmaqda problem olacaq.

Ancaq bu sizin üçün bir problem deyilsə, bu üsul işləməlidir.

Əslində bu metodu istifadə edən $ .import_js () adlı bir jQuery plugin 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); 

Buna görə, JavaScript idxal etmək üçün lazım olan bütün:

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

Mən də nümunə üçün bunun üçün sadə bir test etdik.

Əsas HTML-də main.js faylını daxil edir, sonra main.js də skript bu funksiyanı müəyyən edən included.js adlı əlavə fayl idxal etmək üçün $.import_js() istifadə edir:

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

included.js . hello() included.js sonra, hello() funksiyası çağırılır və bir bildiriş alacaqsınız.

(Bu cavab e-sat şərhinə cavabdır).

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

Mənim fikrimcə, daha təmiz olan başqa bir yol, <script> əvəzinə sinxron bir Ajax sorğu etməkdir. Bundan əlavə, Node.js.

Burada jQuery istifadə nümunəsi:

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

Daha sonra istifadə etdiyiniz kimi, aşağıdakıları daxil edin:

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

Funksiyanı aşağıdakı xəttdə zəruri olan scriptdən zəng edə bilərsiniz:

 subscript.doSomethingCool(); 
138
08 сент. Cavab Ariel Sep 08 tərəfindən verilir 2011-09-08 21:22 '11 'da 21:22' də 2011-09-08 21:22

Sizin üçün xoş xəbər. Çox tezliklə JavaScript kodunu asanlıqla yükləyə bilərsiniz. Bu, JavaScript kodu modullarını idxal etmək və JavaScript özünün bir hissəsi olmaq üçün standart bir üsul olacaq.

Yalnız import cond from 'cond.js'; yazmaq lazımdır import cond from 'cond.js'; cond.js faylından cond adlı cond.js yükləyin

Beləliklə, hər hansı bir JavaScript infrastrukturuna etibar etməli və açıq şəkildə Ajax zəngləri etməməlisiniz.

Baxın:

90
03 июля '12 в 16:32 2012-07-03 16:32 cavab iyul ayının 3-də saat 04: 00-da 4: 32-də verilir

Dinamik bir JavaScript etiketi yarada və digər JavaScript kodundan bir HTML sənədinə əlavə edə bilərsiniz. Bu hədəf javascript faylını yükləyəcək.

 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 04 İyun '09 saat 15:02 'da Svitlana Maksimchuk'a cavab verdi 2009-06-04 15:02

import operatoru ECMAScript 6.

Sintaksis

 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 апр. Çərşənbə axşamı günü verildi 2015-04-17 04:56 '15 at 4:56 2015-04-17 04:56

Bəlkə bu səhifədə tapdığım bu funksiyadan istifadə edə bilərsiniz javascript faylına javascript faylını necə əlavə edə bilərəm? :

 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 Cavab Arnaud Gouder de Beauregard tərəfindən 04 iyun '09 saat 15:04 'də verildi. 2009-06-04 15:04

JQuery olmadan sinxron versiyası:

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

Qeyd edək ki, bu iş alanını əldə etmək üçün, server cavabda allow-origin başlığı təyin etməlidir.

47
11 дек. Cavab heinob tərəfindən verilir 11 dekabr. 2013-12-11 14:54 '13 'da 14:54' da 2013-12-11 14:54

Mən bu javascript kodunu yazdım (DOM'u manipulyasiya etmək üçün prototip istifadə edərək):

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

İstifadə edin:

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

Aşağı xətt: http://gist.github.com/284442 .

43
23 янв. Cavab nornagon verildi Jan 23 2010-01-23 08:20 '10 at 8:20 2010-01-23 08:20

İşdə Facebookun bunları hər yerdə olduğu kimi yayımladığı bir ümumiləşdirilmiş versiyası:

36
08 июля '15 в 5:41 2015-07-08 05:41 Cavab Dan Dascalescu verilir 08 Iyul '5 5:41 2015-07-08 05:41

Saf javascript istəyirsinizsə, document.write istifadə edə bilərsiniz.

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

JQuery kitabxanasından istifadə $.getScript , $.getScript metodundan istifadə edə bilərsiniz.

 $.getScript("another_script.js"); 
30
13 нояб. Cavab Venu immadi tərəfindən verilir . 2013-11-13 12:18 '13 'da 12:18' də 2013-11-13 12:18

Bəlkə də bu, JavaScript-də ən böyük zəiflikdir. Yıllar boyu məndə asılılıqları izləməkdə problem yoxdur. Hər halda, yalnız praktik həll HTML faylına daxil edilmiş skriptdən istifadə etməkdir və bu səbəbdən sizin JavaScript kodunuzu istifadəçiyə asılı olaraq, lazım olan qaynaqdan asılı etmək və onu yenidən istifadə etmək üçün dəhşətli bir şeydir.

Bir mühazirə kimi səslənirsə Üzr istəyirik;) Bu mənim (pis) vərdişimdir, amma bunu vurğulamaq istəyirəm.

Problem, webdə hər şeyə, javascript tarixinə geri gəlir. Bu, həqiqətən, bu gün istifadə olunan geniş yayılmış istifadə üçün nəzərdə tutulmamışdır. Netscape, bir neçə şeyi idarə etməyə imkan verəcək bir dil yaratdı, ancaq bu, indi adət olduğu kimi, bir çox şey üçün geniş yayılmış istifadə etməmişdir və orijinal strategiyanın əsas zəif cəhətlərini təsir etmədən orada oradan genişlənmişdir.

Əlbəttə ki, bu bir deyil. HTML bir müasir veb səhifəsi üçün nəzərdə tutulmadı; oxucular (müasir dünyada brauzerlər) onu sistemin imkanları daxilində uyğun şəklində nümayiş etdirə bilməsi üçün sənədin mantığını ifadə etmək üçün nəzərdə tutulmuşdu və MS (MS və Netscape) kodeksindən başqa, həll etmək üçün illər lazım idi. CSS bu problemi həll edir, amma uzun müddətdir və daha uzun müddətdir ki, istifadə edilmiş BAD metodlarından çox istifadə etməkdir. Bu, tərifdir.

Ümid edirik ki, JavaScript-də (xüsusilə indi bu standartın bir hissəsi) dünyada mövcud başqa bir proqramlaşdırma dilində olduğu kimi, düzgün modulluq konsepsiyasını qəbul etmək üçün inkişaf etdiriləcək və bu cəfəngiyyat yox olacaq. Sizə bənzəməyiniz qədər və bunu qəbul etmirəm, qorxuram.

30
24 мая '12 в 12:51 2012-05-24 12:51 Cavab verən Stephen Whipp 24 may 12:12 saat 12:51 2012-05-24 12:51

Burada təqdim olunan həllərin əksəriyyəti dinamik yüklənməni nəzərdə tutur. Bunun əvəzində, bütün bağımlı faylları bir çıxış faylına toplayan bir kompilyator axtarırdım. CSS @import qayda ilə olan Less / Sass @import . Buna bənzər bir şey tapa bilmədiyimiz üçün problemin həlli üçün sadə bir vasitə yazdım.

Beləliklə, burada https://github.com/dsheiko/jsic compiler, etibarlı olaraq $import("file-path") istənilən fayl məzmunu $import("file-path") əvəz $import("file-path") . Burada müvafiq Grunt plugin: https://github.com/dsheiko/grunt-jsic .

Əsas jQuery intro.js , onlar yalnız intro.js ilə başlayan və intro.js ilə bitən, outtro.js atom mənbəyi faylları birləşdirirlər. Mənə uyğun deyil, çünki mənbə kodunun inkişafında rahatlıq təmin etmir. JSIC ilə necə çalışdığına baxın:

Src / main.js

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

SRC / Form / giriş /Tel.js

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

İndi kompilyatoru işə sala bilərik:

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

Və birləşdirilmiş fayl alın

qurmaq /main.js

 var foo = function() { return { prop: "", method: function(){} } }; 
24
14 июля '13 в 0:44 2013-07-14 00:44 Cavab 14 iyul 2013, saat 0:44 2013-07-14 00:44 tarixində Dmitri Şeyko tərəfindən verilir

PHP istifadə edərək, skriptlərinizi də qura bilərsiniz:

Fayl 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 дек. Cavab Calmarius tərəfindən verilir 28 Dekabr. 2010-12-28 00:03 '11 'də 0:03' da 2010-12-28 00:03

Bir JavaScript faylını yükləmək niyyətini idxal / daxil olunan fayldan funksiyaları istifadə edirsə, siz də qlobal bir obyekt təyin edə və funksiyaları obyekt elementləri kimi təyin edə bilərsiniz. Məsələn:

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

HTML faylında skript əlavə edərkən yalnız diqqətli olmalısınız. Sifariş aşağıda göstərildiyi kimi 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 Cavab Adem İlhan tərəfindən 24 İyul, '15 'də saat 09:53' da verilir

Bunu etmək lazımdır:

 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 Cavab tggagne verilir 24 Mart '13, 10:32 2013-03-24 22:32

Və ya iş vaxtında onu əvəz etmək əvəzinə yükləmədən əvvəl birləşdirmək üçün bir skriptdən istifadə edin.

Asterisklərdən istifadə edirəm (başqaları olub-olmadığını bilmirəm). JavaScript kodunuzu ayrı-ayrı fayllara qurur və Sprockets mexanizmi ilə işləyən şərhləri daxil edir. İnkişaf etmək üçün, ardıcıl olaraq faylları əlavə edə bilərsiniz və sonra istehsal üçün onları birləşdirə bilərsiniz ...

Həmçinin baxın:

17
07 июня '12 в 23:48 2012-06-07 23:48 Cavab JMawer tərəfindən 07 İyun 2012 'da 23:48' də verildi. 2012-06-07 23:48

Web İşçilərindən istifadə edirsinizsə və işçi sahəsində əlavə skriptlər əlavə etsəniz, Başlıq skriptə əlavə etmə və s. Sizin üçün işləməyəcək.

Xoşbəxtlikdən, Web İşçiləri öz funksiyalarının tərkib hissəsi olduğu üçün , brauzerin özündə yerləşdirilən Web Worker sahəsində qlobal funksiyanı olan öz importScripts funksiyasına malikdir.

Bundan əlavə, sualınız üçün ən yüksək dərəcədə ikinci cavab olaraq , NeedJS , həmçinin Web Worker-da skriptlərin daxil olmasına (ehtimal ki, zəng importScripts özü, bir sıra digər xüsusiyyətləri ilə) daxil edə bilər.

14
01 янв. Cavab Turnerj Jan 01 tərəfindən verilir 2015-01-01 11:58 '15 'də saat 11:58' da, 2015-01-01 11:58

Sadə bir problemim vardı, amma mən bu sualın cavabı ilə təəccübləndim.

Мне пришлось использовать переменную (myVar1), определенную в одном файле JavaScript (myvariables.js) в другом файле JavaScript (main.js).

Для этого я сделал, как показано ниже:

Загрузил код JavaScript в HTML файле в правильном порядке, сначала myvariables.js, затем main.js:

 <html> <body onload="bodyReady();" > <script src="myvariables.js" > </script> <script src="main.js" > </script> <!-- Some other code --> </body> </html> 

Файл: myvariables.js

 var myVar1 = "I am variable from myvariables.js"; 

Файл: main.js

 // ... function bodyReady() { // ... alert (myVar1); // This shows "I am variable from myvariables.js", which I needed // ... } // ... 

Как вы видели, я использовал переменную в одном файле JavaScript в другом файле JavaScript, но мне не нужно было включать одну в другую. Мне просто нужно было убедиться, что первый файл JavaScript загружен раньше, чем второй файл JavaScript, и переменные первого файла JavaScript доступны во втором файле JavaScript автоматически.

Это спасло мой день. Bu kömək edir.

13
ответ дан Manohar Reddy Poreddy 22 июля '15 в 5:15 2015-07-22 05:15

Синтаксис @import для импорта CSS-подобного JavaScript возможен с помощью такого инструмента, как Mixture, через специальный .mix файла .mix (см. Здесь ). Я предполагаю, что приложение просто использует один из вышеупомянутых методов, хотя я не знаю.

Из документации Mixture по файлам .mix :

Файлы микширования - это просто файлы.js или.css с.mix. в имени файла. Файл микширования просто расширяет функциональность обычного файла стиля или скрипта и позволяет импортировать и комбинировать.

Вот пример файла .mix который объединяет несколько файлов .js в один:

 // scripts-global.mix.js // Plugins - Global @import "global-plugins/headroom.js"; @import "global-plugins/retina-1.1.0.js"; @import "global-plugins/isotope.js"; @import "global-plugins/jquery.fitvids.js"; 

Mixture выводит это как scripts-global.js а также как уменьшенную версию ( scripts-global.min.js ).

Примечание: я никоим образом не связан с Mixture, за исключением того, что использую его как интерфейсный инструмент разработки. Я столкнулся с этим вопросом, увидев .mix JavaScript .mix в действии (в одном из шаблонов Mixture), и немного растерялся ("Вы можете это сделать?", - подумал я про себя). Затем я понял, что это тип файла для приложения (несколько разочаровывающий, согласился). Тем не менее, полагал, что знания могут быть полезны для других.

ОБНОВЛЕНИЕ : Mixture теперь бесплатна (не в сети).

ОБНОВЛЕНИЕ : Смесь теперь прекращена. Старые релизы смеси все еще доступны

12
ответ дан Isaac Gregson 14 марта '14 в 7:40 2014-03-14 07:40

Мой обычный метод:

 var require = function (src, cb) { cb = cb || function () {}; var newScriptTag = document.createElement('script'), firstScriptTag = document.getElementsByTagName('script')[0]; newScriptTag.src = src; newScriptTag.async = true; newScriptTag.onload = newScriptTag.onreadystatechange = function () { (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')  (cb()); }; firstScriptTag.parentNode.insertBefore(newScriptTag, firstScriptTag); } 

Это прекрасно работает и не использует перезагрузки страницы для меня. Я попробовал метод AJAX (один из других @), но, похоже, он мне не подходит.

Вот объяснение того, как работает код для любопытных: по сути, он создает новый тег сценария (после первого) URL-адреса. Он устанавливает его в асинхронный режим, чтобы не блокировать остальную часть кода, а вызывает обратный вызов, когда readyState (состояние загружаемого содержимого) меняется на "загружен".

11
ответ дан Christopher Dumas 31 мая '13 в 22:31 2013-05-31 22:31

Я написал простой модуль, который автоматизирует работу по импорту/включению скриптов модуля в JavaScript. Для подробного объяснения кода, обратитесь к сообщению в блоге JavaScript require/import/include modules .

 // ----- USAGE ----- require('ivar.util.string'); require('ivar.net.*'); require('ivar/util/array.js'); require('http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'); ready(function(){ //Do something when required scripts are loaded }); //-------------------- var _rmod = _rmod || {}; //Require module namespace _rmod.LOADED = false; _rmod.on_ready_fn_stack = []; _rmod.libpath = ''; _rmod.imported = {}; _rmod.loading = { scripts: {}, length: 0 }; _rmod.findScriptPath = function(script_name) { var script_elems = document.getElementsByTagName('script'); for (var i = 0; i < script_elems.length; i++) { if (script_elems[i].src.endsWith(script_name)) { var href = window.location.href; href = href.substring(0, href.lastIndexOf('/')); var url = script_elems[i].src.substring(0, script_elems[i].length - script_name.length); return url.substring(href.length+1, url.length); } } return ''; }; _rmod.libpath = _rmod.findScriptPath('script.js'); //Path of your main script used to mark //the root directory of your library, any library. _rmod.injectScript = function(script_name, uri, callback, prepare) { if(!prepare) prepare(script_name, uri); var script_elem = document.createElement('script'); script_elem.type = 'text/javascript'; script_elem.title = script_name; script_elem.src = uri; script_elem.async = true; script_elem.defer = false; if(!callback) script_elem.onload = function() { callback(script_name, uri); }; document.getElementsByTagName('head')[0].appendChild(script_elem); }; _rmod.requirePrepare = function(script_name, uri) { _rmod.loading.scripts[script_name] = uri; _rmod.loading.length++; }; _rmod.requireCallback = function(script_name, uri) { _rmod.loading.length--; delete _rmod.loading.scripts[script_name]; _rmod.imported[script_name] = uri; if(_rmod.loading.length == 0) _rmod.onReady(); }; _rmod.onReady = function() { if (!_rmod.LOADED) { for (var i = 0; i < _rmod.on_ready_fn_stack.length; i++){ _rmod.on_ready_fn_stack[i](); }); _rmod.LOADED = true; } }; _.rmod = namespaceToUri = function(script_name, url) { var np = script_name.split('.'); if (np.getLast() === '*') { np.pop(); np.push('_all'); } if(!url) url = ''; script_name = np.join('.'); return url + np.join('/')+'.js'; }; //You can rename based on your liking. I chose require, but it //can be called include or anything else that is easy for you //to remember or write, except "import", because it is reserved //for future use. var require = function(script_name) { var uri = ''; if (script_name.indexOf('/') > -1) { uri = script_name; var lastSlash = uri.lastIndexOf('/'); script_name = uri.substring(lastSlash+1, uri.length); } else { uri = _rmod.namespaceToUri(script_name, ivar._private.libpath); } if (!_rmod.loading.scripts.hasOwnProperty(script_name)  !_rmod.imported.hasOwnProperty(script_name)) { _rmod.injectScript(script_name, uri, _rmod.requireCallback, _rmod.requirePrepare); } }; var ready = function(fn) { _rmod.on_ready_fn_stack.push(fn); }; 
11
ответ дан stamat 12 апр. '13 в 19:34 2013-04-12 19:34

На современном языке это было бы

 function loadJs( url ){ return new Promise( resolve => { const script = document.createElement( "script" ); script.src = url; script.onload = resolve; document.head.appendChild( script ); }); } 
10
ответ дан Dmitry Sheiko 20 июля '17 в 18:15 2017-07-20 18:15
 var js = document.createElement("script"); js.type = "text/javascript"; js.src = jsFilePath; document.body.appendChild(js); 
10
ответ дан Sam4Code 22 авг. '12 в 7:33 2012-08-22 07:33

Также есть Head.js. Это очень легко иметь дело с:

 head.load("js/jquery.min.js", "js/jquery.someplugin.js", "js/jquery.someplugin.css", function() { alert("Everything is ok!"); }); 

Как видите, это проще, чем Require.js и так же удобно, как метод jQuery $.getScript . Он также имеет некоторые расширенные функции, такие как условная загрузка, обнаружение функций и многое другое .

9
ответ дан Ale 22 нояб. '13 в 21:40 2013-11-22 21:40

Я пришел к этому вопросу, потому что искал простой способ поддерживать коллекцию полезных плагинов JavaScript. Увидев некоторые решения здесь, я придумал это:

  1. Установите файл с именем "plugins.js" (или extensions.js или что у вас есть). Храните ваши файлы плагинов вместе с этим одним основным файлом.

  2. plugins.js будет иметь массив с именем "pluginNames []", который мы будем повторять для каждого(), а затем добавлять тег к заголовку для каждого плагина.

    //устанавливаем массив для обновления при добавлении или удалении файлов плагинов var pluginNames = ["lettering", "fittext", "butterjam" и т.д.]; // один скрипт-тег для каждого плагина $.each(pluginNames, function() {$ ('head'). append ('');});

  3. вручную вызовите только один файл в вашей голове:
    <script src="js/plugins/plugins.js"></script>

Я обнаружил, что, хотя все плагины вставлялись в тег head так, как они должны, они не всегда запускались браузером при нажатии на страницу или обновлении.

Я считаю более надежным просто писать теги сценария в PHP include. Вы должны написать это только один раз, и это так же много работы, как и вызов плагина с использованием JavaScript.

9
ответ дан rgb_life 01 дек. '11 в 8:36 2011-12-01 08:36

Этот скрипт добавит файл JavaScript в начало любого другого <script> :

 (function () { var li = document.createElement('script'); li.type = 'text/javascript'; li.src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"; li.async=true; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); 
9
ответ дан Vicky Gonsalves 26 окт. '13 в 6:42 2013-10-26 06:42

Есть много потенциальных @ на этот вопрос. Мой ответ, очевидно, основан на ряде из них. Это то, чем я закончил, прочитав все ответы.

Проблема с $.getScript и действительно любым другим решением, которое требует обратного вызова при завершении загрузки, состоит в том, что если у вас есть несколько файлов, которые используют его и зависят друг от друга, у вас больше нет способа узнать, когда все сценарии были загружены (один раз они вложены в несколько файлов).

Məsələn:

file3.js

 var f3obj = "file3"; // Define other stuff 

file2.js:

 var f2obj = "file2"; $.getScript("file3.js", function(){ alert(f3obj); // Use anything defined in file3. }); 

file1.js:

 $.getScript("file2.js", function(){ alert(f3obj); //This will probably fail because file3 is only guaranteed to have loaded inside the callback in file2. alert(f2obj); // Use anything defined in the loaded script... }); 

Вы правы, когда говорите, что можете указать, что Ajax будет работать синхронно или использовать XMLHttpRequest , но в настоящее время наблюдается тенденция отклонять синхронные запросы, поэтому вы можете не получить полную поддержку браузера ни сейчас, ни в будущем.

Вы можете попытаться использовать $.when для проверки массива отложенных объектов, но теперь вы делаете это в каждом файле, и file2 будет считаться загруженным, как только $.when выполняется, а не при выполнении обратного вызова, поэтому file1 по-прежнему продолжает выполнение до загрузки file3. Это действительно до сих пор та же проблема.

Я решил идти назад, а не вперед. Спасибо document.writeln . Я знаю, что это табу, но при правильном использовании это работает хорошо. Вы получите код, который можно легко отладить, правильно отобразить в DOM и убедиться, что зависимости загружены правильно.

Конечно, вы можете использовать $ ("body"). Append(), но тогда вы больше не сможете правильно отлаживать.

Qeyd. Вы должны использовать это только во время загрузки страницы, в противном случае вы получите пустой экран. Другими словами, всегда размещайте это перед/за пределами document.ready . Я не проверял использование этого после загрузки страницы в событии щелчка или чем-то подобном, но я почти уверен, что это потерпит неудачу.

Мне понравилась идея расширения jQuery, но, очевидно, вам не нужно.

Перед вызовом document.writeln он проверяет, что скрипт еще не загружался, оценивая все элементы скрипта.

Я предполагаю, что сценарий не выполняется полностью до тех пор, пока не будет выполнено событие document.ready . (Я знаю, что использование document.ready не требуется, но многие люди используют его, и обработка этого является гарантией.)

Когда дополнительные файлы загружены, обратные вызовы document.ready будут выполняться в неправильном порядке. Чтобы решить эту проблему, когда скрипт действительно загружен, импортированный скрипт сам реимпортируется, и выполнение останавливается. Это приводит к тому, что для исходного файла теперь выполняется обратный вызов document.ready после любого из любых сценариев, которые он импортирует.

Вместо этого вы можете попытаться изменить readyList список jQuery, но это readyList как худшее решение.

Həll:

 $.extend(true, { import_js : function(scriptpath, reAddLast) { if (typeof reAddLast === "undefined" || reAddLast === null) { reAddLast = true; // Default this value to true. It is not used by the end user, only to facilitate recursion correctly. } var found = false; if (reAddLast == true) // If we are re-adding the originating script we do not care if it has already been added. { found = $('script').filter(function () { return ($(this).attr('src') == scriptpath); }).length != 0; // jQuery to check if the script already exists. (replace it with straight JavaScript if you don't like jQuery. } if (found == false) { var callingScriptPath = $('script').last().attr("src"); // Get the script that is currently loading. Again this creates a limitation where this should not be used in a button, and only before document.ready. document.writeln("<script type='text/javascript' src='" + scriptpath + "'></script>"); // Add the script to the document using writeln if (reAddLast) { $.import_js(callingScriptPath, false); // Call itself with the originating script to fix the order. throw 'Readding script to correct order: ' + scriptpath + ' < ' + callingScriptPath; // This halts execution of the originating script since it is getting reloaded. If you put a try / catch around the call to $.import_js you results will vary. } return true; } return false; } }); 

İstifadə edin:

file3:

 var f3obj = "file3"; // Define other stuff $(function(){ f3obj = "file3docready"; }); 

File2:

 $.import_js('js/file3.js'); var f2obj = "file2"; $(function(){ f2obj = "file2docready"; }); 

File1:

 $.import_js('js/file2.js'); // Use objects from file2 or file3 alert(f3obj); // "file3" alert(f2obj); // "file2" $(function(){ // Use objects from file2 or file3 some more. alert(f3obj); //"file3docready" alert(f2obj); //"file2docready" }); 
8
ответ дан curlyhairedgenius 11 янв. '15 в 23:19 2015-01-11 23:19

Я создал функцию, которая позволит вам использовать словоблудие, аналогичное С#/Java, для включения файла JavaScript. Я проверил это немного даже внутри другого файла JavaScript, и это, кажется, работает. Это требует jQuery, хотя для немного "магии" в конце.

Я поместил этот код в файл в корне моего каталога скриптов (я назвал его global.js , но вы можете использовать все, что захотите. Если я не ошибаюсь, и jQuery должен быть единственными необходимыми скриптами на данной странице. Имейте в виду, что это в значительной степени непроверено за пределами некоторого базового использования, поэтому могут возникнуть или не возникнуть какие-либо проблемы с тем, как я это сделал, используйте на свой страх и риск yadda yadda Я не несу ответственности, если вы что-то испортили yadda yadda:

  if (typeof(jQuery) === 'undefined') { throw 'jQuery is required.'; }  var BASE_DIR = 'js/';  function imports(file) { var fileName = file.substr(file.lastIndexOf('.') + 1, file.length); // Convert PascalCase name to underscore_separated_name var regex = new RegExp(/([AZ])/g); if (regex.test(fileName)) { var separated = fileName.replace(regex, ",$1").replace(',', ''); fileName = separated.replace(/[,]/g, '_'); } // Remove the original JavaScript file name to replace with underscore version file = file.substr(0, file.lastIndexOf('.')); // Convert the dot syntax to directory syntax to actually load the file if (file.indexOf('.') > 0) { file = file.replace(/[.]/g, '/'); } var src = BASE_DIR + file + '/' + fileName.toLowerCase() + '.js'; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = src; $('head').find('script:last').append(script); } 
7
ответ дан Wayne Molina 20 янв. '12 в 0:27 2012-01-20 00:27
  • 1
  • 2

Другие вопросы по меткам или Задайте вопрос