[学习笔记]JS计数器,闭包和localStorage
1.前言
Javascript也算用了挺久了,为了得到一个变量,类似Java的静态变量的功能,我想到了很早以前学习JS的闭包,还有做俄罗斯方块的排行榜用到LocalStorage技术,所以想总结一下,分享给大家,也算是作为笔记记载了。
2.代码
<!DOCTYPE html> <html> <head> <title>JS Counter Test</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $().ready(function(){ //*************counter0*************// function counter0(){ var num = 0; // function (), it was the same. return function plus(){ return num ++; } //plus(); }; //执行counter0时,里面的return,直接返回了其内容 ,并没有执行plus方法,此案例用来对比,满足好奇心。 $('#b0').click(function(){ $('#c0').html("Num0="+counter0()); }); //*************counter1*************// function counter1(){ var num = 0; function plus(){ return num ++; } plus(); return num; }; //和counter0比较,执行了plus方法,这个就是闭包的前身了,但是每次调用counter1,plus只能执行一次,所以每次值都是1 $('#b1').click(function(){ $('#c1').html("Num0="+counter1()); }); //*************counter2*************// var c2 = (function counter2(){ var num = 0; return function (){ return num ++; } })(); //闭包的正确玩法,方法里面写一个匿名方法或者有名称的方法都行 $('#b2').click(function(){ $('#c2').html("Num2="+c2()); }); //*************counter3*************// var c3 = (function counter3(){ var num = 0; return function plus(){ return num ++; } })(); //闭包里面方法可以匿名也可以有名称 $('#b3').click(function(){ $('#c3').html("Num3="+c3()); }); //*************counter4*************// //使用Html5本地存储技术,只要不要关了浏览器,即Session一直存在,就可以保存变量,刷新页面也存在 function counter4(){ if(typeof(Storage)!=="undefined"){ var num = localStorage.getItem("pageviews"); if (num != null){ localStorage.setItem("pageviews", Number(num) + 1); }else{ localStorage.setItem("pageviews", 1); num = 1; } $('#c4').html("Num4="+num); }else{ $('#c4').html("Sorry, Your browser is unable to support web storage"); } } $('#b4').click(function(){ counter4(); }); $('#reset4').click(function(){ localStorage.clear(); $('#c4').html("Num4=0"); }); //refresh will exeute every time. counter4(); }); </script> </head> <body> <h3>JS Counter</h3> <button id="b0">Click Btn0</button> <div id="c0">line zero</div> <button id="b1">Click Btn1</button> <div id="c1">line one</div> <button id="b2">Click Btn2</button> <div id="c2">line two</div> <button id="b3">Click Btn3</button> <div id="c3">line three</div> <button id="b4">Click Btn4</button> <button id="reset4">Rest Num4</button> <div id="c4"></div> </body> </html>
闭包:有权访问另一个函数作用域内变量的函数都是闭包。
例如上面例子中counter方法里面的匿名或者有名称的方法。那你也许有疑惑,为啥后面调用counter2中num值是有记忆的呢?因为如果没有内部方法,使用了num变量,使得counter2方法使用完,变量num要被回收,但是又被另一个函数使用,即变量被引用,所以不会被回收了,因此可以利用这个特性来封装一个私有变量。
3.结果图
3.1初始化时的界面
3.2各自点击一次button
说明:Num2和Num3都是0的原因在于return num++; 是返回num +1前的num值,故此处为0。.
3.3前三个button各自点击3下,Btn3点击4下,Btn4点击6下。
4.结束语
闭包当然还可以使得对象中变量变成私有变量。