JavaScript小知识手册

最新推荐文章于 2025-05-03 14:40:38 发布

原创最新推荐文章于 2025-05-03 14:40:38 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文深入讲解前端开发中的关键概念，包括标签与对象属性的区别、HTTP长连接与短连接的工作原理、数组去重方法、跨域请求解决方案、XSS攻击防范、jQuery源码解析、闭包机制、npm应用技巧、事件委托、本地存储方式、set/map集合使用、模版字符串、document.createDocumentFragment()和Element.getBoundingClientRect()等方法的运用，以及DOM对象与jQuery对象的区别与转换。

标签属性和对象属性的区别

标签属性可在页面中查到，可视化；可通过cloneNode复制到另一个标签上；
对象属性在页面中查不到，不可视；对象属性不可用cloneNode复制，但可通过object.assign()复制

http长连接和短连接

http长连接和短连接
短连接是指socket连接后，发送接收完数据后马上断开连接。因为连接后接收了数据就断开了，所以每次数据接受处理不会有联系。这也是HTTP协议无状态的原因之一。
长连接是：连接——>传输数据——>保持连接——>传输数据——>…——>直到一方关闭连接，多是客户端关闭连接。长连接指建立socket连接后不管是否适用都保持连接，但安全性较差。

数组去重

史上最全JavaScript数组去重的十种方法（推荐）
上面的方法三：

function unique3(arr){
    var res=[];
    var obj={};
    for (var i=0;i<arr.length;i++){
        if (!obj[arr[i]]){
            obj[arr[i]]=1;
            res.push(arr[i]);
        } 
    } 
    return res;
}
console.log('------------方法三---------------');
 
console.log(unique3([1,1,2,3,5,3,1,5,6,7,4]));

ES6之模版字符串

document.createDocumentFragment()的用法

createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。
当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。
你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment() 方法可以更安全改变文档的结构及节点。

Element.getBoundingClientRect()

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

DOM对象和jQuery对象有什么区别，以及如何转化？

Js原生获取的dom是一个对象，jq对象就是一个数组对象，就是选择二出来的元素的数组集合
Jq对象转换成dom对象,两种方式[index]和.get(index)
Dom转为jq对象：只需用$()把dom对象包装起来
https://www.cnblogs.com/May-J-Wang/p/7050515.html