JavaScript常用库

文章目录

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

1.11.1 jQuery

选择器
${selector},例如：
其中的selector和CSS中的选择器相同

可以通过选择器取绑定html中的标签。

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

// 
$('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毫秒后执行。例如：

javascript 复制代码

let $div = $('div');

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

setInterval(func, delay)

每隔delay毫秒，执行一次函数func()。

第一次在第delay毫秒后执行。

clearInterval()

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

javascript 复制代码

let interval_id = setInterval(() => {
    console.log("Hello World!")
}, 2000);  // 每隔2秒，输出一次"Hello World"

clearInterval(interval_id);  // 清除周期执行的函数

1.11.3 requestAnimationFrame

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

javascript 复制代码

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的时刻。
例如：

javascript 复制代码

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的毫秒数

1.11.8 WebSocket

与服务器建立全双工连接。

常用API：

new WebSocket('ws://localhost:8080')：建立ws连接。
send()：向服务器端发送一个字符串。一般用JSON将传入的对象序列化为字符串。
onopen：类似于onclick，当连接建立时触发。
onmessage：当从服务器端接收到消息时触发。
close()：关闭连接。
onclose：当连接关闭后触发。

1.11.9 window

1.11.10 canvas

现用现查