Πείτε μου τη γνώμη σας.

[rafinos]

Γεια σας παιδιά!

 

Έχω μια webview εφαρμογή με html+js αρχεία και έχω το εξής θέμα. 

 

Χρησιμοποιώ πολλά αρχεία html που το καθένα χρησιμοποιεί κάποια js αρχεία (κοινά σε όλα). Υπάρχει όμως ένα αρχείο που είναι ξεχωριστό σε κάθε αρχείο και περιέχει συγκεκριμένες τιμές σε κάποια variables. 

 

Όλα τα παραπάνω html αρχεία είναι ακριβώς το ίδιο με τη μόνη διαφορά αυτό το ξεχωριστώ js αρχείο. 

 

Αυτό που θέλω είναι αν μπορείτε να σκεφτείτε τρόπο που απλοποιεί κάπως τη διαδικασία και να μπορεί να γίνει η όλη δουλειά με ένα και μόνο αρχείο html. 

 

Κάπου εδώ να τονίσω πως δεν υπάρχει η δυνατότητα για json αρχεία αντί των js με τις μεταβλητές, καθώς δεν επιτρέπονται http calls κτλ λόγω του "τοπικού" του θέματος. 

 

Επίσης δεν γίνεται να χρησιμοποιηθεί κάποια γλώσσα όπως php κτλ ώστε να γίνονται έλεγχοι για το ποιο αρχείο js θα χρησιμοποιηθεί. 

 

Η μόνη λύση που έχω σκεφτεί μέχρι στιγμής είναι η μετατροπή των πολλών js αρχείων σε έναν τεράστιο πίνακα και να αλλάξω το url ώστε να του δίνω κάποιες get μεταβλητές και να τις κάνω split με javascript ώστε να καταλαβαίνει πιο κομμάτι του πίνακα χρειάζεται. 

 

Αν καταλάβατε τι λέω και έχετε κάποια ιδέα για πείτε τη μου.

[vadou]

Δεν ξέρω αν κατάλαβα καλά αυτό που θες, αλλά μήπως θα σε βοηθούσε κάποιο SPA framework;

Αν δεν κατάλαβα, nevermind me, είμαι σε zombie φάση atm

[rafinos]

Έλεος, είχα απαντήσει χθες το βράδυ αλλά μάλλον κάτι παίχτηκε με το δίκτυο.

 

Η λογική του SPA δεν είναι λάθος, αλλά δυστυχώς δεν μπορούν να γίνουν http calls ούτε τίποτα. Μόνο file:/// scheme calls. Αυτό είναι το κύριο πρόβλημα. Και δεν το λέω έτσι, καθώς ένα από τα app μου είναι τελείως SPA αν και ακόμα δουλεύω μόνο με jquery και όχι με κάποιο άλλο framework. 

 

Ας σας δώσω και λίγο μια πιο λεπτομερή εικόνα. 

 

Δείτε την παρακάτω εικόνα.

 

Σε όλα αυτά τα αρχεία η μόνη διαφορά στο markup είναι ότι προστίθεται διαφορετικό js αρχείο. Στο 1.html το 1.js στο 2 το 2 και πάει λέγοντας. 

 

Σε κάθε ένα js αρχείο έχω αποθηκευμένους δύο πίνακες συγκεκριμένου τύπου js objects και σε κάθε περίπτωση οι τιμές είναι τελείως διαφορετικές. 

 

Μπορεί το 1.html να παίζει μπαλίτσα κάθε φορά με διαφορετικό αρχείο js ανάλογα με μια get μεταβλητή στο url;

 

Τονίζω... ΔΕΝ ΕΠΙΤΡΕΠΟΝΤΑΙ http://, https:// κτλ calls. 

 

Μήπως θα ήταν πιο σωστό να αποθηκεύσω σε ένα και μόνο js αρχείο τις τιμές κάθε js αρχείου με τη μορφή πίνακα και να τις διαβάζω ανάλογα με μια get variable που θα δίνεται;

[beefmazi]

Πετάς ένα url πχ dothis1

if(window.location.href === "dothis1"){
then include js1
}else if (window.location.href === "dothis2"){

then include js2

}

 

[rafinos]

 

Πετάς ένα url πχ dothis1

if(window.location.href === "dothis1"){

then include js1

}else if (window.location.href === "dothis2"){

then include js2

}

 

 

Προσπαθείς να γεμίσεις το account σου με μηνύματα σίγουρα... Που είδες include εσύ στην javascript;

[beefmazi]

Την λογική σου εξηγώ δεν προσπαθώ να γράψω κώδικα υποθέτω ξέρεις τα βασικά..

Τέλος πάντων δεν χρειάζεται καν να έχεις τόσα js αρχεία.

[rafinos]

Δεν έχεις καταλάβει ότι την ξέρω ήδη την λογική που λες στα παραπάνω μηνύματα;

 

Είδες ότι μάλλον εσύ δεν ξέρεις τα βασικά. Το "include" στην js γίνεται με δύο τρόπους:

 

α) Μέσω της html με το <script src ....>

β) Μέσω http request μέσα από την Javascript που όπως τόνισα "200 φορές" δεν μπορώ να χρησιμοποιήσω

 

Αυτό που ρωτάω είναι αν υπάρχει κάποιος άλλος τρόπος που δε γνωρίζω ή να μου πείτε κάποια άλλη διαφορετική λύση από αυτή που έχω μέχρι στιγμής. 

[beefmazi]

Τι ακριβώς θέμα έχεις και δεν μπορείς να κάνεις http request;

[The King]

 

Δείτε την παρακάτω εικόνα.

 

Σε όλα αυτά τα αρχεία η μόνη διαφορά στο markup είναι ότι προστίθεται διαφορετικό js αρχείο. Στο 1.html το 1.js στο 2 το 2 και πάει λέγοντας. 

 

Αρχικά δεν είμαι σίγουρος ότι κατάλαβα 100% ότι θες να πετύχεις αυτό που κατάλαβα εγώ από τα γραπτά σου.

 

Εάν όντως έχεις κάνει απόλυτη αντιστοιχία την ονομασία των html files με αυτη των JS files (1.html->1.js , 2.html->2.js ...) όπως είδα και στην εικόνα, τότε μπορείς πολύ απλά να παίρνεις το filename του html file που φορτώνει ο browser (χωρίς το extension) , το αποθηκεύεις σε variable και το χρησιμοποιείς για να φορτώνει το ίδιο JS filename επισυνάπτοντας το .js extension

 

Έτσι έχεις τη δυνατότητα το κάθε HTML σου να φορτώνει αυτοματοποιημένα το δικό του επιπλεον μοναδικό JS αρχείο.

 

Αποθηκεύεις σε εξωτερικό αρχείο μια φορά το παρακάτω JS και απλά το φορτώνεις ως file σε κάθε σελίδα. Σου έχω σχολιασμούς να καταλάβεις το κάθε βήμα.

 

// έχεις στο browser http://localhost/rafinos/my1.html, το αποθηκεύουμε στη μεταβλητή url
var url = window.location.pathname
var FilenametoExtract = url.substring(url.lastIndexOf('/')) //extract μόνο το τελευταίο μέρος της url
 
console.log(FilenametoExtract) // Παίρνεις το /my1.html
 
//Αφαιρούμε την κατάληξη .html
var JSFile = FilenametoExtract.substr(0, FilenametoExtract.lastIndexOf('.')) || FilenametoExtract;

console.log(JSFile) // παίρνεις /my1
 
//Αφαιρούμε το slash character '/' με χρήση regex
JSFile = JSFile.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-');

console.log(JSFile) //παίρνεις my1
 
//με τον παρακάτω κώδικα αναπαράγεις στην HTML το <script text/javascript src='..'>
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = JSFile + '.js' //προσθέτει την κατάληξη .js στο my1 -> my1.js
document.body.appendChild(script) //εισάγει στη σελίδα my1.html -> <script text/javascript src='my1.js'>

 

Γραμμή 20

 

Όπως μπορείς στο τέλος να προσθέσεις την κατάληξη .js έτσι μπορείς και στην αρχή να προσθέσεις κάτι άλλο, πχ κάποιο path ή αναγνωριστικό.

script.src = 'assets/js/' + JSFile + '.js' 

[rafinos]

Δεν κατάλαβες ακριβώς τι θέλω αλλά τουλάχιστον μου είπες έναν τρόπο για δυναμική φόρτωση αρχείου js. Βέβαια αυτό το έχω δοκιμάσει και δεν λειτουργεί γιατί όπως ανέφερα δεν επιτρέπονται http κτλ calls. Σκεφτείτε πως δουλεύω τοπικά χωρίς webserver (android εφαρμογή είναι).

 

Ευχαριστώ πολύ για τον κόπο σου.

[The King]

Δεν κατάλαβες ακριβώς τι θέλω αλλά τουλάχιστον μου είπες έναν τρόπο για δυναμική φόρτωση αρχείου js. Βέβαια αυτό το έχω δοκιμάσει και δεν λειτουργεί γιατί όπως ανέφερα δεν επιτρέπονται http κτλ calls. Σκεφτείτε πως δουλεύω τοπικά χωρίς webserver (android εφαρμογή είναι).

 

Ευχαριστώ πολύ για τον κόπο σου.

 

Δεν πειράζει, η γνώση παραμένει και για αργότερα

[rafinos]

Επειδή ήθελα να σας δώσω ακριβώς το error που έβγαζε είπα να το ξαναδοκιμάσω. Και με τον δικό σου τρόπο τρέχει κανονικά...

Παίζει ρόλο που εγώ το έτρεχα με append() της Jquery και όχι με καθαρή javascript;

[The King]

Επειδή ήθελα να σας δώσω ακριβώς το error που έβγαζε είπα να το ξαναδοκιμάσω. Και με τον δικό σου τρόπο τρέχει κανονικά...

Παίζει ρόλο που εγώ το έτρεχα με append() της Jquery και όχι με καθαρή javascript;

 

 

Το appendChild() αφορά στο DOM method άρα είναι δεκάδες φορές πιο γρήγορο στην εκτέλεση (Core Level 1 Node Object) από ότι το function append() της jQuery library.

 

Κανονικά αντί για Vanilla JavaScript μπορείς να το κάνεις και με jQuery, με τη σωστή σύνταξη βεβαίως, αλλά ίσως κάτι εκτελούταν πιο γρήγορα από το άλλο και σε synchronous έβγαζε προβλήματα, σε αυτή την περίπτωση παίζεις με JavaScript Promises ή timeout().

 

Μπορώ να δω τι είχες προσπαθήσει με jQuery;

[rafinos]

Το appendChild() αφορά στο DOM method άρα είναι δεκάδες φορές πιο γρήγορο στην εκτέλεση (Core Level 1 Node Object) από ότι το function append() της jQuery library.

 

Κανονικά αντί για Vanilla JavaScript μπορείς να το κάνεις και με jQuery, με τη σωστή σύνταξη βεβαίως, αλλά ίσως κάτι εκτελούταν πιο γρήγορα από το άλλο και σε synchronous έβγαζε προβλήματα, σε αυτή την περίπτωση παίζεις με JavaScript Promises ή timeout().

 

Μπορώ να δω τι είχες προσπαθήσει με jQuery;

var script = document.createElement( 'script' );
            script.type = 'text/javascript';
            script.src = f_name;
            $("body").append( script );

Ορίστε το error:

XMLHttpRequest cannot load file:///kapoio_arxeio. Cross origin requests are only supported for protocol schemes: http, data, chrome, https.

 

Με το appendChild δουλεύει πάντως.

[The King]

var script = document.createElement( 'script' );
            script.type = 'text/javascript';
            script.src = f_name;
            $("body").append( script );

Ορίστε το error:

XMLHttpRequest cannot load file:///kapoio_arxeio. Cross origin requests are only supported for protocol schemes: http, data, chrome, https.

 

Με το appendChild δουλεύει πάντως.

 

 

Νομίζω πιο πάνω έγραψες ότι δεν αφορά σε html μέσω web server (http scheme) αλλά σε Android περιβάλλον.

 

Οπότε είναι αυτό που σου γράφει το error αφού το περιβάλλον της εφαρμογής σου κάνει request (υποθέτω) μέσω file:// η C:// ή όπως ορίζεται το path περιβάλλον:// (χωρίς http scheme) αντί http:// request (είτε local είτε public παραμένει web) που χρειάζεται το jQuery.append()

 

Τελικά με μπέρδεψες, σε βοήθησε η λύση ή όχι ;