Passare i parametri ai file JavaScript

Spesso avrò un file JavaScript che voglio usare che richiede determinate variabili essere definite nella mia pagina web.

Quindi il codice è qualcosa del genere:

  var obj1 = "somevalue";  

Ma quello che voglio fare è:

  

Ho provato diversi metodi e il migliore è quello di analizzare la stringa di query in questo modo:

 var scriptSrc = document.getElementById("myscript").src.toLowerCase(); 

E poi cerca i miei valori.

Mi chiedo se c’è un altro modo per farlo senza build una funzione per analizzare la mia stringa.

Conosci tutti gli altri metodi?

Consiglierei di non utilizzare variabili globali, se ansible. Utilizza uno spazio dei nomi e OOP per passare i tuoi argomenti a un object.

Questo codice appartiene a file.js:

 var MYLIBRARY = MYLIBRARY || (function(){ var _args = {}; // private return { init : function(Args) { _args = Args; // some other initialising }, helloWorld : function() { alert('Hello World! -' + _args[0]); } }; }()); 

E nel tuo file html:

   

È ansible passare parametri con attributi arbitrari. Funziona su tutti i browser recenti.

  

All’interno di somefile.js puoi ottenere i valori delle variabili passate in questo modo:

……..

 var this_js_script = $('script[src*=somefile]'); // or better regexp to get the file name.. var my_var_1 = this_js_script.attr('data-my_var_1'); if (typeof my_var_1 === "undefined" ) { var my_var_1 = 'some_default_value'; } alert(my_var_1); // to view the variable value var my_var_2 = this_js_script.attr('data-my_var_2'); if (typeof my_var_2 === "undefined" ) { var my_var_2 = 'some_default_value'; } alert(my_var_2); // to view the variable value 

…eccetera…

Un’altra idea che ho trovato è stata assegnare un “id” all’elemento e passare gli argomenti come attributi data- *. Il tag risultante sarebbe simile a questo:

  

Lo script potrebbe quindi utilizzare l’id per individuare automaticamente se stesso e analizzare gli argomenti. Dato il tag precedente, il nome potrebbe essere recuperato in questo modo:

 var name = document.getElementById("helper").getAttribute("data-name"); 

otteniamo name = helper

Dai un’occhiata a questo URL. Funziona perfettamente per il requisito.

http://feather.elektrum.org/book/src.html

Grazie mille all’autore. Per un rapido riferimento ho incollato la logica principale di seguito:

 var scripts = document.getElementsByTagName('script'); var myScript = scripts[ scripts.length - 1 ]; var queryString = myScript.src.replace(/^[^\?]+\??/,''); var params = parseQuery( queryString ); function parseQuery ( query ) { var Params = new Object (); if ( ! query ) return Params; // return empty object var Pairs = query.split(/[;&]/); for ( var i = 0; i < Pairs.length; i++ ) { var KeyVal = Pairs[i].split('='); if ( ! KeyVal || KeyVal.length != 2 ) continue; var key = unescape( KeyVal[0] ); var val = unescape( KeyVal[1] ); val = val.replace(/\+/g, ' '); Params[key] = val; } return Params; } 

Ecco una prova del concetto molto affrettata.

Sono sicuro che ci sono almeno 2 posti dove ci possono essere miglioramenti, e sono anche sicuro che questo non sopravviverebbe a lungo in natura. Qualsiasi feedback per renderlo più presentabile o utilizzabile è il benvenuto.

La chiave sta impostando un id per il tuo elemento script. L’unico problema è che questo significa che puoi chiamare lo script una volta sola poiché cerca quell’ID per estrarre la stringa della query. Questo potrebbe essere risolto se, invece, lo script scorre attraverso tutti gli elementi della query per vedere se qualcuno di essi punta ad esso, e in tal caso, usa l’ultima istanza di tale elemento di script. Ad ogni modo, con il codice:

Script chiamato:

 window.onload = function() { //Notice that both possible parameters are pre-defined. //Which is probably not required if using proper object notation //in query string, or if variable-variables are possible in js. var header; var text; //script gets the src attribute based on ID of page's script element: var requestURL = document.getElementById("myScript").getAttribute("src"); //next use substring() to get querystring part of src var queryString = requestURL.substring(requestURL.indexOf("?") + 1, requestURL.length); //Next split the querystring into array var params = queryString.split("&"); //Next loop through params for(var i = 0; i < params.length; i++){ var name = params[i].substring(0,params[i].indexOf("=")); var value = params[i].substring(params[i].indexOf("=") + 1, params[i].length); //Test if value is a number. If not, wrap value with quotes: if(isNaN(parseInt(value))) { params[i] = params[i].replace(value, "'" + value + "'"); } // Finally, use eval to set values of pre-defined variables: eval(params[i]); } //Output to test that it worked: document.getElementById("docTitle").innerHTML = header; document.getElementById("docText").innerHTML = text; }; 

Script chiamato tramite la seguente pagina:

  

Usa le variabili globali :-D.

Come questo:

   

Il codice JavaScript in 'file.js' può accedere a obj1 e obj2 senza problemi.

MODIFICA Voglio solo aggiungere che se 'file.js' vuole verificare se obj1 e obj2 sono stati dichiarati è ansible utilizzare la seguente funzione.

 function IsDefined($Name) { return (window[$Name] != undefined); } 

Spero che questo ti aiuti.

potrebbe essere molto semplice

per esempio

   

È quindi ansible convertire la stringa di query in json come di seguito

 var json = $.parseJSON('{"' + queryString.replace(/&/g, '","').replace(/=/g, '":"') + '"}'); 

e quindi può usare come

 console.log(json.id); 

Questo può essere fatto facilmente se si utilizza qualche framework Javascript come jQuery. Così,

 var x = $('script:first').attr('src'); //Fetch the source in the first script tag var params = x.split('?')[1]; //Get the params 

Ora puoi usare questi parametri dividendo come parametri variabili.

Lo stesso processo può essere eseguito senza alcun framework, ma richiederà più linee di codice.

Bene, si potrebbe avere il file javascript costruito da uno qualsiasi dei linguaggi di scripting, iniettando le variabili nel file ad ogni richiesta. Dovresti dire al tuo webserver di non ridimensionare staticamente i file js (usando mod_rewrite sarebbe sufficiente).

Essere consapevoli però che si perde la memorizzazione nella cache di questi file js in quanto vengono modificati costantemente.

Ciao.

Bella domanda e risposte creative ma il mio suggerimento è quello di rendere i vostri metodi parametrizzati e che dovrebbero risolvere tutti i vostri problemi senza trucchi.

se hai la funzione:

 function A() { var val = external_value_from_query_string_or_global_param; } 

puoi cambiarlo in:

 function B(function_param) { var val = function_param; } 

Penso che questo sia l’approccio più naturale, non è necessario creare documentazione aggiuntiva sui “parametri dei file” e si riceve lo stesso. Questo è particolarmente utile se permetti ad altri sviluppatori di usare il tuo file js.

No, non puoi davvero farlo aggiungendo delle variabili alla porzione querystring dell’URL del file JS. Se scriverà la porzione di codice per analizzare la stringa che ti dà fastidio, forse un altro modo sarebbe quello di codificare json le tue variabili e metterle in qualcosa come l’attributo rel del tag? Non so quanto sia valido in termini di convalida HTML, se questo è qualcosa di cui sei molto preoccupato. Quindi devi solo trovare l’attributo rel dello script e poi json_decode.

per esempio

  

Non è un html valido (non credo) ma sembra funzionare se si crea un attributo personalizzato per il tag dello script nella tua pagina web :

Quindi accedi all'attributo personalizzato nella javascript:

var myVar = document.getElementById( "myScript" ).getAttribute( "myCustomAttribute" );

Non sono sicuro se questo è migliore o peggiore dell'analisi della stringa di origine dello script.