developers.weixin.qq.com
获得徽章 27
- # 内存泄漏的场景
1. 全局变量，函数
- 组件销毁时要记得清空。
2. 全局事件
- 组件中有全局事件的引用。组件销毁时记得解绑。
3. 全局定时器
- 组件有全局定时器。组件销毁时要记得清除。
4. 自定义事件
- 组件中使用了自定义事件，销毁时要记得解绑。
5. 闭包（无定论）
- 但闭包不是内存泄漏，因为它是符合开发者预期的，即本身就这么设计的。而内存泄漏是非预期的。
# WeakMap WeakSet 弱引用，不会影响垃圾回收。
## WeakMap
```
// 函数执行完，obj 会被销毁，因为外面的 WeakMap 是“弱引用”，不算在内
const wMap = new WeakMap()
function fn() {
const obj = {
name: 'zhangsan'
}
// 注意，WeakMap 专门做弱引用的，因此 WeakMap 只接受对象作为键名（`null`除外），不接受其他类型的值作为键名。其他的无意义
wMap.set(obj, 100)
}
fn()
// 代码执行完毕之后，obj 会被销毁，wMap 中也不再存在。但我们无法第一时间看到效果。因为：
// 内存的垃圾回收机制，不是实时的，而且是 JS 代码控制不了的，因此这里不一定能直接看到效果。
```
## WeakSet
```
// 函数执行完，obj 会被销毁，因为外面的 WeakSet 是“弱引用”，不算在内
const wSet = new WeakSet()
function fn() {
const obj = {
name: 'zhangsan'
}
wSet.add(obj) // 注意，WeakSet 就是为了做弱引用的，因此不能 add 值类型！！！无意义
}
fn()
```
#码上掘金#展开17 - 【px % em rem vw/vh 的区别】
## px
像素，基本单位
## %
相对于父元素的尺寸。
如根据 `position: absolute;` 居中显示时，需要设置 `left: 50%`
```css
.container {
with: 200px;
height: 200px;
position: relative;
}
.box {
with: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
```
## em
相对于当前元素的 `font-size`。首行缩进可以使用 `text-indent: 2em`。
## rem
rem = root em
相对于根元素的 `font-size` 。可以根据媒体查询，设置根元素的 `font-size` ，实现移动端适配。
```css
@media only screen and (max-width: 374px) {
/* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
html {
font-size: 86px;
}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
/* iphone6/7/8 和 iphone x */
html {
font-size: 100px;
}
}
@media only screen and (min-width: 414px) {
/* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
html {
font-size: 110px;
}
}
```
## vw/vh
- vw 屏幕宽度的 1%
- vh 屏幕高度的 1%
- vmin 两者最小值
- vmax 两者最大值展开评论2 - SOLID 五大设计原则
* S - 单一职责原则
一个程序只做一件事，如果功能过去复杂就拆分开，每个部分保持独立
* O - 开放封闭原则
对扩展开放，对修改封闭。增加需求时，扩展新代码，而非修改已有代码。这是软件设计的终极目标。
* L - 李氏置换原则
子类能覆盖父类，父类能出现的地方子类就能出现。JS中使用较少。
* I - 接口独立原则
保持接口的单一独立，避免出现“胖接口”，JS中没有接口（除typescript），使用较少。类似于单一职责原则，这里更关注接口。
* D - 依赖导致原则
面向接口编程，依赖于抽象而不依赖于具体。使用方只关注接口而不关注具体类的实现。JS中使用较少。展开评论4
![[灵光一现]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_25.51e6984.png)