如何在不使用全局变量的情况下在javascript中存储和访问ajax数据？

I may be missing something obvious here, but how could I rewrite this code so that it doesn't need the theVariable to be a global variable ?

我可能会遗漏一些明显的东西,但是我怎么能重写这段代码,以便它不需要theVariable作为全局变量?

<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">

In my actual situation, the setValue function makes an ajax call to the server, receives a json string and the data from that is accessed when you mouseover various parts of the page. I end up using several global variables which works fine, but is messy and I'd like to know if there's a better and more elegant way of doing it ?

在我的实际情况中,setValue函数对服务器进行ajax调用,接收json字符串,当您将鼠标悬停在页面的各个部分时,将访问该数据。我最终使用了几个全局变量,这些变量工作得很好但是很乱,我想知道是否有更好更优雅的方法呢?

4 个解决方案

#1

I would do something like:

我会做的事情如下:

<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">

Then somewhere you would add an event listener or whatever for myApp.setValue() to run it on page load.

然后在某处你会为myApp.setValue()添加一个事件监听器或其他东西来在页面加载时运行它。

If you did:

如果你这样做:

return this;

Or just left the return statement out completely (which would imply return this)...

或者只是完全退出return语句(这意味着要返回)...

Then everything would be globally available as myApp.whatever or myApp[whatever].

然后,所有内容都将作为myApp.whatever或myApp [无论如何]全局可用。

#2

If you use jQuery (which you may use for the ajax portion), you can use the .data() method which allows you to assign arbitury data to document elements by key/value.

如果使用jQuery(可以用于ajax部分),则可以使用.data()方法,该方法允许您通过键/值将仲裁数据分配给文档元素。

Becuase javascript is dynamically typed, you can also get an element by name/id and then add a property to that element eg

因为beccase javascript是动态类型的,你也可以通过名称/ id获取元素,然后向该元素添加属性,例如

document.myData = 'xyz';

Finally, you can limit the scope of your variables using something called a closure.

最后,您可以使用称为闭包的东西来限制变量的范围。

#3

You could make a closure like this:

你可以这样做一个闭包:

<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>

#4

If you don't mind having one global you can create a javascript object and store any number of pieces of data local to the javascript object.

如果你不介意拥有一个全局,你可以创建一个javascript对象并存储javascript对象本地的任意数量的数据。

Here's an example:

这是一个例子:

var myData = {

variable1: '',

variable2: '',

variablen: ''

};

set the data like this:

像这样设置数据:

myData.variable1 = 'hello, world';

myData.variable1 ='你好,世界';

in your onclick you can call myData.variable1 to retrieve the data.

在您的onclick中,您可以调用myData.variable1来检索数据。

#1