202307

INFO

8 月了，希望自己能重拾信心

20230713

0801

783
网站中的字体图标怎么搞出来的?
正则表达式之继续加练

(?<=p) // 符合p子模式后面(注意(?=p)表示的是前面)的那个位置
(?=p) // 符合p子模式前面的那个位置

let str = 'xxx_love'
str.replace(/(?=xxx)/g, 'cpp') // cppxxx_love
str.replace(/(?<=xxx)/g, 'cpp') // xxxcpp_love

0802

784 - 311
高效完成开发任务
继续默写

0803

当 getServerSideProps 所在页面为 SSR 服务端渲染时，getServerSideProps 中的数据将会被放到全局的 _NEXT_DATA 中，用于 hydrate。而非 SSR 情况下，进入该页面 next.js 将会自动发请求到： \_next/data/development/{url}.json?{query}，其中 development 为开发环境下地址段，该请求的返回值为：

作者：嘿嘿不务正业

0804

推荐一个站长工具

阔以采集以下信息：

ip、SSL 信息
DNS 解析、域名信息
cookies
网页快照
服务器信息
页面质量信息（性能、可访问性、最佳实践、SEO...）
开放端口

0805/0806

RegExp.$1: 在 JavaScript 中，RegExp.$1 是一个全局的正则表达式属性，它表示正则表达式中第一个捕获组（括号中的内容）匹配的结果。

当你使用正则表达式进行匹配时，如果在正则表达式中使用了括号来创建捕获组，那么匹配成功后，捕获组中的内容会被存储在 RegExp.$1 中，而第二个捕获组会存储在 RegExp.$2 中，以此类推。

const text = "Hello world, my name is John.";

// 使用正则表达式匹配名字
const regex = /name is (\w+)/;
const match = regex.exec(text);

if (match) {
  console.log("整个匹配结果:", match[0]); // "name is John"
  console.log("捕获组 1:", match[1]); // "John"
  console.log("RegExp.$1:", RegExp.$1); // "John"
}

在上述代码中，正则表达式 /name is (\w+)/ 使用括号创建了一个捕获组，匹配成功后，捕获组中的内容（"John"）会被存储在 match[1] 和 RegExp.$1 中。

需要注意的是，RegExp.$1 是一个全局属性，它会在整个 JavaScript 环境中共享，可能会受到其他正则表达式的影响。为了避免混淆和不确定性，最好在匹配之后立即提取捕获组的值并存储在变量中，而不是依赖于全局属性。

0807

又要接受命运的安排，我其实不太喜欢未知的彷徨和迷茫
手写二叉树前中后序迭代遍历

// 前序 根左右
// 进栈 右左
// 出栈 左右
function preOrder(root, res = []) {
  if (!root) return res;
  var queue = [root];
  while (queue.length) {
    var cur = queue.pop();
    res.push(cur.val);
    if (cur.right) queue.push(cur.right);
    if (cur.left) queue.push(cur.left);
  }
  return res;
}

// 后序遍历 左右中
function postOrder(root, res = []) {
  if (!root) return res;
  var queue = [root];
  while (queue.length) {
    var cur = queue.pop();
    res.push(cur.val);
    if (cur.left) queue.push(cur.left);
    if (cur.right) queue.push(cur.right);
  }
  return res.reverse();
}

// 中序 左根右
function inOrder(root, res = []) {
  if (!root) return res;
  var stack = [];
  var cur = root;
  while (stack.length && cur) {
    // 左
    if (cur) {
      stack.push(cur);
      cur = cur.left; //  左
    } else {
      cur = stack.pop(); // 根
      res.push(cur.val);
      cur = cur.right; // 右
    }
  }
}

// 层序
function levelOrder(root, res = []) {
  if (!root) return res;
  var queue = [root];
  while (queue.length) {
    var len = queue.length;
    var arr = [];
    for (let item of queue) {
      var cur = queue.shift();
      arr.push(cur.val);
      if (cur.left) {
        queue.push(cur.left);
      }
      if (cur.right) {
        queue.push(cur.right);
      }
    }
    res.push(arr);
  }
  return res;
}

手写 jsonp 原理

function jsonpCallback(url, cb) {
  var script = document.createElement("script");
  script.async = true;
  script.href = url + "?cb=" + cb;
  var fnname = cb;
  window[fnname] = function (...rest) {
    cb(rest);
    delete window[fnname];
    document.body.removeChild(script);
  };
  document.body.appendChild(script);
}

手写前端 history 和 hash 路由

手写 async/await

function asyncToGenerator(G) {
  return function () {
    const gen = G.apply(this, arguments);
    return new Promise((resolve, reject) => {
      function step(key, ...val) {
        var res = gen[key](val);
        const { done, value } = res;
        try {
          if (done) {
            resolve(value);
          } else {
            return Promise.resolve(value).then(
              (val) => {
                step("next", val);
              },
              (err) => {
                step("throw", err);
              }
            );
          }
        } catch (e) {
          reject(e);
        }
      }
      step("next");
    });
  };
}

0808

一个人能忍受几十年不快乐的人生，却不愿意花一年时间去改变自己。
加油点滴改变自我，本月听到过的最励志的话，与君共勉
手写 js

// 删除链表一个节点

// 选择排序和插入排序

// 反转链表

// 链表是否有环？

// 手写数字的千分位分割法

0809

2010 年，也就是 13 年前，我们那里有个针对农民的铁路保险，当时只要一次性缴满 3 万块，就能在 55 岁的时候领到一个月 1000 块，当时我们家这个钱出不起，现在没有这个福利
我妈今晚跟我说，生我那一年，计划生育罚了 1200，而我老爸一年总共才挣了 1500
最近几天忙于业务，都没时间记录琐事，只能在晚上下班，记录一下
天道不酬勤，但是我们依然要用 5% 的努力去撬动，同时接受命运一切的安排

0810

昨晚再次梦到自己被裁员，差点从梦中惊醒

0811

793
天下大势分久必合，合久必分，sem 又划出去了，不是一个很好的兆头
如果能连续呆满 6 年，走的时候领取一笔补偿金就太好不过了，但现实就是谁知道三年之后，公司发展的咋样

0812/0813

794
position position: fixed：固定定位，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。 absolute：绝对定位，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 html，经常和相对定位结合使用。 static：默认值，及没有定位，静态定位的元素不会受到 top, bottom, left, right 影响 relative：相对定位，相对定位元素的定位是相对其正常位置，一般和绝对定位一起使用。
position: sticky 粘性定位

sticky 生效有 3 个前提，

一个是 position:sticky 对象的父元素的尺寸必须比它大很多。
对象的父元素如果设置非 overflow: visible 会导致粘性生效，
设置粘性定位的必须设置 left/right/top/bottom 中的一个值

0814

https 不安全或者不可信，原因是因为网站的名称和证书上的名称不一致，这就涉及 https 证书是如何校验的了。再次回顾下知识点：

0815

前端 wasm 是什么？ WebAssembly（简称为 Wasm）是一种用于在现代 Web 浏览器中执行高性能代码的二进制指令格式。它是一种可移植、低级别的虚拟机，旨在在 Web 平台上提供一种通用的编译目标，以便在浏览器中运行更快的代码。
在前端开发中，动态链接库（Dynamic Linking Library，DLL）是一种用于优化应用性能的技术。它是一种将通常在多个页面或应用程序中共享的代码打包到单独的文件中，以便在需要时动态加载，从而减少重复下载和提高加载速度的方法。
浏览器中的渲染进程和主进程？

在现代的 Web 浏览器中，渲染进程和主进程是浏览器架构中的两个重要组成部分。它们共同协作以实现网页的显示和功能。以下是它们的概述：

主进程（Main Process）：

主进程是浏览器的核心部分，负责管理浏览器窗口、用户界面、网络请求、插件管理等。
它负责创建和管理多个渲染进程，每个渲染进程对应一个标签页或浏览器窗口。
主进程通过进程间通信（IPC）机制与渲染进程通信，以处理用户输入、网络请求、插件操作等。

渲染进程（Render Process）：

渲染进程是用于显示网页内容的关键部分。每个标签页或浏览器窗口通常都会有一个独立的渲染进程。

渲染进程负责解析 HTML、CSS 和 JavaScript，构建 DOM 树、CSSOM 树和渲染树，最终将网页呈现在用户界面上。
为了提高安全性和稳定性，渲染进程通常会被放置在一个沙箱中，限制其对操作系统的直接访问。

交互过程中的基本流程如下：

用户在浏览器中输入一个 URL 或点击一个链接。
主进程接收到用户的操作，负责发起网络请求、创建新的渲染进程，并加载网页内容。
渲染进程负责解析网页内容、渲染页面，将最终的显示结果发送回主进程。
主进程将渲染结果显示在浏览器窗口中，用户可以与页面交互。

0816

Next.js 支持实验性的 Server Actions，使你能够在服务器上对数据进行变异，直接调用函数而无需创建中间 API 层?
react 函数式组件中侦听器无法拿到实时更新的变量

const [count, setCount] = useState(0);

useEffect(() => {
  // 添加事件监听
  document.addEventListener("click", handleClick, true);
  return () => {
    // 移除事件监听
    document.removeEventListener("click", handleClick, true);
  };
}, []);

const handleClick = () => {
  // 执行一些读取state的操作
  console.log(count);
  setCount(count + 1);
};
return <h1>{count}</h1>;

如何解决呢？通过 ref 来保存可变变量,声明一个 useRef，每次 state 更新，都把新值赋给这个 ref，在执行的方法中使用这个 ref 代替 state

const [count, setCount] = useState(0);
const countRef = useRef(0);
useEffect(() => {
  // 添加事件监听
  document.addEventListener("click", handleClick, true);
  return () => {
    // 移除事件监听
    document.removeEventListener("click", handleClick, true);
  };
}, []);

const handleClick = () => {
  // 执行一些读取state的操作
  console.log(countRef.current);
  setCount((count) => count + 1);
};
useEffect(() => {
  countRef.current = count;
}, [count]);
return <h1>{count}</h1>;

0817

React 之触底加载
因梦想而伟大，又因坚持梦想而成长。雷军
手写 bind 还是有些不理解??

0818

吃相太难看，内心不是滋味，心疼十秒钟
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

css

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

css

flex: auto; // 1 1 auto
flex: none; // 0 0 auto
flex: 1; // 1 1 0
flex: 0 // 0 1 0;;

0819/0820

第三次去苏州，虎丘婚纱城
图片资源后续都会存在smms 图床，唯一不好的就是 5G 的资源限制

0821

这是你陪伴 xx 的第 803 天
继续操练手写 ts 和 js

type TP1 = Unique<[1, 2, 3, 1]>;
type Equal<A, B = A> = (<T>() => T extends A ? 1 : 2) extends <
  T
>() => T extends B ? 1 : 2
  ? true
  : false;

type TP3 = Equal<"false", "false">;
type Include<T, O> = T extends [infer F, ...infer R]
  ? Equal<O, F> extends true
    ? true
    : Include<R, O>
  : false;
type TP2 = Include<[1, 2, 3], 2>;
type Unique<T, U extends unknown[] = []> = T extends [infer F, ...infer R]
  ? Include<U, F> extends true
    ? Unique<R, U>
    : Unique<R, [F, ...U]>
  : U;

0822

这是你陪伴 xx 的第 804 天,今天还是七夕节，愿我爱的人健康快乐！
新项目上线，nginx 配置搞了半天，最后发现还是底子不行,路径带斜杠和不带斜杠差距太大

  location / {
    proxy_pass http://southgate/mobile; // error
  }
  location / {
    proxy_pass http://southgate/mobile/; // correct
  }

0823

805 天，有望超越第一段职业，明年 2/3 月份是一个关键点，所以在最近这五个月的时间，夯实基础，使劲打磨，主要就是 1.手写 js 2.network 3.react 4.ssr 和 nodejs
对象跟我提的要求也没几个，满足她就好
到底什么时候才能把商贷提前还完？早晚有一天会被这玩意给逼疯！！！
async 和 defer 的用法和区别一句话概括： 1.async 是异步加载，加载完会立即执行，执行的时候会阻塞 html 文档解析。 2. defer 也是异步加载脚本，等 Html 文档解析完成之后再去执行脚本
CRP: critical Render Path 指与当前用户操作有关的内容。例如用户刚刚打开一个页面，首屏的显示就是当前用户操作相关的内容，具体就是从浏览器收到 HTML、CSS 和 JavaScript 等资源并对其进行处理从而渲染出 Web 页面。

另一种大白话：关键渲染路径(Critical Rendering Path)是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径(CRP)可提高渲染性能。

0824

nextjs 中的配置 reactStrictMode?

const nextConfig = {
  experimental: {
    appDir: true,
  },
  reactStrictMode: false,
};
module.exports = nextConfig;

tsconfig.json 中的 无法解析TS2802类型的Map<>只能在使用“--降级iterated”标志或使用“es2015”或更高的“--目标”时进行迭代

0825/0826/0827

周末+周五做不完的需求和搞不完的婚礼准备
周五还遇到一个问题，项目依赖一个外部库，通过 npm 安装和 cdn 方式引入两种效果还不一样导致出现不可控的 bug，本地测试了好久也没能复现，发到线上就能复现

0828

810 天，时间飞逝，结婚的时候估计是 850 天
下载这块还是没搞懂，今天争取提前搞好
基于 Promise.resolve 实现 Koa 请求队列中间件

0829

811,后面只会越来越难，前面就要积攒基础，看到身边几乎所有的人都已经结婚生子，我好像晚了好几年，但是又不能很着急，着急更容易错了步伐
最近一个月要减少娱乐，保持足够的休息，同时还是得多锻炼身体，为后面打基础
9 月底之前还有 3 天，这两天把主要的亲朋好友请柬发出去，确定好宾馆数量

0830

812
伴郎和伴娘的行程已经确定
一个网页可能可以通过多个网址访问，这种情况下谷歌如何确定哪个网址可以作为首选网址？如何分析并解决多个网址的带来的重复内容问题？

这时候就需要用到 canonical 标签了，谷歌、微软和雅虎于 2009 年联合创建了 canonical 的标签，它的诞生就是为站长们解决重复内容的问题

<link rel="canonical" href="https://example.com/product-a/" />

**rel="canonical"**即表明此标签中的链接就是网页的首选版本，也就是 href="https://example.com/product-a/"。

nextjs 中的跨域调试

  // 跨域调试 next.config.js
  async rewrites() {
    return [
      {
        source: "/app/download/latest",
        destination: `http://m.xx.com/app/download/latest`,
      },
    ];
  },

nextjs 中的 Link 组件好像具有缓存性，如何去掉缓存？看看源码吧
nextjs 中的 Head 组件避坑：为了避免在 head 中出现重复的 HTML 标签，你可以设置 key 属性，该属性将确保添加的标签仅渲染一次，如以下示例所示：

import Head from "next/head";
function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  );
}
export default IndexPage;

在这种情况下，仅渲染第二个 <meta property="og:title" />。具有相同 key 属性的 meta 标签将会被自动处理。

202307 ​

0801 ​

0802 ​

0803 ​

0804 ​

0805/0806 ​

0807 ​

0808 ​

0809 ​

0810 ​

0811 ​

0812/0813 ​

0814 ​

0815 ​

0816 ​

0817 ​

0818 ​

0819/0820 ​

0821 ​

0822 ​

0823 ​

0824 ​

0825/0826/0827 ​

0828 ​

0829 ​

0830 ​