【JAVAScript】【3】校验码实例（包含函数嵌套、闭包和window.onload）

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 = '';
        }
    })

总结

主要是理解闭包函数，内置随机对象，加强实际操作和基础知识。代码有部分为参考，如有错误还望指出