feat: 0324

docs/css/index.md

@@ -30,6 +30,8 @@ nav:
 - 14.伪元素和伪类的区别
 - 15.position
 - 16.css 怎么开启硬件加速(GPU 加速)
+- 17.css 渲染合成层是什么
+- 18.px/rem/em 区别
 
 ## 盒模型
 
@@ -352,6 +354,16 @@ white-space: nowrap;
 - 当前有对于 opacity、transform、fliter、backdrop-filter 应用动画
 - overflow 不为 visible
 
+## 18.px/rem/em 区别
+
+- px（像素）：px 是绝对单位，表示屏幕上的一个物理像素点。它是最常用的单位，具有固定的大小，不会根据其他因素而改变。例如，font-size: 16px; 表示字体大小为 16 像素。
+
+- rem（**根元素**字体大小的倍数）：rem 是相对单位，相对于根元素（即 元素）的字体大小。如果根元素的字体大小为 16 像素，那么 1rem 就等于 16 像素。如果根元素的字体大小为 20 像素，那么 1rem 就等于 20 像素。通过设置根元素的字体大小，可以方便地调整整个页面的大小。例如，font-size: 1.5rem; 表示字体大小为根元素字体大小的 1.5 倍。
+
+- em（相对于**父元素**字体大小的倍数）：em 也是相对单位，相对于父元素的字体大小。如果父元素的字体大小为 16 像素，那么 1em 就等于 16 像素。如果父元素的字体大小为 20 像素，那么 1em 就等于 20 像素。通过设置父元素的字体大小，可以影响其子元素的大小。例如，font-size: 1.2em; 表示字体大小为父元素字体大小的 1.2 倍。
+
+总结来说，px 是绝对单位，不会随其他因素改变；rem 是相对于根元素字体大小的倍数，可以方便地调整整个页面的大小；em 是相对于父元素字体大小的倍数，可以影响子元素的大小。在实际使用中，可以根据需求选择合适的单位。对于响应式设计，使用 rem 可以方便地调整整个页面的大小；对于局部样式，可以使用 px 或 em 来控制具体的大小。
+
 ## 参考
 
 - [面试题汇总](https://juejin.cn/post/6844903885488783374#heading-58)

docs/interview/experiences/13202307handwriting.md

@@ -1222,22 +1222,36 @@ function mockAjax(url, cb) {
 
 ```js
 // 如何调用？
-function mockJsonp(url, cb) {
-  var funName = '?cb=' + Math.random().toString().slice(2);
-  var script = document.createElement('script');
-  script.src = url + funName;
-  script.async = true;
-  document.body.appendChild(script);
-  window[funName] = function (data) {
-    cb(data);
-    delete window[funName];
-    document.body.removeChild(script);
-  };
+function mockJsonp(url) {
+  return new Promise((resolve, reject) => {
+    var funName = Math.random().toString().slice(2); // 怕全局污染
+    var script = document.createElement('script');
+    script.src = url + '?cb=' + funName;
+    script.async = true;
+    document.body.appendChild(script);
+    window[funName] = function (data) {
+      resoolve(data);
+      delete window[funName];
+      document.body.removeChild(script);
+    };
+  });
 }
-mockJsonp('http://xx', (res) => {
+mockJsonp('http://xx').then((res) => {
   console.log(res);
 });
 
+// 后端大概代码
+const Koa = require('koa');
+const app = new Koa();
+const main = (ctx) => {
+  const cb = ctx.query.cb;
+  const data = JSON.stringify({ val: 'cpp', age: 'xx' });
+  const str = `${cb}(${data})`;
+  ctx.body = str;
+};
+app.use(main);
+app.listen(3000, () => {});
+
 // 动态加入脚本 并执行回调函数
 function loadScript(url, callback) {
   const node = document.createElement('script');

docs/interview/experiences/16easyHandwriting.md

@@ -487,17 +487,19 @@ function mockAjax(url, option) {
 ### 17.jsonp
 
 ```js
-function mockJsonp(url, cb) {
-  let fnName = 'jsonp' + new Date().getTime();
-  let script = document.createElement('script');
-  script.src = url + '?callback=' + fnName;
-  script.defer = true;
-  document.body.appendChild(script);
-  window[fnName] = function (val) {
-    cb(val);
-    document.body.removeChild(script);
-    delete window[fnName];
-  };
+function mockJsonp(url) {
+  return new Promise((resolve, reject) => {
+    let fnName = 'jsonp' + new Date().getTime();
+    let script = document.createElement('script');
+    script.src = url + '?cb=' + fnName;
+    script.defer = true;
+    document.body.appendChild(script);
+    window[fnName] = function (val) {
+      resolve(val);
+      document.body.removeChild(script);
+      delete window[fnName];
+    };
+  });
 }
 ```
 
@@ -558,13 +560,74 @@ bigNumAdd('22', '100');
 ### 21.数组/对象扁平化
 
 ```js
-
+// 为啥面试一变化就做不出来呢
+function flatten(arr, depth) {
+  let stack = [...arr];
+  let start = 1;
+  let ans = [];
+  while (stack.length) {
+    let cur = stack.pop();
+    if (Array.isArray(cur) && start < depth) {
+      stack.push(...cur);
+      start++;
+    } else {
+      ans.push(cur);
+    }
+  }
+  return ans.reverse();
+}
+function flattenObj(obj, res = {}, path = '', isArray = false) {
+  for (let [key, val] of Object.entries(obj)) {
+    if (Array.isArray(val)) {
+      let tmp = isArray ? `${path}[${key}]` : `${path}${key}`;
+      flattenObj(val, res, tmp, true);
+    } else if (typeof val == 'object') {
+      let tmp = isArray ? `${path}[${key}].` : `${path}${key}.`;
+      flattenObj(val, res, tmp, false);
+    } else {
+      let tmp = isArray ? `${path}[${key}]` : `${path}${key}`;
+      res[tmp] = val;
+    }
+  }
+  return res;
+}
+flattenObj({
+  test: {
+    name: [1, 2, 3],
+    age: 'cpp',
+  },
+});
 ```
 
 ### 22.lodash.get/set
 
 ```js
-
+function lodashGet(obj, path, defaultVal = 'undefiend') {
+  let paths = path.replace((/\[(\d+)\]/g, '.$1')).split('.');
+  let res = obj;
+  for (let p of paths) {
+    res = res[p];
+    if (!res) {
+      return defaultVal;
+    }
+  }
+  return res;
+}
+var test = {
+  obj: {
+    cpp: {
+      name: 'cdp',
+    },
+  },
+  other: [
+    {
+      name: 'wmh',
+    },
+  ],
+};
+lodashGet(test, 'obj.cpp.name');
+lodashGet(test, 'other[0].name');
+function lodashSet(obj, path, val) {}
 ```
 
 ### 23.红绿灯问题

docs/interview/experiences/17hotHandwriting.md

@@ -50,6 +50,14 @@ function mockSetInterval(fn, delay) {
 
 ### 12.实现 Object.create
 
+```js
+function mockCreate(target) {
+  function F() {}
+  F.prototype = target;
+  return new F();
+}
+```
+
 ### 13.实现 Object.assign
 
 ```js
@@ -136,4 +144,53 @@ person.show(10, 20);
 
 ### 19.请求超时重试机制
 
+```js
+function failed(timer) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      reject(console.log('failed::' + timer));
+    }, timer);
+  });
+}
+function commonAjax(timer) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve(console.log('success::' + timer));
+    }, timer);
+  });
+}
+function retryQuest(fn, num = 1) {
+  let count = 1;
+  async function request() {
+    let p;
+    try {
+      p = await Promise.race([fn(2000), failed(1000)]);
+      return p;
+    } catch (e) {
+      if (count <= num) {
+        count++;
+        request();
+      } else {
+        console.log('retry finish');
+      }
+    }
+  }
+  return request();
+}
+retryQuest(commonAjax, 3);
+```
+
 ### 20.封装方法取消请求
+
+```js
+/**
+ * p: promise
+ */
+function cancelPromise(p) {
+  let abort;
+  let p1 = new Promise((resolve, reject) => (abort = reject));
+  let p2 = Promise.race([p1, p]);
+  p2.abort = abort;
+  return p2;
+}
+```

docs/interview/experiences/18middleHandwriting.md

@@ -38,6 +38,42 @@ multiple('22', '22');
 
 ## 2.数字转汉字
 
+```js
+// 后续补上
+function trans(str) {
+  let isLof = +str < 0;
+  let res = [];
+  if (isLof) {
+    res.push('负');
+  }
+  return res.reverse().join('');
+}
+
+function parseHan(str) {
+  str = '' + str;
+  let units = ['', '十', '百', '千'];
+  let nums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
+  let res = '';
+  let len = str.length;
+  for (let i = 0; i < len; i++) {
+    let cur = str[i];
+    if (cur != '0') {
+      // 102
+      if (i >= 1 && str[i - 1] == '0') {
+        res += nums[0];
+      }
+      // key
+      res += nums[cur] + units[len - i - 1];
+    }
+  }
+  if (str.length == 2 && str[0] == 1) {
+    res = res.slice(1);
+  }
+  return res;
+}
+parseHan('103');
+```
+
 ## 3.归并排序/堆排序
 
 ## 4.数组转树

docs/interview/experiences/21leetcodeA.md

@@ -243,11 +243,13 @@ var threeSum = function (nums) {
     len = nums.length;
   for (let i = 0; i < len; i++) {
     var cur = nums[i];
-    var r = len - 1;
-    var l = i + 1;
-    if (cur > 0) return res;
+    //  从小到大按序排队
+    if (cur > 0) return break;
     // cur i-1正确去重
     if (i > 0 && cur === nums[i - 1]) continue;
+
+    var r = len - 1;
+    var l = i + 1;
     while (l < r) {
       var sum = cur + nums[l] + nums[r];
       if (sum === 0) {
@@ -1126,6 +1128,8 @@ function generate(n) {
 }
 ```
 
+## 48.两数相加
+
 ## [50.比较版本号](https://leetcode.cn/problems/compare-version-numbers/description/)
 
 ```js