Как хранить и получать доступ к данным ajax в javascript без использования глобальных переменных?

Question

Возможно, мне здесь не хватает чего-то очевидного, но как я могу переписать этот код, чтобы ему не требовалось, чтобы переменная была глобальной переменной?

<script language="javascript">  
theVariable = "";  
function setValue()  /* called on page load */ 
{    
   /* make ajax call to the server here */
   theVariable = "a string of json data waiting to be eval()'d"; 
}  
function getValue()  
{  
    alert(theVariable);  
}  
</script>     


<input type="button" onClick="javascript:getValue()" value="Get the value">

В моей реальной ситуации функция setValue выполняет ajax-вызов на сервер, получает строку json и данные, к которым осуществляется доступ при наведении курсора мыши на различные части страницы. В итоге я использую несколько глобальных переменных, которые работают нормально, но беспорядочно, и я хотел бы знать, есть ли лучший и более элегантный способ сделать это?

Answer 1

Я бы сделал что-то вроде:

<script language="javascript">
var myApp = function () {

    /* theVariable is only available within myApp, not globally 
     * (unless you expose it) 
     */
    var theVariable = "";  

    /* called on page load */
    var setValue = function setValue(){

       /* make ajax call to the server here */
       theVariable = "a string of json data waiting to be eval()'d"; 

    };

    var getValue = function getValue() {

        alert(theVariable);

        // call useless private function
        pFunc();

    };

    var pFunc = function pFunc(){
        // this is a hypothetical private function
        // it's only here to show you how to do it
        // in case you need it

    };

    // now expose anything you need to be globally available
    // basically anything that will be called outside of myApp

    return { setValue: setValue, getValue: getValue}; 
}(); 
</script>     


<input type="button" onClick="myApp.getValue()" value="Get the value">

Тогда где-то вы добавляете прослушиватель событий или что-то еще, чтобы myApp.setValue () запускал его при загрузке страницы.

Если вы сделали:

return this;

Или просто полностью исключил оператор return (что подразумевало бы его возврат) ...

Тогда все будет глобально доступно как myApp.whither или myApp [что угодно].

Answer 2

Если вы используете jQuery (который вы можете использовать для части ajax), вы можете использовать метод .data (), который позволяет назначать произвольные данные элементам документа по ключу / значению.

Becuase javascriptдинамически типизируется, вы также можете получить элемент по имени / идентификатору, а затем добавить свойство к этому элементу, например,

document.myData = 'xyz';

Наконец, вы можете ограничить область действия ваших переменных, используя нечто, называемое закрытием .

Answer 3

Вы можете сделать замыкание следующим образом:

<script type="text/javascript">
function setValue() /* called on page load */
{
    /* make ajax call to the server here */
    var theVariable = "a string of json data waiting to be eval()'d"; /* declared with var to make it a private */
    getValue = function() /* declared without var to make it a public function */
    {
        alert(theVariable);
    }
}
</script>

Answer 4

Если вы не против иметь один глобальный объект, вы можете создать объект javascript и сохранить любое количество фрагментов данных, локальных по отношению к объекту javascript.

Вот пример:

var myData = {

переменная1: '',

переменная 2: '',

variablen: ''

};

установить данные следующим образом:

myData.variable1 = 'привет, мир';

в своем клике вы можете вызвать myData.variable1 для получения данных.