Node.js与前端开发｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 14 天这篇笔记记录了Nod

这是我参与「第五届青训营」伴学笔记创作活动的第 14 天

这篇笔记记录了Node.js与前端开发相关的一些知识

一、本堂课重点内容

Node.js的应用场景
Node.js运行时结构
编写Http Server

二、详细知识点介绍

1、Node.js应用场景

前端工程化
- Bundle: webpack, vite, esbuild, parcel
- Uglify: uglifyjs
- Transpile: babeljs, typescript
- 现状：难以替代
Web服务端应用
- 学习曲线平缓，开发效率较高
- 运行效率接近常见的编译语言
- 社区生态丰富及工具链成熟(npm, V8 inspector)
- 与前端结合的场景会有优势（SSR）
- 现状：竞争激烈，Node.js有自己独特的优势
Electron跨端桌面应用
- 商业应用：vscode, slack, discord, zoom
- 大型公司内的效率工具
- 现状：大部分场景在选型时，都值得考虑

2、Node.js运行时结构

V8：JavaScript Runtime，、诊断调试工具（inspector）
libuv：eventloop（事件循环），syscall（系统调用）
举例：用 node-fetch 发起请求时...
特点：
- 异步IO：当Node.js执行IO操作时，会在响应返回后恢复操作，而不是阻塞线程并占用额外内存等待
- 单线程
  - JS单线程实际上是JS线程+uv线程池+V8任务线程池+V8 Inspector线程
  - 优点：不用考虑多线程状态同步问题，也就不需要锁；同时还能比较高效地利用系统资源
  - 缺点：阻塞会产生更多负面影响
    - 解决办法：多进程或多线程
- 跨平台：Node.js跨平台+JS无需编译环境+Web跨平台+诊断工具跨平台=开发成本低

三、实践练习例子

1、Http Server

Hello World

const http = require('http')
const port = 3000
const server = http.createServer((req, res) => {
    res.end('hello')
})
server.listen(port, () => {
    console.log(`server listens on: ${port}`)
})

JSON

const server = http.createServer((req, res) => {
    const bufs = []
    req.on('data', data => {
        bufs.push(data)
    })
    req.on('end', () => {
        let reqData = {}
        try {
            reqData = JSON.parse(Buffer.concat(bufs).toString())
        } catch(err) {
            // receive invalid json data
        }
        res.setHeader('Content-Type', 'application/json')
        res.end(JSON.stringify({
            echo: reqData.msg || 'Hello',
        }))
    })
})

2、Http Client

const http = require('http')
const body = JSON.stringify({ msg: 'hello from my client'})
const req = http.request('http://127.0.0.1:3000', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Content-Length': body.length,
    },
}, (res) => {
    const bufs = []
    res.on('data', data => {
        bufs.push(data)
    })
    res.on('end', () => {
        const receice = JSON.parse(Buffer.concat(bufs).toString())
        console.log('receive:', receive)
    })
})
req.end(body)

3、静态文件

const server = http.createServer((req, res) => {
    const info = url.parse(req.url)
    const file = fs.createReadStream(path.resolve(__dirname, '.' + info.pathname))
    file.pipe(res)
})

4、React SSR

SSR特点
- 相比传统HTML模板引擎：避免重复编写代码
- 相比SPA：首屏渲染更快，SEO友好
- 缺点：通常qps（每秒查询率）较低，前端代码编写时需要考虑服务端渲染情况
- 样例略

5、Debug

V8 Inspector：开箱即用，特性丰富强大，与前端开发一致，跨平台
- 命令：node执行时加上 --inspect 命令
- open http://localhost:9229/json
场景
- 查看console.log内容
- breakpoint（打断点）
- 高CPU、死循环：cpuprofile
- 高内存占用：heapsnapshot
- 性能分析

6、部署

部署要解决的问题
- 守护进程：当进程退出时，重新拉起
- 多进程：cluster便捷地利用多进程
- 记录进程状态，用于诊断
容器环境
- 通常有健康检查的手段，只需考虑多核cpu利用率即可

四、课后个人总结

受控组件有一点像Vue中的双向数据绑定v-model

Node.js与前端开发 ｜ 青训营笔记

一、本堂课重点内容

二、详细知识点介绍

1、Node.js应用场景

2、Node.js运行时结构

三、实践练习例子

1、Http Server

2、Http Client

3、静态文件

4、React SSR

5、Debug

6、部署

四、课后个人总结

五、引用参考

Node.js与前端开发｜青训营笔记