Node.js与前端开发实战

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

课程重点

Node.js的应用场景。
Node.js运行时的结构。
编写HttpServer.

详细知识点

Node.js的应用场景

前端工程化

打包工具：webpack、vite、esbuild、parcel；代码压缩：uglifyjs；语言转换：bablejs，typescript.现状：难以替代。

web服务端应用

学习曲线平缓，开发效率高。
运行效率接近常见的编译语言。
社区生态丰富及工具链成熟
与前端结合(SSR)的场景会很有优势。
现状：竞争激烈，Node.js有自己独特的优势。

应用场景

SSR应用、BFF应用。
服务端应用。
Electron跨端桌面应用。

Node.js运行时的结构

异步IO：当Node.js执行IO操作时，会在响应返回后恢复操作，而不是阻塞线程并占用额外内存等待，效率高。

由于js是单线程的，所以不用考虑多线程的状态同步问题，也不需要锁；同时还能比较高效地利用系统资源；但单线程的阻塞会产生更多负面影响，比如降低代码的执行效率等。可以通过异步的方式来解决。

Node.js的大部分功能和api都可以跨平台，开发成本和整体学习成本低。

编写Http Server

1.安装node.js：Mac,Linux推荐使用nvm，可以实现node.js的多版本管理，针对项目切换版本，Windows系统可以使用nvm4w.安装nvm完成后，可以用nvm install 16.18.1(版本号)来安装对应版本的nodejs.

2.编写案例：

返回文本内容

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 http = require('http')
const port = 3000
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){
            console.log(err);
        }
        res.setHeader('Content-Type','application/json')
        res.end(JSON.stringify({
            echo: reqData.msg || 'hello'
        }))
    })
})

server.listen(port,() => {
    console.log(`server listens on: ${port}`)
})

用Promise和es6的语法糖(async和await)来改写上述的例子.

const http = require('http')
const port = 3000
const server = http.createServer(async (req,res) => {
    await new Promise((resolve,reject)=>{
        const bufs = []
        req.on('data',data=>{
            bufs.push(data)
        })
        req.on('error',(err) => {
            reject(err)
        })
        req.on('end',()=>{
            let msg = 'hello'
            try{
                reqData = JSON.parse(Buffer.concat(bufs).toString())
            }catch(err){
            
            }
            msg = reqData.msg
            resolve(msg)
            
        })
    })
   
})

server.listen(port,() => {
    console.log(`server listens on: ${port}`)
})

总结

以上只是对node.js功能的浅显的总结，nodejs在构建轻量级、高性能的 Web 服务，前后端 JavaScript 同构开发和实现便捷高效的前端工程化方面都有很不错的体验。在此附上学习链接：nodejs.org/en/docs/

Node.js与前端开发实战 | 青训营笔记