深入理解JavaScript系列（16）閉包（Closures）

更新時間：2012年04月12日 23:03:00 作者：

本章我們將介紹在JavaScript里大家經(jīng)常來討論的話題 —— 閉包（closure）。閉包其實大家都已經(jīng)談爛了。盡管如此，這里還是要試著從理論角度來討論下閉包，看看ECMAScript中的閉包內部究竟是如何工作的

介紹
本章我們將介紹在JavaScript里大家經(jīng)常來討論的話題 —— 閉包（closure）。閉包其實大家都已經(jīng)談爛了。盡管如此，這里還是要試著從理論角度來討論下閉包，看看ECMAScript中的閉包內部究竟是如何工作的。

正如在前面的文章中提到的，這些文章都是系列文章，相互之間都是有關聯(lián)的。因此，為了更好的理解本文要介紹的內容，建議先去閱讀第14章作用域鏈和第12章變量對象。

英文原文：http://dmitrysoshnikov.com/ecmascript/chapter-6-closures/
概論
在直接討論ECMAScript閉包之前，還是有必要來看一下函數(shù)式編程中一些基本定義。

眾所周知，在函數(shù)式語言中（ECMAScript也支持這種風格），函數(shù)即是數(shù)據(jù)。就比方說，函數(shù)可以賦值給變量，可以當參數(shù)傳遞給其他函數(shù)，還可以從函數(shù)里返回等等。這類函數(shù)有特殊的名字和結構。

定義
A functional argument (“Funarg”) — is an argument which value is a function.
函數(shù)式參數(shù)（“Funarg”） —— 是指值為函數(shù)的參數(shù)。
例子：

復制代碼代碼如下:

 
function exampleFunc(funArg) { 
funArg(); 
} 

exampleFunc(function () { 
alert('funArg'); 
}); 

上述例子中funarg的實際參數(shù)其實是傳遞給exampleFunc的匿名函數(shù)。

反過來，接受函數(shù)式參數(shù)的函數(shù)稱為高階函數(shù)（high-order function 簡稱：HOF）。還可以稱作：函數(shù)式函數(shù)或者偏數(shù)理或操作符。上述例子中，exampleFunc 就是這樣的函數(shù)。

此前提到的，函數(shù)不僅可以作為參數(shù)，還可以作為返回值。這類以函數(shù)為返回值的函數(shù)稱為帶函數(shù)值的函數(shù)（functions with functional value or function valued functions）。

復制代碼代碼如下:

 
(function functionValued() { 
return function () { 
alert('returned function is called'); 
}; 
})()(); 

可以以正常數(shù)據(jù)形式存在的函數(shù)（比方說：當參數(shù)傳遞，接受函數(shù)式參數(shù)或者以函數(shù)值返回）都稱作第一類函數(shù)（一般說第一類對象）。在ECMAScript中，所有的函數(shù)都是第一類對象。

函數(shù)可以作為正常數(shù)據(jù)存在（例如：當參數(shù)傳遞，接受函數(shù)式參數(shù)或者以函數(shù)值返回）都稱作第一類函數(shù)（一般說第一類對象）。

在ECMAScript中，所有的函數(shù)都是第一類對象。

接受自己作為參數(shù)的函數(shù)，稱為自應用函數(shù)（auto-applicative function 或者 self-applicative function）：

復制代碼代碼如下:

 
(function selfApplicative(funArg) { 

if (funArg && funArg === selfApplicative) { 
alert('self-applicative'); 
return; 
} 

selfApplicative(selfApplicative); 

})(); 

以自己為返回值的函數(shù)稱為自復制函數(shù)（auto-replicative function 或者 self-replicative function）。通常，“自復制”這個詞用在文學作品中：

復制代碼代碼如下:

 
(function selfReplicative() { 
return selfReplicative; 
})(); 

自復制函數(shù)的其中一個比較有意思的模式是讓僅接受集合的一個項作為參數(shù)來接受從而代替接受集合本身。

復制代碼代碼如下:

 
// 接受集合的函數(shù) 
function registerModes(modes) { 
modes.forEach(registerMode, modes); 
} 

// 用法 
registerModes(['roster', 'accounts', 'groups']); 

// 自復制函數(shù)的聲明 
function modes(mode) { 
registerMode(mode); // 注冊一個mode 
return modes; // 返回函數(shù)自身 
} 

// 用法，modes鏈式調用 
modes('roster')('accounts')('groups') 

//有點類似：jQueryObject.addClass("a").toggle().removClass("b") 

但直接傳集合用起來相對來說，比較有效并且直觀。

在函數(shù)式參數(shù)中定義的變量，在“funarg”激活時就能夠訪問了（因為存儲上下文數(shù)據(jù)的變量對象每次在進入上下文的時候就創(chuàng)建出來了）：

復制代碼代碼如下:

 
function testFn(funArg) { 
// funarg激活時, 局部變量localVar可以訪問了 
funArg(10); // 20 
funArg(20); // 30 

} 

testFn(function (arg) { 
var localVar = 10; 
alert(arg + localVar); 
}); 

然而，我們從第14章知道，在ECMAScript中，函數(shù)是可以封裝在父函數(shù)中的，并可以使用父函數(shù)上下文的變量。這個特性會引發(fā)funarg問題。

Funarg問題
在面向堆棧的編程語言中，函數(shù)的局部變量都是保存在棧上的，每當函數(shù)激活的時候，這些變量和函數(shù)參數(shù)都會壓入到該堆棧上。

當函數(shù)返回的時候，這些參數(shù)又會從棧中移除。這種模型對將函數(shù)作為函數(shù)式值使用的時候有很大的限制（比方說，作為返回值從父函數(shù)中返回）。絕大部分情況下，問題會出現(xiàn)在當函數(shù)有自由變量的時候。

自由變量是指在函數(shù)中使用的，但既不是函數(shù)參數(shù)也不是函數(shù)的局部變量的變量

例子：

復制代碼代碼如下:

 
function testFn() { 

var localVar = 10; 

function innerFn(innerParam) { 
alert(innerParam + localVar); 
} 

return innerFn; 
} 

var someFn = testFn(); 
someFn(20); // 30 

上述例子中，對于innerFn函數(shù)來說，localVar就屬于自由變量。

對于采用面向棧模型來存儲局部變量的系統(tǒng)而言，就意味著當testFn函數(shù)調用結束后，其局部變量都會從堆棧中移除。這樣一來，當從外部對innerFn進行函數(shù)調用的時候，就會發(fā)生錯誤（因為localVar變量已經(jīng)不存在了）。

而且，上述例子在面向棧實現(xiàn)模型中，要想將innerFn以返回值返回根本是不可能的。因為它也是testFn函數(shù)的局部變量，也會隨著testFn的返回而移除。

還有一個問題是當系統(tǒng)采用動態(tài)作用域，函數(shù)作為函數(shù)參數(shù)使用的時候有關。

看如下例子（偽代碼）：

復制代碼代碼如下:

 
var z = 10; 

function foo() { 
alert(z); 
} 

foo(); // 10 – 使用靜態(tài)和動態(tài)作用域的時候 

(function () { 

var z = 20; 
foo(); // 10 – 使用靜態(tài)作用域, 20 – 使用動態(tài)作用域 

})(); 

// 將foo作為參數(shù)的時候是一樣的 
(function (funArg) { 

var z = 30; 
funArg(); // 10 – 靜態(tài)作用域, 30 – 動態(tài)作用域 

})(foo); 

我們看到，采用動態(tài)作用域，變量（標識符）的系統(tǒng)是通過變量動態(tài)棧來管理的。因此，自由變量是在當前活躍的動態(tài)鏈中查詢的，而不是在函數(shù)創(chuàng)建的時候保存起來的靜態(tài)作用域鏈中查詢的。

這樣就會產生沖突。比方說，即使Z仍然存在（與之前從棧中移除變量的例子相反），還是會有這樣一個問題：在不同的函數(shù)調用中，Z的值到底取哪個呢（從哪個上下文，哪個作用域中查詢）？

上述描述的就是兩類funarg問題 —— 取決于是否將函數(shù)以返回值返回（第一類問題）以及是否將函數(shù)當函數(shù)參數(shù)使用（第二類問題）。

為了解決上述問題，就引入了閉包的概念。

閉包
閉包是代碼塊和創(chuàng)建該代碼塊的上下文中數(shù)據(jù)的結合。
讓我們來看下面這個例子（偽代碼）：

復制代碼代碼如下:

 
var x = 20; 

function foo() { 
alert(x); // 自由變量"x" == 20 
} 

// 為foo閉包 
fooClosure = { 
call: foo // 引用到function 
lexicalEnvironment: {x: 20} // 搜索上下文的上下文 
}; 

上述例子中，“fooClosure”部分是偽代碼。對應的，在ECMAScript中，“foo”函數(shù)已經(jīng)有了一個內部屬性——創(chuàng)建該函數(shù)上下文的作用域鏈。

“l(fā)exical”通常是省略的。上述例子中是為了強調在閉包創(chuàng)建的同時，上下文的數(shù)據(jù)就會保存起來。當下次調用該函數(shù)的時候，自由變量就可以在保存的（閉包）上下文中找到了，正如上述代碼所示，變量“z”的值總是10。

定義中我們使用的比較廣義的詞 —— “代碼塊”，然而，通常（在ECMAScript中）會使用我們經(jīng)常用到的函數(shù)。當然了，并不是所有對閉包的實現(xiàn)都會將閉包和函數(shù)綁在一起，比方說，在Ruby語言中，閉包就有可能是：一個過程對象（procedure object）, 一個lambda表達式或者是代碼塊。

對于要實現(xiàn)將局部變量在上下文銷毀后仍然保存下來，基于棧的實現(xiàn)顯然是不適用的（因為與基于棧的結構相矛盾）。因此在這種情況下，上層作用域的閉包數(shù)據(jù)是通過動態(tài)分配內存的方式來實現(xiàn)的（基于“堆”的實現(xiàn)），配合使用垃圾回收器（garbage collector簡稱GC）和引用計數(shù)（reference counting）。這種實現(xiàn)方式比基于棧的實現(xiàn)性能要低，然而，任何一種實現(xiàn)總是可以優(yōu)化的：可以分析函數(shù)是否使用了自由變量，函數(shù)式參數(shù)或者函數(shù)式值，然后根據(jù)情況來決定 —— 是將數(shù)據(jù)存放在堆棧中還是堆中。

ECMAScript閉包的實現(xiàn)
討論完理論部分，接下來讓我們來介紹下ECMAScript中閉包究竟是如何實現(xiàn)的。這里還是有必要再次強調下：ECMAScript只使用靜態(tài)（詞法）作用域（而諸如Perl這樣的語言，既可以使用靜態(tài)作用域也可以使用動態(tài)作用域進行變量聲明）。

復制代碼代碼如下:

 
var x = 10; 

function foo() { 
alert(x); 
} 

(function (funArg) { 

var x = 20; 

// 變量"x"在(lexical)上下文中靜態(tài)保存的，在該函數(shù)創(chuàng)建的時候就保存了 
funArg(); // 10, 而不是20 

})(foo); 

技術上說，創(chuàng)建該函數(shù)的父級上下文的數(shù)據(jù)是保存在函數(shù)的內部屬性 [[Scope]]中的。如果你還不了解什么是[[Scope]]，建議你先閱讀第14章, 該章節(jié)對[[Scope]]作了非常詳細的介紹。如果你對[[Scope]]和作用域鏈的知識完全理解了的話，那對閉包也就完全理解了。

根據(jù)函數(shù)創(chuàng)建的算法，我們看到在ECMAScript中，所有的函數(shù)都是閉包，因為它們都是在創(chuàng)建的時候就保存了上層上下文的作用域鏈（除開異常的情況）（不管這個函數(shù)后續(xù)是否會激活 —— [[Scope]]在函數(shù)創(chuàng)建的時候就有了）：

復制代碼代碼如下:

 
var x = 10; 

function foo() { 
alert(x); 
} 

// foo是閉包 
foo: <FunctionObject> = { 
[[Call]]: <code block of foo>, 
[[Scope]]: [ 
global: { 
x: 10 
} 
], 
... // 其它屬性 
}; 

如我們所說，為了優(yōu)化目的，當一個函數(shù)沒有使用自由變量的話，實現(xiàn)可能不保存在副作用域鏈里。不過，在ECMA-262-3規(guī)范里任何都沒說。因此，正常來說，所有的參數(shù)都是在創(chuàng)建階段保存在[[Scope]]屬性里的。

有些實現(xiàn)中，允許對閉包作用域直接進行訪問。比如Rhino，針對函數(shù)的[[Scope]]屬性，對應有一個非標準的 __parent__屬性，在第12章中作過介紹：

復制代碼代碼如下:

 
var global = this; 
var x = 10; 

var foo = (function () { 

var y = 20; 

return function () { 
alert(y); 
}; 

})(); 

foo(); // 20 
alert(foo.__parent__.y); // 20 

foo.__parent__.y = 30; 
foo(); // 30 

// 可以通過作用域鏈移動到頂部 
alert(foo.__parent__.__parent__ === global); // true 
alert(foo.__parent__.__parent__.x); // 10 

所有對象都引用一個[[Scope]]
這里還要注意的是：在ECMAScript中，同一個父上下文中創(chuàng)建的閉包是共用一個[[Scope]]屬性的。也就是說，某個閉包對其中[[Scope]]的變量做修改會影響到其他閉包對其變量的讀?。?

這就是說：所有的內部函數(shù)都共享同一個父作用域

復制代碼代碼如下:

 
var firstClosure; 
var secondClosure; 

function foo() { 

var x = 1; 

firstClosure = function () { return ++x; }; 
secondClosure = function () { return --x; }; 

x = 2; // 影響 AO["x"], 在2個閉包公有的[[Scope]]中 

alert(firstClosure()); // 3, 通過第一個閉包的[[Scope]] 
} 

foo(); 

alert(firstClosure()); // 4 
alert(secondClosure()); // 3 

關于這個功能有一個非常普遍的錯誤認識，開發(fā)人員在循環(huán)語句里創(chuàng)建函數(shù)（內部進行計數(shù)）的時候經(jīng)常得不到預期的結果，而期望是每個函數(shù)都有自己的值。

復制代碼代碼如下:

 
var data = []; 

for (var k = 0; k < 3; k++) { 
data[k] = function () { 
alert(k); 
}; 
} 

data[0](); // 3, 而不是0 
data[1](); // 3, 而不是1 
data[2](); // 3, 而不是2 

上述例子就證明了 —— 同一個上下文中創(chuàng)建的閉包是共用一個[[Scope]]屬性的。因此上層上下文中的變量“k”是可以很容易就被改變的。

復制代碼代碼如下:

 
activeContext.Scope = [ 
... // 其它變量對象 
{data: [...], k: 3} // 活動對象 
]; 

data[0].[[Scope]] === Scope; 
data[1].[[Scope]] === Scope; 
data[2].[[Scope]] === Scope; 

這樣一來，在函數(shù)激活的時候，最終使用到的k就已經(jīng)變成了3了。如下所示，創(chuàng)建一個閉包就可以解決這個問題了：

復制代碼代碼如下:

 
var data = []; 

for (var k = 0; k < 3; k++) { 
data[k] = (function _helper(x) { 
return function () { 
alert(x); 
}; 
})(k); // 傳入"k"值 
} 

// 現(xiàn)在結果是正確的了 
data[0](); // 0 
data[1](); // 1 
data[2](); // 2 

讓我們來看看上述代碼都發(fā)生了什么？函數(shù)“_helper”創(chuàng)建出來之后，通過傳入?yún)?shù)“k”激活。其返回值也是個函數(shù)，該函數(shù)保存在對應的數(shù)組元素中。這種技術產生了如下效果：在函數(shù)激活時，每次“_helper”都會創(chuàng)建一個新的變量對象，其中含有參數(shù)“x”，“x”的值就是傳遞進來的“k”的值。這樣一來，返回的函數(shù)的[[Scope]]就成了如下所示：

復制代碼代碼如下:

 
data[0].[[Scope]] === [ 
... // 其它變量對象 
父級上下文中的活動對象AO: {data: [...], k: 3}, 
_helper上下文中的活動對象AO: {x: 0} 
]; 

data[1].[[Scope]] === [ 
... // 其它變量對象 
父級上下文中的活動對象AO: {data: [...], k: 3}, 
_helper上下文中的活動對象AO: {x: 1} 
]; 

data[2].[[Scope]] === [ 
... // 其它變量對象 
父級上下文中的活動對象AO: {data: [...], k: 3}, 
_helper上下文中的活動對象AO: {x: 2} 
]; 

我們看到，這時函數(shù)的[[Scope]]屬性就有了真正想要的值了，為了達到這樣的目的，我們不得不在[[Scope]]中創(chuàng)建額外的變量對象。要注意的是，在返回的函數(shù)中，如果要獲取“k”的值，那么該值還是會是3。

順便提下，大量介紹JavaScript的文章都認為只有額外創(chuàng)建的函數(shù)才是閉包，這種說法是錯誤的。實踐得出，這種方式是最有效的，然而，從理論角度來說，在ECMAScript中所有的函數(shù)都是閉包。

然而，上述提到的方法并不是唯一的方法。通過其他方式也可以獲得正確的“k”的值，如下所示：

復制代碼代碼如下:

 
var data = []; 

for (var k = 0; k < 3; k++) { 
(data[k] = function () { 
alert(arguments.callee.x); 
}).x = k; // 將k作為函數(shù)的一個屬性 
} 

// 結果也是對的 
data[0](); // 0 
data[1](); // 1 
data[2](); // 2 

Funarg和return
另外一個特性是從閉包中返回。在ECMAScript中，閉包中的返回語句會將控制流返回給調用上下文（調用者）。而在其他語言中，比如，Ruby，有很多中形式的閉包，相應的處理閉包返回也都不同，下面幾種方式都是可能的：可能直接返回給調用者，或者在某些情況下——直接從上下文退出。

ECMAScript標準的退出行為如下：

復制代碼代碼如下:

 
function getElement() { 

[1, 2, 3].forEach(function (element) { 

if (element % 2 == 0) { 
// 返回給函數(shù)"forEach"函數(shù) 
// 而不是返回給getElement函數(shù) 
alert('found: ' + element); // found: 2 
return element; 
} 

}); 

return null; 
} 

然而，在ECMAScript中通過try catch可以實現(xiàn)如下效果：

復制代碼代碼如下:

 
var $break = {}; 

function getElement() { 

try { 

[1, 2, 3].forEach(function (element) { 

if (element % 2 == 0) { 
// // 從getElement中"返回" 
alert('found: ' + element); // found: 2 
$break.data = element; 
throw $break; 
} 

}); 

} catch (e) { 
if (e == $break) { 
return $break.data; 
} 
} 

return null; 
} 

alert(getElement()); // 2 

理論版本
這里說明一下，開發(fā)人員經(jīng)常錯誤將閉包簡化理解成從父上下文中返回內部函數(shù)，甚至理解成只有匿名函數(shù)才能是閉包。

再說一下，因為作用域鏈，使得所有的函數(shù)都是閉包（與函數(shù)類型無關：匿名函數(shù)，F(xiàn)E，NFE，F(xiàn)D都是閉包）。
這里只有一類函數(shù)除外，那就是通過Function構造器創(chuàng)建的函數(shù)，因為其[[Scope]]只包含全局對象。

為了更好的澄清該問題，我們對ECMAScript中的閉包給出2個正確的版本定義：

ECMAScript中，閉包指的是：

從理論角度：所有的函數(shù)。因為它們都在創(chuàng)建的時候就將上層上下文的數(shù)據(jù)保存起來了。哪怕是簡單的全局變量也是如此，因為函數(shù)中訪問全局變量就相當于是在訪問自由變量，這個時候使用最外層的作用域。
從實踐角度：以下函數(shù)才算是閉包：
即使創(chuàng)建它的上下文已經(jīng)銷毀，它仍然存在（比如，內部函數(shù)從父函數(shù)中返回）
在代碼中引用了自由變量
閉包用法實戰(zhàn)
實際使用的時候，閉包可以創(chuàng)建出非常優(yōu)雅的設計，允許對funarg上定義的多種計算方式進行定制。如下就是數(shù)組排序的例子，它接受一個排序條件函數(shù)作為參數(shù)：

復制代碼代碼如下:

 
[1, 2, 3].sort(function (a, b) { 
... // 排序條件 
}); 

同樣的例子還有，數(shù)組的map方法是根據(jù)函數(shù)中定義的條件將原數(shù)組映射到一個新的數(shù)組中：

復制代碼代碼如下:

 
[1, 2, 3].map(function (element) { 
return element * 2; 
}); // [2, 4, 6] 

使用函數(shù)式參數(shù)，可以很方便的實現(xiàn)一個搜索方法，并且可以支持無限制的搜索條件：

復制代碼代碼如下:

 
someCollection.find(function (element) { 
return element.someProperty == 'searchCondition'; 
}); 

還有應用函數(shù)，比如常見的forEach方法，將函數(shù)應用到每個數(shù)組元素：

復制代碼代碼如下:

 
[1, 2, 3].forEach(function (element) { 
if (element % 2 != 0) { 
alert(element); 
} 
}); // 1, 3 

順便提下，函數(shù)對象的 apply 和 call方法，在函數(shù)式編程中也可以用作應用函數(shù)。 apply和call已經(jīng)在討論“this”的時候介紹過了；這里，我們將它們看作是應用函數(shù) —— 應用到參數(shù)中的函數(shù)（在apply中是參數(shù)列表，在call中是獨立的參數(shù)）：

復制代碼代碼如下:

 
(function () { 
alert([].join.call(arguments, ';')); // 1;2;3 
}).apply(this, [1, 2, 3]); 

閉包還有另外一個非常重要的應用 —— 延遲調用：

復制代碼代碼如下:

 
var a = 10; 
setTimeout(function () { 
alert(a); // 10, after one second 
}, 1000); 

還有回調函數(shù)

復制代碼代碼如下:

 
//... 
var x = 10; 
// only for example 
xmlHttpRequestObject.onreadystatechange = function () { 
// 當數(shù)據(jù)就緒的時候，才會調用; 
// 這里，不論是在哪個上下文中創(chuàng)建 
// 此時變量“x”的值已經(jīng)存在了 
alert(x); // 10 
}; 
//... 

還可以創(chuàng)建封裝的作用域來隱藏輔助對象：

復制代碼代碼如下:

 
var foo = {}; 

// 初始化 
(function (object) { 

var x = 10; 

object.getX = function _getX() { 
return x; 
}; 

})(foo); 

alert(foo.getX()); // 獲得閉包 "x" – 10 

總結
本文介紹了更多關于ECMAScript-262-3的理論知識，而我認為，這些基礎的理論有助于理解ECMAScript中閉包的概念。如果有任何問題，我回在評論里回復大家。
其它參考

Javascript Closures (by Richard Cornford)
Funarg problem
Closures

您可能感興趣的文章:

js實現(xiàn)簡易拖拽的示例
這篇文章主要介紹了js實現(xiàn)簡易拖拽的示例，幫助大家更好的理解和學習JavaScript,感興趣的朋友可以了解下
2020-10-10
js模式化窗口問題![window.dialogArguments]
這篇文章主要介紹了js模式化窗口問題![window.dialogArguments],需要的朋友可以參考下
2016-10-10
Javascript拖拽系列文章1之offsetParent屬性
這個系列文章主要是講述實現(xiàn)Javascript拖拽功能的基礎知識，并將在最后給出一個完整的示例。適合對拖拽完全不懂的人閱讀
2008-09-09
Javascript 繼承機制的實現(xiàn)
要用ECMAScript實現(xiàn)繼承機制，首先從基類入手。所有開發(fā)者定義的類都可作為基類。出于安全原因，本地類和宿主類不能作為基類，這樣可以防止公用訪問編譯過的瀏覽器級的代碼，因為這些代碼可以被用于惡意攻擊。
2009-08-08
js解決pdf使用iframe打印報跨域錯誤問題的方法示例
這篇文章主要給大家介紹了關于js解決pdf使用iframe打印報跨域錯誤問題的相關資料,文中通過代碼介紹的非常詳細,對大家學習或者使用js具有一定的參考借鑒價值,需要的朋友可以參考下
2024-03-03
JS window.opener返回父頁面的應用
網(wǎng)上支付開發(fā)分為支付平臺和客戶端兩部分。當客戶端進入支付平臺時，需要在新窗體打開支付平臺頁面。
2009-10-10
詳解JavaScript中的數(shù)據(jù)類型轉換
在JavaScript中，數(shù)據(jù)類型的轉換是一項常見的任務，不同的數(shù)據(jù)類型之間需要相互轉換以滿足程序的需求，本篇博客將深入探討JavaScript中的數(shù)據(jù)類型轉換，包括隱式轉換和顯式轉換的概念、轉換規(guī)則和常見的數(shù)據(jù)類型轉換示例
2023-06-06
JS實現(xiàn)超簡單的鼠標拖動效果
這篇文章主要介紹了JS實現(xiàn)超簡單的鼠標拖動效果,涉及JavaScript響應鼠標事件動態(tài)操作頁面元素的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-11-11
javascript addBookmark 加入收藏多瀏覽器兼容
不錯的加入收藏代碼，加入了對一些常見瀏覽器的判斷，更好的體現(xiàn)用戶體驗，兼容了ie,firefox.
2009-08-08
layui框架中l(wèi)ayer父子頁面交互的方法分析
這篇文章主要介紹了layui框架中l(wèi)ayer父子頁面交互的方法,結合實例形式分析了layer父子頁面交互的常用技巧以及l(fā)ayer彈出多個iframe找到父頁面的操作方法,需要的朋友可以參考下
2017-11-11