js事件委托、Cookie缓存、转码解码、严格模式以及异常处理
知识点罗列：
- js事件委托；
- cookie缓存；
- js的转码解码；
- js严格模式；
- js中异常处理（try、catch、finally）；
一、js事件委托
1.事件委托概念
事件委托即事件代理，是JavaScript中常用绑定事件的常用技巧。“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。
2.事件委托的原理
事件委托的原理是DOM元素的事件冒泡。
3.实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件委托</title>
<style>
.box{
width: 700px;
height: 500px;
border: 1px solid #000;
background-color: #3667d6;
}
li{
width: 300px;
height: 100px;
background-color: #cbcbcb;
margin: 10px;
list-style: none;
}
</style>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ule = document.querySelector(".box");
ule.onclick =function (e){
var target=e.target|| e.srcElement;
if (target.nodeName.toLowerCase() == "li")//转化为小写再判断
{
console.log(1)
}
}
</script>
</body>
</html>
4.事件委托的优点
（1）提高js的性能，大量减少内存占用，减少时间注册。
（2）可以动态添加 DOM 元素，不需要因为元素的变动而修改事件绑定。
二、cookie缓存
1.什么是Cookie？
Cookie 用于存储 web 页面的用户信息。即Cookie 是将一些数据, 存储于你电脑上的文本文件中。当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
2.创建Cookie
document.cookie = "username=admin;domain=localhost;expires=Sta, 11 Jul 2020 09:06:00 GMT;path=/";
其中属性值：
username：设置名称；
domain：可以访问此cookie的域名；
expires：设置cookie超时时间。如果设置的值为一个时间，则当到达该时间时此cookie失效。不设置的话默认是session，意思是cookie会和session一起失效，当整个浏览器关闭后，cookie失效；
path字段：可以访问此cookie的页面路径。
3.删除Cookie
将expires属性值设置为过期时间即可以删除Cookie。
三、转码解码
1.escape和unescape进行转码解码：
这种方法对字母和数字无效。
console.log(escape("小米")); //%u5C0F%u7C73
console.log(unescape(escape("小米"))); //小米
2.encodeURI和decodeURI对路径进行转码解码：
这种方法对数字和字母无效
var str="http://www.xiaohua.com?name=张三&age=20";
console.log(encodeURI(str));//http://www.xiaohua.com?name=%E5%BC%A0%E4%B8%89&age=20
console.log(decodeURI(encodeURI(str)));//http://www.xiaohua.com?name=张三&age=20
3. btoa和atob进行转码解码：
console.log(window.btoa("abc123efg"));//YWJjMTIzZWZn
console.log(window.atob("YWJjMTIzZWZn"));//abc123efg
console.log(window.btoa(escape("毛豆")));//JXU2QkRCJXU4QzQ2
console.log(unescape(window.atob("JXU2QkRCJXU4QzQ2")));//毛豆
四、js严格模式
1.什么是严格模式？
JavaScript 严格模式即在严格的条件下运行。使用 “use strict” 指令。
2.严格模式作用
（1）消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为；
（2）消除代码运行的一些不安全之处，保证代码运行的安全；
（3）提高编译器效率，增加运行速度。
3.严格模式的限制
即下列情况会报错。
（1）不允许使用未声明的变量。
"use strict";
x = 3; //会报错 x未定义
（2）不允许删除变量、对象和函数。
"use strict";
var x = 3;
delete x； //报错
function y(p1, p2) {};
delete y; //报错
（3）不允许变量重名。
"use strict";
function x(p1, p1) {}; // 报错
（4）不允许使用八进制、转义字符
"use strict";
var x = 010; // 报错
var y= \010; // 报错
（5）不允许对只读变量进行赋值。
"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3; // 报错
（6）不允许删除不允许删除的变量。
"use strict";
delete Object.prototype; // 报错
（7）变量名不允许使用eval字符串和arguments字符串。
"use strict";
var eval = 5; // 报错
var arguments = 6; // 报错
（8）在作用域 eval() 创建的变量不能被调用：
"use strict";
eval ("var x = 2");
alert (x); // 报错
（9）不允许使用以下语句。
"use strict";
with (Math){x = cos(2)}; // 报错
五、异常处理（try、catch、finally）
1.作用
try/catch/finally 语句用于处理代码中可能出现的错误信息。
错误可能是语法错误，通常是程序员造成的编码错误或错别字。也可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
2.用法
（1）try语句：定义在执行时进行错误测试的代码块。
（2）catch 语句：定义当 try 代码块发生错误时，所执行的代码块。
（3）finally 语句：在 try 和 catch 之后无论有无异常都会执行。
try {
... //异常的抛出
} catch(e) {
... //异常的捕获与处理
} finally {
... //结束处理
}
3.throw 语句
throw 语句允许我们创建自定义错误。
throw 与 try 和 catch 一起使用，可以生成自定义的错误消息。
try {
}
catch (e) {
console.log(e);
//throw e;
//自定义错误信息
throw new Error("函数不存在");
}
finally {
}
本文地址：https://blog.csdn.net/m0_46549742/article/details/107257133