当前位置: 首页 > 科技观察

本文为大家带来一些容易被忽视的知识点

时间:2023-03-21 15:52:35 科技观察

前面没什么好说的。总结了一些基础知识,查漏补缺。fetch、ajax、axiosAjax(AsynchronousjavascriptandXML),一种技术的总称。Fetch是用于网络请求的特定本机浏览器API。它与XMLHttpRequest处于同一级别,但Fetch语法更简洁易用。它支持承诺。axios是一个第三方库,也是最常用的网络请求库。,XMLHttpRequest和Fetch可以在内部使用进行封装。那么如何使用XHR或fetch来实现一个Ajax呢?functionajax(url,successFn){constxhr=newXMLHttpRequest();xhr.open("GET",url,false);xhr.onreadystatechange=function(){//这里的函数是异步执行的,可以使用Promise处理if(xhr.readyState===4){if(xhr.state===200){successFn(xhr.responseText);}}}xhr.send(null);}functionajax2(url){returnfetch(url).then(res=>res.json);}px、%、em、rem和vw/vhpx是像素的基本单位,是绝对单位(其他单位是Relativeunit)%是相对于父元素的宽度比例em是相对于当前元素的font-sizeem是相对于根节点的font-size,常用移动端适配vw/vh为屏幕的1viewportwidth/height%vmin/vmax指的是屏幕viewportwidth和height的最小值/最大值箭头函数的缺点和不能用的场景?箭头函数的一些缺点:箭头函数没有参数本身没有this,而this指向箭头函数父作用域的this不能通过apply、bind、call修改指向某些代码。使用箭头函数时,很难阅读。箭头函数不能使用new创建对象和构造函数不能使用箭头函数的场景:对象原型、对象方法、构造函数动态上下文的回调函数Vue生命周期方法for...in和for...的区别offor...in遍历得到的key,for...of遍历for...in得到的值是常用的Enumerable数据,如:对象,数组,字符串,获取key值for...of常用于可迭代数据,如:array,string,Map,Set,获取value值,那么,forawait...of是做什么的呢?forawait...of用于遍历多个Promise:functioncreatePromise(val){returnnewPromise((re解决)=>{setTimeout(()=>{resolve(val)},1000)})}(asyncfunction(){constp1=createPromise(100)constp2=createPromise(200)constp3=createPromise(300)constlist=[p1,p2,p3]//Promise.all(list).then(res=>//console.log(res)//)//等价于Promise.allforawait(letpoflist){console.log(p);}})()HTMLCollection和NodeListDOM其实是一棵树,大部分节点都是Node节点,Node是Element的基类,Element是其他HTML元素的基类,比如as:HTMLDivElement,HTMLULElement,etc.HTMLCollection是元素的集合NodeList是节点的集合

  • OneRiver
  • SecondRiver

你好

我们可以看到最终的打印结果如下图所示。NodeList打印的是所有Node节点的集合,包括Element元素标签、文字、注释等。HTMLCollection打印的是纯Element元素标签的集合,没有任何文字和注释。因此:childNodes和children返回的结果是不一样的。childNodes返回的是一个NodeList,children返回的是一个HTMLCollection。获取Node和Element的返回结果可能不同。如果只有纯HTML标签,没有文本Text,注释节点等其他内容,那么返回的结果是一样的如何将类数组转为数组?Array.from(list)Array.prototype.slice.call(list)Extensionoperator[...list]例如,HTMLCollection和NodeLists都是“类数组”,但不是数组。constlist1=Array.from(list)constlist2=Array.prototype.slice.call(list)constlist3=[...list]offsetHeight、scrollHeight和clientHeight的区别要理解offsetHeight、scrollHeight和clientHeight的区别,首先我们要了解盒子模型:不同部分的说明:Margin(外边距)——清除边框以外的区域,外边距是透明的。Border-围绕填充和内容外部的边框。Padding-清除内容周围的区域,填充是透明的。内容-框的内容,显示文本和图像。标准W3C盒模型:CSS中设置的元素宽度(width)=内容(content)的宽度CSS中设置的元素高度(height)=内容(content)的高度和标签元素的实际高度=height+(padding+border+margin*2标准W3C盒模型IE盒模型:CSS中设置的宽度(width)=内容的宽度(content)+(border+padding)*2CSS中设置的高度(height)=内容的高度(content)+(border+padding)*2和标签实际高度element=height+margin*2IE盒模型在我们实际开发中,html标签默认采用W3C盒模型,当然你也可以设置box-sizing:border-box;的盒模型转换为IE盒模型。offsetHeight、scrollHeight和clientHeight的计算规则:offsetHeight=border+padding+contentclientHeight=padding+contentscrollHeight=padding+actualcontentsizeclientHeightoffsetHeightscrollHeight写在最后,简单总结一些基础知识,希望对大家有所帮助。