原生JS中,闭包虽好用,但是很难用好,在jQuery中一样,都有一些点需要我们注意。jQuery中使用闭包的常见情况有以下几种:
1、$(document).ready()的参数
我们在写jQuery时都会把一系列的函数放在$(document).ready()中,这其实就是一个闭包,这有效避免了命名冲突;
2、绑定事件
1 $(document).ready(function() {
2 var num = 0;
3 $("button").click(function(event) {
4 event.preventDefault();
5 num ;
6 console.log(num);
7 });
8 });
我们为“button”绑定点击事件,click里的函数就是一个匿名函数,它访问了外部变量,每次访问同一个num实例,多次点击,num值累计加1。
3、循环绑定事件
1 $(document).ready(function() {
2 for (var i = 0; i < 5; i ) {
3 $("<button>btn" i "</button>")
4 .click(function() {
5 console.log(i);
6 }).insertBefore("#result");
7 }
8 });
我们的原意是想生产五个按钮,并为每个按钮绑定一个点击事件,但是上述方案显然是不行的,click事件里传的是一个匿名函数,每次访问的都是i最终的值5。应该这样写:
1 $(document).ready(function() {
2 for (var i = 0; i < 5; i ) {
3 (function(val) {
4 $("<button>btn" val "</button>")
5 .click(function() {
6 console.log(val);
7 }).insertBefore("#result");
8 })(i)
9 }
10 })
我们创建一个立即调用函数表达式,每一次都将当前的i值传入函数,这样,内部函数就能拿到每次循环当下的i值,而非终值。也可以用each这样写:
1 $(document).ready(function() {
2 $.each([0, 1, 2, 3, 4], function(index, value) {
3 $("<button>btn" value "</button>")
4 .click(function() {
5 console.log(value);
6 }).insertBefore("#result");
7 });
8 });
我们都知道.on()方法还接收一个对象参数,当事件被触发是,会有一个对象参数以event.data的形式传给对象处理函数,因此,还可以这么写:
1 $(document).ready(function() {
2 for (var i = 0; i < 5; i ) {
3 $("<button>btn" i "</div>")
4 .on("click", {value: i}, function(event) {
5 console.log(event.data.value);
6 }).insertBefore("#result");
7 }
8 });
以上就是jQuery中处理闭包的方式,另外还要注意命名空间,和JS中道理都是一样的。
更多专业前端知识,请上 【猿2048】www.mk2048.com