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

149 阅读3分钟

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

mobilebanner.png

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

学习Node.js的意义

Node.js可以应用在前端工程化、Web服务端应用、Electron跨端桌面应用等方面,应用范围较大。但其学习的成本对于前端人来说成本是很低的,主要是让我们Javascript的代码在别的环境执行,很多语法上的东西都是相通,可以提高我们的开发效率。同时Node.js的运行效率接近常见的编译语言,更幸运的是我们的社区生态丰富工具链成熟,与前端的结合场景很有优势。所以学习Node.js是十分有必要的。

Node.js运行时结构

下载 (2).png

  • V8:Javascript Runtime,诊断调试工具(inspector)
  • libuv:eventloop(事件循环),syscall(系统调用)

Node.js运行时结构—特点

  • 异步I/O:当Node.js执行I/O操作时,会在响应返回后回复操作,而不是阻塞线程并占用额为内存等待
  • JS单线程:实际线程:JS线程+uv线程池+V8任务线程池+V8Inspector线程,它的优点就是不用考虑多线程状态的同步问题,同时还能比较高效的利用系统资源;
  • 跨平台:Node.js跨平台+JS无需编译环境(+Web跨平台+诊断工具跨平台)

编写Http Server-Http Server

Hello Word

2e5f14b4-96b5-4aae-9682-08695a1221ce.png

0b85dca7-808c-4492-94e8-c13c678199ba.png
首先引入http模块,然后把服务器端口开在3000,利用http的createServer方法接受一个回调函数,回调函数接收两个参数,req参数处理请求操作,res接参数处理响应操作,利用res的end方法响应服务器hello的字符串。

JSON

32108448-a721-4855-bb5d-fa2ff1bbaef2.png

77bc9c8a-9006-454b-8e6d-bb92be8cc2e3.png 利用JSON.stringify()方法把数据变成JSON格式发出来,更加安全

编写Http Server-Http Client

下载 (1).png Buffer将数据变为进制传输的Api,增加传输数据的速度,这里req.end()代表客户端发送的请求体。

编写Http-Server-静态文件

下载 (2).png 引入fs模块是专门管理资源的模块,而path模块是专门把绝对路径变成相对路径的模块,此代码块把静态资源托管到了url地址为 http://127.0.0.1:3000

编写Http Server-React SSR

SSR的优点

  • 相比传统HTML模板引擎:避免重复编写代码
  • 相比SPA:首屏渲染更快,SEO友好

下载 (3).png
此处引入了React模块,进行React相关的操作

SSR的难点

  • 需要处理打包代码
  • 需要思考前端代码在服务端运行时的逻辑
  • 移除对服务端无意义的副作用,或重置环境

总结

本文讲述了学习Node.js的重要性和node.js内在的东西,与其的几个特点,能更好更深入的理解node.js运行时的各种细节,也介绍了node.js经常用的场景,与较热门的node.js写的几个东西。要更深入的学习node.js需要了结更多的模块,学习express框架,与勤于练习代码业务能力。