![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
一些知识点
文章平均质量分 52
一些知识点
Doe
这个作者很懒,什么都没留下…
展开
-
es6中Map对象的使用
1、语法let mymap=new Map();2、属性Prototype — 原型: 为映射返回对原型的引用。size: 返回映射中的元素数。 eg: mymap.size //返回mymap的长度3、方法set: 添加一个新建元素到映射。clear: 从映射中移除所有元素。 let mymap = new Map(); mymap.set('a', 'aaaaa'); mymap.set('b', 'bbbbb'); mymap.set('c', 'c..原创 2022-03-11 10:35:54 · 734 阅读 · 0 评论 -
Object的遍历和es6切割数组字符串的方法
ES6的Object的遍历1、获取对象的keyObject.keys方法,返回一个数组。成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名2、获取对象的valueObject.values()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值。Object.values()会过滤属性名为Symbol值的属性。会发现 顺序不同!因为顺序遵循属性的遍历的规则如果Object.values()方法的参数是一个.原创 2022-03-10 23:04:56 · 2620 阅读 · 0 评论 -
如何实现浮动元素水平居中
1、错误示范当HTML结构如下所示:<div id="container"> <div class="left">left</div></div>同时,CSS这样写:#container{ width:400px; height:110px; border:1px solid black;}#container div{ width:100px; height:100px; float:left; ...原创 2022-02-26 20:21:21 · 1052 阅读 · 0 评论 -
鼠标点击dom获取的e的坐标
一、clientX、clientY点击位置距离当前body可视区域的x,y坐标二、pageX、pageY对于整个页面来说,包括了被卷去的body部分的长度三、screenX、screenY点击位置距离当前电脑屏幕的x,y坐标四、offsetX、offsetY相对于带有定位的父盒子的x,y坐标五、x、y和screenX、screenY一样六、面试题:实现页面上拖拽div container的效果<head> <meta charset=.原创 2022-02-26 08:54:23 · 382 阅读 · 0 评论 -
原生JS获取元素的位置与尺寸
1、上边偏移量,左边的偏移量、外高度,外宽度element.offsetLeft //左边的偏移量,相对于父元素element.offsetTop //上边偏移量,相对于父元素 let test = document.getElementById("test"); console.log("offsetLeft:" + test.offsetLeft) console.log("offsetTop:" + test.offsetTop) ...原创 2022-02-25 22:10:28 · 825 阅读 · 0 评论 -
事件委托、事件冒泡与事件捕获
事件委托:1、原理那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了原创 2021-05-09 20:31:41 · 5519 阅读 · 1 评论 -
CSS性能优化
提高性能的方法有哪些?1. 合并css文件,如果页面加载10个css文件,每个文件1k,那么也要比只加载一个100k的css文件慢。2. 减少css嵌套,最好不要嵌套三层以上。3. 不要在ID选择器前面进行嵌套,ID本来就是唯一的而且权限值大,嵌套完全是浪费性能。4. 建立公共样式类,把相同样式提取出来作为公共类使用。5. 减少通配符*或者类似[hidden="true"]这类选择器的使用,挨个查找所有...这性能能好吗?6. 巧妙运用css的继承机制,如果父节点定义了,子节点就无需定义。转载 2022-01-12 18:01:58 · 1541 阅读 · 0 评论 -
CSS3新特性
1、transition语法:transition: property duration timing-function delay;eg:transition: CSS属性,花费时间,效果曲线(默认ease),延迟时间(默认0)/*宽度从原始值到制定值的一个过渡,运动曲线ease,运动时间0.5秒,0.2秒后执行过渡*/ transition: width,.5s,ease,.2s值 描述 transition-property 规定设置过渡效果的 CS...原创 2022-01-11 22:47:02 · 100 阅读 · 0 评论 -
V8垃圾回收机制
赠你13张图,助你20分钟打败了「V8垃圾回收机制」!!! - 掘金V8引擎垃圾回收原理解析 - 掘金珠峰公开课-V8垃圾回收机制和内存泄露分析(一)_哔哩哔哩_bilibili原创 2022-01-06 16:22:46 · 73 阅读 · 0 评论 -
1、webpack热更新
刚刚打开工程文档,然后发现有一行代码我不是很清楚:if(module.hot){module.hot.accept('./App.js',()=>render());}然后百度了一下,这个是webpack热更新。为了快速了解webpack热更新的原理和如何应用,我找了一个学习视频:https://www.bilibili.com/video/BV1ey4y127Xm详细了解了一下 以下是我学习到的内容1、HMR简介Hot Module Replacemen...原创 2021-03-11 19:51:44 · 1013 阅读 · 0 评论 -
vue的一些问题
为什么避免 v-if 和 v-for 用在一起?在v-if和v-for用在同一个元素上时,因为v-for要比v-if的优先级高,所以会先执行循环,再进行判断,这样无论条件判断的结果如何,循环都会执行。所以要避免她们用在一起,如果需要的话,可以在外层加一个template,v-if用在template上,这样就可以实现先判断再根据判断结果决定是否执行循环了Vue-router中keep-alive的理解 keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗(保留...原创 2021-12-16 19:29:14 · 105 阅读 · 0 评论 -
indexOf与includes的区别
indexOf是返回数值型的includes是返回布尔型的所以在if条件判断的时候includes要简单得多,而indexOf 需要多写一个条件进行判断。var ary = [1];if (ary.indexOf(1) !== -1) { console.log("数组存在1")}if (ary.includes(1)) { console.log("数组存在1")}判断数组是否有存在NaN,使用indexOf是无法判断的,必须使用includes这个方法。.原创 2021-12-12 19:04:41 · 415 阅读 · 0 评论 -
ES6---ES12开发技巧
这个文章总结的很好:基础很好?总结了38个ES6-ES12的开发技巧,倒要看看你能拿几分????? - 掘金原创 2021-12-03 19:50:56 · 147 阅读 · 0 评论 -
Rollup 与 webpack的区别
特性:webpack 拆分代码, 按需加载;Rollup 所有资源放在同一个地方,一次性加载,利用tree-shake特性来剔除项目中未使用的代码,减少冗余,但是webpack2已经逐渐支持tree-shake资源:webpack 相对来说拥有更大的社区支持,资源更加齐全,文档更加完整,有更完整的插件库,如热更新及web-server等。结论:对于应用使用 webpack,对于类库使用 Rollup如果你需要代码拆分(Code Splitting),或者你...转载 2021-12-01 16:33:09 · 3184 阅读 · 0 评论 -
Webpack热更新(HMR)
1、什么是模块热替换模块热替换(HMR - Hot Module Replacement)是 webpack 提供的最有用的功能之一。它允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面,其思路主要有以下几个方面保留在完全重新加载页面时丢失的应用程序的状态 只更新改变的内容,以节省开发时间 调整样式更加快速,几乎等同于就在浏览器调试器中更改样式2、启用HMR HMR的启用十分简单,这归功于webpack内置插件使用上的便利。我们要做的仅仅是更新webpack-转载 2021-12-01 15:50:58 · 2591 阅读 · 0 评论 -
js的数据类型及判断方法
1、数据类型基本类型:String、Number、Boolean、Symbol、Undefined、Null引用类型:Object2、typeoftypeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示,包括以下 7 种:number、boolean、symbol、string、object、undefined、function 等。例子:typeof ''; // string 有效typeof ..原创 2021-12-01 15:09:23 · 615 阅读 · 0 评论 -
instanceof原理
instanceof判断实例对象的proto属性与构造函数的prototype是不是用一个引用。如果不是,他会沿着对象的proto向上查找的,直到顶端Object。typeof用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果:number,boolean,string,function(函数),object(NULL,数组,对象),undefined。我们可以使用typeof来获取一个变量是否存在,如if(typeof a!="undefined"){},..原创 2021-11-30 18:55:12 · 412 阅读 · 0 评论 -
Generator 生成器
unction *foo(x) { let y = 2 * (yield (x + 1)) let z = yield (y / 3) return (x + y + z)}let it = foo(5)console.log(it.next()) // => {value: 6, done: false}console.log(it.next(12)) // => {value: 8, done: false}console.log(it.next(13)) // .原创 2021-11-30 14:33:55 · 433 阅读 · 0 评论 -
var、let 及 const 区别?
var声明的变量会挂载在window上,而let和const不会 var声明变量存在变量提升,let和const不会 let、const 的作用范围是块级作用域,而var的作用范围是函数作用域 同一作用域下let和const不能声明同名变量,而var可以 同一作用域下在let和const声明前使用会存在暂时性死区 const 一旦声明必须赋值,不能使用null占位 声明后不能再修改 如果声明的是复合类型数据,可以修改其属性 ...原创 2021-11-29 21:27:58 · 163 阅读 · 0 评论 -
浏览器渲染页面的过程
根据HTML结构生成DOM Tree(单个节点,没样式) 根据CSS生成CSSOM(CSS对象模型) 将DOM和CSSOM整合生成一个RenderTree(每个节点都有自己的样式) 根据RenderTree开始渲染和显示 遇到script标签的时候,会执行并阻塞渲染(渲染权交给了js)----JS加载完毕之后然后执行代码...原创 2021-11-29 21:00:03 · 189 阅读 · 0 评论 -
BOM操作
1 如何检测浏览器的类型? var ua = navigator.userAgent; var isChrome = ua.indexOf('Chrome'); console.log('is Chrome?', isChrome > 0, navigator.userAgent); console.log('电脑屏幕大小:', screen.width, screen.height)2 如何拆解URL的各个部分?// location cons原创 2021-11-26 21:26:18 · 270 阅读 · 0 评论 -
DOM操作的常用API
1、DOM操作的常用API有哪些?节点查找APIdocument.getElementById:根据ID查找元素,大小写敏感,如果有多个结果,只返回第一个; document.getElementsByClassName:根据类名查找元素,多个类名用空格分隔,返回一个 HTMLCollection 。注意兼容性为IE9+(含)。另外,不仅仅是document,其它元素也支持 getElementsByClassName 方法; document.getElementsByTagName:...原创 2021-11-26 15:15:42 · 2001 阅读 · 0 评论 -
数组中常用的方法
forEach 遍历所有的元素 every 判断所有的元素是否都符合条件 some 判断是否至少有一个元素符合条件 sort 排序 map 对数组中的元素重新组装,生成一个新的数组 filter 过滤符合条件的元素注意点:splice,concat,sprt是直接在原地操作数组的。...原创 2021-11-26 14:14:40 · 147 阅读 · 0 评论 -
js中的Data()对象
在JS中使用Date对象来表示一个时间,其中Date()为一个构造函数如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行时间var d = new Date();如果想要显示一个指定的时间,则应该在构造函数中传入一个表示时间的字符串var d2 = new Date("1/3/2019"); // 月/日/年 时间都为北京时间对象名.getDate() //获取当前时间对象是几号对象名.getDay()//获取当前时间对象时周几 ,0表示周日对象名...转载 2021-04-07 09:33:29 · 1358 阅读 · 0 评论 -
原型和原型链和instanceof
一、prototype在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象。function Person(age) { this.age = age }Person.prototype.name = 'kavin'var person1 = new Person()var person2 = new Person()console.log(person1.name) //kavinconsole.log(person2.转载 2021-05-16 16:24:02 · 470 阅读 · 0 评论 -
值类型和引用类型、typeof、===和==
1值类型和引用类型的区别?值类型:每个变量都会存储各自的值。不会相互影响 引用类型:不同变量的指针执行了同一个对象(数组,对象,函数)2typeof可以及检测的数据类型有哪些?基本数据类型:Undefined null bool string number 关键点:typeof只能区分值类型,不能区分引用类型 JS中的基本数据类型:null, undefined, bool, string, number(typeof可以区分除了null以外的四种值类型) typeof 6种类..转载 2021-11-25 18:03:39 · 346 阅读 · 0 评论 -
css如何将div画成三角形
1、先看一段代码:#div1{ height: 100px; border-style: solid; border-width: 100px 100px 100px 100px; border-color: red forestgreen blue cyan; width: 100px; }根据代码渲染,显示效果如下(边框颜色border-color四个值默认的转载 2021-11-25 16:58:49 · 1844 阅读 · 0 评论 -
如何清除浮动
1、添加额外标签(不推荐)在浮动元素下面加一个块div给div添加属性clear:both可以清除这个div上面的所有浮动如果添加属性clear:left可以清除这个div上面的左浮如果添加属性clear:right可以清除这个div上面的右浮添加无意义标签,语义化差<div class="main left">.main{float:left;}</div><div class="side left">.side{float:right;}&原创 2021-11-25 15:34:12 · 87 阅读 · 0 评论 -
BFC布局
BFC:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关1、如何触发BFCfloat的值不为none overflow的值不为visible display的值..原创 2021-11-24 18:57:34 · 103 阅读 · 0 评论 -
inline-block 的间隙问题
inline-blcok块之间的不可见符号会被保留父层字体的1/3大小的空间<ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li></ul>1、改变书写结构<ul> <li.原创 2021-11-24 16:36:29 · 315 阅读 · 0 评论 -
圣杯布局和双飞翼布局
1、圣杯布局什么是圣杯布局以及双飞翼布局 - 知乎上面这个链接讲的非常清晰,下面是我实现的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w原创 2021-10-08 11:00:35 · 118 阅读 · 0 评论 -
CSS三栏布局
1、float<style> .wrapper { padding: 15px 20px; border: 1px dashed #ff6c60; } .left { float: left; width: 300px; height: 100px; background: #631D9F; } .right { float: right; width: 300px; height:原创 2021-11-23 22:20:36 · 321 阅读 · 0 评论 -
两栏布局(左固定右自适应)
1、float margin-left<style> .wrapper { padding: 15px 20px; border: 1px dashed #ff6c60; overflow: hidden; } .left { width: 120px; border: 5px solid #ddd; float: left; } .right { margin-left: 20px; bord.原创 2021-11-23 19:58:38 · 218 阅读 · 0 评论 -
css伪类和伪元素的特性和区别
伪元素是真的有元素 前者是单冒号,后者是双冒号总结一下伪类与伪元素的特性及其区别:伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息; 伪元素本质上是创建了一个有内容的虚拟容器; CSS3中伪类和伪元素的语法不同; 可以同时使用多个伪类,而只能同时使用一个伪元素;1、伪类获取不存在与DOM树中的信息。比如<a>标签的:link、visited等,这些信息不存在与DOM树结构中,只能通过CSS选择器来获取; 获取不能被常规CSS选择器获取的信息。比如伪类转载 2021-11-23 14:42:48 · 284 阅读 · 0 评论 -
CSS自定义字体
必须要先有字体文件,比如 .ttf文件,叫UI给或者 百度自己下载;<style> @font-face{ font-family: myFirstFont; src: url('你自己的字体文件路径.ttf') }</style><body> <div>这是默认字体</div> <div class="my_font">这是自定义字体</div> <..转载 2021-11-22 16:52:16 · 301 阅读 · 0 评论 -
CSS样式(选择器)的优先级
第一优先级:无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。(ie6支持上有些bug)。 第一等:内联样式,如:style="color:red;",权值为1000.(该方法会造成css难以管理,所以不推荐使用) 第二等:ID选择器,如:#header,权值为0100. 第三等:类选择器、如:.bar, 权值为0010. 第四等:类型(标签)选择器和伪元素选择器,如:div ::first-line 权值为0001. 通配符,子选择器,相邻选择器等。转载 2021-11-22 16:15:21 · 7892 阅读 · 0 评论 -
HTML的元素分类和嵌套关系
块级元素block(方块形状,占据一整行):div、ul、li、dl、dt、dd、p、h1-h6、blockquote 行内元素inline(一行中的某个位置):a、b、span、img、input、strong、select、label、em、button、textarea inline-block(行内,有宽高属性):selection块级元素可以包含行内元素 块级元素不一定能包含块级元素(p标签不能包含div标签) 行内元素“一般”不能包含块级元素(a包含div是可以的)...原创 2021-11-22 15:27:03 · 245 阅读 · 0 评论 -
HTML5新增的内容
表单增强:日期、时间、搜索(修改type的类型实现);表单验证;placeholderNumber类型<input type="number" name="demoNumber" min="1" max="100" step="2"/>注:此标签其实就是普通的input标签,只不过是type类型指向了number,标识当前标签接受数字类型输入.另外添加了四个属性.name:属性大家很熟悉了用来标识表单提交时的key值min:是表单标签新增加的属性标识当前输入框输入的最转载 2021-11-22 14:56:02 · 158 阅读 · 0 评论 -
页面从输入 URL 到页面加载完成的过程
1.浏览器查找域名对应的IP地址(DNS 查询:浏览器缓存->系统缓存->路由器缓存->ISP DNS 缓存->根域名服务器)2.浏览器向 Web 服务器发送一个 HTTP 请求(TCP三次握手)3.服务器 301 重定向(从 http://example.com 重定向到 http://www.example.com)4.浏览器跟踪重定向地址,请求另一个带 www 的网址5.服务器处理请求(通过路由读取资源)6.服务器返回一个 HTTP.原创 2021-11-16 21:33:56 · 595 阅读 · 0 评论 -
this 的指向问题
1、普通函数中的this指向window2、定时器中的this指向window3、箭头函数没有this,它的this指向取决于外部环境、4、事件中的this指向事件的调用者5、 构造函数中this和原型对象中的this,都是指向构造函数new 出来实例对象6、类 class中的this 指向由constructor构造器new出来的实例对象7、自调用函数中的this 指向windowJavaScript的绑定与this指向_Doe的博客-CSDN博客...原创 2021-11-16 16:33:47 · 594 阅读 · 0 评论