js事件委托、Cookie缓存、转码解码、严格模式以及异常处理

最新推荐文章于 2023-01-17 15:45:00 发布

h_y_

最新推荐文章于 2023-01-17 15:45:00 发布

阅读量417

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/m0_46549742/article/details/107257133

版权

知识点罗列：

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 {
    }