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

95 阅读3分钟

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

一:Node.js的应用场景

1.      前端工程化的场景。早期ajax, jquery比较流行的时候,我们直接在页面中引入需要的lib 即可。后续随着模块化、transpile逐渐成熟、需求逐渐增多,对后端能力的需求也逐渐强烈。反过来说,也正是Node.js赋予了js开发者在浏览器外运行代码的能力,加速催生了这些项目的出现。

a)       Bundle: webpack, vite, esbuild, parcel

b)       Uglify: uglifyjs

c)        Transpile: bablejs, typescript

d)       其他语言加入竞争: esbuild, parcel, prisma

e)       现状:难以替代

2.      使用Node.js 开发Web服务端应用,也就是后端服务。这里我们特别提一下 vercel 这家公司,

a)       学习曲线平缓,开发效率较高

b)       运行效率接近常见的编译语言

c)        社区生态丰富及I具链成熟(npm, V8 inspector)

d)       与前端结合的场景会有优势(SSR)

e)       现状:竞争激烈,Node.js 有自己独特的优势

3.      Electron应用,这里不只是指electron,还包括nw.js.. ;这个场景 在较大的企业里面非常常见。最后要再说下应用,这里不只是指电子,还包括nw.js.、这个场景在较大的企业里面非常常见.

a)       商业应用: vscode, slack, discord, zoom

b)       大型公司内的效率工具

c)        现状:大部分场景在选型时,都值得考虑

二:Node.js运行时的结构

1.      V8,libuv:

a)       V8: JavaScript Runtime,诊断调试工具(inspector)

b)       libuv: eventloop (事件循环),syscall (系统调用)

c)        举例:用node fetch发起请求时...

2.      特点:

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

b)       单线程

  i.            JS单线程:实际:JS线程+Uv线程池+V8任务线程池+V8Inspector线程

  ii.            优点:不用考虑多线程状态同步问题,也就不需要锁;同时还能比较高效地利用系统资源;

  iii.            缺点:阻塞会产生更多负面影响

解决办法:多进程或多线程

c)        跨平台;

Node.js跨平台+ JS无需编译环境(+ Web跨平台+诊断工具跨平台)=开发成本低(大部分场景无需担心跨平台问题),整体学习成本低

三:编写Http Server

1.      安装Node.js

2.      编写Http Server + Client, 收发GET, POST请求:

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}')

})

Promisify:

用Promise + async await重写 ,技巧:将callback转换成promise

3.      编写静态文件服务器:

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. pafse( req.url)

    const file = fs. createReadSt ream(path. resolve(_ dirname, '.' +

    info. pathname) )

    file. pipe(res )

})



server. listen(port, () => {

    console. log( server listens on: ${port}^ )

})

4.      编写React SSR服务

a)       SSR (server side rendering)特点:

相比传统HTML模版弓|擎:避免重复编写代码

相比SPA (single page application) : 首屏渲染更快,SEO友好

b)       缺点:通常qps较低,前端代码编写时需要考虑服务端渲染情况

c)        难点:

                     i.            需要处理打包代码

                    ii.            需要思考前端代码在服务端运行时的逻辑

                  iii.            移除对服务器端无意义的副作用,或重置环境

5.      适用inspector 进行调试、诊断

a)       部署要解决的问题

   i.            守护进程:当进程退出时,重新拉起

   ii.            多进程: cluster 便捷地利用多进程

   iii.            记录进程状态,于诊断

b)       容器环境:通常有健康检查的手段,只需考虑多核cpu利用率即可

6.      部署简介

四:延伸话题

1.      贡献代码:

a)       好处:

   i.            从使用者的角色逐步理解底层细节,可以解决更复杂的问题;

  ii.            自我证明,有助于职业发展

   iii.            解决社区问题,促进社区发展;

b)       难点:花时间