圣杯布局、双飞翼布局

2020-10-302021-12-23前端6 分钟读完 (大约899个字)

1. 问题场景

三列布局中，如果想要将主要内容main优先加载优化，则DOM如下所示

<div class="g-container">
　　<div class="g-main">我是主列</div>
　　<div class="g-left">我是左列</div>
    <div class="g-right">我是右列</div>
</div>

CSS, 技巧

css预处理器：Less

2020-10-302021-12-23前端13 分钟读完 (大约1962个字)

1.注释

以 // 开头的注释，不会被编译到css文件中
以 /**/ 包裹的注释会被编译到css文件中

Less

重绘与回流

2020-10-042023-06-15前端8 分钟读完 (大约1247个字)

回流

指改变几何属性的渲染

重绘

指改变外观属性而不影响几何属性的渲染

前端性能优化

防抖和节流

2020-09-292021-12-24前端3 分钟读完 (大约425个字)

debounce

上图是对鼠标进行监听，事件执行的很频繁，如果执行的事件是对接口的请求，那么会在短时间内发起大量重复请求，所以我们需要防抖或者节流进行解决。

Typescript语法篇

2020-09-252021-12-23前端22 分钟读完 (大约3330个字)

1.typescript的原始类型

boolean
number
string
void（只有null和undefined可以赋给void）
undefined 和 null（是所有类型的子类型，严格模式下只能赋值给对应的类型或者any）
symbol
bigint

学习css的网站

2020-09-202021-12-23前端几秒读完 (大约60个字)

codepen：https://codepen.io/
css常见布局：https://csslayout.io/patterns/
常见加载动画：https://tobiasahlin.com/spinkit/
常见css效果：https://emilkowalski.github.io/css-effects-snippets/
css灵感：https://chokcoco.github.io/CSS-Inspiration/#/
自定义css组件：https://animista.net/

CSS

EventBus的一种使用场景

2020-09-172020-11-27前端2 分钟读完 (大约335个字)

所谓事件总线，就是实例化Vue对象，在该实例上通过$on绑定事件、$emit触发事件、$off解绑事件，进行组件通信。

一、使用

实例化Vue对象，并挂载到Vue.prototype

1	Vue.prototype.$bus = new Vue();

二、场景

在多个页面复用一个组件时，每个页面需要有点击按钮后，触发不同的事件

当然可以监听路由进行判断调用不同的函数，但是这样会在一个组件内写上很多其他组件应该触发的事件。

我们利用EventBus可以做到组件间的解耦

三、使用方法

1.我们在各个页面上写好事件触发后调用的函数，然后在mounted（如果用keep-alive则是在activated，否则只挂载一次）this.$bus.$on上绑定该事件，在beforeDestory（如果用keep-alive则是在deactived，否则无法解绑事件）上用this.$bus.$off解绑事件。

mounted() {
    this.$bus.$on("save", this.save);
}

beforeDestory() {
    this.$bus.$off("save", this.save);
}

save() {
    console.log("我没有写在复用组件上哦！")
}