楠楠资料，进度

JavaScript

  变量：名字（identifier） + 值（类型）
  基础类型：栈里分配。（栈==函数调用栈）
  引用类型：堆里分配。
 作业：
  1. 闭包与作用域：https://lucifer.ren/fe-interview/#/topics/js/scope&closures
  2. 引用和操作符优先级
  3. this
  4. 
  const a = new A()
  function myNew(A, ...args) {
   
  }
  const a = myNew(A)
  5. 实现 instanceof
  6. fe-intervbiew https://lucifer.ren/fe-interview/#/?id=css-%f0%9f%a6%8b , leetcode https://leetcode.cn/problemset/javascript/?status=NOT_STARTED&page=1 , bigfrontend https://bigfrontend.dev/problem 全部题目

TypeScript
正则表达式

1. 字面量 和 regex 区别
2. 量词。 ? + * {m,n}
3. 匹配模式 igm
4. 匹配字符。  abc -> 全量匹配, [abc] -> 单个匹配, /d/D, /s/S,/w/W,  . 任意字符 
5. exec, match, matchAll, test
6. 前向（不）匹配，后向（不）匹配，贪婪（非贪婪）

作业：

1. https://lucifer.ren/fe-interview/#/topics/algorthimn/regularExpressions
2. JavaScript 后面的单词全部放到一个数组。
3. JavaScript 和最近的一个 ES6 中间的字符放到一个数组。

编程题

递归三要素：状态定义，边界条件，递推公式

作业：

实现 compose
获取页面所有的 tagname
https://lucifer.ren/blog/2020/12/21/shuati-silu3/

算法题(数组模拟栈) https://gist.github.com/azl397985856/92d2a0749e34c43b5ee4c27caa676cd1

作业：

使用递推公式和递归树来计算 merge sort 的时间复杂度。

复杂度：

-----P2

DOM 操作与浏览器 API https://phuoc.ng/collection/html-dom/
监控
测试
性能优化（Bundle Splitting and tree shaking，Compressing， Optimize your loading sequence， prefetch and preload， List Virtualization， etc）
编程范式
项目经验
ssr（JSX 转换为 HTML 字符串） and rsc

case 1:

function BlogPostPage({ postContent, author }) {
  return (
    <html>
      <head>
        <title>My blog</title>
      </head>
      <body>
        <nav>
          <a href="/">Home</a>
          <hr />
        </nav>
        <article>
          {postContent}
        </article>
        <Footer author={author} />
      </body>
    </html>
  );
}

function Footer({ author }) {
  return (
    <footer>
      <hr />
      <p>
        <i>
          (c) {author} {new Date().getFullYear()}
        </i>
      </p>
    </footer>
  );
}

function sendHTML(res, jsx) {
  html = renderJSXToHTML(jsx)
  res.setHeader("Content-Type", "text/html");
  res.end(html);
}

createServer(async (req, res) => {
  const author = "Jae Doe";
  const postContent = await readFile("./posts/hello-world.txt", "utf8");
  sendHTML(
    res,
    <BlogPostPage
      postContent={postContent}
      author={author}
    />
  );
}).listen(8080);

case 2:

async function sendJSX(res, jsx) {
  const clientJSX = await renderJSXToClientJSX(jsx);
  const clientJSXString = JSON.stringify(clientJSX);
  res.setHeader("Content-Type", "application/json");
  res.end(clientJSXString);
}

async function fetchClientJSX(pathname) {
  const response = await fetch(pathname + "?jsx");
  const clientJSXString = await response.text();
  const clientJSX = JSON.parse(clientJSXString);
  return clientJSX;
}
hydrateRoot(document, fetchClientJSX('path/to/a'));

azl397985856/楠楠.md