feat: 0326

docs/css/index.md

@@ -364,6 +364,12 @@ white-space: nowrap;
 
 总结来说，px 是绝对单位，不会随其他因素改变；rem 是相对于根元素字体大小的倍数，可以方便地调整整个页面的大小；em 是相对于父元素字体大小的倍数，可以影响子元素的大小。在实际使用中，可以根据需求选择合适的单位。对于响应式设计，使用 rem 可以方便地调整整个页面的大小；对于局部样式，可以使用 px 或 em 来控制具体的大小。
 
+## 19.在 CSS3 中举几个可以继承的属性，和不可以继承属性？
+
+可以继承的属性： font-family：字体系列 font-size：字体大小 font-weight：字体粗细 color：文本颜色 text-align：文本对齐方式 line-height：行高度 color：文本颜色
+
+不会继承的属性：display,盒子模型的属性：width,height,marigin, border,padding; 背景属性：float, clear, position , top ,tight.botton 定位属性：float、clear、position、top、right、bottom、left、overflow、clip
+
 ## 参考
 
 - [面试题汇总](https://juejin.cn/post/6844903885488783374#heading-58)

docs/interview/experiences/15202309handwriting.md

@@ -134,15 +134,13 @@ React 的**时间分片**便是基于类似 rIC 而实现，然而因为 rIC 的
 // 哈哈 不知道咋写
 // 被观察者
 class Subject {
-  constructor(name) {
-    this.name = name;
+  constructor() {
     this.observers = [];
     this.state = 'init';
   }
   addObserver(observer) {
     this.observers.push(observer);
   }
-  // remove
   removeObserver(observer) {
     this.observers = this.observers.filter((ob) => ob != observer);
   }
@@ -162,7 +160,7 @@ class Observer {
   }
 }
 
-var sub = new Subject('iphone');
+var sub = new Subject();
 var watcher1 = new Observer('wmh');
 var watcher2 = new Observer('cpp');
 // 观察者订阅主题(被观察者)
@@ -933,24 +931,32 @@ let test = () => console.log('111');
 mockSetInterval(test, 1000);
 ```
 
-### second
+### second,借助 requestAnimationFrame + 递归来完成
 
 ```js
-function mockSetInterval(fn, delay) {
-  let start = Date.now();
-  let timer, now;
-  let loop = () => {
-    timer = requestAnimationFrame(loop);
-    now = Date.now();
-    if (now - start >= delay) {
-      fn.apply(this);
-      cancelAnimationFrame(timer);
-    }
-  };
-  requestAnimationFrame(loop);
-}
-let test = () => console.log('111');
-mockSetInterval(test, 1000);
+let mockInterval = {
+  timer: null,
+  setInterval: function (cb, delay, ...arg) {
+    let start = Date.now();
+    let now;
+    let loop = () => {
+      this.timer = requestAnimationFrame(loop);
+      now = Date.now();
+      if (now - start >= delay) {
+        cb.apply(this, arg);
+        start = now;
+      }
+    };
+    requestAnimationFrame(loop);
+  },
+  clearInterval: function () {
+    cancelAnimationFrame(this.timer);
+  },
+};
+
+let count = 1;
+let test = () => console.log(count++);
+mockInterval.setInterval(test, 2000);
 ```
 
 ## 22.判断对象是否存在循环引用(Set)

docs/interview/experiences/16easyHandwriting.md

@@ -16,6 +16,8 @@ nav:
 
 > 练习的不是手写，而是对于这份工作的热爱
 
+> base 50 middle 30 hard 20
+
 # 最热的手写,没有之一,没有准备好，就不要出去面试
 
 ## 1.apply/call
@@ -860,3 +862,19 @@ mockRender(vNode, docuement.getElementById('#app'));
 ## 31.实现观察模式
 
 ## 32.图片懒加载
+
+## 33.实现简单 hash 路由
+
+## 34.实现加减乘除链式调用, 类似 jQuery 式用法
+
+## 35.
+
+## 36.
+
+## 37.
+
+## 38.
+
+## 39.
+
+## 40.

docs/interview/experiences/17hotHandwriting.md

@@ -74,6 +74,30 @@ add(1)(2)(3)(4)();
 
 ## 2.偏函数/惰性函数
 
+### 2.1 偏函数
+
+偏函数用于固定一个函数的一个或多个参数，并返回一个可以接收剩余参数的函数,接下来实现 partial？
+
+```js
+function url(scheme, domain, path) {
+  return `${scheme}://${domain}/${path}`;
+}
+const myGithubPath = partial(url, 'https', 'github.com');
+const profilePath = myGithubPath('semlinker/semlinker');
+const awesomeTsPath = myGithubPath('semlinker/awesome-typescript');
+// https://github.com/semlinker/semlinker
+// https://github.com/semlinker/awesome-typescript
+function partial() {}
+```
+
+### 2.2 惰性函数
+
+所谓的惰性载入就是当第 1 次根据条件执行函数后，在第 2 次调用函数时，就不再检测条件，直接执行函数。要实现这个功能，我们可以在第 1 次条件判断的时候，在满足判断条件的分支中覆盖掉所调用的函数，实现一个封装事件监听器函数
+
+```js
+function addHandler(ele, type, handler) {}
+```
+
 ## 3.16 进制和颜色字符串进行转换
 
 ## 4.二分查找
@@ -254,10 +278,15 @@ function defineProperties(obj, target) {
 ## 15.实现 es6 extends
 
 ```js
-function mockExtends(child, parent, staticProps) {
-  let proto = Object.create(parent.prototype);
-  proto.constructor = child;
-  child.prototype = proto;
+function mockExtends(Child, Parent, staticProps) {
+  let proto = Object.create(Parent.prototype);
+  proto.constructor = Child;
+  Child.prototype = proto;
+  // 继承静态方法
+  Parent && Object.setPrototypeOf(Child, Parent);
+  for (let key in staticProp) {
+    Child.prototype[key] = staticProp[key];
+  }
 }
 ```
 
@@ -438,3 +467,5 @@ function backTop() {
   }
 }
 ```
+
+## 24.实现验证码倒计时

docs/interview/experiences/18middleHandwriting.md

@@ -14,6 +14,8 @@ nav:
 
 > 没有强求要掌握，当然掌握最好，多多益善
 
+> 顶多 20 个
+
 ## 1.大数相乘
 
 ```js
@@ -91,10 +93,35 @@ trans('123456');
 
 ```js
 function mergeSort(arr) {
-  let merge = (l, r) => {};
-  let sort = (arr) => {};
+  let merge = (l, r) => {
+    let i = 0,
+      j = 0;
+    let res = [];
+    while (i < l.length && j < r.length) {
+      if (r[j] > l[i]) {
+        res.push(l[i++]);
+      } else {
+        res.push(r[j++]);
+      }
+    }
+    while (i < l.length) {
+      res.push(l[i++]);
+    }
+    while (j < r.length) {
+      res.push(r[j++]);
+    }
+    return res;
+  };
+  let sort = (arr) => {
+    if (arr.length == 1) return arr;
+    let mid = Math.floor(arr.length / 2);
+    let l = arr.slice(0, mid);
+    let r = arr.slice(mid);
+    return merge(mergeSort(l), mergeSort(r));
+  };
+  return sort(arr);
 }
-mergeSort(arr);
+mergeSort([1, 222, 1, 24, 23, 44, 9]);
 ```
 
 ## 4.
@@ -147,6 +174,32 @@ function redPacket(total, num, max = 2, min = '0.1') {
 
 ## 8.封装异步的 fetch，使用 async await 方式来使用
 
+> [出自](https://juejin.cn/post/6946136940164939813?searchId=2024031814180491A668E2D8A6BD15EEE9#heading-60)
+
+```js
+class HttpRequestUtils {
+  async get(url) {
+    const res = await fetch(url);
+    const data = await res.json();
+    return data;
+  }
+  async post(url, data) {
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+    const data = await res.json();
+    return data;
+  }
+}
+const httpUtil = new HttpRequestUtils();
+const res = await httpUtil.get('http://golderbrother.cn/');
+console.log(res);
+```
+
 ## 9.查找文章中出现频率最高的单词(几率太低了)
 
 ```js

docs/interview/experiences/23leetcodeC.md

@@ -44,6 +44,8 @@ nav:
  * 24.反转链表II
  * 25.判断两个数组内容相等
  * 26.最长连续序列
+ * 27.二叉搜索树中第k小的元素
+ * 28.查找有序二维数组的目标值
  */
 ```
 

docs/interview/experiences/37acc20240326.md

@@ -0,0 +1,44 @@
+---
+title: 20240326积累面试
+order: 37
+group:
+  order: 0
+  title: interview
+nav:
+  order: 3
+  title: 'interview'
+  path: /interview
+---
+
+## 八股
+
+- flex: 1 表示什么意思
+- 如何避免 CSS 污染
+- 在 CSS3 中举几个可以继承的属性，和不可以继承属性？
+- Es5 的继承和 Es6 除了写法以外还有什么区别
+- 构造函数和 class 类的区别？
+
+> 本质上 es5 和 es6 写法上的区别
+
+-- 1.class 声明会提升但不会赋值，在 class 定义前 new 会报错，类似 let const 的暂时性死区,而构造函数阔以先 new，在调用
+
+-- 2.1 es6 继承，必须先调用 super(this),为啥要这样，是因为这一步会创建一个继承父类的 this 对象，所以是先继承，后创建实例，直白说就是：先将父类的属性和方法加到一个空对象上，然后再将该对象作为子类的实例
+
+-- 2.2.es5 继承：先创建实例，在继承，先创建一个独立的子类实例对象，再将父类的方法添加到这个对象上
+
+- sse 和 websocket 区别？
+- 宏和语法糖的区别？
+- JS 中各循环的性能对比？
+- 如何删除 Cookie
+- 深挖 BFC/文档流
+- 内存泄漏是什么，如何排查，如何避免
+- HTTP 长链接优点？
+- HTTPS 的原理
+- CDN 容灾方案怎么做？
+- CORS 解决跨域时，后端如何判断前端是否合法？
+
+## 手写
+
+- 手写 JSON.stringify 和 手写 JSON.parse
+- 实现加减乘除链式调用, 类似 jQuery 式用法
+- 实现验证码倒计时

docs/interview/experiences/practise/202403/0323.js

@@ -167,3 +167,20 @@ var maxSlidingWindow = function (nums, k) {
   }
   return res;
 };
+
+/**
+ * @param {TreeNode} root
+ * @return {boolean}
+ */
+var isBalanced = function (root) {
+  if (root == null) return true;
+  let left = maxDepth(root.left);
+  let right = maxDepth(root.right);
+  return Math.abs(left - right) <= 1 && isBalanced(root.left) && isBalanced(root.right);
+};
+function maxDepth(root) {
+  if (root == null) return 0;
+  let left = maxDepth(root.left);
+  let right = maxDepth(root.right);
+  return Math.max(left, right) + 1;
+}