feat: update

Author: funnycoderstar

docs/.vuepress/config.js

@@ -90,6 +90,7 @@ module.exports = {
     base: '/blog/',
     title: '前端学习总结',
     description: '前端学习总结',
+    // theme: 'vuepress-theme-lemon',
     head: [['link', { rel: 'icon', href: 'https://cdn.wangyaxing.cn/icon-128x128.png' }]],
     themeConfig: {
         sidebarDepth: 2,
@@ -180,9 +181,10 @@ module.exports = {
                 ['/jsCode/实现一个轮播图', '实现一个轮播图'],
                 ['/jsCode/放大镜效果', '放大镜效果'],
                 ['/jsCode/LazyMan', '实现一个LazyMan'],
+                ['/jsCode/发布-订阅模式的实现', '发布-订阅模式的实现'],
             ],
             '/interview/': [
-                ['/interview/', '面试题专题'],
+                ['/interview/', '前端相关'],
                 {
                     title: 'CSS',
                     collapsable: true,
@@ -261,14 +263,14 @@ module.exports = {
                         ['/interview/笔试题/6', '笔试题4'],
                     ],
                 },
-                {
-                    title: '面经分享',
-                    collapsable: true,
-                    children: [
-                        ['/interview/面经/2017', '2017年面试总结'],
-                        ['/interview/面经/2020-面试', '2020年面试总结'],
-                    ],
-                },
+                // {
+                //     title: '面经分享',
+                //     collapsable: true,
+                //     children: [
+                //         ['/interview/面经/2017', '2017年面试总结'],
+                //         ['/interview/面经/2020-面试', '2020年面试总结'],
+                //     ],
+                // },
             ],
             '/100day/': [
                 ['/100day/', '100天计划专题'],

docs/README.md

@@ -2,17 +2,15 @@
 home: true
 heroText: 前端学习总结
 heroImage: ./logo.jpeg
-tagline: 
+tagline:
 actionText: 快速上手 →
 actionLink: /algorithm/
 features:
-- title: 算法系列
-  details: JavaScript实现常见一些算法题，主要来自 leetcode和剑指offer
-- title: 手写代码系列
-  details: JS手写代码系列，比如手写节流，防抖，深拷贝等等
-- title: 面试题系列
-  details: 常见的面试题总结。
-- title: 100天系列
-  details: 每天一个知识点的原理解析+一道算法题或者一篇一类问题(算法)的总结。
-footer: MIT Licensed | Copyright © 2020-present 木子星兮
----
+    - title: 算法系列
+      details: JavaScript实现常见一些算法题，主要来自 leetcode和剑指offer
+    - title: 编程题
+      details: JS手写代码系列，比如手写节流，防抖，深拷贝等等
+    - title: 前端知识
+      details: 基础知识总结。
+footer: MIT Licensed | Copyright © 2022-present OneStar
+---

docs/interview/README.md

@@ -1,89 +1,84 @@
-
 ### CSS
-- [CSS基础知识点](./CSS/CSS基础知识点.md)
-- [伪类和伪元素](./CSS/伪类和伪元素.md)
-- [实现固定宽高比(`width: height = 4: 3`)的div，怎么设置](./CSS/实现固定宽高比的div.md)
-- [CSS选择器](./CSS/CSS选择器.md)
-- [CSS解析规则](./CSS/CSS解析规则.md)
-- [`flex: 1` 完整写法](./CSS/flex.md)
-- [`display: none`和 `visibility:hidden`的区别](./CSS/display:none和visibility:hidden的区别.md)
-- [常见布局的实现](./CSS/常见CSS布局的实现)
-- `em` `rem` `vh` `vw` `calc()` `line-height` 百分比
-- `rem`实现原理及相应的计算方案
--  清除浮动方法及原理
-- `postcss`是什么
-- `css modules`
-- `CSS`预处理器
-- CSS 中的 `vertical-align` 有哪些值？它在什么情况下才能生效？
-- BFC(块格式化上下文)
 
+-   [CSS 基础知识点](./CSS/CSS基础知识点.md)
+-   [伪类和伪元素](./CSS/伪类和伪元素.md)
+-   [实现固定宽高比(`width: height = 4: 3`)的 div，怎么设置](./CSS/实现固定宽高比的div.md)
+-   [CSS 选择器](./CSS/CSS选择器.md)
+-   [CSS 解析规则](./CSS/CSS解析规则.md)
+-   [`flex: 1` 完整写法](./CSS/flex.md)
+-   [`display: none`和 `visibility:hidden`的区别](./CSS/display:none和visibility:hidden的区别.md)
+-   [常见布局的实现](./CSS/常见CSS布局的实现)
+-   `em` `rem` `vh` `vw` `calc()` `line-height` 百分比
+-   `rem`实现原理及相应的计算方案
+-   清除浮动方法及原理
+-   `postcss`是什么
+-   `css modules`
+-   `CSS`预处理器
+-   CSS 中的 `vertical-align` 有哪些值？它在什么情况下才能生效？
+-   BFC(块格式化上下文)
 
 ## JavaScript
-- [从JS底层理解var,const,let](./JavaScript/从JS底层理解var,const,let.md)
-- [赋值、浅拷贝、深拷贝区别](./JavaScript/赋值、浅拷贝、深拷贝区别.md)
-- [三行代码实现add(1)(2)(3)](./JavaScript/函数柯里化.md)
-- [一文理解this&call&apply&bind](./JavaScript/一文理解this&call&apply&bind.md)
-- [typeof和instanceof原理](./JavaScript/typeof和instanceof原理.md)
-- [import和require](./JavaScript/import和require.md)
-- [setTimeout和requestAnimationFrame](./JavaScript/setTimeout和requestAnimationFrame.md)
-- [for...of原理解析](./JavaScript/for...of原理解析.md)
-- [Generator函数](./JavaScript/Generator函数.md)
-- [async原理解析](./JavaScript/async原理解析.md)
-- [详解ES6中的class](./JavaScript/详解ES6中的class.md)
-- [装饰器](./JavaScript/装饰器.md)
-- [JavaScript的几种创建对象的方式](./JavaScript/JavaScript的几种创建对象的方式.md)
-- [JavaScript的几种继承方式](./JavaScript/JavaScript的几种继承方式.md)
-- [事件循环机制](./JavaScript/事件循环机制.md)
+
+-   [从 JS 底层理解 var,const,let](./JavaScript/从JS底层理解var,const,let.md)
+-   [赋值、浅拷贝、深拷贝区别](./JavaScript/赋值、浅拷贝、深拷贝区别.md)
+-   [三行代码实现 add(1)(2)(3)](./JavaScript/函数柯里化.md)
+-   [一文理解 this&call&apply&bind](./JavaScript/一文理解this&call&apply&bind.md)
+-   [typeof 和 instanceof 原理](./JavaScript/typeof和instanceof原理.md)
+-   [import 和 require](./JavaScript/import和require.md)
+-   [setTimeout 和 requestAnimationFrame](./JavaScript/setTimeout和requestAnimationFrame.md)
+-   [for...of 原理解析](./JavaScript/for...of原理解析.md)
+-   [Generator 函数](./JavaScript/Generator函数.md)
+-   [async 原理解析](./JavaScript/async原理解析.md)
+-   [详解 ES6 中的 class](./JavaScript/详解ES6中的class.md)
+-   [装饰器](./JavaScript/装饰器.md)
+-   [JavaScript 的几种创建对象的方式](./JavaScript/JavaScript的几种创建对象的方式.md)
+-   [JavaScript 的几种继承方式](./JavaScript/JavaScript的几种继承方式.md)
+-   [事件循环机制](./JavaScript/事件循环机制.md)
 
 ### HTTP
-- [HTTP1.x、HTTP2、HTTP3](./HTTP/HTTP1.x、HTTP2、HTTP3.md)
-- [HTTPS](./HTTP/HTTPS.md)
-- [三次握手，四次挥手，为什么是三次和四次](./HTTP/三次握手，四次挥手，为什么是三次和四次)
-- [HTTP 的请求方法有哪些？GET和POST区别？](./HTTP/HTTP请求方法)
-- [HTTP状态码](./HTTP/HTTP状态码)
-- [Web安全之XSS](./HTTP/Web安全之XSS)
-- [Web安全之CSRF](./HTTP/Web安全之CSRF)
-- [TCP和UDP的区别](./HTTP/TCP和UDP)
+
+-   [HTTP1.x、HTTP2、HTTP3](./HTTP/HTTP1.x、HTTP2、HTTP3.md)
+-   [HTTPS](./HTTP/HTTPS.md)
+-   [三次握手，四次挥手，为什么是三次和四次](./HTTP/三次握手，四次挥手，为什么是三次和四次)
+-   [HTTP 的请求方法有哪些？GET 和 POST 区别？](./HTTP/HTTP请求方法)
+-   [HTTP 状态码](./HTTP/HTTP状态码)
+-   [Web 安全之 XSS](./HTTP/Web安全之XSS)
+-   [Web 安全之 CSRF](./HTTP/Web安全之CSRF)
+-   [TCP 和 UDP 的区别](./HTTP/TCP和UDP)
 
 ### Vue
-- [简单通俗理解vue3.0中的Proxy](./Vue/简单通俗理解vue3.0中的Proxy.md)
-- [keep-alive的实现原理及LRU缓存策略](./Vue/keep-alive的实现原理及LRU缓存策略.md)
-- [nextTick的原理及运行机制](./Vue/nextTick的原理及运行机制)
 
+-   [简单通俗理解 vue3.0 中的 Proxy](./Vue/简单通俗理解vue3.0中的Proxy.md)
+-   [keep-alive 的实现原理及 LRU 缓存策略](./Vue/keep-alive的实现原理及LRU缓存策略.md)
+-   [nextTick 的原理及运行机制](./Vue/nextTick的原理及运行机制)
 
 ### React
 
-- setState原理，什么时候同步，什么时候异步
-- JSX原理，为什么自定义的React组件必须大写
-- 虚拟DOM，diff算法
-    - 虚拟DOM是什么
-    - React diff原理，如何从 O(n^3)变成 O(n)
-    - 为什么要使用Key，key有什么好处
-    
-- 生命周期（16版本之前和之后的）
--  React事件机制
-    - React如何实现自己的事件机制
-    - React事件和原生事件有什么区别
-    - React 事件中为什么要绑定 this 或者 要用箭头函数, 他们有什么区别
-- fiber
-- [4个问题带你进阶ReactHooks](./React/4个问题带你进阶ReactHooks.md)
-- immber和immutable
-- 受控组件和非受控组件区别
-- redux，redux 和 mobx 区别，为什么选择 redux
-- Vue和React的区别
-
-
-
+-   setState 原理，什么时候同步，什么时候异步
+-   JSX 原理，为什么自定义的 React 组件必须大写
+-   虚拟 DOM，diff 算法
+    -   虚拟 DOM 是什么
+    -   React diff 原理，如何从 O(n^3)变成 O(n)
+    -   为什么要使用 Key，key 有什么好处
+-   生命周期（16 版本之前和之后的）
+-   React 事件机制
+    -   React 如何实现自己的事件机制
+    -   React 事件和原生事件有什么区别
+    -   React 事件中为什么要绑定 this 或者 要用箭头函数, 他们有什么区别
+-   fiber
+-   [4 个问题带你进阶 ReactHooks](./React/4个问题带你进阶ReactHooks.md)
+-   immber 和 immutable
+-   受控组件和非受控组件区别
+-   redux，redux 和 mobx 区别，为什么选择 redux
+-   Vue 和 React 的区别
 
 ### 强烈推荐的文章
-- [(建议收藏)TCP协议灵魂之问，巩固你的网路底层基础](https://juejin.im/post/5e527c58e51d4526c654bf41)
-- [(1.6w字)浏览器灵魂之问，请问你能接得住几个？](https://juejin.im/post/5df5bcea6fb9a016091def69)
-- [中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上)](https://juejin.im/post/5c64d15d6fb9a049d37f9c20)
-- [(中篇)中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂](https://juejin.im/post/5c92f499f265da612647b754)
-- [(下篇)中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂](https://juejin.im/post/5cc26dfef265da037b611738)
-- [看完跳槽少说涨 5 K，前端面试从准备到谈薪完全指南（近万字精华）](https://juejin.im/post/5dfef50751882512444027eb)
-- [前端该如何准备数据结构和算法？](https://juejin.im/post/5d5b307b5188253da24d3cd1)
-- [在阿里我是如何当面试官的（持续更新）](https://juejin.im/post/5e6ebfa86fb9a07ca714d0ec)
 
-### 个人面经分享
-- [2017年面试总结](./面经/2017.md)
+-   [(建议收藏)TCP 协议灵魂之问，巩固你的网路底层基础](https://juejin.im/post/5e527c58e51d4526c654bf41)
+-   [(1.6w 字)浏览器灵魂之问，请问你能接得住几个？](https://juejin.im/post/5df5bcea6fb9a016091def69)
+-   [中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上)](https://juejin.im/post/5c64d15d6fb9a049d37f9c20)
+-   [(中篇)中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂](https://juejin.im/post/5c92f499f265da612647b754)
+-   [(下篇)中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂](https://juejin.im/post/5cc26dfef265da037b611738)
+-   [看完跳槽少说涨 5 K，前端面试从准备到谈薪完全指南（近万字精华）](https://juejin.im/post/5dfef50751882512444027eb)
+-   [前端该如何准备数据结构和算法？](https://juejin.im/post/5d5b307b5188253da24d3cd1)
+-   [在阿里我是如何当面试官的（持续更新）](https://juejin.im/post/5e6ebfa86fb9a07ca714d0ec)

docs/jsCode/发布-订阅模式的实现.md

@@ -0,0 +1,64 @@
+## 发布-订阅模式的实现
+
+写出一个同时拥有 on、emit 和 off 的 EventEmitter
+
+```js
+class myEventEmitter {
+    constructor() {
+        // eventMap 用来存储事件和监听函数之间的关系
+        this.eventMap = {};
+    }
+
+    // type 这里就代表事件的名称
+    on(type, handler) {
+        // hanlder 必须是一个函数，如果不是直接报错
+
+        if (!(handler instanceof Function)) {
+            throw new Error('请传一个函数');
+        }
+        // 判断 type 事件对应的队列是否存在
+        if (!this.eventMap[type]) {
+            // 若不存在，新建该队列
+            this.eventMap[type] = [];
+        }
+        // 若存在，直接往队列里推入 handler
+        this.eventMap[type].push(handler);
+    }
+
+    // 别忘了我们前面说过触发时是可以携带数据的，params 就是数据的载体
+    emit(type, params) {
+        // 假设该事件是有订阅的（对应的事件队列存在）
+        if (this.eventMap[type]) {
+            // 将事件队列里的 handler 依次执行出队
+            this.eventMap[type].forEach((handler, index) => {
+                // 注意别忘了读取 params
+                handler(params);
+            });
+        }
+    }
+
+    off(type, handler) {
+        if (this.eventMap[type]) {
+            this.eventMap[type].splice(this.eventMap[type].indexOf(handler) >>> 0, 1);
+        }
+    }
+}
+```
+
+下面我们对 myEventEmitter 进行一个简单的测试，创建一个 myEvent 对象作为 myEventEmitter 的实例，然后针对名为 “test” 的事件进行监听和触发：
+
+```js
+// 实例化 myEventEmitter
+const myEvent = new myEventEmitter();
+
+// 编写一个简单的 handler
+const testHandler = function(params) {
+    console.log(`test事件被触发了，testHandler 接收到的入参是${params}`);
+};
+
+// 监听 test 事件
+myEvent.on('test', testHandler);
+
+// 在触发 test 事件的同时，传入希望 testHandler 感知的参数
+myEvent.emit('test', 'newState');
+```