Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Jak dołączyć kawałek kodu do skryptu JS
Forum PHP.pl > Forum > Przedszkole
alex19
JS nie jest moją mocną stroną i wiedza sprowadza się do używania odrobinki ajaxa z jQuery.
Napotkałem pewien problem i zastanawiam się czy to jest do rozwiązania, mianowicie czy z JS można zrobić coś takiego jak z include w php, czyli zwyczajnie tym sposobem wkleić kawałek kodu z innego pliku?

Mam taki fragmencik kodu (to jest ext js):
[JAVASCRIPT] pobierz, plaintext
  1. frame: true,
  2. plain: true,
  3. border: false,
  4. items: [{
  5. region: 'north',
  6. height: 70,
  7. contentEl: 'menu',
  8. border: false,
  9. frame: false,
  10. bodyStyle: 'background:#233d6d;padding:0px',
  11. margins: '0 0 0 0',
  12. titleCollapse: true,
  13. id: 'menutitle',
  14. cmargins: '0 0 0 0'
  15.  
  16. }, {
  17. region: 'center',
  18. xtype: 'tabpanel',
  19. activeTab: 0,
  20. animScroll: false,
  21. id: '_tabsKalkulacje',
  22. enableTabScroll: false,
  23. height: 850,
  24. deferredRender: false,
  25. autoScroll: true,
  26. defaults: {
  27. autoScroll: true,
  28. deferredRender: false
  29. },
[JAVASCRIPT] pobierz, plaintext


I teraz ten kawałek chciałbym wyciągnać do innego pliku tak żeby zmiana jakiejkolwiek wartości zadziałała we wszystkich podobnych plikach, których jest ze 20.
[JAVASCRIPT] pobierz, plaintext
  1. region: 'north',
  2. height: 70,
  3. contentEl: 'menu',
  4. border: false,
  5. frame: false,
  6. bodyStyle: 'background:#233d6d;padding:0px',
  7. margins: '0 0 0 0',
  8. titleCollapse: true,
  9. id: 'menutitle',
  10. cmargins: '0 0 0 0'
[JAVASCRIPT] pobierz, plaintext
kamil4u
Zrób to w PHP i odpowiednim zapytaniem Ajaxowym.

lub użyj to:

http://stackoverflow.com/questions/950087/...javascript-file
alex19
Widziałem ten wątek, ale to nie to czego potrzebuję.
Nie chcę załączać funkcji, chcę tylko tą tablicę parametrów wypchnąć do zewnętrznego pliku, tak żeby można było to łatwo edytować.
Php nie ma tu kompletnie zastosowania, bo musiałbym przebudować wszystko, a chcę sobie pracę ułatwić, a dnie dodać w diabła roboty.
kamil4u
Mógłbyś jeszcze połączyć AJAX z eval, żeby pobrany tekst przekształcić do wykonywalnego kodu js. Tylko nie, żebym polecał Ci to rozwiązanie.
alex19
A nie da się tego jakoś wstawić do zmiennej, tej zmiennej wyciągnać do innego pliku i wtedy zaimportować ajaxem?

Edit...

OK, problem rozwiązałem smile.gif

Plik 1.js
[JAVASCRIPT] pobierz, plaintext
  1. var atrybuty = {
  2. region: 'north',
  3. height: 70,
  4. contentEl: 'menu',
  5. border: false,
  6. frame: false,
  7. bodyStyle: 'background:#233d6d;padding:0px',
  8. margins: '0 0 0 0',
  9. titleCollapse: true,
  10. id: 'menutitle',
  11. cmargins: '0 0 0 0'};
[JAVASCRIPT] pobierz, plaintext


Plik drugi.js
[JAVASCRIPT] pobierz, plaintext
  1. $.getScript("1.js");
  2. ..
  3. plain: true,
  4. border: false,
  5. items: [atrybuty,
  6. {
  7. region: 'center',
  8. xtype: 'tabpanel',
  9. activeTab: 0,
  10. animScroll: false,
  11. id: '_tabsKalkulacje',
  12. enableTabScroll: false,
  13. height: 850,
  14. deferredRender: false,
  15. autoScroll: true,
  16. defaults: {
  17. autoScroll: true,
  18. deferredRender: false
  19. },
  20. ...
[JAVASCRIPT] pobierz, plaintext
com
wystarczyło zrobić to samo w samym html dodać oba pliki w script wink.gif
alex19
Tak, ale to ma głębszy cel. Zamysł był taki że to pliki js mają "być złączone", a nie "spinane" na około przez html, bo to by była dodatkowa komplikacja.
com
rozumiem, jednakże JQ samo w sobie jest dość powolną biblioteką, wiec kwestia określenia celów i kosztów biggrin.gif
alex19
A jest jakiś inny sposób na "sklejenie" dwóch plików js razem, w takiej opcji jak powyżej?

Sądzę że ten zabieg specjalnie na wydajność nie wpłynie, aczkolwiek jest to cenna uwaga.
com
być może masz rację, popularnym jest require, szczególnie w świecie node http://requirejs.org/docs/start.html wink.gif

wszytko zależy od tego jak często zamierzasz tak te pliki łączyć, bo pewnie 1-2 użycia nie wpłyną zbytnio na działanie aplikacji, ale ostatnio stałem nad wyborem technologi przy tworzeniu gry i jeden z programistów upierał się aby użyć do tego właśnie JQ, no i testy pokazały, że lepiej to było zrobić w czystym JS wink.gif ale to tak na marginiesie
alex19
Ale to kolejny js i trzeba by go dołaczyć w html, więc to średnie rozwiązanie :/
Potrzebuje maksymalnej prostoty, która ułatwi mi pracę i nie będzie powielała tak kodu jak jest teraz.

Bardziej szukam (raczej nieistniejącego) wbudowanego rozwiązania w stylu "include skrypt.js" wink.gif

Pliki będą łączone raz, tylko podczas ładowania strony. Tak przynajmniej mi się wydaje, bo nic nie wskazuje na to by były ładowane, a co za tym idzie łączone wielokrotnie.
com
to może http://phpjs.org/functions/include/ wink.gif ale nie korzystałem wiec nwm jak się spisuje

z tymi użyciami to miałem na myśli ilość takich dołączeń, ale tak generalnie to po zakończeniu trybu developerskiego powinieneś ten kod poddać minifikacji i najlepiej zbudować mapę tego scriptu czyli http://www.html5rocks.com/en/tutorials/dev...ols/sourcemaps/
PrinceOfPersia
Kod
wszytko zależy od tego jak często zamierzasz tak te pliki łączyć, bo pewnie 1-2 użycia nie wpłyną zbytnio na działanie aplikacji, ale ostatnio stałem nad wyborem technologi przy tworzeniu gry i jeden z programistów upierał się aby użyć do tego właśnie JQ, no i testy pokazały, że lepiej to było zrobić w czystym JS

czasem można też mieszać podejścia i jQuery używać w jednych miejscach programu, a w gorących odwoływać się do DOM poprzez JS.
Jednak i tak najlepiej w ogóle się nie odwoływać do DOM bez potrzeby, bo to najgorzej wpływa na wydajność...

Kod
Bardziej szukam (raczej nieistniejącego) wbudowanego rozwiązania w stylu "include skrypt.js"

ponieważ JavaScript został źle zaprojektowany (podobnie jak PHP zresztą, więc nie ma co się śmiać), to o pewnych rzeczach zapomnieli. W tym o importach (ale mają być w nowej wersji JavaScripta). Tym niemniej ludzie sobie zawsze poradzą i przez tyle lat stworzono z kilka conajmniej, jeśli nie kilkanaście niestandardowych sposobów na to, co piszesz, moje ulubione:

1. po prostu konkatenujesz ze sobą pliki, i dodajesz source mapę.
są gotowe pluginy do tego. Wystarczy zainstalować Grunt'a, i dodać wtyczkę grunt-contrib-concat, i odpowiednio skonfigurować.

2. albo Browserify. Czyli piszesz program jakbyś pisał w NodeJS (i importujesz tak:
Kod
var nazwaBiblioteki = require('nazwabiblioteki');

eksportujesz tak:
Kod
module.exports.symbolDoEksportowania = cosTam;

a potem uruchamiasz program, który się nazywa Browserify i on ci wszystkie te powiązane pliki pakuje w jeden plik, i też przy okazji może wygenerowac source mapę.

No i ogólnie do takich rzeczy przydaje się zainstalować sobie na dysku środowisko NodeJS oraz Grunt. Oraz znać podstawy NodeJS. Ale jeśli coś planujesz robić dłużej niż dwa tygodnie to opłaca się tego poduczyć, bo korzyści są duże.
alex19
Cytat(com @ 8.01.2015, 01:57:08 ) *
to może http://phpjs.org/functions/include/ wink.gif ale nie korzystałem wiec nwm jak się spisuje

z tymi użyciami to miałem na myśli ilość takich dołączeń, ale tak generalnie to po zakończeniu trybu developerskiego powinieneś ten kod poddać minifikacji i najlepiej zbudować mapę tego scriptu czyli http://www.html5rocks.com/en/tutorials/dev...ols/sourcemaps/


Fajna opcja, ale gdzieś tą funkcję trzeba dopisać, więc kółko się zamyka, bo albo powielę kod i w każdym pliku, który ma mieć doklejony kawałek(zmienna) dopiszę tą funkcję albo robić jakąś partyzantkę i dopisać tą funkcję ni stąd ni zowąd w jakimś innym "wspólnym" pliku, który jest załączany w html.
com
owszem ale z JQ robisz dokładnie to samo, też jest dołączany, a te funkcje wystarczy że nawet dołączysz w samym html jako scripta, bo idea w każdym pliku oddzielnie nie sensu wink.gif

bo tak czy inaczej, to nie ma znaczenia bo każdy z plików dołączonych w html ze sobą się "widzi" a itak wszystko to składa sie w 1, podział na pliki powstał dla trybu developerskiego ale tworzenie wielu plików na produkcje nie ma sensu, widzę chcesz stworzyć coś na wzór importa z css tylko w dużej mierze te rozwiązanie tam opóźnia rendering zamiast przyspieszyć. PrinceOfPersia w pełni się z Tobą zgadzam, odnośnie przytoczonego mojego cytatu to tam w głównej mierze chodziło o to, że JQ jest sie łatwo nauczyć i ten programista go znał, ale brakowało podstaw samego js, no ale to poza tematem smile.gif
alex19
Zostaje przy imporcie przez jQuery, bo to wymaga najmniej zachodu i zmiany. Jedynie muszę przeedytować wszystkie pliki js (dołaczyć zmienna, wywalić wartości, zamienić na zmienna). Wszystkie inne opcje wymagały by dodatkowo edycji przynajmniej plików html/php, a z założenia zmiana miała być jak najmniejsza, a ułatwić pracę.

Łączenie js też nie wchodzi w grę, bo jest ich tylko kilka na moduł (oczywiście dla każdego inne), a ja właśnie chcę powyciągać na zewnątrz części wspólne, tak żeby robiąc jakąkolwiek zmianę/poprawkę robić to raz a nie 10 i jeszcze szukać za każdym razem od nowa kodu.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.