标签：总结 BFC hash show 前端 知识 Promise 数组 图层

原型链

function Person() {

}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin

Person为构造函数

person为实例对象

构造函数指向原型

Person.prototype

person和Person都是通过Person的原型 prototype构造出来的

所以person.prototype === Person.prototype

constructor是构造函数的意思

Person.prototype.constructor === Person

实例对象指向原型

person.proto === Person.prototype

数组

ES5

名字	描述	是否改变原对象	参数
arr.join(",")	数组变字符串	否	用，连接
str.split(",")	字符串变数组	否	用，分隔
arr.push(‘a’)	像数组添加字符串	是	添加a，可以多个参数用，分割
b=arr.pop()	弹出组数尾元素	是	弹出尾元素并赋值给b
b=arr.shift()	弹出头元素	是	弹出头元素赋值给b
arr.unshift(a)	向数组头添加a	是	字符串添加到数组头
arr.reverse()	数组倒序	是
arr.sort()	数组排序	是
a = arrb.concat©	连接数组	不改变	把b和c数组连接起来赋值给a，c可为字符串
a=arrb.slice(i,j)	分割数组	不改变	从[i,j)分割b赋值给a
a=arrb.splice(i,j)	分割数组	改变	从[i,j)分割b赋值给a
arr.indexOf(a)	查找索引	不改变	查找a在数组中的位置，返回索引，不存在返回-1
arr.lastIndexOf(a)	查找索引	不改变	查找a在数组中最后的位置，返回索引，不存在返回-1

Vue中v-if和v-show之间的区别

1.本质区别

v-show:把标签display设置为none，控制隐藏
v-if:动态的向DOM树内添加或者删除DOM元素

2.编译的区别

v-show:其实就是在控制css
v-if:切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件
监听和子组件

3.使用条件

只渲染一次使用v-if
反复渲染使用v-show

4.总结

v-if:不显示时,第一次就直接不渲染,如果内容以及显示就将其改为不显示,将内容直接从Dom去除,只是渲染一次用v-if
v-show:不显示时，就会改为display:none,但是会渲染在Dom上。所以反复切换内容的用v-show

隐藏一个元素的五种方法

display:none

visibility：hidden

opacity：0 不透明度

绝对定位 position：absolute left和top给两个大负值

相对定位 position：relative left和top给两个大负值

箭头函数指向

箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

var x=11;
var obj={
 x:22,
 say:()=>{
   console.log(this.x);
 }
}
obj.say();//11

var a=11;
function test2(){
  this.a=22;
  let b=()=>{console.log(this.a)}
  b();
}
var x=new test2();//22

前端路由的实现

hash模式

这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 “www.baidu.com/#hashhash” ，其中 “#hashhash” 就是我们期望的 hash 值。

由于 hash 值的变化不会导致浏览器像服务器发送请求，而且 hash 的改变会触发 hashchange 事件，浏览器的前进后退也能对其进行控制，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。

window.location.hash = 'hash字符串'; // 用于设置 hash 值

let hash = window.location.hash; // 获取当前 hash 值

// 监听hash变化，点击浏览器的前进后退会触发
window.addEventListener('hashchange', function(event){ 
    let newURL = event.newURL; // hash 改变后的新 url
    let oldURL = event.oldURL; // hash 改变前的旧 url
},false)

history模式

//H5之前
history.go(-1);       // 后退一页
history.go(2);        // 前进两页
history.forward();     // 前进一页
history.back();      // 后退一页
//H5之后
history.pushState();         // 添加新的状态到历史状态栈
history.replaceState();      // 用新的状态代替当前状态
history.state                // 返回当前状态对象

如何删除cookies

如何删除Cookie？

max-age：如果设置为负值的话，则为浏览器进程Cookie(内存中保存)，关闭浏览器就失效；如果设置为0，则立即删除该Cookie。

**expiress:**设置为当前时间之前的时间，即可立即删除该cookie

Vue实现数据双向绑定

监听器

对data里面的数据对象做遍历（子对象存在时做递归遍历），利用Object.defineProperty将data中的数据全部转换成getter/setter，当某个属性和值发生改变时就能触发setter，就会监听到数据的变化

解析器

模板解析器主要通过遍历模板，查看都使用了哪些变量、指令，为数据添加订阅者Watcher，一旦数据发生了改变，调用更新函数更新。

订阅者Watcher

Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新——这是一个典型的观察者模式

Promise

Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理和更强大。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

一个Promise的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected），状态的改变只能是单向的，且变化后不可在改变。

一个Promise必须提供一个 then 方法以访问其当前值、终值和据因。

promise.then(onFulfilled, onRejected)回调函数只能执行一次，且返回 promise 对象

Promise的每个操作返回的都是Promise对象，可支持链式调用。

通过 then 方法执行回调函数，Promise的回调函数是放在事件循环中的微队列。

 function fn(){
     return new Promise((resolve, reject)=>{
         成功时调用 resolve(数据)
         失败时调用 reject(错误)
     })
 }
 fn().then(success1, fail1).then(success2, fail2)

Promise.all()

Promise.all 接收一个 promise 对象的数组作为参数，当这个数组里的所有 promise 对象全部变为resolve或 有 reject 状态出现的时候，它才会去调用 .then 方法，它们是并发执行的

1. Promise.all()接受一个 Array 类型的参数

2. 只有数组中全部的 Promise 都变为 resolve 的时候

3. 返回一个新的 Promise 实例

4. 只要有一个失败，状态就变成 rejected

   function PromiseAll(arr) {
       //PromiseAll的返回值为一个promise对象
       return new Promise((resolve, reject) => {
           //PromiseAll的入参必须是数组
           if (!Array.isArray(arr)) {
               return reject(new TypeError('arr must be an array.'));
           }
           let resArr = [];
           for (let i in arr) {
               (function(i) {
                   Promise.resolve(arr[i]).then(res => {
                       resArr.push(res);
                       //只有所有的都成功了，才会返回resolve
                       if (i == arr.length - 1) {
                           return resolve(resArr);
                       }
                   }, err => {
   		    // 只要出错就抛出
                       return reject(err)
                   }).catch(err => {
                       console.log(err)
                   })
               })(i)
           }
       })
   }
   
   //测试
   const pro1 = new Promise((res,rej) => {
     setTimeout(() => {
       res('1')
     },1000)
   })
   const pro2 = new Promise((res,rej) => {
     setTimeout(() => {
       res('2')
     },2000)
   })
   const pro3 = new Promise((res,rej) => {
     setTimeout(() => {
       res('3')
     },3000)
   })
   
   const proAll = PromiseAll([pro1,pro2,pro3])
   .then(res => 
     console.log(res) // 3秒之后打印 ["1", "2", "3"]
   )
   .catch((e) => {
     console.log(e)
   })
   

精简

all

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

Promise.all([promise1, promise2]).then(success1, fail1)
promise1`和`promise2`都成功才会调用`success1

race

Promise.race()方法同样是将多个Promise实例，包装成一个新的Promise` 实例。

Promise.race([promise1, promise2]).then(success1, fail1)
promise1`和`promise2`只要有一个成功就会调用`success1

new的实现原理

1. 创建一个空对象，构造函数中的this指向这个空对象
2. 这个新对象被执行 [[原型]] 连接
3. 执行构造函数方法，属性和方法被添加到this引用的对象中
4. 如果构造函数中没有返回其它对象，那么返回this，即创建的这个的新对象，否则，返回构造函数中返回的对象。

BFC

如何创建

1. 根元素

2. 浮动元素（float 属性不为 none）

3. position 为 absolute 或 fixed

4. overflow 不为 visible 的块元素

5. display 为 inline-block, table-cell, table-caption

应用

1. 防止 margin 重叠 (同一个BFC内的两个两个相邻Box的 margin 会发生重叠，触发生成两个BFC，即不会重叠)

2. 清除内部浮动 (创建一个新的 BFC，因为根据 BFC 的规则，计算 BFC 的高度时，浮动元素也参与计算)

3. 自适应多栏布局 (BFC的区域不会与float box重叠。因此，可以触发生成一个新的BFC)

BFC布局规则

BFC内，盒子依次垂直排列。

BFC内，两个盒子的垂直距离由 margin 属性决定。属于同一个BFC的两个相邻Box的margin会发生重叠【符合合并原则的margin合并后是使用大的margin】

BFC内，每个盒子的左外边缘接触内部盒子的左边缘（对于从右到左的格式，右边缘接触）。即使在存在浮动的情况下也是如此。除非创建新的BFC。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算。

v-if 和 v-show 的区别和应用场景

相同点：v-if 与 v-show 都可以动态控制 DOM 元素的显示隐藏。

不同点：

1. 手段：v-if 是动态的向 DOM 树内添加或者删除 DOM 元素；v-show 是通过设置 DOM 元素的 display 样式属性控制显示隐藏，DOM 元素保留；

2. 编译过程：v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 CSS 切换；

3. 编译条件：v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且 DOM 元素保留；

4. 性能消耗：v-if 有更高的切换消耗；v-show 有更高的初始渲染消耗；

5. 应用场景：v-if 适合运营条件不大可能改变；v-show 适合频繁切换。

transfrom的值，会引起重排和重绘吗

不会，因为 GPU 进程会为其开启一个新的复合图层，不会影响默认复合图层（就是普通文档流），所以并不会影响周边的 DOM 结构，而属性的改变也会交给 GPU 处理，不会进行重排。

使 GPU 进程开启一个新的复合图层的方式还有 3D 动画，过渡动画，以及 opacity 属性，还有一些标签，这些都可以创建新的复合图层。这些方式叫做硬件加速方式。你可以想象成新的复合图层和默认复合图层是两幅画，相互独立，不会彼此影响。降低重排的方式：要么减少次数，要么降低影响范围，创建新的复合图层就是第二种优化方式。绝对布局虽然脱离了文档流，但不会创建新的复合图层，因此当绝对布局改变时，不会影响普通文档流的 render tree，但是依然会绘制整个默认复合图层，对普通文档流是有影响的。普通文档流就是默认复合图层，不要介意我交换使用它们如果你要使用硬件加速方式降低重排的影响，请不要过度使用，创建新的复合图层是有额外消耗的，比如更多的内存消耗，并且在使用硬件加速方式时，配合 z-index 一起使用，尽可能使新的复合图层的元素层级等级最高。

Vue生命周期

什么是生命周期？

每个Vue实例在被创建时都要经过一系列的初始化过程：
开始创建 -> 初始化数据 -> 编译模板 -> 挂载DOM-渲染 -> 更新-渲染 -> 销毁等一系列过程
通俗而言：Vue实例从创建到销毁的过程
生命周期分为8个过程：创建前，创建后，挂载前，挂载后，更新前，更新后，销毁前，销毁后。

vue生命周期的作用是什么？

在Vue实例经过一系列初始化的过程中也会运行一些 叫做 生命周期钩子 的函数, 生命週期裡邊这些事件鉤子，给予了用户在不同阶段可以添加自己代码的机会。

标签：总结,BFC,hash,show,前端,知识,Promise,数组,图层
来源： https://blog.csdn.net/Hym_N/article/details/116770079

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。