前端都有啥

前端是一个非常广泛的领域，简单的概括是所有能在设备屏幕上面展示，提供人机交付功能的技术领域，例如 移动端的 app 开发技术，PC 端的软件开发技术，还有比如一些非常规设备的比如智能家电，智能穿戴设备屏幕上的软件开发技术，都属于前端技术范畴。当然，我们这个系列讨论的范围，主要是以 html，css，js 为基础，在浏览器、webView等软件上面进行交互界面显示的前端技术及生态。

发展历程

web前端技术发展主要是随着浏览器技术及网络技术的发展而发展的，下面介绍下一些主要的发展方向

工具类库

随着浏览器发展及网速的提升，更多元素比如图片、动画、视频被包含到网页展示之中，交互越来越多带来的是 js 代码在网页开发占比越来越大，而随着浏览器领域越来越多公司入局，市面上的浏览器五花八门，带来很多标准化问题，"代码兼容"称为那时候 web 前端开发者最需要关注的问题，这时候各种的工具类库就诞生了，比如jQuery、underscore等等，这个时期的网页很多是通过后端语言模板在服务端将页面拼接完成返回前端的，比较常见的是jsp,asp,php等后端模板语言

交互方式

随着XmlHttpRequest俗称ajax方式的出现，网页摆脱了加载-交互-刷新的流程，页面可以在不刷新的情况下拿到数据，整体的交互复杂度就更上一层楼。在这个阶段前后由于前端页面渲染可以用过 ajax 获取数据在前端去完成了，所以慢慢形成比较独立的前端工作职责，前后端分离的代码架构也渐渐被广泛使用

模块化

前面说过 js 主要是用来对页面的展示进行控制，那么随着交互越来越复杂，代码自然就越来越多，原有采用 js内联，或者单js文件等单一的代码组织方式会导致代码杂乱，这个阶段开发者开始关注开始关注代码组织问题，因此cmd、amd、umd等代码模块规范就出现了

工程化

随着nodejs 在前端工具链上的应用，前端代码上线从之前的单纯压缩，开始进入了编译阶段，工具从grunt到glup再到后续的webpack、rollup等等，配合包管理工具(npm，yarn等)，将模块化、兼容性、依赖处理、资源处理从代码运行阶段提前到了代码的构建编译阶段去解决

框架

前端的代码交互刚开始都是拿数据 ——> 渲染模板 ——> 操作dom/提供交互 ，随着场景和交互的复杂度越来越高，这种模板数据操作混合的研发方式给后续的维护带来了困难，因此大家想到了后端经典的代码组织设计模式，基于此有了backbone、emberjs,angular 等大型的应用级别框架，后续的发展大家也知道了，基于数据驱动的框架称为了主流，vue,react被广泛应用

大前端/跨端跨平台

随着移动端技术的发展，构筑一套代码多环境运行又成为了新的关注点，而浏览器/webView作为天然的跨端平台使得前端可以在不同的设备上面运行，后续许多跨端框架和方案的都可以使用 js配合对应模板语言进行开发，比如electron、react native、微信/支付宝小程序等等，还有一些跨平台框架也借鉴了数据驱动的模式进行设计，比如 flutter 等等，都有数据驱动设计的影子

前后端同构

由于 nodejs 在服务端的应用，本来由于代码维护问题而进行前后端分离的趋势，又出现了一些新的变化，通过应用框架的设计和工程化步骤，使得前端代码在进行编译处理之后，可以在 nodejs 服务上面运行，直接生成静态 html，解决了前后端分离带来的 SEO 问题和加载页面性能问题

web1.0/2.0/3.0

最近web3.0 这个名词火了起来，很多同学说只听过2.0，3.0又是个啥，简单研究了下，这几个版本主要是按照内容资产的生产与归属来区分的

• web1.0: 内容由平台/网站生产，归平台/网站所有，比如门户网站
• web2.0: 内容由用户生产，内容归平台/网站所有， 比如博客，微博，短视频平台等等
• web3.0: 内容由用户生产，内容基于区块链，归用户所有

前端技术的三驾马车

一切的根源 —— HTML

为啥说是一切的根源，因为作为网页来说，不管你多炫酷，多复杂，在页面中都是通过 html(HyperText Markup Language)超文本标记语言来展示的

html 作为一种标记语言，提供了标签用于描述文档，浏览器会根据标签去进行不同的解析，去展示文档，比如div标签表示一个行级的块状元素，而span表示行内的内联元素,table、tr、td组合可以被解析称为一个表格

html5 指的是html 4.01版本，是html 的第五个修订版，需要注意的 html5并非一种技术，而是标准， 一般指的是新的 html 标签+ css3 + bom/dom api的一整个组合，其大大的增强了网页的能力和应用范围。目前html6的标准也在起草种，相信网页会随着标准的推进具备更多能力，

需要注意的是，我们平常说的H5其实不是指html5，而是一种移动端网页的表现形式

资料

给你的页面化化妆 —— CSS

如果说 HTML 为网页确定了有那些内容，那么 CSS 就是用来修饰这些内容的。 CSS 的全称是Cascading Style Sheets(叠层样式表)，CSS 由以下三个部分组成

• 选择器(selector): 用于选择出来符合条件的标签元素，将属性和值作用于标签，选择器有一定的优先级，用于多个 CSS 作用于同个标签且存在同样属性时，确定生效的CSS，常用的选择器有标签选择器、ID 选择器、类型选择器等等
• 属性(property): 用于控制选择器生效时候的样式，CSS 规定的许多的属性,比如width,height,margin,padding等等
• 值(value): 用于确定属性的设置值

CSS 有三种添加的模式

• Inline: 通过 style属性添加到 html 标签中
• Internal: 通过<style>标签将 css 写入，<style>标签放置与head标签之中
• External: 用过<link>将 css 文件引入 html 文档中

CSS3版本添加了更多的选择器及属性，用来解决之前需要用 js 进行操作的样式，比如border-radius圆角，box-shadow阴影等等，除此之外还添加了许多控制动画的属性，使得可以直接进行通过 css 控制元素的动画

为了解决原生css 复用、嵌套，变量的问题，CSS预处理器被现代 web 开发广泛应用，目前比较常见的是less、sass/scss、stylus

css less VS sass VS stylus

控制你的页面 ———— JS

如果说 html 和 css 提供的是 web 页面展示的基础，那么 js 提供的是控制页面的能力，js 是一个总称，js 这门语言的全称为ecma script,而我们平常说的 js，还包括操作浏览器接口的 BOM api，还有操作页面元素 的 DOM api,还有 nodejs 的 api，ecma sciprt经过多年发展形成了多套标准，目前用的比较多的有ES2015, 还有一些语言的子集目前由于更加好的语言特性及严谨性，也被更多的人使用，比如typescript；作为web 开发来说，我们会通过bom、dom来对页面进行控制及功能增强，这部分和语言无关，主要是浏览器的功能增强，目前有越来越多的特性和能力随着浏览器的发展被加入到bom、dom api 之中，比如以下的一些新特性

• 启用多线程的 web worker
• 服务器和浏览器中间的 service worker，
• 用于页面绘图的 canvas api
• 用于音视频流播放处理的 MSE 等等

如果 js 要详细讲的话是会还在后面做一些专题来讲，这里只做一个简单的介绍

现代 web 研发流程

目前比较主流的研发模式是 web 应用通过 web 框架作为基础来建构，选择 js 的一种语言或者版本进行开发，通过包管理工具管理公共依赖，通过打包工具 进行资源的构建，通过一种模式发布上线

web框架选择

• React
• Vue

语言选择

• ES6
• typescript

包管理选择

• npm
• pnpm
• yarn

打包构建工具选择

• webpack
• rollup
• vite

部署发布模式选择

• 前后端分离
• 前后端同构服务端渲染

总结

上面主要把前端部分的具体概念和模块进行了介绍，后面我们再分别讨论