Często będę mieć plik JavaScript, którego chcę użyć, który wymaga zdefiniowania pewnych zmiennych na mojej stronie internetowej.
Więc kod wygląda mniej więcej tak:
<script type="text/javascript" src="file.js"></script>
<script type="text/javascript">
var obj1 = "somevalue";
</script>
Ale chcę zrobić:
<script type="text/javascript"
src="file.js?obj1=somevalue&obj2=someothervalue"></script>
Wypróbowałem różne metody, a najlepszą z nich jest przeanalizowanie ciągu zapytania w następujący sposób:
var scriptSrc = document.getElementById("myscript").src.toLowerCase();
A potem poszukaj moich wartości.
Zastanawiam się, czy istnieje inny sposób na zrobienie tego bez budowania funkcji analizującej mój ciąg.
Czy wszyscy znacie inne metody?
Odpowiedzi:
Jeśli to możliwe, nie zalecałbym używania zmiennych globalnych. Użyj przestrzeni nazw i OOP, aby przekazać swoje argumenty do obiektu.
Ten kod należy do pliku.js:
A w Twoim pliku html:
źródło
var MYLIBRARY = MYLIBRARY || (function(){}());
? Dlaczego należyMYLIBRARY
ustawić wartość logiczną?Możesz przekazywać parametry z dowolnymi atrybutami. Działa to we wszystkich najnowszych przeglądarkach.
Wewnątrz somefile.js możesz pobrać wartości zmiennych w następujący sposób:
........
...itp...
źródło
document.currentScript
, zobacz caniuse.com/#feat=document-currentscript w celu uzyskania zgodności (lub użyj polyfill)$(..)
Składni jQuery, nie zapomnij podać go.Innym pomysłem natknąłem został przypisania
id
do<script>
elementu i przechodzącej argumenty jakodata-*
atrybutów. Wynikowy<script>
tag wyglądałby mniej więcej tak:Skrypt mógłby następnie użyć identyfikatora do programistycznego zlokalizowania siebie i przeanalizowania argumentów. Biorąc pod uwagę poprzedni
<script>
tag, nazwę można pobrać w następujący sposób:Otrzymujemy
name
=helper
źródło
helper.js
pętlę skryptu przez wszystkiescript
tagi na stronie, odszukać ten zscr="helper.js"
, a następnie wyodrębnićdata-name
.var this_js_script = $('script[src*=somefile]');
(skopiowane z góry )Sprawdź ten adres URL. Działa idealnie na wymagania.
http://feather.elektrum.org/book/src.html
Wielkie dzięki dla autora. Dla szybkiego odniesienia wkleiłem poniżej główną logikę:
źródło
Używasz zmiennych globalnych :-D.
Lubię to:
Kod JavaScript w „file.js” może uzyskać dostęp
obj1
iobj2
bez problemu.EDIT tylko dodać, że jeśli „” file.js chce sprawdzić, czy
obj1
iobj2
były nawet zadeklarował można użyć następujących funkcji.Mam nadzieję że to pomoże.
źródło
return typeof window[$Name] !== 'undefined';
. Zwróć uwagę, że przekazałbyś tej funkcji ciąg znaków zawierający nazwę zmiennej. Prawdopodobnie łatwiej jest po prostu sprawdzić, czy zmienna istnieje w kodzie wywołującym (nie można tego zaimplementować jako funkcja) za pomocąif (typeof var !== 'undefined')
.var
.Oto bardzo pospieszny dowód słuszności koncepcji.
Jestem pewien, że są co najmniej 2 miejsca, w których można wprowadzić ulepszenia, i jestem też pewien, że nie przetrwało to długo na wolności. Mile widziane są wszelkie uwagi, które sprawią, że będzie on bardziej reprezentacyjny lub użyteczny.
Kluczem jest ustawienie identyfikatora dla elementu skryptu. Jedynym haczykiem jest to, że oznacza to, że możesz wywołać skrypt tylko raz, ponieważ szuka on tego identyfikatora, aby pobrać ciąg zapytania. Można to naprawić, gdyby zamiast tego skrypt przechodził przez wszystkie elementy zapytania, aby sprawdzić, czy któryś z nich do niego wskazuje, a jeśli tak, używa ostatniej instancji takiego elementu skryptu. Tak czy inaczej, z kodem:
Wywoływany skrypt:
Skrypt wywołany przez następującą stronę:
źródło
może być bardzo proste
na przykład
Następnie możesz przekonwertować ciąg zapytania na json, jak poniżej
a następnie może użyć podobnych
źródło
Można to łatwo zrobić, jeśli używasz jakiegoś frameworka Javascript, takiego jak jQuery. Tak jak tak
Teraz możesz użyć tych parametrów, dzieląc je jako parametry zmiennych.
Ten sam proces można wykonać bez żadnego frameworka, ale zajmie to trochę więcej linii kodu.
źródło
Cóż, mógłbyś mieć plik javascript budowany przez dowolny język skryptowy, wstrzykując swoje zmienne do pliku przy każdym żądaniu. Musiałbyś powiedzieć swojemu serwerowi WWW, aby nie rozdzielał plików js statycznie (wystarczy użyć mod_rewrite).
Pamiętaj jednak, że tracisz buforowanie tych plików js, ponieważ są one stale zmieniane.
PA.
źródło
<script>
bloku możesz użyć czegoś takiego,MyModule.Initialize( '<%: Model.SomeProperty%>', '<%: Model.SomeOtherProperty%>', ...);
co jest renderowane na serwerze. Uwaga:<%:
ucieka przed wartością, podczas gdy<%=
wysyła wartość bez zmiany znaczenia.MyModule
byłaby przestrzenią nazw (tj. zmienną wewnątrz pliku .js, która jest samoczynnie wywoływana, co uwidacznia funkcjęInitialize
). Głosowałem za twoją odpowiedzią, ponieważ jest to pomocny wkład.Ładne pytanie i kreatywne odpowiedzi, ale moją sugestią jest sparametryzowanie twoich metod, co powinno rozwiązać wszystkie twoje problemy bez żadnych sztuczek.
jeśli masz funkcję:
możesz to zmienić na:
Myślę, że jest to najbardziej naturalne podejście, nie musisz tworzyć dodatkowej dokumentacji na temat „parametrów plików” i otrzymujesz to samo. Jest to szczególnie przydatne, jeśli pozwolisz innym programistom na używanie Twojego pliku js.
źródło
Nie, naprawdę nie możesz tego zrobić, dodając zmienne do części z zapytaniami w adresie URL pliku JS. Jeśli zapisuje część kodu, aby przeanalizować ciąg, który ci przeszkadza, być może innym sposobem byłoby zakodowanie zmiennych w formacie json i umieszczenie ich w czymś podobnym do atrybutu rel tagu? Nie wiem, jak ważne jest to pod względem walidacji HTML, jeśli jest to coś, o co bardzo się martwisz. Następnie wystarczy znaleźć atrybut rel skryptu, a następnie json_decode.
na przykład
źródło
To nie jest prawidłowy kod HTML (nie sądzę), ale wydaje się, że działa, jeśli utworzysz niestandardowy atrybut dla tagu script na swojej stronie internetowej :
<script id="myScript" myCustomAttribute="some value" ....>
Następnie uzyskaj dostęp do atrybutu niestandardowego w javascript:
var myVar = document.getElementById( "myScript" ).getAttribute( "myCustomAttribute" );
Nie jestem pewien, czy jest to lepsze, czy gorsze niż analiza ciągu źródłowego skryptu.
źródło
Jeśli potrzebujesz sposobu, który przechodzi sprawdzanie CSP (który zabrania niebezpiecznego inline), musisz użyć metody nonce, aby dodać unikalną wartość zarówno do skryptu, jak i dyrektywy CSP lub zapisać swoje wartości w html i przeczytać je ponownie.
Metoda nonce dla express.js:
lub zapisz wartości do metody html. w tym przypadku przy użyciu Jquery:
źródło