2011-09-27 8 views
6

Una web-app complessa può avere una grande quantità di meta e/o informazioni specifiche sul contesto e sulla configurazione dell'utente. ad es. dimensioni del set di risultati preferite dall'utente, fuso orario, inizio settimana (dom/lun), ecc.Quali sono i metodi più comuni per inviare le variabili di configurazione iniziali a un client Ajax nel caricamento della pagina?

Quali sono i modi possibili per trasportare le variabili nell'applicazione client durante il caricamento (variabili nascoste? JSON incorporato da qualche parte?), e quali sono i pro/contro di ciascun metodo?

Conosco alcuni modi per hackerare le cose insieme, ma sono curioso di sapere se qualcuno ha identificato buoni schemi di progettazione da utilizzare o le migliori pratiche che possono condividere.

Anche se io preferirei informazioni generali su questo, mio ​​stack primario è jLAMP (jQuery, Apache, MySQL, PHP)

EDIT: ho già le applicazioni che fanno questo, quindi io non sono cercare una soluzione rapida, o suggerimenti per un paradigma completamente diverso (come in, non caricare la configurazione). Sto cercando una discussione con le opzioni e pro/contro di ogni, in modo da poter sintonizzare quello che ho, o un nuovo utente sarebbe presentato con un sacco di opzioni per prendere una buona decisione di progettazione fin dall'inizio. Grazie!

risposta

3

Per me sta passando in un array JSON. È così flessibile sul lato client che non sono sicuro del perché non lo useresti. Sul backend lo costruisco usando un normale array PHP e poi lo converto in JSON usando json_encode prima di fare eco alla pagina web.

<script>var myObject = <?=$mySettings?></script> 

e sei a posto. Come bonus, converto semplicemente l'oggetto json in una stringa prima di passarlo a PHP usando una singola variabile in un post e convertirlo in un array PHP per la manipolazione e l'inclusione in un database.

+0

Lo dichiari negli script di testa o in un tag di script? –

+0

Finché lo dichiarate prima di aver bisogno di fare riferimento, dovrebbe andare bene. Di solito lo dichiaro al di sopra del resto delle mie sceneggiature in quanto è in grado di stare da solo e poi è lì sicuramente se ne ho bisogno. Dovrà essere incluso anche in un tag script. E non fa mai male assicurarsi di inviare almeno {} in modo da non lanciare un errore javascript con la definizione della variabile javascript se l'array PHP è vuoto. –

+0

+1 per aver menzionato la codifica JSON delle variabili PHP. – Teddy

0

Avete mai provato la taconite jQuery.

http://jquery.malsup.com/taconite/

JSON è un grande formato di scambio dei dati. Ma non è la soluzione migliore per ogni problema.

In confronto, il modello Taconite richiede solo che il server restituisca un XHTML valido. Non è richiesta alcuna codifica sul client!

+0

Credo che una tattica simile possa usare anche i modelli jQuery. –

3

Finora utilizzo un file php per memorizzare le impostazioni personalizzate per la mia applicazione. Quindi includile in una pagina in quanto ne ho bisogno. Non dimenticare di impostare il tipo di contenuto a "text/javascript"

come illustrazione, il mio file di configurazione sarà simile:

<?php header('Content-type: text/javascript'); ?> 

var myApp = { 
    // setTimeOut id 
    timeoutID : null, 

    // Cards clearance delay 
    cardsClearanceDelay : 1500, 

    // Add other attribute as needed 
} 

e includerli nella pagina

<html> 
    <head> 
     <script type="text/javascript" src="web/get_configuration"></script> 
    </head> 

I crea la mia applicazione usando CI, web/get_configuration, semplicemente chiamando l'azione del controller per rendere il mio file di configurazione javascript.

+0

Per motivi di dimostrazione, ti dispiacerebbe aggiungere il codice della pagina che fa l'inclusione alla tua risposta? –

+0

+1 Lo faccio anch'io. Ecco un esempio ... Pagina HTML: http://www2.highpoint.edu/template.php; (dinamico) javascript: http://www2.highpoint.edu/js/app.php – Teddy

4

Come altri hanno sottolineato, se ci sono molte informazioni da trasportare durante il caricamento della tua applicazione non raccomanderei l'uso di AJAX, dato che stai sovraccaricando la tua connessione.

Il mio metodo scelto sarebbe quello di rendere tutte le informazioni di configurazione sul tag head dell'applicazione, usando PHP, in questo modo, una volta che i tuoi eventi si attivano (dopo che il DOM ha terminato il caricamento assumerei), hai tutto il informazioni a tua disposizione.

Codice esempio:

<head> 
<script type="text/javascript"> 
//Some js code here.... 
    var myConfigurationName = "<?=$myConfigurationNameFromDatabase;?>"; 
//Some more js code here... 
</script> 
</head> 

Il modo in cui si formatta i dati di configurazione è completamente a voi, tutto dipende da come correlata tutto questo è, o in quanti diversi luoghi/oggetti/funzioni potresti aver bisogno di usarlo.

È possibile creare alcuni oggetti di configurazione diversi a seconda dei dati o solo uno che li concentra tutti. Dipende molto dal design dell'applicazione che hai finora.

Se si dispone di un potente design OO sul codice JS, è possibile controllare this site e verificare se i modelli di base corrispondono alle proprie esigenze.

Sentiti libero di elaborare un po 'di più sul tuo disegno (se puoi) per aiutarci a capire dove ti trovi e come possiamo aiutarti.

Felice codifica!

+0

"se ci sono molte informazioni da trasportare durante il caricamento della tua applicazione non raccomanderei l'uso di AJAX" - interessante, dal momento che il l'intero punto di AJAX sta evitando i ricaricamenti di tutti quei dati. Stai dicendo che è sempre meglio ricaricarlo? –

+0

No, intendevo per un caricamento iniziale delle informazioni di configurazione ... naturalmente, dopo si dovrà usare ajax. – Deleteman

+0

Gotcha: ha molto più senso; grazie per aver chiarito Ti dispiacerebbe essere più specifico su come stai definendo la tua configurazione nel blocco principale? Spero che questo thread darà diverse opzioni con pro/contro degli approcci. –

0

Per prima cosa è necessario capire cosa è più importante per voi: ottimizzazione delle preferenze del server, prestazioni lato utente, modularità o altro.

Quindi è possibile caricare la configurazione per ogni modulo in qualche modo separato con una classe separata o addirittura un hardcode di alcune cose in JS. Otterrai agilità ma sarebbe un disastro generale, ma potrebbe essere un casino per lo più operativo. Probabilmente dipende da quanto siano isolati i team di codifica o gli sviluppatori di moduli.

Invece di diffondere la configurazione attraverso i moduli si potrebbe separare i diversi tipi di configurazione:

  1. Alcuni configurazione temporanea può essere conservato in localStorage (o simili, anche i cookie) e si otterrà da eventi aggiungendo che possono spingere il configurazione per tutte le schede aperte. Ovviamente questo sarebbe ottimo solo quando un utente ha un solo computer, ma è comunque possibile consentire di salvare questa configurazione sul proprio server.
  2. Le preferenze dell'utente possono essere inserite in un oggetto serializzato (JSON è piuttosto chiaro) e inviate con chiamate AJAX. È possibile memorizzare queste impostazioni sul lato PHP dopo che l'utente le ha modificate e serializzate semplicemente le coppie chiave-valore.
  3. La configurazione a livello di sito dovrebbe probabilmente essere separata, in quanto cambierebbe raramente e potrebbe essere archiviata in un file JS. Vuoi caricarlo dopo il caricamento della pagina? Bene - puoi farlo con AJAX e poi eseguire eval. Cosa vorresti ottenere? È anche possibile caricare lo stesso file JS in modo statico e sarebbe stato memorizzato nella cache dal browser e non caricato ogni volta e non sarebbe stato affatto toccato dall'interprete PHP.

E si potrebbe mescolare tutto questo come succede nella maggior parte dei casi di grandi siti web che ho visto.

Per quanto riguarda il formato, preferirei JSON. È piuttosto leggero (specialmente se confrontato con XML) e puoi farlo con GZIP per renderlo ancora più leggero. JSON è anche facilmente estendibile nel tempo (è possibile aggiungere e rimuovere opzioni senza errori irreversibili) ed è quasi JS nativo.

Come generare JSON ... Bene CACHE IT.Oltre ad alcune preferenze specifiche, la maggior parte delle opzioni di configurazione non cambierà troppo spesso (non tanto quanto essere letto).

Si noti inoltre che la configurazione può essere compresa in molti modi: in MediaWiki/Wikipedia è possibile aggiungere il proprio codice JavaScript.

Inoltre, potresti voler esprimere più opzioni, quindi è necessario se vuoi che gli utenti creino degli script aggiuntivi.

0

Le opzioni selezionate dall'utente persistente sono probabilmente impostate dai cookie. Tutto più complesso è gestito meglio dai valori json.

Ovviamente è possibile inserire codice javascript personalizzato nell'intestazione per impostare le variabili js, ma ciò richiede il rendering del codice in modo dinamico, che è (IMHO) brutto e soggetto a errori. D'altra parte è possibile eseguire il rendering di meta tag personalizzati contenenti tutti i dati personalizzati, e leggerlo da javascript in seguito.

La mia soluzione semplice ed elegante, in passato era di rendere solo JSON in un tag script nell'intestazione

<script id="initparams" type="application/json"> 
    [ output of json.dumps({a: "AAA", ....}) ] 
</script> 

E più tardi in un documento jQuery gestore pronto (che può essere caricato da un file esterno) :

var initparams = $.parseJSON($('#initparams').html()); 

da quando uso discarica jSON e analizzo su entrambi i lati alcuna possibilità di fuga sbagliato o un attacco iniezione.

ho fatto le stesse incorporamento JSON params in <div class="options"> per le opzioni che appartengono ad un jstree o dati della tabella, quando avevo bisogno di pochi parametri locali non giustificano una chiamata AJAX. Puoi nascondere le div.options tramite CSS o rimuoverlo dalla dom durante l'analisi:

var tableoptions = $.parseJSON($('table.mydata > div.options').remove().html()); 
Problemi correlati