前端介绍及工具环境搭建

前端发展历史

前端介绍

1.什么是前端

• 前端 ：针对浏览器的开发，代码在浏览器中运行
• 后端 ：针对服务器的开发，代码在服务器中运行

2.前端的用处？

前端在现代技术环境中扮演着⾄关重要的⻆⾊。
作为⽤户与⽹站或应⽤程序的接触点，前端直接影响着⽤户体验和⽤户满意度。
前端开发负责设计和实现优雅的⽤户界⾯，提供直观的导航和交互，并确保⽹站或应⽤程序的易⽤性和可访
问性。
通过前端技术，我们可以创建出吸引⼈的视觉设计，实现⾼性能的⽤户界⾯，以及提供流畅和快速的⽤户交
互。
前端还承担着品牌形象建设和市场竞争⼒的责任，通过创造独特和富有吸引⼒的⽤户体验，提升品牌价值。
综上所述，⽆论是在⽤户体验、品牌塑造还是商业成功⽅⾯，前端都发挥着不可或缺的重要作⽤。

前端发展历史

1.前端发展的起源和演变

洪荒时代
1990 年，第⼀个Web浏览器的诞⽣；1991 年，WWW诞⽣，这标志着前端技术的开始。在这20年的前
端发展史中，我们经历了从最早的纯静态⻚⾯，到JavaScript跨时代的诞⽣；从PC端到移动端再到⼩程
序；
1994年，这⼀年10⽉13⽇⽹景推出第⼀版Navigator;这⼀年创建了W3C，他们负责HTML的发展路径，其
宗旨是通过促进通⽤协议的发展。W3C标准不是某⼀个标准，⽽是⼀系列标准的集合。⽹⻚主要由三部
分组成：结构、表现和⾏为。这⼀年，发布了CSS。还是这⼀年，为动态web⽹⻚设计的服务端脚本PHP
诞⽣。之后在1995年⽹景推出JavaScript。
⾄此，前端三⼤基础：HTML、CSS、JavaScript均已诞⽣

2.不同时期的前端技术和⼯具概述

开始

上图是1994年丽景公司发布的第⼀款商业浏览器Navigator. 同年，PHP诞⽣。PHP能将动态的内容嵌⼊到HTML中，提升了编写⻚⾯的效率
与可读性。PHP的界定符、循环语句等的发明，深刻影响了后来的ASP、JSP，乃致后来的JavaScript前端模板引擎。

蓬勃发展

jQuery独⼤
jQuery是⼀个快速、简洁的JavaScript框架，于2006年1⽉由John Resig
发布。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
它封装JavaScript常⽤的功能代码，提供⼀种简便的JavaScript设计模式，优化HTML⽂档操作、事件处理、
动画设计和Ajax交互。
jQuery的核⼼特性可以总结为：具有独特的链式语法和短⼩清晰的多功能接⼝；具有⾼效灵活的CSS选择器，
并且可对CSS选择器进⾏扩展；拥有便捷的插件扩展机制和丰富的插件。
jQuery兼容各种主流浏览器,如IE
6.0+、FF
jQuery的流⾏间接带来以下的发展：
1.5+、Safari
2.0+、Opera 9.0+等。
1.促使⼈们对CSS1~CSS3选择器的学习
2.最重要的是降低前端⻔槛，让更多⼈进⼊这⾏业，前端⼯程师的队伍越来越壮⼤。
3.开发者们已开始注重前后端分离

后jQuery时代-前端模块化

随之发展,jQuery也存在⼀些问题:
1.jQuery的链式操作⻛靡⼀时，也带来许多问题，当Ajax出现依赖时，就不可避免就出现回调地狱。
2.jQuery如此多的选择器不好维护，随着发展，⻚⾯的交互也越来越复杂，造就了Web Page向Web App进化，新
的趋势带来新的开发⽅式。
3.前端⼯程师通常编写⼀个⻚⾯，会引⼊⼗多个乃⾄⼏⼗个jQuery插件，⻚⾯上塞满了Script标签。众所周知，浏
览器是单线程，Script的加载，会影响到⻚⾯的解析与呈现，导致著名的⽩屏问题
4.jQuery另⼀个问题是全局污染，由于插件的质量问题，或者开发的素质问题，导致全局污染
于是⼀些优秀的前端⼯程师们决定向后端取经，引⼊模块机制。于是有⼈⽴志要统⼀这种模块定义⽅式，
成⽴了CommonJS。CommonJS诞⽣很久⼀段时间后，在后端的Node.js出现时才有⽤武之地。
CommonJS规范是诞⽣⽐较早的。NodeJS就采⽤了CommonJS。
随后⼜出现AMD、CMD。
直到ES6的出现,ES6标准的模块化
ES6静态加载的设计思想，使得在编译时就可以确定模块的依赖关系，以及输⼊、输出的变量。ES6则在语⾔
层⾯上实现了模块化，取代CommonJS、AMD、CMD成为服务端和浏览器端通⽤的模块解决⽅案

MVC/MVVM框架崛起（2009-2013年）

前端MVC框架
•Model: 模型（⽤于封装与应⽤程序的业务逻辑相关的
•数据以及对数据的处理⽅法）
•View: 视图（渲染⻚⾯）
•Controller: 控制器（M和V之间的连接器，⽤于控
•制应⽤程序的流程，及⻚⾯的业务逻辑）
M是指模型，V是视图，C则是控制器，使⽤
MVC的⽬的是将M和V的实现代码分离，从⽽
使同⼀个程序可以使⽤不同的表现形式。C存
在的⽬的则是确保M和V的同步，⼀旦M改变，
V应该同步更新。
1.View 传送指令到Controller ；
2.Controller 完成业务逻辑后，要求Model 改变状态；
3.Model 将新的数据发送到View，⽤户得到反馈。

另⼀些框架提出MVVM模式，⽤ViewModel代替Controller。
本质：view绑定ViewModel，视图与数据模型强耦合。数据的变化实时反应在view上，不需要⼿动处理。
各部分通信都是双向的。采⽤双向数据绑定，View的变动，⾃动反映在 ViewModel，反之亦然。其中
ViewModel层，就是View和Model层的粘合剂，他是⼀个放置⽤户输⼊验证逻辑，视图显示逻辑，发起⽹络请求
和其他各种各样的代码的极好的地⽅。说⽩了，就是把原来ViewController层的业务逻辑和⻚⾯逻辑等剥离出来
放到ViewModel层

MVC与MVVM的区别

在MVC⾥，View是可以直接访问Model的，所以View⾥会包含Model信息以及⼀些业务逻辑。 MVC
模型关注的是Model的不变，所以在MVC模型⾥，Model不依赖于View，但是 View是依赖于Model
的。不仅如此，因为有⼀些业务逻辑在View⾥实现了，导致要更改View也是⽐较困难的，⾄少那些
业务逻辑是⽆法重⽤的。
MVVM在概念上是真正将⻚⾯与数据逻辑分离的模式，它把数据绑定⼯作放到⼀个JS⾥去实现，⽽
这个JS⽂件的主要功能是完成数据的绑定，即把model绑定到UI的元素上。此外MVVM另⼀个重要
特性双向绑定，它更⽅便你去同时维护⻚⾯上都依赖于某个字段的N个区域，⽽不⽤⼿动更新它们。

Angular

所收购。
AngularJS诞⽣于2009年，由Misko Hevery 等⼈创建，是⼀款构建⽤户界⾯
后为Google
的前端框架，
Angular有着诸多特性，最为核⼼的是：MVVM
、模块化、⾃动化双向数据绑定
依赖注⼊
等等。
、语义化标签、
Angular是出现最早的MVVM框架，虽然背靠⼤⼚，但是由于学习曲线陡峭，颠覆性升级过快，并且随
着React和Vue的崛起，国内Angular⽤的⼈也随之减少。

React

React是⽤于构建⽤户界⾯的JavaScript库,起源于Facebook
的内部项⽬。
React⽣态中的React-Native是⼀个优秀的移动端开发框架，可以适配安卓和IOS系统开发，并且可以进⾏
热更新，受到了很多⼤⼚的⻘睐。
主要特点：
1.声明式设计：React 使创建交互式UI 变得轻⽽易举。为应⽤的每⼀个状态设计简洁的视图，当数据
变动时React能⾼效更新并渲染合适的组件。
2.组件化: 构建管理⾃⾝状态的封装组件，然后对其组合以构成复杂的UI。
3.⾼效：React通过对DOM的模拟，最⼤限度地减少与DOM
4.灵活：⽆论使⽤什么技术栈
的交互。
，在⽆需重写现有代码的前提下，通过引⼊React来开发新功能。

Vue

Vue.js是较前2个都更年轻的MVVM框架。
Vue 从它们那⾥借鉴了好的部分，即函数式和⾯向对象编程的混合体。
有⽐较完善的中⽂⽂档，学习成本最低，语法精炼、优雅⽽简洁、代码的可读性⾼、成熟的组件模块化
所以在国内很受欢迎。

SPA与MPA

单⻚⾯应⽤是指在⼀个⻚⾯中加载所有的HTML、CSS和JavaScript，并通过动态更新DOM来实现⻚⾯内容
的切换和交互。
SPA的优点：
⽤户体验：SPA可以提供更流畅的⽤户体验，因为⻚⾯切换时不需要重新加载整个⻚⾯，只需要更新部分内容。
前后端分离：SPA可以将前端和后端的开发⼯作分离，前端负责展示和交互逻辑，后端负责提供API接⼝。
更好的性能：由于只加载⼀次⻚⾯，SPA可以减少⽹络请求和资源加载时间，提⾼性能。

多⻚⾯应⽤是指每个⻚⾯都有独⽴的HTML、CSS和JavaScript⽂件，每次⻚⾯切换都需要重新加载整个⻚⾯。
MPA的优点：
SEO友好：由于每个⻚⾯都有独⽴的URL，MPA对搜索引擎的抓取更友好，有利于提⾼⽹站的搜索排名。
更好的兼容性：MPA可以更好地兼容⼀些⽼旧的浏览器，因为不依赖于现代浏览器的JavaScript特性。
更灵活的开发⽅式：MPA可以根据不同⻚⾯的需求，选择不同的技术栈和⼯具。
SPA适⽤于需要提供流畅⽤户体验和前后端分离的项⽬，⽽MPA适⽤于需要更好的SEO和兼容性的项⽬。
根据项⽬需求和团队技术栈，选择适合的应⽤类型可以提⾼开发效率和⽤户体验。

Node.js

2009年，Node项⽬诞⽣，它是服务器上的JavaScript运⾏环境。
Node=JavaScript+操作系统API
JavaScript成为服务器脚本语⾔。
JavaScript成为唯⼀的浏览器和服务器都⽀持的语⾔
前端⼯程师可以编写后端程序了

前端开发模式的根本改变

• Node环境下开发
• ⼤量使⽤服务器端⼯具
• 引⼊持续集成等软件⼯程的标准流程
• 开发完成后，编译成浏览器可以运⾏的脚本，放上CDN

新的时代

• HTTP/2的持续普及
• 放弃Internet Explorer 8
• ES6&ES7
• Promise、generator与async/await
• 框架纷争
• 打包⼯具：Roollup、Webpack、Grunt、Gulp
• 包管理：npm、yarn
• WebVR、WebAR、WebAssembly、WebComponents、智能硬件、游戏

低代码（LowCode）

其实就是早期的搭建系统、组件平台等（宜搭、微搭），这个概念2014年被著名的研究机构Forrester提出
⼤前端
• Web前端+移动端+桌⾯端+服务端
• 移动端：Android端+IOS端
• Weex/React Native+Native
• 桌⾯端
• Electron
• 服务端：
• Node.js
“全栈开发者”是指“同时掌握前端、后端以及其他⽹站开发
相关技能的开发者”。
⼀个“全栈开发者”可能会使⽤以下技能点：
前端：JavaScript、H5、CSS3、sass、less、React、Vue、
webpack、jest。
后端：Nodejs/Deno、Go、Java、Spring、Gin、
Kafka、Hadoop。
数据库：MySQL、mongoDB、redis、clickhouse。
运维：⽹络协议、CDN、Nginx、ZooKeeper、Docker、
Kubernetes。
值得注意的是，⼀个优秀的⼯程师并不是以“栈”数取胜，⽽取决
于你解决了什么层次的问题。

微前端

微服务架构：微服务架构可以将⼀个应⽤分成若⼲个更⼩的服务，这让整个开发过程具有很⾼的敏捷性
和可拓展性。
常⽤的微前端框架包括qiankun、single-spa、micro-app：

Web 3D

3D 类的H5 ⼩游戏、在线看房、电⼦商务、在线教育等，对于技术⽽⾔这⽆疑是⼀⽚沃⼟。随着5G 技术
发展，视频加载速度会⾮常快，简单的实时渲染会被视频直接替代。复杂的可以通过服务器渲染，将画⾯
传回⽹⻚中，只要传输够快，⼿机的性能就不再是问题。
相关的⼀些库：
Three.js、Oasis Engine、Babylon.js、PlayCanvas.js

WebRTC (Web Real-Time Communications)

传统的技术包括：XMLHttpRequest，WebSocket，未来：WebRTC 会在点对点私密传输、娱乐领域，元宇
宙领域，低延迟领域⼤放异彩

⼯具安装

1.⾕歌浏览器

https://
www.google.cn/intl/zh-CN/chrome

2.VSCode

下载vscode
https://code.visualstudio.com/Download
下载64位dep 版本

3.Node.js

• https://nodejs.org/en/download
检查是否安装成功，指令 node –v 。
当能够看到node版本后证明安装成功。
npm下载依赖包。

4.nvm管理node版本⼯具

https://
nvm.uihtm.com