03 2022 档案
摘要：构建DOM树：浏览器先请求HTML，拿到HTML，对HTML进行解析，也就是HTML Parser后，形成一个dom树 然后在解析的过程中，有时候有link标签，是CSS和JS，浏览器主进程负责下载CSS文件 构建CSSOM树：当CSS完成下载，并且DOM树构建完成，开始对CSS进行解析，CSS P
阅读全文
摘要：从知识角度，我们来认识一下： 其实关于变量提升，我们都知道，var会变量提升，下面来看一下let <script> var a = 'a'; function print(){ console.log(a); let a = '1'; } print(); </script> 报错 为啥报错呢：按道
阅读全文
摘要：什么是箭头函数：是一种更简洁的表示方法，但是没有自己的this,arguments,super或new.target。箭头函数适合用在 需要匿名函数的地方，并且它不能作为构造函数。 箭头函数和普通函数的区别： 可以看到，当我们定义一个普通函数，它内部是有argments,caller,prototy
阅读全文
摘要：笼统的说，防抖和节流，就是防止代码被频繁调用。 节流和防抖的区别，就是第几次有效的问题。 节流，可以想象”开源节流“，比如，你想让麻麻买一个棒棒糖，第一次她给你买，但是短时间内，你想要吃第二次，麻麻就不给你买了，也就是说，第一次同意，第二，三次都不同意。 防抖，想象一下得了帕金森的老头，按屏幕，按了
阅读全文
摘要：做了几次笔试，都是牛客网平台的，我是前端方向，每次Js编程都把我折磨的死去活来。 各种妖魔鬼怪题目，明明是算法题，非要搞的各种输入输出，各种格式，吐槽。 想喷我没实力就喷吧，不怕。真恶心~
阅读全文
摘要：最近写Vue项目，遇到了一个问题，如下图 右边显示是这样子，但是我想要的效果是这样： 我就要用flex布局实现~ 有几个flex的属性咱们要知道， flex-wrap：换行方式。（nowwrap：默认值，单行，可能溢出； wrap：如果超过一行，就换行） justify-content: space
阅读全文
摘要：https://www.cnblogs.com/bgwhite/p/9403274.html 一般的话，先在本地： git add . git commit -m "123" 再推到线上： git push 下载的话： git clone
阅读全文
摘要：这个纯粹是写给自己的，总是忘记。。。 装好node，npm，Vue脚手架以后，在文件夹内，cmd，输入命令： vue create ********(星号就是项目名称，不能有大写字母，可以有中划线，下划线) 等待一段时间，在下载一些相关的依赖。。 就好了 然后，进入到项目里面，npm run ser
阅读全文
摘要：先说一个现实中的案例，我（对象）能通过Object.getPrototypeOf(我) 找到我的叔叔（构造函数） 同时呢，我叔叔（构造函数）也能通过.constructor找到我或者新建我 其实结合上一篇博文理解更轻松（https://www.cnblogs.com/KeithTee/p/15988
阅读全文
摘要：通过对象找到原型，通过原型的constructor可以找到构造函数，通过构造函数就可以创建出对象。（给我一个对象，我就能生成一个新的对象） <script> function User(name){ this.name = name; } let hd = new User("哈登"); conso
阅读全文
摘要：最近在学原型和继承，发现在构造函数这块有一个过不去的坎，今天就试着弄明白最基本的。 1，构造函数是什么 在我看来，就是一个“模具”，刚开始定义构造函数的时候，因为没有实例化对象，其实它在内存中不占用空间，只有当我们实例化对象以后，内存中才有这个对象的地址。 2，怎么辨别构造函数 最简单的方法就是看有
阅读全文
摘要：__proto__ 每一个变量都有这个属性，指向该对象的构造函数的原型对象。（指向这个对象的父级元素） 例如： number类型 <script> let num = 123; console.log(num.__proto__); //Number构造函数 console.log(num.prot
阅读全文
摘要：换句话说，没有父母的孩子也是存在的，这里的父母不是说父母过世了，而是说，这个孩子就是孤零零的一个人。 我们可以用Object.create()来创建对象 <script> // .create()后面有2个参数，第一个参数是他的原型 // 第二个参数是这个对象的属性 let hd = Object.
阅读全文
摘要：js中的各种元素，就像生活中的我们，我们有父母，有爷爷...各种元素也有“爸爸”，“爷爷”.. 例如，数组， <script> let arr = ["jamesHarden"]; console.log(arr.concat("leBron")); </script> 控制台输出： 我们点开，看里
阅读全文
摘要：var声明的变量会挂载到windows上，let和const不会 var声明的变量存在变量提升，let和const不存在。（什么是变量提升，请看https://www.cnblogs.com/KeithTee/p/15959380.html） 同一个作用域下，var可以声明同名变量，let，cons
阅读全文
摘要：声明和定义： <script> //第一种：在执行构造的时候，传递参数 let hd = new Set([1, 2, 3, 4]); console.log(hd); //输出 {1, 2, 3, 4} //第二种，hd.add()添加 let harden = new Set(); harden
阅读全文
摘要：Symbol应用场景：避免同名覆盖 声明定义Symbol的几种方法： <script> //Symbol理解为：永远不会重复的字符串 let hd = Symbol("123"); console.log(hd); let stepback = Symbol.for("后撤步"); console.
阅读全文
摘要：数组是引用类型，体现在：当我们定义一个数组，typeof array时，输出的是object 还有一个例子： <script> let array = [1,2,3,4]; let hd = array; hd[1] = 9; console.log(hd); console.log(array);
阅读全文
摘要：基本函数类型： <script> //判断是否整数 let num = 99; console.log(Number.isInteger(num)); let num_1 = 99.9; console.log(Number.isInteger(num_1)); //小数点后第几位四舍五入 let
阅读全文
摘要：字符串的基本操作： <script> //打印name的长度 //.length，没有括号的就是属性，不是函数 let name = " James Harden "; console.log(name.length); //全部转换为大写，有括号的是函数 console.log(name.toUp
阅读全文
摘要：显性布尔类型转换： <script> //显示转换布尔类型 let num = 0; console.log(typeof num); //一个！是非，分2步，先转换成布尔类型，再取反 //两个！！转换完后，0是布尔类型的false,取反再取反 //也就是false num = !!num; con
阅读全文
摘要：共同点（小空间可以访问到大空间）： 比如：无论外部用var,let,const定义，函数当中都可以访问到，不会报错。 <script> // 执行以下代码不会报错 var v = 1; let l = 2; const c = 3; function hd(){ console.log(v); co
阅读全文
摘要：续上篇，来说一下后来js的解决办法。 <script> // 执行以下代码会报错 console.log(web); let web = 12; </script> 很显然，用let这种声明方式，就会报错，原因：TDC临时性死区。 在函数中： <script> // 执行以下代码会报错 let we
阅读全文
摘要：先看以下这种情况（控制台输出a，在输出class，但是报错）： 说明在程序执行之前，解析器会先把咱们的代码分析一遍，在分析的过程中，他就执行了变量提升！ 来看以下几种情况： <script> console.log(web); var web = "I Love u"; </script> 这种情况
阅读全文
摘要：弹性盒子里面会放弹性元素，为盒子定义的规则，会影响里面的元素。 display:flex; display:inline-flex; 这两个的不同之处：容器设置flex以后，会变成块级元素，当然也就可以设置宽高（如下图的橙色） 当容器设置为inline-flex后，会变为类似inline-block
阅读全文
摘要：相对定位：position:relative; top:20px；就是距离上面20px，也就是向下沉20px，其余的同理。（空间位是保留的！！！） 绝对定位：position:absolute; 1，如果父元素没有定位属性，那么该元素的定位的标尺是整个页面的左上角 2，如果父元素有任意一种定位属性，
阅读全文
摘要：浮动这里要好好琢磨一下，挺麻烦，但是不难。 问题：如果一个父容器，两个子容器div，两个子容器为了显示，一个左浮动，一个右浮动，两个子容器都脱离了文档流，造成父容器没有元素，这种情况下该怎么做？ 问题如下图： 两种方法： 1，在两个div后再设置一个div，并且不设置宽高（宽高为0），然后清除上面两
阅读全文
摘要：float:left;一旦元素浮动，就会丢失空间位（不在正常的文档流内），后面的就会补上来。 像span，em等元素是行元素，是没有办法设置宽和高的，如果浮动了， 就会变为块元素，能设置属性。 如果两个元素都浮动，那么是“同一条战线上的”，会在一排，也都是丢失了空间位。
阅读全文
摘要：边距合并：如果上面的设置外边距向下100像素，下面的设置外边距向上120像素，那么就会像素合并为最大的那个，是120像素。 box-sizing:border-box；如果给定了这个元素的大小，比如300px*300px，那么无论修改边框还是内边距，该元素的大小永远都是300*300。 一下图片是各
阅读全文
摘要：行高：一般用em，适应各种响应式布局，要不然随着设备像素改变，页面变得很难看。 一般有很多字体属性，可以分开写，也可以合到一起写，合到一起写的时候，必须写大小和字体，否则都不生效。 文字阴影：text-shadow：rgba(32,31,31,0.3)，2px，3px，4px； 第一个颜色是阴影的颜
阅读全文
摘要：权重位规则如下（继承没有权重，是NULL，通配符*权重是0，0大于NULL），如果权重相同，那么后出现的更主要， 强制提升优先级：!important(一般不太用，会破坏规则)。 通配符*与继承的关系，*大于继承
阅读全文
