前端开发技能 —— JavaScript / ES6

Posted 2022-01-30 Kabukiyo Lin

前端开发技能 —— javascript / ES6

• JavaScript
• • 为什么 0.1+0.2 != 0.3，怎么解决
  • JavaScript 事件流与事件模型 **
  • JavaScript 本地缓存
• ES6
• • • 三级目录

JavaScript

为什么 0.1+0.2 != 0.3，怎么解决

• JS数字运算存在精度缺失的问题
• JS中，浮点数是用64位固定长度来表示。其中1位符号位，11位指数位，52位尾数位。
• 0.1转为二进制数后，是一个无限循环小数；然而只有52位去保存，所以会精度缺失。取出来后转为十进制就不是0.1了

JavaScript 事件流与事件模型 **

事件流

• 当子元素所绑定的事件被用户触发时，页面接收事件的顺序是什么，就涉及到事件流。事件流即事件的传播方式。
• 事件捕获：由上到下的传播方式，从不具体的节点逐级向下传播到最具体的节点。（Netscape事件流）
• 事件冒泡：由下到上的传播方式，从最具体的元素接收再逐级向上传播到document节点。（IE事件流）

事件模型

• DOM0级（原始事件模型）
• DOM2级（标准事件模型）
• IE事件模型

DOM0级（原始事件模型）

绑定方式：

<input type='button' onclick="func()">

var btn = document.getElementById('.btn');
btn.onclick = func;

JavaScript 本地缓存

JS的本地缓存主要有以下4种：

• Cookie
• sessionStorage
• localStorage
• indexedDB

所谓 WebStorage 有以下2种

• sessionStorage
• localStorage

下面正式介绍这四种本地缓存

一、Cookie

基本特性：

• HTTP是无状态协议。即不论是会频繁被使用的数据与否，在下一次使用时都会再次被传输该数据，占用资源影响性能。Cookie则是一种辨别用户身份的数据
• Cookie是存储在浏览器本地的
• Cookie只能保存String类型对象
• Cookie安全性不是很高
• 单个Cookie大小不超过4K，多数浏览器限制一个站点不能超过20个Cookie，一个浏览器最多就能有300个Cookie

ES6

三级目录