- 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/
作业：
- 使用递推公式和递归树来计算 merge sort 的时间复杂度。
复杂度：
- 框架 https://gist.github.com/azl397985856/d9225e542af23d2bf192f71ee51d4854
- 编译/转义
- 设计题
- 设计模式 《JavaScript设计模式与开发实践》
- 网络
- 模块化
- 操作系统
- shell
- 状态管理
- 包管理
- 浏览器
-----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'));- 新技术
- 微前端
- CSS
- 其他语言（optional）
- 可访问性（optional）
- 小程序(optional)
- 原生通信（optional）
- node（optional）
- 安全(optional)
- v8（optional）
- mono 仓库（optional）
- web assembly（optional）
- web rtc （optional）
- 标准化（optional）