Web前端开发技术

Appearance

node.js ​

元信息 ​

  • 目标：理解 V8 引擎脱离浏览器宿主后 JS 成为通用语言——Node 的组成（引擎/系统API/Web服务器/npm）与用途；分清浏览器 JS 与 Node JS 同语言、不同运行时
  • 关键概念：V8、Node.js、运行时、系统API、同构、npm
  • 关联阶段：cp3
  • 常见误区：以为 Node 是"另一个 JavaScript 语言"（同一语言，不同运行时与 API 集）；以为 Node 里也能操作 DOM（DOM 是浏览器提供的，Node 提供的是文件系统/进程等系统 API）；以为前端工程师用不到 Node（构建工具链、脚手架、转译全跑在 Node 上）

问题：浏览器里的JS ​

  • 不能脱离浏览器运行
  • 只能调用浏览器支持的API，不能调用底层操作系统的API，如进程管理、文件系统、网络等，从而失去了诸多能力或可能

安全，所以受限

Javascript 引擎 ​

Javascript作为一种脚本语言，它的解释器被称为 Javascript 引擎，一般内置于浏览器。

  • JScript(IE6,IE7, IE8)
  • Chakra(IE9,IE10, IE11, IE Edge)
  • SpiderMonkey(Firefox)
  • JavascriptCore(Safari)
  • V8(chrome)

V8 引擎 ​

  • 当下最为优秀的 Javascript 引擎，最初内置于 Google Chrome 浏览器之中
  • 后来与浏览器宿主分离，可独立运行
  • 采用开源协议，从而被广泛地移植或嵌入到各种环境，如 NodeJS、MongoDB、CouchDB、photoshop、网络游戏等 等各种环境，从而将Javascript语言成功的推广到了各种环境之中，从脚本语言向全功能的程序设计语言进化

类似的运行时还有 deno、bun 等（它们与 node 同类，各自内置 JS 引擎） https://zhuanlan.zhihu.com/p/676156364

node.js ​

是javascript生态的基础设施，包含一系列基础组软件：

  • V8引擎：可独立运行的Javascript执行环境，
  • 系统API和核心库：提供对底层操作系统能力的一组调用接口
  • Web开发能力：内置 http 等模块，可搭建 Web 服务器（扮演 apache 一类的角色），并提供一组基于javscript的Web服务开发框架和功能，如异步、事件等机制，帮助程序员快速开发服务端应用。
  • 模块与包管理工具：提供模块化机制和基于包(package)的管理工具，即npm

node.js的出现，使得基于js开发的应用无需浏览器这一宿主环境，可直接进行底层系统调用，使得Javascript演变成为功能完整的编程语言，被广泛用于各种平台。

node初体验 hello world! ​

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;
Open on CodeSandboxOpen Sandbox

在系统中安装node运行环境后，在控制台命令行中输入下面的代码，将看到屏幕显示 'hello world!'

bash
node hello.js

node.js的用途 ​

  • 支持多种界面的前端应用开发： Web、命令行、甚至桌面(electronjs)
    • 命令行应用如vue/react等框架的代码生成器
    • 桌面应用如编辑器vscode、atom等
  • 同构应用
    • node.js实现了Javascript从前端到后端的跨越，不仅在前端一统天下，而且在后端也逐步蚕食java/php/net等服务器语言的地盘
  • node.js 避开了多版本浏览器的兼容性问题，可以不断支持javascript新语法特性

前端开发中的node.js ​

在本教程中，我们并不介绍基于 node.js 的服务端编程，而是借用node.js的包管理工具，来提升我们完成浏览器应用的代码重构和开发效率

  • 将es6+等高级语法转译为低级语法，从而即享用最新特性又无需考虑浏览器兼容性问题
  • 利用npm等包管理工具，方便代码依赖的管理
  • 利用node生态中的各种工具,提高前端开发效率

node.js应用 Vs 浏览器应用 ​

  • 浏览器应用：plain javascript、v8、浏览器api(DOM、BOM、H5 api)
  • node.js应用：ES6+、v8、系统api
    • 服务端应用：类似php、jsp、asp等
    • 命令行应用：终端下执行
    • 桌面应用：通过 Electron 等打包，由浏览器内核提供UI，node.js提供访问本地系统的api

在最新的现代浏览器中，已经可以直接使用ES6语法，但考虑到兼容旧浏览器，依然需要一个转译

参考阅读 ​