JAVAScript 校验码实例(包含函数嵌套、闭包、方法和window.onload)
这里写目录标题
提示:以下是本篇文章正文内容,下面案例可供参考
一、函数声明与函数表达式
二、函数嵌套与闭包
在函数大量嵌套里最容易出现将局部变量与混合变量混淆的情况
1 作用域
function f1(){
let n = 999
console.log(n)
}
f1() // 999
function f2(){
let n = 999
}
alert(n); // 报错
2 嵌套里的作用域链(就近原则)
结果是123
3 闭包
当需要在函数外部,访问函数内部的变量,这个时候,按照局部变量作用域的问题。似乎是不可能的,闭包的出现,解决了这个问题。
function outer(){
let name = 'lilei'
function inner(){
return name
}
return inner
}
let g = outer()
console.log(g()) // lilei
不使用闭包
function outer(){
let name = 'lilei'
return name
}
console.log(outer()) // lilei
经过思考发现单纯一个函数也可以输出需要的值,为什么还要引入闭包?
我自己的理解是:变量->函数->类,每层往上都是逐步提升的过程,通过函数可以实现更多的逻辑,比如对数据进行处理,仅仅靠变量是不能实现的。
什么是闭包?
闭包是将函数内部和函数外部连接起来的桥梁,可以在内部函数访问到外部函数作用域。
一可以读取函数作用域中的变量
二可以将函数中的变量存储到内存中,保护变量不被污染。而正因闭包会把函数中的变量值存储到内存中,会对内存有消耗,所以不能滥用闭包,否则会影响网页性能,造成内存泄露。当不需要使用闭包时,要及时释放内存,可将内存函数对象的的变量赋值为 null。
如何使用闭包(计数时)
var add = (function(){
var counter = 0;
return funtion (){
return counter += 1;}
})();
add();
add();
add(); //计数器为3
拆分代码
function outerFunction(){
var counter = 0;
function innerFuntion(){
return counter += 1;
}
return innerFunction;
}
var add = outerFuntion();
add();
add();
add(); //计数器为3
这时候的add就形成了一个闭包。一个闭包由两部分组成,函数和创建该函数的环境。环境是由环境中的局部变量组成的。对于闭包add来说,它由函数innerFunction和变量counter组成,所以这时候add是可以访问变量counter的。
不使用闭包时就会出现错误
function add(){
var counter = 0;
return counter += 1;
}
add();
add();
add();//一直为1
四、window.onload
- 为了能够保证操作的模块或对象在js代码之前就加载了,我们不得不把js代码放在页面的底端。但是我们在设计页面的时候,为了把js代码放在一起,或者一个让页面更加简洁的位置,那就有可能出现代码中操作的对象未被加载的情况。这时候window.onload就被有了存在的意义了
- window.onload是一个事件,在文档加载完成后能立即触发,并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。即:window.onload =function (){这里写操作的代码};
- 当JS代码位于布局前面时就可以使用window.onload保证元素被执行
五、实例
制作一个校验码下面是实例的JS思路(布局略)
随机验证码和点击事件的部分代码如下:
1. Math.random()
因为校验码是随机生成的,所以这次实例使用了Math里的内置方法random()
Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1,也就是说,从0(包括0)往上,但是不包括1(排除1),可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。
建立了一个在1-9和a-f间的校验码数组arr,再利用Math.random()取整数的方式随机选择数组里的元素,最后利用str字符串拼接的方式生成一个完整的验证码
function getStr() {
function getRandom(min, max) {
//Math.floor为向下取整
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var str = '';
for (var i = 0; i < 6; i++) {
var num = getRandom(0, arr.length - 1);
str += arr[num];
}
return str;
}
利用函数嵌套的方式分步获取随机数和随机校验码
缺点:Math.random() 不能提供像密码一样安全的随机数字。不要使用它们来处理有关安全的事情。使用Web Crypto API 来代替, 和更精确的window.crypto.getRandomValues() 方法.
2.windom.onload里的点击事件
window.onload = function () {
//标签a的点击事件
var a = document.getElementById('linkbt');
a.addEventListener('click', function () {
document.getElementById('checkCode').innerHTML = getStr()
//补充一下最好将函数赋给一个变量
//var string = getStr();然后innerHTML覆盖
//document.getElementById('checkCode').innerHTML = string
})
3.windom.onload里的确认事件
将checkCode.innerHTML(校验码框)与inputcode.value(输入框)进行比较
document.getElementById('button').addEventListener('click',function(){
var inputcode = document.getElementById('inputCode').value;
var checkCode = document.getElementById('checkCode').innerHTML;
if(inputcode == checkCode){
alert('恭喜登录');
}else{
alert('请重新输入');
document.getElementById('inputCode').value = '';
}
})
总结
主要是理解闭包函数,内置随机对象,加强实际操作和基础知识。代码有部分为参考,如有错误还望指出