Jak dołączyć plik JavaScript do innego pliku JavaScript?
Czy w JavaScript jest coś podobnego do @import w CSS, co pozwala na dołączenie pliku JavaScript do innego pliku JavaScript?
30 answers
Stare wersje JavaScript nie miały importu, include ani require, dlatego opracowano wiele różnych podejść do tego problemu.
Ale od 2015 roku (ES6) JavaScript ma standard ES6 modules do importowania modułów w Node.js, który jest również obsługiwany przez większość nowoczesnych przeglądarek .
Dla kompatybilności ze starszymi przeglądarkami można użyć narzędzi build i/lub transpilation.
Moduły ES6
ECMAScript (ES6) moduły były obsługiwane w węźle.js od wersji 8.5, z flagą --experimental-modules. Wszystkie pliki muszą mieć rozszerzenie .mjs.
// module.mjs
export function hello() {
return "Hello";
}
// main.mjs
import { hello } from 'module'; // or './module'
let val = hello(); // val is "Hello";
Moduły ECMAScript w przeglądarkach
Od wersji 10.1, Chrome 61, Firefox 60 i Edge 16 przeglądarki obsługują bezpośrednie ładowanie modułów ECMAScript (nie są wymagane żadne narzędzia, takie jak Webpack) . Sprawdź aktualne wsparcie w caniuse.<script type="module">
import { hello } from './hello.mjs';
hello('world');
</script>
// hello.mjs
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}
Czytaj więcej na: https://jakearchibald.com/2017/es-modules-in-browsers/
Dynamiczny import w przeglądarkach
Dynamiczny import pozwala skryptowi wczytać Inne skrypty w razie potrzeby:
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
Czytaj więcej na: https://developers.google.com/web/updates/2017/11/dynamic-import
Węzeł.js require
Stary styl importowania modułów, wciąż szeroko stosowany w Node.js, jest modułem .exports / require system.
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
Są inne sposoby aby JavaScript zawierał zewnętrzną zawartość JavaScript w przeglądarkach, które nie wymagają wstępnego przetwarzania.
AJAX Loading
Można załadować dodatkowy skrypt z wywołaniem AJAX, a następnie użyć eval, aby go uruchomić. Jest to najprostszy sposób, ale jest ograniczony do Twojej domeny ze względu na model zabezpieczeń piaskownicy JavaScript. Użycie eval otwiera również drzwi do błędów, hacków i problemów z bezpieczeństwem.
JQuery Loading
Biblioteka jQuery zapewnia funkcja ładowania w jednej linii :
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
Dynamiczne Ładowanie Skryptów
Możesz dodać znacznik skryptu z adresem URL skryptu do HTML. Aby uniknąć kosztów jQuery, jest to idealne rozwiązanie.
Skrypt może znajdować się nawet na innym serwerze. Ponadto przeglądarka ocenia kod. Znacznik <script> Może być wstrzykiwany do strony internetowej <head> lub wstawiany tuż przed zamykającym znacznikiem </body>.
Oto przykład jak to może praca:
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)
}
Ta funkcja doda nowy znacznik <script> na końcu sekcji nagłówkowej strony, gdzie atrybut src jest ustawiony na adres URL podany funkcji jako pierwszy parametr.
Oba te rozwiązania zostały omówione i zilustrowane w JavaScript Madness: Dynamic Script Loading.
Wykrywanie kiedy skrypt został wykonany
Jest pewna ważna sprawa, o której musisz wiedzieć. To oznacza, że zdalnie ładujesz kod . Nowoczesne przeglądarki internetowe załadują plik i będą nadal wykonywać bieżący skrypt, ponieważ ładują wszystko asynchronicznie, aby poprawić wydajność. (Dotyczy to zarówno metody jQuery, jak i ręcznej metody dynamicznego ładowania skryptów.)Oznacza to, że jeśli użyjesz tych sztuczek bezpośrednio, nie będziesz mógł użyć nowo załadowanego kodu w następnej linii po tym, jak poprosiłeś o załadowanie , ponieważ będzie on nadal wczytywany.
Na przykład: my_lovely_script.js zawiera MySuperObject:
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
Następnie przeładowujesz stronę uderzając F5 . I to działa! Mylące...
Więc co z tym zrobić ?
Cóż, możesz użyć hack autor sugeruje w linku dałem ci. Podsumowując, dla osób spieszących się używa zdarzenia do uruchomienia funkcji zwrotnej po załadowaniu skryptu. Możesz więc umieścić cały kod za pomocą zdalnej biblioteki w funkcji zwrotnej. Na przykład:
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
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);
}
Następnie piszesz kod, który chcesz Użycie Po załadowaniu skryptu w funkcji lambda :
var myPrettyCode = function() {
// Here, do whatever you want
};
Następnie uruchomić wszystko to:
loadScript("my_lovely_script.js", myPrettyCode);
Zauważ, że skrypt może zostać uruchomiony po załadowaniu DOM, lub przed, w zależności od przeglądarki i tego, czy została dodana linia script.async = false;. Istnieje świetny artykuł na temat ładowania Javascript w ogóle, który omawia to.
Scalanie/Przetwarzanie Kodu Źródłowego
Jak wspomniano na początku tej odpowiedzi, wielu programistów używa build / transpilation narzędzia takie jak Parcel, Webpack lub Babel w swoich projektach, pozwalające im używać nadchodzącej składni JavaScript, zapewnić kompatybilność wsteczną dla starszych przeglądarek, łączyć pliki, minifikować, wykonywać dzielenie kodu itp.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-08 16:11:26
Jeśli ktoś szuka czegoś bardziej zaawansowanego, wypróbuj RequireJS . Otrzymasz dodatkowe korzyści, takie jak zarządzanie zależnościami, lepsza współbieżność i unikanie duplikacji (to znaczy pobieranie skryptu więcej niż raz).
Możesz pisać swoje pliki JavaScript w "modules", a następnie odwoływać się do nich jako zależności w innych skryptach. Możesz też użyć RequireJS jako prostego rozwiązania "Pobierz ten skrypt".
Przykład:
Zdefiniuj zależności jako Moduły:
Jakaś zależność.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
});
Wdrożenie.js jest twoim "głównym" plikiem JavaScript, który zależy od jakiejś zależności.js
require(['some-dependency'], function(dependency) {
//Your script goes here
//some-dependency.js is fetched.
//Then your script is executed
});
Fragment z GitHub README:
RequireJS ładuje zwykłe pliki JavaScript, jak również bardziej zdefiniowane Moduły. Jest zoptymalizowany do użytku w przeglądarce, w tym w Internecie Worker, ale może być używany w innych środowiskach JavaScript, takich jak Nosorożec i węzeł. Realizuje Moduł asynchroniczny API.
RequireJS używa zwykłych znaczników skryptów do ładowania modułów / plików, więc powinien umożliwia łatwe debugowanie. Może być używany po prostu do ładowania istniejących Plików JavaScript, więc możesz dodać go do istniejącego projektu bez konieczność ponownego zapisu plików JavaScript.
...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-28 13:11:26
Tam rzeczywiście jest sposób, aby załadować plik JavaScript nie asynchronicznie, więc można użyć funkcji zawartych w nowo załadowanym pliku zaraz po załadowaniu go, I myślę, że to działa we wszystkich przeglądarkach.
Musisz użyć jQuery.append() na <head> elemencie swojej strony, czyli:
$("head").append('<script type="text/javascript" src="' + script + '"></script>');
Jednak ta metoda ma również problem: jeśli wystąpi błąd w importowanym pliku JavaScript, Firebug (a także Firefox Error Console i Chrome Narzędzia programistyczne również) zgłosi swoje miejsce nieprawidłowo, co jest dużym problemem, jeśli używasz Firebug do śledzenia błędów JavaScript w dół dużo (ja). Firebug po prostu nie wie o nowo załadowanym pliku z jakiegoś powodu, więc jeśli wystąpi błąd w tym pliku, zgłosi, że wystąpił w głównym pliku HTML , a będziesz miał problemy ze znalezieniem prawdziwej przyczyny błędu.
Ale jeśli to nie jest dla Ciebie problemem, to ta metoda powinna działać.
Mam właściwie napisał wtyczkę jQuery o nazwie $.import_js () który używa tej metody:
(function($)
{
/*
* $.import_js() helper (for JavaScript importing within JavaScript code).
*/
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);
Więc wszystko, co musisz zrobić, aby zaimportować JavaScript to:
$.import_js('/path_to_project/scripts/somefunctions.js');
Zrobiłem również prosty test dla tego na przykład.
Zawiera main.js plik w głównym HTML, a następnie skrypt w main.js używa $.import_js() do importowania dodatkowego pliku o nazwie included.js, który definiuje tę funkcję:
function hello()
{
alert("Hello world!");
}
I zaraz po włączeniu included.js wywoływana jest funkcja hello() oraz dostajesz alarm.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-21 04:29:29
Innym sposobem, który moim zdaniem jest dużo czystszy, jest wykonanie synchronicznego żądania Ajax zamiast używania znacznika <script>. Czyli jak uchwyty js zawierają.
Oto przykład użycia 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);
}
});
}
Możesz następnie użyć go w swoim kodzie, jak zwykle używasz include:
require("/scripts/subscript.js");
I być w stanie wywołać funkcję z wymaganego skryptu w następnej linii:
subscript.doSomethingCool();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-28 12:55:50
Mam dla Ciebie dobrą wiadomość. Już wkrótce będziesz mógł łatwo załadować kod JavaScript. Stanie się standardowym sposobem importowania modułów kodu JavaScript i będzie częścią samego rdzenia JavaScript.
Wystarczy napisać import cond from 'cond.js';, aby załadować makro o nazwie cond z pliku cond.js.
Więc nie musisz polegać na żadnym frameworku JavaScript ani nie musisz jawnie wykonywać wywołań Ajax.
Zobacz:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-19 18:05:37
Możliwe jest dynamiczne generowanie znacznika JavaScript i dołączanie go do dokumentu HTML z innego kodu JavaScript. Spowoduje to załadowanie docelowego pliku JavaScript.
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");
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-28 12:44:30
Oświadczenie import jest w ECMAScript 6.
Składnia
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;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-11 09:47:07
Może możesz użyć tej funkcji, którą znalazłem na tej stronie Jak dołączyć plik JavaScript do pliku 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)
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-15 17:01:22
Oto synchroniczna wersja bez 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);
}
Zauważ, że aby uzyskać tę działającą między domenami, serwer będzie musiał ustawić nagłówek allow-origin w swojej odpowiedzi.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-18 14:44:10
Właśnie napisałem ten kod JavaScript (używając Prototype dla 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);
}
});
})();
Użycie:
<script src="prototype.js"></script>
<script src="require.js"></script>
<script>
require(['foo.js','bar.js'], function () {
/* Use foo.js and bar.js here */
});
</script>
Gist: http://gist.github.com/284442 .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-25 21:04:40
Oto uogólniona wersja tego, jak Facebook robi to dla wszechobecnego przycisku Like:
<script>
var firstScript = document.getElementsByTagName('script')[0],
js = document.createElement('script');
js.src = 'https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js';
js.onload = function () {
// do stuff with your dynamically loaded script
snowStorm.snowColor = '#99ccff';
};
firstScript.parentNode.insertBefore(js, firstScript);
</script>Jeśli to działa na Facebook, to będzie działać dla Ciebie.
Powodem, dla którego szukamy pierwszego elementu script zamiast head lub body jest to, że niektóre przeglądarki nie tworzą takiego elementu, jeśli go brakuje, ale gwarantujemy, że mamy element script - Ten. Czytaj więcej na http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-08 02:48:05
Jeśli chcesz w czystym JavaScript, możesz użyć document.write.
document.write('<script src="myscript.js" type="text/javascript"></script>');
Jeśli korzystasz z biblioteki jQuery, możesz użyć metody $.getScript.
$.getScript("another_script.js");
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-30 21:20:07
Większość przedstawionych tu rozwiązań zakłada dynamiczne obciążenie. Szukaĺ ' em zamiast tego kompilatora, ktĂłry montuje wszystkie zaleĺźne pliki w jednym pliku wynikowym. To samo co mniej/Sass preprocesory obsługują CSS @import at-rule. Ponieważ nie znalazłem niczego przyzwoitego tego rodzaju, napisałem proste narzędzie rozwiązujące problem.
Oto kompilator, https://github.com/dsheiko/jsic , który bezpiecznie zastępuje $import("file-path") żądaną zawartością pliku. Proszę. jest odpowiednikiem Grunt plugin: https://github.com/dsheiko/grunt-jsic .
W gałęzi jQuery master, po prostu łączą atomowe pliki źródłowe w jeden, zaczynający się od intro.js i kończący się na outtro.js. To mi nie odpowiada, ponieważ nie zapewnia elastyczności w projektowaniu kodu źródłowego. Sprawdź jak to działa z jsic:
src / main.js
var foo = $import("./Form/Input/Tel");
src / formularz / wejście / tel.js
function() {
return {
prop: "",
method: function(){}
}
}
Teraz możemy uruchomić kompilator:
node jsic.js src/main.js build/mail.js
I pobierz plik łączony
build / main.js
var foo = function() {
return {
prop: "",
method: function(){}
}
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-19 18:13:46
Możesz również montować swoje skrypty za pomocą PHP :
Plik 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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-28 12:50:11
Jeśli chcesz załadować plik JavaScript używając funkcji z importowanego / dołączonego pliku , Możesz również zdefiniować obiekt globalny i ustawić funkcje jako pozycje obiektu. Na przykład:
Globalny.js
A = {};
File1.js
A.func1 = function() {
console.log("func1");
}
File2.js
A.func2 = function() {
console.log("func2");
}
Main.js
A.func1();
A.func2();
Musisz tylko uważać, gdy włączasz skrypty do pliku HTML. Kolejność powinna być taka jak poniżej:
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-11 09:42:00
To powinno wystarczyć:
xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-02 13:50:20
Lub zamiast włączać w czasie wykonywania, Użyj skryptu do połączenia przed przesłaniem.
Używam zębatek (Nie wiem, czy są inne). Budujesz kod JavaScript w osobnych plikach i dołączasz komentarze, które są przetwarzane przez silnik Sprockets jako includes. Dla rozwoju możesz dołączać pliki sekwencyjnie, a następnie dla produkcji scalić je...
Zobacz też:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-19 18:02:51
W przypadku, gdy używasz Web Workers i chcesz włączyć Dodatkowe skrypty w zakres workera, inne odpowiedzi na temat dodawania skryptów do tagu head itp. nie zadziała dla Ciebie.
Na szczęście, Web Workers mają własną funkcjęimportScripts , która jest globalną funkcją w zakresie Web Workera, natywną dla samej przeglądarki, ponieważjest częścią specyfikacji .
Alternatywnie, jako druga najwyżej głosowana odpowiedź na twoje najważniejsze pytania, RequireJS może również obsługiwać Skrypty wewnątrz Web Workera (prawdopodobnie wywołanie samego importScripts, ale z kilkoma innymi przydatnymi funkcjami).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:59
Miałem prosty problem, ale byłem zdumiony odpowiedziami na to pytanie.
Musiałem użyć zmiennej (myVar1) zdefiniowanej w jednym pliku JavaScript (myvariables.js) w innym pliku JavaScript (main.js).
Do tego zrobiłem jak poniżej:
Załadował kod JavaScript do pliku HTML, w odpowiedniej kolejności, myvariables.najpierw js, potem main.js:
<html>
<body onload="bodyReady();" >
<script src="myvariables.js" > </script>
<script src="main.js" > </script>
<!-- Some other code -->
</body>
</html>
Plik: myvariables.js
var myVar1 = "I am variable from myvariables.js";
Plik: main.js
// ...
function bodyReady() {
// ...
alert (myVar1); // This shows "I am variable from myvariables.js", which I needed
// ...
}
// ...
Jak zobaczyłeś, użyłem zmiennej w jednym JavaScript plik w innym pliku JavaScript, ale nie musiałem dołączać jednego do innego. Musiałem tylko upewnić się, że pierwszy plik JavaScript załadowany przed drugim plikiem JavaScript, a zmienne pierwszego pliku JavaScript są dostępne w drugim pliku JavaScript, automatycznie.
To uratowało mój dzień. Mam nadzieję, że to pomoże.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-11 09:45:11
Składnia @import do importowania JavaScript w stylu CSS jest możliwa za pomocą narzędzia, takiego jak Mixture poprzez specjalny typ pliku .mix (Zobacz tutaj ). Wyobrażam sobie, że aplikacja po prostu używa jednej z wyżej wymienionych metod między sobą, choć Nie wiem.
Z Dokumentacji mieszanki na plikach .mix:
Pliki Mix są po prostu .js lub .pliki css z .mix. w nazwie pliku. A plik mix po prostu rozszerza funkcjonalność zwykłego stylu lub plik skryptu i pozwala importować i łączyć.
Oto przykład .mix pliku, który łączy wiele .js plików w jeden:
// 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 wyświetla to jako scripts-global.js, a także jako wersja zminifikowana (scripts-global.min.js).
Uwaga: Nie jestem w żaden sposób związany z mixtape, poza używaniem go jako narzędzia programistycznego. Natknąłem się na to pytanie, widząc plik .mix JavaScript w akcji (w jednym z kotłów mieszanych) i będąc nieco zdezorientowanym ("możesz zrobić to?"Pomyślałem sobie). Potem zdałem sobie sprawę, że był to typ pliku specyficzny dla aplikacji(nieco rozczarowujący, zgadzam się). Niemniej jednak, pomyślałem, że wiedza może być pomocna dla innych.
UPDATE : Mixture is now free (offline).
UPDATE: mieszanie jest teraz przerwane. stare wydania mieszanek są nadal dostępne
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-17 11:53:48
Napisałem prosty moduł, który automatyzuje zadanie importowania / włączania skryptów modułów w JavaScript. Aby uzyskać szczegółowe wyjaśnienie kodu, zapoznaj się z wpisem na blogu 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);
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-19 18:26:26
Moja zwykła metoda to:
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);
}
Działa świetnie i nie używa przeładowania strony dla mnie. Próbowałem metody AJAX (jedna z innych odpowiedzi), ale nie wydaje się działać tak ładnie dla mnie.
Oto wyjaśnienie, jak działa kod dla tych, którzy są ciekawi: zasadniczo tworzy nowy znacznik skryptu (po pierwszym) adresu URL. Ustawia go na tryb asynchroniczny, więc nie blokuje reszty kodu, ale wywołuje wywołanie zwrotne, gdy readyState (stan zawartości, która ma być loaded) zmienia się na 'loaded'.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-26 17:02:15
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-22 06:44:32
We współczesnym języku byłoby to
function loadJs( url ){
return new Promise( resolve => {
const script = document.createElement( "script" );
script.src = url;
script.onload = resolve;
document.head.appendChild( script );
});
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-20 15:15:02
Ten skrypt doda plik JavaScript na górze każdego innego znacznika <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);
})();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-19 18:14:07
Jest też Głowa.js . Jest to bardzo łatwe do opanowania:
head.load("js/jquery.min.js",
"js/jquery.someplugin.js",
"js/jquery.someplugin.css", function() {
alert("Everything is ok!");
});
Jak widzisz, to łatwiejsze niż wymagać.js i tak wygodne jak metoda jQuery $.getScript. Posiada również kilka zaawansowanych funkcji, takich jak warunkowe Ładowanie, wykrywanie funkcji i znacznie więcej .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-19 18:18:01
Przyszedłem na to pytanie, ponieważ szukałem prostego sposobu na utrzymanie kolekcji przydatnych wtyczek JavaScript. Po obejrzeniu niektórych rozwiązań tutaj, wpadłem na to:
Skonfiguruj plik o nazwie "wtyczki.js " (lub rozszerzeń.js czy co masz). Zachowaj pliki wtyczek razem z tym jednym plikiem głównym.
-
Wtyczki.js będzie miał tablicę o nazwie " pluginNames []", którą będziemy iterować nad każdym(), następnie dołącz do głowicy znacznik dla każdego plugin
/ / ustawiamy tablicę, która będzie aktualizowana po dodaniu lub usunięciu plików pluginów var pluginNames = ["lettering", "fittext", "butterjam", itd.]; // jeden znacznik skryptu dla każdej wtyczki $.each (nazwy wtyczek, funkcja(){ $('head').append ("); });
Ręcznie wywołaj tylko jeden plik w głowie:
<script src="js/plugins/plugins.js"></script>
Odkryłem, że chociaż wszystkie wtyczki były upuszczane do znacznika head tak, jak powinny, nie zawsze były uruchamiane przez przeglądarkę, gdy kliknij na stronę lub odśwież.
Uznałem, że bardziej niezawodne jest pisanie znaczników skryptu w PHP include. Wystarczy napisać to tylko raz, a to tyle samo pracy, co wywołanie wtyczki za pomocą JavaScript.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-30 21:21:29
Istnieje wiele potencjalnych odpowiedzi na to pytanie. Moja odpowiedź jest oczywiście oparta na wielu z nich. To jest to, co skończyło się po przeczytaniu wszystkich odpowiedzi.
Problem z $.getScript i tak naprawdę każdym innym rozwiązaniem wymagającym wywołania zwrotnego po zakończeniu ładowania jest to, że jeśli masz wiele plików, które go używają i zależą od siebie, nie masz już sposobu, aby wiedzieć, kiedy wszystkie skrypty zostały załadowane (po zagnieżdżeniu w wielu plikach). plików).
Przykład:
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...
});
Masz rację, kiedy mówisz, że możesz określić Ajax do uruchamiania synchronicznie lub używać XMLHttpRequest, ale obecny trend wydaje się być do deprecate synchroniczne żądania, więc może nie uzyskać pełną obsługę przeglądarki teraz lub w przyszłości.
Możesz spróbować użyć $.when, aby sprawdzić tablicę obiektów odroczonych, ale teraz robisz to w każdym pliku a plik2 zostanie uznany za załadowany, gdy tylko $.when zostanie wykonany, a nie gdy wywołanie zwrotne zostanie wykonane, więc plik1 nadal kontynuuje wykonywanie przed załadowaniem pliku3. To naprawdę nadal ma ten sam problem.
Postanowiłem iść do tyłu zamiast do przodu. Dziękuję document.writeln. Wiem, że to tabu, ale tak długo, jak jest używany poprawnie to działa dobrze. Kończysz z kodem, który można łatwo debugować, wyświetla się w DOM poprawnie i może zapewnić kolejność wczytywania zależności prawidłowo.
Możesz oczywiście użyć $ ("body").append (), ale wtedy nie można już poprawnie debugować.
Uwaga: musisz tego używać tylko podczas ładowania strony, w przeciwnym razie otrzymasz pusty ekran. Innymi słowy, zawsze umieszczaj to przed / poza dokumentem.gotowe . Nie testowałem tego po załadowaniu strony w przypadku kliknięcia lub czegoś podobnego, ale jestem prawie pewien, że się nie powiedzie.
Podobał mi się pomysł rozszerzenia jQuery, ale oczywiście nie musisz.
Przed wywołaniem document.writeln sprawdza, czy skrypt nie został już załadowany, oceniając wszystkie elementy skryptu.
Zakładam, że skrypt nie jest w pełni wykonywany, dopóki nie zostanie wykonane Zdarzenie document.ready. (Wiem, że używanie document.ready nie jest wymagane, ale wiele osób z niego korzysta, a obsługa tego jest zabezpieczeniem.)
Po załadowaniu dodatkowych plików wywołania zwrotne document.ready będą wykonywane w złej kolejności. Aby rozwiązać ten problem, gdy skrypt jest faktycznie załadowany, skrypt, który go zaimportował, jest ponownie zaimportowany i wykonanie wstrzymane. Powoduje to, że plik wyjściowy ma teraz wywołanie zwrotne document.ready wykonywane po dowolnych skryptach, które importuje.
Zamiast tego można było próbować zmodyfikować jQuery readyList, ale wydawało się to gorszym rozwiązaniem.
Rozwiązanie:
$.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;
}
});
Użycie:
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"
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-30 21:22:17
Stworzyłem funkcję, która pozwoli Ci używać wersji podobnej do C#/Java do dołączania pliku JavaScript. Przetestowałem go trochę nawet z wnętrza innego pliku JavaScript i wydaje się, że działa. To wymaga jQuery choć trochę "magii" na końcu.
Umieściłem ten kod w pliku głównym mojego katalogu skryptów( nazwałem go global.js, ale możesz użyć, co chcesz. O ile się nie mylę to i jQuery powinny być jedynymi wymaganymi skryptami na danym strona. Należy pamiętać, że jest to w dużej mierze nieprzetestowane poza pewnym podstawowym użyciem, więc mogą lub nie muszą być jakiekolwiek problemy ze sposobem, w jaki to zrobiłem; używaj na własne ryzyko yadda yadda nie jestem odpowiedzialny, jeśli coś spieprzysz yadda yadda: {]}
/**
* @fileoverview This file stores global functions that are required by other libraries.
*/
if (typeof(jQuery) === 'undefined') {
throw 'jQuery is required.';
}
/** Defines the base script directory that all .js files are assumed to be organized under. */
var BASE_DIR = 'js/';
/**
* Loads the specified file, outputting it to the <head> HTMLElement.
*
* This method mimics the use of using in C# or import in Java, allowing
* JavaScript files to "load" other JavaScript files that they depend on
* using a familiar syntax.
*
* This method assumes all scripts are under a directory at the root and will
* append the .js file extension automatically.
*
* @param {string} file A file path to load using C#/Java "dot" syntax.
*
* Example Usage:
* imports('core.utils.extensions');
* This will output: <script type="text/javascript" src="/js/core/utils/extensions.js"></script>
*/
function imports(file) {
var fileName = file.substr(file.lastIndexOf('.') + 1, file.length);
// Convert PascalCase name to underscore_separated_name
var regex = new RegExp(/([A-Z])/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);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-18 21:45:38
Lepiej Użyj jQuery . Aby opóźnić Zdarzenie ready, należy najpierw wywołać $.holdReady(true).
Przykład (źródło):
$.holdReady(true);
$.getScript("myplugin.js", function() {
$.holdReady(false);
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-19 18:06:16