前端工程化

• 全部武装：通过工程化提升[战斗力]

什么是工程？

• 工程就是一个项目(例如：一个网站或APP)

一个工程的生命周期

• 工程立项
• 需求分析
• 产品原型
• 开发实施
• 测试部署
• 上线运行

什么是工程化？

• 工程化就是完成项目过程中，用到的各种工具和技术。

什么是前端工程化？

• 前端工程化就是通过各种工具和技术，提升前端开发效率的过程。

前端工程化的内容：各种工具和技术

• 脚手架工具
• 压缩工具
• 自动化工具
• 转换工具
• 格式化工具

前端工程化的作用

• 通过使用工具，提升开发效率

总结

• 学习前端工程化，就是学习使用各种工具，解决前端开发中的各种问题。

前端工程化解决的问题

• 项目上线前，压缩代码
• 对ES6+或CSS3新特性进行转换
• 想要使用Less增强CSS的编程性，但是浏览器不能直接支持Less(没有Less引擎，只有css)
• 格式化代码（多人协作开发，代码风格无法统一）

Node.js

前端工程化的基础

node.js基础

• Node.js的作者是Ryan Dahl(瑞安 达尔)

什么是node.js?

• Node.js官网：node.js.org

javaScript运行环境

• 浏览器就是JavaScript的一个运行环境
• node.js是基于Chrome V8引擎的。
• 如下图所示: node.js是除了浏览器之外，可以运行JavaScript的环境。

javaScript的发展

• 1995：浏览器（javaScript）
• 2009: Node.js(javaScript)

浏览器的组成

• 如下图所示

• 浏览器内核的组成

• 浏览器内核的组成(详细)

• 主流浏览器内核

软件架构

• 操作系统
• 运行环境
• 编程语言
• 框架

• 软件架构对应的Web应用

• 软件架构对应的Web应用 的比喻

总结

• node.js既不是一门新的语言，也不是JavaScript框架，而是一个运行环境。

node.js可以做什么

• node.js给 JavaScript 插上了全栈编程的翅膀

JavaScript的作用

• 浏览器（JavaScript），负责前端的功能
• Node.js（JavaScript）,负责后端的功能

浏览器端的JavaScript

• 响应浏览器事件
• 数据验证
• DOM操作
• 等等....
• 不能做文件操作

Node端的JavaScript

• Node.js适合：用于开发前端方向的各种工具
  • 各种前端工程化工具
• Node.js适合：开发服务器端的应用层（BFF）
  • 为网站、APP、小程序等提供数据服务
• Node.js可以用来做桌面应用开发
  • 各种跨平台的桌面应用（vscode、typora、insomnia）

Node.js APIs

对比

JavaScript的web组成

JavaScript的node组成

两者之间的交集

• 大体上看

• 细分

安装node.js

在官网下载Node.js安装包

双击安装，一路next安装

命令行中验证安装是否成功

• 打开命令行：win+r之后，输入cmd回车
• 命令行中输入：node -v
• 命令行输出版本号，表示安装成功

使用Node.js

• 通过 Node.js 运行JavaScript代码

Node.js有两种模式运行JavaScript

脚本模式

> node path/filename.js(回车)

交互模式

• 进入交互模式 > node(回车)
• 运行代码 > js代码(回车)
• 退出交互模式 > .exit 或 按两次ctrl+c

Node.js下运行JavaScript 快捷操作

• 在命令行中使用code .可以在vscode中打开当前文件夹。
• ctrl + ` 打开编辑器的命令行

脚本模式

交互模式(REPL)

• 使用tab键自动补全
• 探索JavaScript对象（例如：Math.然后按两次tab键）
• 点命令（例如：输入.help然后回车）

全局对象

• Node.js下的全局对象是 global
• 浏览器端的js中，全局对象是 window

Node.js下的全局对象是 global

• 在交互模式下，声明的变量和函数都属于global

• 在脚本模式下，声明的变量和函数不属于global

• 在node.js中不能访问window(浏览器的全局对象)

• 延伸：不仅不能访问window，document\location等也不能访问，其只能访问两者之间的交集部分。

全局函数

Node.js下的全局函数

• javaScript语言提供的全局函数，在node.js下依然可用。
  • parseInt/parseFloat/isNaN/isFinite/eval...
  • 一次性定时器（setTimeout / clearTimeout） -> 定时炸弹
  • 周期性定时器（setInterval / clearInterval） -> 闹钟
• Node.js环境也提供了一些全局函数
  • 立即执行定时器（setImmediate / clearImmediate）
  • 进程立即执行定时器（process.nextTick）

同步与异步

• 主程序（单线程）
• 事件队列
• 如图所示(nextTick事件在主程序之后执行，而setImmediate是在事件队列开头执行的)