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

叽歪怒的快乐
42 阅读2分钟

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

Node.js的应用场景

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

Node.js运行时结构

image.png

特点

  • 异步I/O
    • 当Node.js执行I/O操作时，会在响应返回后恢复操作，而不是阻塞线程并占用额外内存等待

image.png

  • 单线程
    • JS单线程
    • 优点：不用考虑多线程状态同步问题，也就不需要锁；同时还能比较高效的利用系统资源
    • 缺点：阻塞会产生更多负面影响，那么我们就要使用多进程或多线程
  • 跨平台
    • Node.js跨平台+JS无需编译环境 = 开发成本低，整体学习成本低

编写Http Server

安装Node.js

推荐官方安装包

编写Http Server + Client，收发Get，Post请求

Http Server

hello world

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

JSON {"echo'":"Hello"}

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){
          }
          res.setHead('Content-type','application/json')
          res.end(JSON.stringify({
              echo:reqData.msg || 'Hello',
          }))
    }
})

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",
    header:{
    'Content-type':'application/json',
    'Content-Length':body.length,
    },
},(res)=>{
    const bufs = []
    res.on('data',data =>{
        bufs.push(data)
    })
    res.on('end',()=>{
        const receive = JSON.parse(Buffer.concat(bufs(.toString())
        console.log('receive:',receive
        
    })
})
req.end(body)

编写静态文件服务器

const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');

const port = 3000
const server = http.createServer((req,res)=>{
    const info = url.parse(req.url)
    const file = fs.createReadStream(path.resolve(_dirname,'.'+info.pathname))
    file.pipe(res)
})
server.listen(port,()=>{
    console.log('server listens on:${port}')
})

适用inspector进行调式，诊断

Debug

  • 查看console.log内容
  • breakpoint
  • 高CPU、死循环：cpuprofile
  • 高内存占用：heapsnapshot
  • 性能分析

部署简介

部署要解决的问题

  • 守护进程：当进程退出时，查询拉起
  • 多进程：cluster便捷的利用多进程
  • 记录进程状态，用于诊断

容器环境

  • 通常有健康检查的手段，只需要考虑多核cpu利用率即可

延伸话题

Node.js贡献代码

好处

  • 从使用者的角色逐步理解底层细节，可以解决更复杂的问题
  • 自我证明，有助于职业发展
  • 解决社区问题，促进社区发展

难点

  • 花时间

诊断/追踪

  • 诊断是一个低频，重要同时也相当有挑战的方向。是企业衡量自己能否依赖一门语言的重要参考

难点

  • 需要了解Node.js底层，需要了解操作系统以及各种工具
  • 需要经验

WASM,NAPI

  • Node.js是执行WASM代码的天然容器，和浏览器WASM是同一运行时，同时Node.js支持WASI
  • NAPI执行C接口的代码，同时能保留原生代码的性能
  • 不同编程语言间通信的一种方案
avatar
文章
阅读
粉丝