2013-12-11 24 views
7

Negli ultimi anni ho sempre utilizzato un campo nascosto lato client <input> per archiviare un valore lato server e utilizzarlo in JavaScript.Procedure consigliate Javascript - Utilizzo dei valori lato server

Ad esempio, supponiamo di aver bisogno di un valore di timeout Ajax dalla configurazione della mia app.

probabilmente sarei memorizzare in questo modo nel mio JSP:

<input type="hidden" id="ajaxTimeout" value="${serverValue}" />

e quindi utilizzarlo come questo, dove la mia chiamata AJAX ha vissuto in un file esterno:

$("#ajaxTimeout").val() 

ero avendo una discussione su questo oggi e si è suggerito che è la migliore pratica per memorizzare valori che saranno utilizzati solo da Javascript all'interno dei tag HTML <meta>.
Questo importa? Esiste un modo preferito per ottenere informazioni sul lato server che devono essere utilizzate esclusivamente in Javascript?
La mia comprensione è che se il campo di input nascosto non fa parte di un modulo, allora è abbastanza sicuro da utilizzare per memorizzare il valore in quanto non verrà allegato a nessuna richiesta. Detto questo, ho sempre pensato che fosse davvero un trucco.

Pensieri?

:: EDIT ::
due risposte fantastiche:

risposta

3

Noi personalmente fare qualcosa di simile:

var options = { 
    selector: '#divId', 
    serverSideVariableHere: <%=AspNetProperty %>, 
    anotherServerSideVariableHere: <%=AspNetPropertyTwo %> 
} 
var viewModel = new KnockoutViewModel(options); 
ko.applyBindings(viewModel, $(options.selector)[0]); 

Questo è semplicemente un esempio usando KnockOut JS, ma questa idea può essere esteso a qualsiasi libreria JavaScript che si sceglie di utilizzare (o meno;))

Passiamo quindi a queste opzioni a qualsiasi uso, come ad esempio Knockout ViewModels, o qualsiasi altra cosa. In questo modo il nostro JavaScript rimane testabile e possiamo passare qualsiasi valore desideriamo ai nostri test.

+0

faccio lo stesso in Backbone + Rails back-end. Ad esempio, per alcune informazioni importanti sull'utente corrente, lo facciamo nel layout: var window.AppName.currentUser = new AppName.Model.CurrentUser ($ .parseJSON (<% = dump attributi utente current_user in json%>)) ; – Enders

+2

Tieni presente che in un sito Web ASP classico o Asp.Net è necessaria un'azione aggiuntiva per eseguire i file .js tramite il parser ASP, quindi è necessaria una configurazione aggiuntiva. Questo ha un potenziale (anche se probabilmente piccolo) implicazione delle prestazioni. – ErikE

+0

D'altra parte, nulla ti impedisce di inserire la dichiarazione dell'oggetto richiesta in un file html in un tag '

1

L'utilizzo del tag meta per qualcosa di diverso da una metafora del browser "istruzioni" non è da meno di un hack IMO.

Vorrei prendere in considerazione la memorizzazione dei dati JavaScript a cui appartiene - in JavaScript, utilizzando i valori letterali dell'oggetto JavaScript.

4

In aggiunta al metodo letterale dell'oggetto vecchio semplice fornito in altre risposte, se il valore che si desidera passare al client riguarda un elemento DOM specifico (o c'è un elemento DOM che rappresenta l'oggetto logico che il valore è circa), si può mettere il valore in un attributo di dati:

<div id="videoplayer" data-startplayingat="1:02">HTML Content</div> 

Questa è accessibile come un intero attributo, data-startplayingat, o nei browser moderni c'è l'attributo dataset. La sintassi jQuery è $('#videoplayer').data('startplayingat').

official W3C spec on data attributes spiega tutto questo.

Ecco alcuni punti salienti interessanti:

  • Il nome non deve utilizzare le lettere maiuscole, e deve essere compatibile con XML.
  • L'attributo dataset converte i trattini, in modo che un nome come start-playing diventi startPlaying.

Un potenziale svantaggio per il metodo letterale oggetto (che mi piace e mi ho usato) è che se si desidera che l'oggetto in un file .js, file JavaScript quindi normalmente statiche devono essere eseguito attraverso la vostra parser- dinamica -che causerà una perdita di prestazioni potenzialmente piccola (ma ancora presente). Inserendo la dichiarazione dell'oggetto in un tag <script> in un file HTML, è possibile risolvere questo problema, ma in questo caso è possibile avere problemi di caricamento degli script da gestire.

+0

Eccellente. Preferirei questo metodo. Mostra quanto tempo è passato da quando ho scritto qualsiasi materiale JSP/ASP/PHP .... – ZenMaster

+0

Utilizzando l'esempio di un valore di timeout AJAX (o qualsiasi valore che non è legato a un DOM specifico), varrebbe comunque la pena creando un div e usando un attributo dati per memorizzare questo valore invece di un oggetto letterale? –

+0

@wild_nothing Penso che usare gli attributi dei dati dovrebbe essere per cose che sono almeno logicamente collegate ad un elemento DOM. Non vorrei usarli per i dati generali in-page. L'oggetto letterale sarebbe la mia preferenza per qualcosa come un timeout ajax. Volevo solo offrirti una serie completa di risposte ... – ErikE

1

I fortemente preferiscono snippet JSON negli attributi data-. Ciò ti consente di portarli all'elemento HTML correlato e di non inquinare lo spazio dei nomi globale di Javascript o di generare codice aggiuntivo per gestire diversamente il namespace. Accoppiato con un serializzatore JSON sul lato server, questo riduce al minimo la necessità di sfuggire manualmente a qualsiasi valore.

(anche io ho una cosa ™ contro <script> tag con contenuti in generale. View e la logica di separazione e tutto il resto.)

+0

Non sono sicuro di avere snippet, dato che dovresti "evalarli", ma l'attributo 'data-' è certamente un buon modo. – ZenMaster

+0

@ZenMaster - L'analisi JSON non evalling è una parte standard di JavaScript 1.7 e disponibile su praticamente tutti i browser desiderati: http://caniuse.com/#feat=json. (Per i più vecchi hai "json2.js" di Crockford.) – millimoose

+0

Un altro piccolo vantaggio è che imporrà la conversione di tipo automatico di jQuery che fa in '.data()' per usare l'analisi JSON, invece di fare qualche altra ipotesi, probabilmente errata . – millimoose