DAY33-前端基本知识

nodejs

nodejs的模块大概可以分为三种：核心模块 第三方模块 自定义模块。每种模块的加载优先级都不相同。

• 核心模块：nodejs内置模块，可以理解为nodejs的基础API，例如我们常用的path os fs等等。这些模块也是我们nodejs与服务器交互的基础。
• 第三方模块：nodejs包管理工具平台安装的npm包。
• 自定义模块:这个通常值的是我们自己定义的文件模块。

我们在使用vue或react全家桶进行开发时，你有没有去思考为何一行命令就可以运行起前端的服务？为何一行命令能够进行前端的编译？为何我们谢vue代码最终输出了一堆js?当我们去研究这些功能的源码时会发现几乎这些能力全是基于nodejs来开发。下面列举我们在日常工具中nodejs的使用。

• 本地服务：webpack启用的本地服务插件都是基于nodejs的http模块实现的
• 编译打包：vue的.vue文件react的jsx或者常用的.ts文件最后如何成为js文件的，大家都觉得是webpack其实整个webpack都是基于nodejs的其中编译文件能力就是和nodejs的fs模块息息相关的。

链接：https://juejin.cn/post/7128432339545718820
webpack 

webpack 是一个现代 JavaScript 应用程序的静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundle。

webpack 的核心概念

• entry: 入口
• output: 输出
• loader: 模块转换器，用于把模块原内容按照需求转换成新内容
• 插件(plugins): 扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情
• 带你深度解锁Webpack系列(基础篇) - 掘金

 HTTP协议

Web使用一种名为HTTP（HyperText Transfer Protocol，超文本传输协议）的协议作为规范，完成从客户端到服务器等一系列运作流程。而协议是指规则的约定。可以说，Web是建立在HTTP协议上通信的。

HTTP协议定义Web客户端如何从Web服务器请求Web页面，以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。

前端基础篇之HTTP协议 - 掘金

浏览器渲染流程及原理

浏览器可以分为两部分：shell和浏览器内核，shell是外壳，如工具栏，菜单等，内核是根本，是基于标记语言显示的程序或模块。

浏览器内核分为两部分：渲染引擎和JS引擎。

渲染引擎

渲染引擎主要负责解析浏览器所呈现的内容，比如HTML,CSS。 

始解析 HTML 文档，并将各标记逐个转化成“内容树”上的 DOM 节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构：呈现树。

呈现树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。

呈现树构建完毕之后，进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制 - 呈现引擎会遍历呈现树，由用户界面后端层将每个节点绘制出来。

 浏览器的结构

1、用户界面。包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。

2、浏览器引擎。在用户界面和呈现引擎之间传送指令。

3、呈现引擎。负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。

4、用户界面后端。用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。

5、JavaScript 解释器。用于解析和执行 JavaScript 代码。

6、数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

7、网络。用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现

浏览器渲染原理及流程 - 掘金

Vue

Vue，读音是/vju:/，是一套用于构建用户界面的渐进式框架，自底层向上应用，Vue的核心库只关注视图层，容易入门，可以和第三方库或者已有的项目进行整合，可以做复杂的单页应用。简单的说，vue是一套前端的开发框架，vue是目前三大主流的框架之一，其他两个框架是:React、Angular。

Vue的基本概念 - 知乎

react

一、什么是react
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

1.声明式设计：React采用声明范式，可以轻松描述应用。
2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活：React可以与已知的库或框架很好地配合。
react快速开始(一)-入门基础_react教程_西京刀客的博客-CSDN博客

svelte

Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

Svelte在语法上非常简单，和vue很像，但是api会简单很多，因此代码量会少很多，并且没有虚拟DOM，所以代码体积会小很多，也没有很复杂的状态管理。
Svelte入门基础简介_登楼痕的博客-CSDN博客

astro

Astro 是一个现代化的轻量级静态站点生成器，用于构建以内容为中心的高性能网站，具有出众的开发者体验。

Astro 的下一代前端架构（称为 Astro Islands）可以优化网站，在与前端框架结合使用（如 React、Svelte 和 Vue）时将加载速度提高 33%，并将 JavaScript 减少 90%。Astro 2.0 是第一个为 Markdown 和 MDX 提供完整类型安全的主要 Web 框架。

electron

Electron 使用 JavaScript，HTML 和 CSS，来构建跨平台的桌面应用程序。

和传统的桌面应用相比，使用Electron开发更容易上手，开发效率更高。并且，web技术应用广泛、生态繁荣，Electron可以使用几乎所有的Web生态领域及Node.js生态领域的组件和技术方案。

与网页应用相比，Electron基于Chromium 和 Node.js，可以避免令人头痛的浏览器兼容问题。

入门Electron，手把手教你编写完整实用案例 - 掘金

typescript

TypeScript简称TS
TS和JS之间的关系其实就是Less/Sass和CSS之间的关系
就像Less/Sass是对CSS进行扩展一样, TS也是对JS进行扩展
就像Less/Sass最终会转换成CSS一样, 我们编写好的TS代码最终也会换成JS

因为JavaScript是弱类型, 很多错误只有在运行时才会被发现
而TypeScript提供了一套静态检测机制, 可以帮助我们在编译时就发现错误

2022 typescript史上最强学习入门文章(2w字) - 掘金

Express

Express 是一个基于 Node.js 的 Web 应用框架，它提供了一组强大的工具和函数，可以帮助你更轻松地创建 Web 应用程序。它使用中间件来处理 HTTP 请求和响应，并提供了一些易于使用的路由方法。其目标是提供一个轻量级、灵活的框架，可以快速搭建 Web 应用，包括 RESTful API、网站、和单页应用等。

Nest

Nest 是一个基于 Node.js 的渐进式框架，它结合了 JavaScript 和 OOP（面向对象编程）的优秀特性，提供了一种更加优雅的方式来构建高效的、可扩展的 Web 应用程序。它提供了一套有利于构建可维护且模块化的应用程序的工具，包括高度抽象的模块系统、依赖注入、基于 WebSocket 的实时通信、CLI、自动化测试等。

Nuxt

Nuxt 是一个基于 Vue.js 的 SSR（服务端渲染）框架，它提供了一个快速、高度定制化的开发模式，可以让你轻松地开发出高质量的 Vue.js 应用程序。它基于 Node.js 和 Webpack，使得你可以在应用程序启动前，通过 SSR 将应用程序的视图渲染到客户端，提高了应用程序的 SEO、性能和用户体验。同时，它也支持 PWA（渐进式 Web 应用程序）和静态站点生成等特性。

Koa

Koa 是一个基于 Node.js 的 Web 应用框架，它由 Express 的原始作者设计开发，旨在提供一种更加简洁、灵活的方式来处理 HTTP 请求和响应。Koa 的中间件堆栈基于 Promise，使得逻辑更加简洁明了，同时也能够支持常规的中间件。它提供了一些常用的工具方法，包括请求响应日志、静态文件服务、错误处理等。

Egg

Egg 是一个企业级的 Web 应用开发框架，它基于 Koa 进行了增强，提供了更多的企业级应用开发所需要的特性和工具。它采用了插件的思路，使得开发人员可以轻松集成各种插件，快速搭建应用程序。它提供了一些强大的基础能力，包括配置管理、路由系统、中间件、扩展机制、插件体系、多进程部署等，可以轻松支持高并发的 Web 应用程序。

RN

RN（React Native）：React Native 是由 Facebook 创造的用于构建移动应用程序的框架。它通过使用 JavaScript 和 React 库，使开发人员能够将相同的代码进行重复使用，构建 iOS 和 Android 平台下的原生应用程序。使用 RN 可以提高开发效率和应用速度。

Uni-app

Uni-app 是基于 Vue.js 的多端开发框架，可以一次开发，多端运行。它支持生成 iOS、Android、H5、小程序、快应用等多种类型的应用程序。Uni-app 提供了一些独特的 API，可以帮助你更好地处理多端开发中的常见问题，比如屏幕适配、导航栏等。

Taro

Taro 是一款多端统一开发框架，支持基于 React、Vue 等框架的开发。Taro 可以让开发人员使用统一的代码，构建出支持小程序、H5、React Native 等多个平台的应用程序。Taro 的主要特点是高效、灵活、易拓展，同时也提供了一些方便的开发工具和插件。

各平台小程序：

各平台小程序一般指微信小程序、支付宝小程序、百度智能小程序、字节跳动旗下的抖音小程序等。它们是各大移动平台推出的轻量级应用程序，一般基于 JavaScript 技术开发。它们采用 Web 前端技术，可以在移动端快速地运行应用程序，具有开发周期短、发布快、使用方便的特点。

快应用：

快应用是一种可以无需安装就可以直接使用的原生应用程序技术，它可以提供与原生应用程序相似的性能和体验。快应用可以运行在多平台上，基于 JavaScript 技术进行开发，类似于小程序，但比小程序更加强大。目前，它在华为平台、OPPO 平台、vivo 平台等移动平台上得到广泛应用。

鸿蒙：

鸿蒙是华为推出的一项操作系统，包括鸿蒙 OS、鸿蒙 Lite 等多个版本。鸿蒙支持多种设备类型，包括手机、平板电脑、电视、手表等。鸿蒙提供了一套完整、统一的开发框架，可以提高开发效率，同时也支持多端协同、全场景智能服务、安全等多种特性。

qiankun：

qiankun 是一个面向微前端架构的开发框架，主要采用的技术是基于 Web Components 的 Custom Element 技术实现。它允许开发人员在同一页面上，通过集成多个独立的应用程序，来创建一个完整的微前端应用程序。qiankun 提供了一组完整的 API 和工具，以便于开发人员实现微前端架构。

singleSpa：

singleSpa 是一个允许你将多个单独的应用程序集成到同一个页面上的开发框架。它支持不同前端框架之间的集成，如 Vue.js、React、Angular 等，具有灵活性。singleSpa 可以实现多个应用程序之间的通信，并且支持在不同域名或不同框架版本之间运行。

Micro App：

Micro App 是一套微前端框架，采用多个独立的小应用来构建一个完整的前端应用程序。它采用了插件化架构和动态加载的方式来实现多个应用之间的协同运行，具有模块化、可重用和高度可扩展性等优点。

EMP：

EMP（Enterprise Multi-platform）是一种大型企业级应用架构，该架构基于微前端技术，可以通过集成多个小应用程序构建出一个完整的企业级应用。EMP 支持多种应用框架之间的集成，如 React、Vue.js、Angular、微信小程序等，也支持多种平台之间的集成，如 Web、App、PC 等。

Garfish：

Garfish 是一个基于 Web Components 的轻量级微前端框架。它提供了一系列在微前端中使用的组合单元，比如路由、状态管理、模块化等都可以拆分成一个个独立的小模块。Garfish 将这些模块用 Web Components 的方式进行封装，实现了多个应用间的交互和共存。此外，Garfish 还支持动态加载和解析 JS 模块，提高了应用程序的响应速度。

Vue/cli：

Vue/cli 是 Vue.js 官方提供的一个快速开发工具，它可以帮助开发人员快速创建 Vue.js 项目，使用了很多开发者需要的包，如打包、ESLint、Jest 测试等等。Vue/cli 提供了 CLI 界面和命令行工具两种方式，可以帮助开发人员快速初始化和管理项目，是一个非常便捷的工具。

Vite：

Vite 是一种基于现代 Web 平台和浏览器原生 ESM（ESModule）的开发构建工具。它的特点是快速开发，打包速度飞快，支持热更新本地环境，它可以允许使用原生 ES 模块化开发，这大幅度优化了打包速度。

Webpack：

Webpack 是目前最为流行的前端打包工具之一，它是一个模块打包器，可以将多个模块打包成一个或多个静态资源，如 JavaScript、CSS、图片等。Webpack 提供了丰富的插件和 Loader 系统，可以灵活地扩展和定制构建过程。该工具也支持 Code Splitting（代码分割）、Tree Shaking（树摇）、Hash 指纹等功能，可以提高性能和安全。

Create-react-app：

Create-react-app 是一个针对 React 应用程序的脚手架工具，它提供了完整的开发环境，使得开发人员可以快速启动和构建 React 应用程序。Create-react-app 采用最新的 React 特性和 Webpack 构建，同时也支持热加载、代码分割、静态类型检查等功能。

Rollup：

Rollup 是一个 JavaScript 模块打包器，它可以将不同的 JavaScript 模块打包成单个文件。它与 Webpack 不同，主要适用于构建 JavaScript 库，如 React 库、Vue.js 库等。Rollup 的打包结果更加精简、简洁，可以大幅度减少打包文件的体积。

Umi：

Umi 是一个适用于企业级前端应用程序的脚手架工具，它基于 React 技术栈进行开发，提供了一整套开发框架和基础设施。Umi 支持一键式配置和开发，也提供了一系列生态插件和第三方集成，使得开发人员可以轻松实现诸如常见中间件、自定义路由、数据 Mock、微服务等功能。

Learn：

Learn 是由 Yarn 团队推出的一个新型的包管理工具，它与其他包管理工具不同，没有中央仓库。相反，Learn 的每个项目都有自己的本地缓存，在需要的时候可以直接从缓存中获取包，以提高速度。Learn 同样也支持使用多个源，并支持并行下载包，它的目标是提供更快、更稳定、更安全的包管理体验。

npm：

npm（Node Package Manager）是 Node.js 的官方包管理工具，它是最流行的包管理器之一。npm 通过一个叫做 package.json 的文件来配置和管理包，可以让开发人员快速安装、升级和删除包。npm 也支持使用私有源、版本管理、依赖关系等特性，以及与 Webpack、Rollup 等打包工具的集成。

pnpm：

pnpm 是一个高效的包管理工具，它与 npm 类似，也可以用来管理 Node.js 的包依赖。与 npm 不同的是，pnpm 只会下载每个包的一个实例，并在需要时链接到冷缓存中。这样，它可以显著减少磁盘使用量和下载时间，提高安装和更新包的速度，是 npm 的一个优秀替代品。同时，pnpm 也支持并行安装包、本地缓存、自动清理缓存等特性。

Vue-devtools：

Vue-devtools 是一款针对 Vue.js 应用程序的插件，可以在浏览器中帮助开发人员调试和分析 Vue.js 应用程序。该插件提供了一系列工具和特性，如组件树视图、状态管理、事件追踪等，可以帮助开发人员更加高效地进行 Vue.js 应用程序的开发。

React-devtools：

React-devtools 是 React 官方推出的一款浏览器插件，可以帮助开发人员调试和分析 React 应用程序。该插件提供了类似 Vue-devtools 的一系列工具和特性，如组件树视图、状态管理、事件追踪等，可以帮助开发人员更加高效地进行 React 应用程序的开发。

Postman：

Postman 是一款非常流行的 API 开发调试工具，它是一款开源工具，在网页和 Chrome 扩展程序中都可以使用。Postman 提供了涵盖从请求、测试到协作和监控的全面功能，支持测试和调试 API，同时也能够方便地创建 API 文档和共享 API 集合。Postman 在开发 API 时通常被用来进行 API 的测试和调试。

除了以上提到的插件，还有一些其他常用的浏览器插件，比如：

JSON View：

JSON View 是一款将 JSON 数据格式化显示的工具，它可以使 JSON 数据变得更加易读、易于理解。

Grammarly：

Grammarly 是一款文本编辑辅助工具，它可以帮助用户纠正语法和拼写错误，提高写作质量。

iTerm：

iTerm 是一款开源的命令终端，是在 Mac 环境下使用终端时的替代品。它提供了更多的自定义配置选项和更丰富的功能，如支持多标签、分屏、快速查找、触摸栏等，可以提高工作效率。

zsh：

zsh 是一款 Unix Shell，是 Bash Shell 的替代品之一，提供了许多 Bash 没有的高级特性。zsh 支持命令行自动补全、命令历史记录、别名、函数、通配符等。基于 zsh 可以构建出高效、强大的命令行工具，如 oh-my-zsh。

Vim：

Vim 是一款开源的文本编辑器，是 Linux 系统命令行界面下最受欢迎的文本编辑器之一。Vim 具有强大的编辑功能和定制化选项，支持多种编程语言，如 C、Java、Python 等。Vim 的快捷键和插件机制可以让用户更容易地编辑文档和代码。

基本终端命令：在命令终端中，一些基本的命令包括：

• cd：用于切换目录
• ls：用于列出当前目录下的文件和文件夹
• pwd：用于显示当前目录的路径
• mkdir：用于创建一个新目录
• touch：用于创建一个新文件
• cp：用于复制文件或目录
• mv：用于移动或重命名文件或目录
• rm：用于删除文件或目录
• grep：用于搜索特定的文本内容
• ps：用于显示当前正在运行的进程
• top：用于实时查看进程占用的系统资源