JavaScript常用库

文章目录

1.11.1 jQuery
1.11.2 setTimeout与setInterval
1.11.3 requestAnimationFrame
1.11.4 Map与Set
1.11.5 localStorage
1.11.6 JSON
1.11.7 日期
1.11.8 WebSocket
1.11.9 window
1.11.10 canvas

1.11.1 jQuery

选择器
${selector},例如：
其中的selector和CSS中的选择器相同
可以通过选择器取绑定html中的标签。

//会选择所有满足的选择器
${'div'}
${'.big-div'}
${'div>p'}

事件的绑定和解绑
$(selector).on(event, func)绑定事件，例如：

$div.on('click', function(){console.log("click div");
});

${selcetor}.off(event, func)删除事件，例如:

$div.on('click', function(){console.log("click div");$div.off('click');
});

当存在多个相同类型的事件出发函数时，可以通过click.name来区分，例如：

// 
$('div').on('click.first', function (e) {console.log("click div");$('div').off('click.first');
});

在事件触发的函数中的return false等价于同时执行：

e.stopPropagation()：阻止事件向上传递
e.preventDefault()：阻止事件的默认行为

1.11.2 setTimeout与setInterval

setInterval(func, delay)
每隔delay毫秒，执行一次函数func()。
第一次在第delay毫秒后执行。例如：

let $div = $('div');$div.click(() => {setTimeout(() => {console.log("hahhaha");}, 2000);})

setInterval(func, delay)
每隔delay毫秒，执行一次函数func()。
第一次在第delay毫秒后执行。

clearInterval()
关闭周期执行的函数，例如：

let interval_id = setInterval(() => {console.log("Hello World!")
}, 2000);  // 每隔2秒，输出一次"Hello World"clearInterval(interval_id);  // 清除周期执行的函数

1.11.3 requestAnimationFrame

该函数会在下次浏览器刷新页面之前执行一次，通常会用递归写法使其每秒执行60次func函数。调用时会传入一个参数，表示函数执行的时间戳，单位为毫秒。例如：


function main() {let $div = $('div');let $run = $('#btn_begin');let $stop = $('#btn_end');let func_id;let last_timestep = 0;function step(timestamp) {// timesstamp：表示距离上次页面刷新已经过去了多久$div.width($div.width() + 1);$div.height($div.height() - 0.5);console.log(timestamp - last_timestep); // 求每两次刷新之间的时间间隔last_timestep = timestamp;func_id = requestAnimationFrame(step);// 下一次刷新的时候执行requestAnimationFrame去调用step函数，// 每次返回一个新的func_id};$run.click(() => {console.log('click_run');if (func_id) return false;func_id = requestAnimationFrame(step); // 执行刷新函数});$stop.click(() => {console.log("click_stop");cancelAnimationFrame(func_id);func_id = undefined; // 方便停止后，下次run.click可以执行});}export {main,
}

与setTimeout和setInterval的区别：

requestAnimationFrame渲染动画的效果更好，性能更加。
该函数可以保证每两次调用之间的时间间隔相同，但setTimeout与setInterval不能保证这点。setTmeout两次调用之间的间隔包含回调函数的执行时间；setInterval只能保证按固定时间间隔将回调函数压入栈中，但具体的执行时间间隔仍然受回调函数的执行时间影响。
当页面在后台时，因为页面不再渲染，因此requestAnimationFrame不再执行。但setTimeout与setInterval函数会继续执行。

1.11.4 Map与Set

~~现查现用。~~
在这里插入图片描述

1.11.5 localStorage

可以在用户浏览器上存储键值对。

常用API：

setItem(key, value)：插入
getItem(key)：查找
removeItem(key)：删除
clear()：清空

1.11.6 JSON

JSON对象用于序列化对象、数组、数值、字符串、布尔值和null。

常用API：

JSON.parse()：将字符串解析成对象
JSON.stringify()：将对象转化为字符串

1.11.7 日期

返回值为整数的API，数值为1970-1-1 00:00:00 UTC（世界标准时间）到某个时刻所经过的毫秒数：

Date.now()：返回现在时刻。
Date.parse("2022-04-15T15:30:00.000+08:00")：返回北京时间2022年4月15日 15:30:00的时刻。
例如：

console.log(Date.now());// 返回现在到1970-1-1 00:00:00 UTC的毫秒数console.log(Date.parse("2024-10-29T16:35:00.000+08:00"));// 返回"2024-10-29T16:35:00.000+08:00"到1970-1-1 00:00:00 UTC的毫秒数