Domanda

Stiamo lavorando su una dashboard dinamica che è molto simile al pannello delle impostazioni di Twitter sotto il nostro twitter account.As la dashboard ha molti controlli, c'è molto contenuto popolato dynamically.So attualmente questo è il modo in cui lo facciamo.

Questo è uno il menu nel mio pannello di sinistra:

<a href="javascript:void(0);" onclick="fnGetFiles();">Files</a>     

Questa è la funzione chiamata che ottiene l'HTML:

function fnGetFiles(){
  $('#mainDashboard').html('<div class="rightContainer"><div class="tabLoader"></div></div><div class="clear"></div>');
  $.get(USER_DASHBOARD+'file_share/files.php',function(data){
  $('#mainDashboard').html(data);
});

Quindi fondamentalmente alleghiamo (append) direttamente l'HTML.Ma ho appena passato attraverso la dashboard di Twitter enter image description here
In primo luogo è la gestione degli URL che fanno per navigare tra i diversi menu a sinistra(immagine aggiunta per riferimento).Cambia al volo e il contenuto viene caricato.Su ispezionare il codice che ho notato inviano html come stringhe JSON.
Non sono esattamente sicuro ma fa questo migliorare le prestazioni in qualche modo?Il mio è un po scarso nella produzione e vorrei sapere esattamente quali framework posso utilizzare per ottenere qualcosa di simile a questo(Inoltre, affronto problemi in conflitto AJAX tra gli script).Sto usando PHP, jquery per la mia candidatura.
Ho cercato di ottenere informazioni da dev.twitter.com,e blog ma non sono riuscito a trovare informazioni specifiche su questo.
Per favore, se possibile, cerca di guidarmi e gettare un po ' di luce su di esso.
Grazie per il tuo tempo.

È stato utile?

Soluzione

Il tuo HTML, JavaScript, immagini e altri elementi lato client sono tutti statico.Dovrebbero rimanere così.Non è necessario creare alcun elemento dinamicamente all'interno di JavaScript.

Le tue chiamate AJAX devono semplicemente spegnersi, ottenere i dati necessari per popolare il tuo HTML, e aggiunga questi dati al DOM.JSON / XML è proprio come un protocollo:

I protocolli di comunicazione devono essere concordati dalle parti interessate.

Per il tuo JS > PHP > JS, JSON è un ottimo ' protocollo '(metodo di comunicazione concordato) da scegliere perché imposta uno standard e tu usi semplicemente json_encode() / json_decode() nel tuo PHP, e $.parseJSON() se stai usando jQuery.L'utilizzo di JSON è solo un formato di messaggistica concordato che, in realtà come sviluppatore, dovresti impegnarti a utilizzare perché è uno "standard".

Non vuoi inviare dati aggiuntivi sul filo che non è necessario.Non inviare HTML a meno che non sia necessario.Richiedi e rispondi solo con i dati di cui hai bisogno.

Senza entrare in troppo di un rant qui, ci sono molti strumenti impressionanti là fuori per aiutarti a fare cose come questa.AngularJS, ad esempio, consente di aggiornare automaticamente il DOM con JSON restituito dal server, attraverso l'uso di istruzioni come ng-repeat.In pratica significa che non è necessario scrivere alcun JavaScript personalizzato per popolare gli elementi DOM con i dati recuperati dal server (che sia il dashboard che mio dashboard stanno attualmente facendo).

Oltre a questo, sto usando websockets, perché sparare un carico di richieste AJAX per dati in tempo reale non è ciò per cui sono fatte quelle richieste AJAX.Se hai solo bisogno di dati ogni 5-10 secondi, va bene, ma più spesso di così e vuoi una tecnologia bidirezionale come websockets, che ti richiederà di imparare React PHP e qualcosa come Ratchet da implementare (quando lo fai funzionare, tuttavia, è fantastico).

In primo luogo, concordare un 'protocollo' che sia il lato client che il lato server utilizzeranno.Quindi, solo inviare e ricevere i dati che si bisogno, e quello che cambiare.Qualsiasi altra cosa è statica e sprecherebbe solo larghezza di banda.Non passare HTML in giro.Infine, velocità-saggio, l'invio di JSON vs.invio di testo normale-dipende letteralmente dalla lunghezza dei caratteri che stai inviando.Basta cosi'.Indipendentemente da ciò, questi guadagni in entrambi i casi sono così insignificanti che non devi preoccuparti di loro, a meno che tu non stia inviando HTML, cosa che non lo sei.Sei tu.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top