有很多方法可以存储一些数据并在以后使用,其中一些需要了解 JavaScript 作用域的工作方式 - 其他的只是依赖 jQuery 方法。
首先想到的事情
全局变量
这样做的坏方法是将值存储为全局变量:
function at_the_start(){
/// notice there is no var keyword, this means the variable will be global
global_html = $('element').html();
}
function later_on(){
$('element').html( global_html );
}
你不应该这样做,因为你的数据会“污染全局命名空间”——这基本上意味着其他代码可以很容易地访问你的变量(并弄乱它),并且你可能会无意中覆盖一些其他代码的全局数据——特别是如果您使用相当通用的变量名称。
局部变量保持在范围内
一个更好的方法是使用 JavaScript 的力量来实现自己的目的,即它的作用域能力,这里有一些好点要阅读—— JavaScript 中变量的作用域是什么?:
function my_code(){
var html = $('element').html();
/* Do stuff here */
$('element').html( html );
}
以上依赖于一个局部变量以及您必须将所有内容保存在同一个函数调用中的事实。由于您很可能会依赖用户触发事件的混合,因此您不能真正使用上述内容。这是因为您将在不同的位置使用许多函数,并且它们不能都共享相同的局部变量。或者他们可以吗?
以下是我所说的“全局局部”变量——很可能不是它的真实名称,但它描述了我所看到的事物:
function my_code(){
/// this variable is local, due to the var keyword
/// but it will be accessible in both the functions below
var html_local = '';
var my_function_to_start = function(){
html_local = $('element').html();
}
var after_other_things_have_happened = function(){
$('element').html( html_local );
}
/// you can even apply these functions to say an event handler
/// and the variable will be remembered because it exists within
/// the "after_other_things_have_happened" function's scope.
$('another.element').click(after_other_things_have_happened);
}
上面的工作是因为 JavaScript 函数总是可以访问在以前的父块/父范围或父函数中定义的变量。
jQuery 数据
考虑到您正在使用 jQuery,jQuery 提供了一种非常简单的方法来存储任意数据,您无需了解有关范围或本地和全局变量的任何信息。我花了一段时间来写这篇文章,所以很明显,此时其他海报已经正确地指出以下是一个好主意 - jQuery Data:
$('element').data( 'old_html', $('element').html() );
然后可以随时使用以下命令访问它:
$('element').data( 'old_html' );
所以...
$('element').html( $('element').data( 'old_html' ) );
将值放回去 - 它与元素一起存储,因此无论您可以访问何处,都可以获取$('element')
分配给它的数据。
其他一些不太相关的方式(但仍然是数据存储的方法)
作为对象的属性存储
有时,另一个有用的功能是 JavaScript 几乎将所有数据类型都视为对象。这意味着您可以为几乎任何东西添加属性。如果有点奇怪,以下实际上是很有可能的。
var a = new String('This is a string');
a.withAProperty = 'another string';
alert(a);
alert(a.withAProperty);
我偶尔会使用它在函数上创建伪静态属性,如下所示:
var my_function = function(){
if ( ! my_function.staticProp ) {
my_function.staticProp = 'abc';
}
/* use my_function.staticProp for something here */
}
var another_function(){
/* you can also access my_function.staticProp here
but only after my_function has been called once */
}
/* and my_function.staticProp here, but only
after my_function has been called once */
这几乎与使用全局 var 具有相同的效果(特别是如果您将其应用于全局函数),但意味着您的值存储在您的函数命名空间之上,从而大大减少了与其他代码冲突的可能性。它仍然意味着外部代码可以影响您的 var 的内容——这实际上可能是一个好处,具体取决于您想要做什么。
将内容存储在 dom 中
根据您希望存储的内容,有时将这些数据记录在 DOM 中可能会有所帮助。其中最明显的是将数据写入隐藏输入或隐藏元素。后者的好处是,如果它碰巧采用标记信息的形式(就像你的那样) ,你仍然可以导航这些数据(使用 jQuery 或 document.getElementById之类的) 。这也是避免循环引用引起的内存泄漏的有益方法——如果你正在处理大量数据——只要你确保清空数据传输中涉及的变量。
$.ajax('request_html.php').done(function(data){
$('<div id="hidden_html" />').hide().html(data).appendTo('body');
data = null;
/// you only need mullify data if you were to have other
/// sub/child functions within this callback, mainly being wary
/// of closures - which are functions that are defined in a certain
/// scope chain, but are then returned or put to use outside of
/// that chain - i.e. like event listeners.
/// nullify vars and removing large properties is still good practice though.
});
然后当你想检索时:
$('#hidden_html').html();
同时在这两点之间,您显然仍然可以遍历数据:
$('#hidden_html h1 > a[name=first]');