01 关于前端开发

1. 前端开发的起源、架构、变迁

Web技术的架构

1989年诞生时，Web由三种技术构成：

HTML ： HTML的全称为超文本标记语言，是一种标记语言。
HTTP ：超文本传输协议（Hypertext Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。
URL ：在WWW上，每一信息资源都有统一的且在网上的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位器），它是WWW的统一资源定位标志，就是指网络地址。

这三种技术是最初的Web原型。

Web技术的变迁

只读时代（1989-2004）

HTML/CSS/JavaScript

单向发布
静态只读
链接跳转
刷新界面
表格对齐元素
CGI

体验时代（2005-2010）

Ajax /Web API /jQuery

动态交互
社交媒体
用户生成内容
单页应用
jQuery
YUI

敏捷时代（2010-2021）

Fetch /Node.js /Webpack

模块化
组件化
转译
打包
React.js
Vue.js

2. 前端应用的领域

To Business：一般指企业的应用。表现于网站，登录后提供各种服务的选项以管理资源，监控服务的状态，规模很大。
To Customer：最早网页在用户之间实现信息共享的作用，应用包括电商平台、在线教育、新闻资讯等。
To Developer：面向开发者的工具，平台和框架。整个Web开发的流程每个环节离不开工具的支持。

运行环境（浏览器）

主要包括桌面浏览器和移动浏览器两大形态。

Desktop：Google，Edge，Firefox，Safari等

Mobile：IOS/Android

五大浏览器：chrome、safari、Firefox、Opera、IE1.chrome

谷歌浏览器生产商：Google内核：webkit、blink2.Firefox

火狐浏览器生产商：Mozilla内核：gecko3.Safari

苹果浏览器生产商：苹果公司内核：webkit4.opera

欧朋浏览器生产商：挪威欧普拉软件公司内核：presto blink5.

IE 浏览器生产商：微软公司 Microsoft内核：trident

其他浏览器：大部分国产的浏览器（qq浏览器，uc浏览器，猎豹浏览器，360浏览器）基本上是在IE浏览器的内核上进行的二次开发现在国内市场上有许多双内核的浏览器，使用的是trident,webkit内核

服务器

NodeJs/ExpressJs/koa

服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它客户机（如PC机、智能手机、ATM等终端甚至是火车系统等大型设备）提供计算或者应用服务。服务器具有高速的CPU运算能力、长时间的可靠运行、强大的I/O外部数据吞吐能力以及更好的扩展性。

终端和跨端

命令行/终端：

Webpack CLI
Babel CLI
Vue CLI
React CLI

桌面跨端：

Electron
NW.js

移动跨端：

React Native
Flutter

02 关于Web标准

W3C组织

W3C：万维网联盟组织，用来制定web标准的机构（组织）。

W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。

为什么要遵循WEB标准呢？因为很多浏览器的浏览器内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量。因此需要指定统一的标准。

Web标准

Web标准：制作网页要遵循的规范。

Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。

1、Web标准包括三个方面：

结构标准（HTML）：用于对网页元素进行整理和分类。表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。行为标准（JS）：用于定义网页的交互和行为。根据上面的Web标准，可以将 Web前端分为三层，如下。

2、Web前端分三层：

HTML（HyperText Markup Language）：超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。 CSS（Cascading Style Sheets）：层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。 JS：JavaScript。从交互的角度描述页面的行为。相当于人的动作，让人有生命力。

思考

现有的网站很多都是不符合Web标准的。一方面是由于历史的客观原因，如浏览器的竞争、网页制作缺少统一规范等；另一方面也是由于网页制作者本身缺乏Web标准的思想。过于追求页面效果，造成页面代码繁杂混乱。一旦浏览环境发生变化，网页就会变得面目全非。究其原因，就是由于页面代码太随意，没有遵守网页标准进行开发。同时也过于依赖特定的浏览器。

网页标准化的实际意义是深远的。它可以使网站在任何浏览环境下都能够有效访问，这不单单是指浏览器的种类，如Intemet Explorer， Fire． fox，Opera等，还包括不同的浏览设备，如手机、掌上电脑、智能电子产品等等。同时要改变网页的样式也是很方便的，只需对负责表现功能的样式表进行修改，就可以让整个网站焕然一新，而不用再反复修改网页里面的内容。网页标准化还有利于促进语义网的形成和完善，因为网页标准是朝着XML作为网页标记语言这个方向发展的，将来的网页内容将不再是孤立的。

Web标准与前端开发 | 青训营