欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-10 21:49:36
主要内容1、js事件委托;2、cookie缓存;3、转码解码4、js严格模式;5、js中异常处理(try、catch、finally);...

知识点罗列:

  1. js事件委托;
  2. cookie缓存;
  3. js的转码解码;
  4. js严格模式;
  5. 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