这是我参与「第四届青训营 」笔记创作活动的第5天
关于前端开发
1. 前端开发的起源、架构、变迁
很多人分不清“上网”是上的哪个网?即使在互联网的诞生地也是如此。Web的普及和深入人心由此可见一般。上网指接入Internet,它是地球上相互连接的计算机构成的网络。计算机网络诞生于.上个世纪的60年代,标志性通信协议是TCP/IP。
-
只读时代(1989-2004)HTML/CSS/JavaScript
- 单向发布
- 静态只读
- 链接跳转
- 刷新页面
- 表格对齐元素
- CGI
-
体验时代(2005-2010)Ajax/Web API/jQuery
- 动态交互
- 社交媒体
- 用户生成内容(UGC)
- 单页应用(SPA)
- jQuery
- YUI
-
敏捷时代(2010-2021)Fetch/Node.js/Webpack
- 模块化
- 组件化
- 转译
- 打包(bundling)
- React.js
- Vue.js
2.前端应用的领域
- 浏览器
- 服务器
- 终端和跨端
3.前端的语言、框架、工具
语言
HTML:是最基础的网页开发语言
CSS:页面美化和布局控制
JavaScript:可以来增强用户和html页面的交互过程,可以来控制html元素(对html元素的属性和内容进行修改),让页面有一些动态的效果,增强用户的体验。
XML: xml是存储数据的,html是展示数据
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程
AJAX:异步的JavaScript 和 XML
JSTL:用于简化和替换jsp页面上的java代码
框架/工具
Bootstrap:前端开发的框架Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
Vue:是一个前端框架,让前端的业务逻辑和赋值分离。关注点就着落在了逻辑代码编写上。
Element-UI:element是前端ui框架
JQuery:框架。jQuery是JavaScript的第三方类库,补充JavaScript的不足,提供了更多方便的函数供调用者使用。
关于Web标准
在 Web 发展的早期,浏览器各自为政,技术无一致实现,这直接损害了设计师、开发者、用户和行业的利益。为了解决这些问题,Web 标准计划 (Web Standards Project, WaSP) 于 1998 年成立,目标便是促进核心的 Web 标准的推广,鼓励浏览器对标准的支持,为大家寻求一条简单而便利之路。
得益于前人努力,如今的现代浏览器表现已经越来越一致,进而催生出更多标准,有了这些标准我们可以开发出体验更好的 Web 应用。
这个是所有浏览器相关的技术标准: The Web platform: Browser technologies,从中能了解到健全发展的 Web 技术生态。
Web标准组织
说到 Web 标准,就不得不提制定这些标准的组织,这些标准不单只是由一个组织来制定,多个组织各自负责相关的技术领域,下面一一介绍。
W3C (World Wide Web Consortium)
W3C 组织为 Web 开发领域提出了很多建议,比如为 XHTML、XML、DOM、CSS 和 Web API 等技术实现提出了建议。你可能会注意到为什么说是提出建议,而不是标准呢?那是因为 W3C 自认为不是标准组织,他们只是组织了 Web 相关领域的专家,这些专家组成一支工作小组,工作小组就如何实现 Web 技术提出建议。尽管 W3C 对其建议的实现方案没有任何强制权力,但他们大多数的建议都被视为事实上的标准。
W3C 组织关注 DOM、CSS、HTTP、媒体、性能、安全、图形学、可访问性和用户隐私等方方面面的技术,在这里可以搜索相关技术: All Standards and Drafts。
从 W3C 组织成员的工作手册可以看到,一项技术从提出到成为标准,需要经过 4 个阶段。
W3C 技术建议的几个阶段
- WD (Working Drafts):草案阶段
- CR (Candidate Recommendation):候选阶段
- PR (Proposed Recommendation):提议阶段
- REC (W3C Recommendation):正式建议阶段
WHATWG (The Web Hypertext Application Technology Working Group)
WHATWG 工作小组成立于 2004 年,起因是 W3C 组织对 HTML 不再感兴趣,转而关注 XHTML 技术,部分 W3C 成员对此行为不满,因此他们决定建立一个新组织推动 HTML 发展,制定相关标准。如今 HTML5 技术能发展起来,也是得助于 WHATWG 小组。
WHATWG 小组因 HTML 而生,负责的 Web 标准主要是 HTML 相关技术,也涉猎一些 Web API,比如: HTML、DOM、浏览器兼容性、XHR)、Fetch、Storage 和 URL 等标准。在这里可以查看所有标准:WHATWG Standards。
WHATWG 组织没有明确说明,一项技术成为标准要经过哪些阶段,他们实行的是现行标准 (Living Standard),标准由相关负责人维护升级,并由开发者或浏览器厂商提议将新功能加入标准,这一协作过程通过 Github 的 Issues 来讨论。
如果仔细看 WHATWG 和 W3C 制定的标准,会发现有些标准互有重叠,两个组织都有制定相同的技术标准,比如 DOM 标准。有一些标准会在开头说明:“该标准已经不由我们来维护,请查看某某组织的最新标准”。但是其他一些标准并没有这样的说明,至于参考哪一个标准,我的方法是查看 MDN 相关技术文档下附加的标准规范链接。
ECMA
ECMA 组织负责很多与信息化相关的技术标准,其中应用最广的就是 TC39 委员会负责的 ECMAScript标准,这标准的实现就是 JavaScript。
通过 TC39 成员的工作手册可以看出,每一项对 ECMAScript 标准的更新,需要经过 5 个阶段。
- Strawman (Stage 0):提案纳入考虑中
- Proposal (Stage 1):明确提案的好处,以及可能带来的风险
- Draft (Stage 2):使用正式的规范语言描述语法和语义
- Candidate (Stage 3):根据使用者反馈进行改良
- Finished (Stage 4):准备正式加入 ECMAScript 标准
现在正在进行的提案可以在仓库 tc39 proposals 查看,从中能够学习到最新的语法并参与讨论。
IETF
IETF (The Internet Engineering Task Force) 组织主要负责制定互联网基础架构的标准,比如 TCP/IP 和 FTP 协议。
The Unicode Consortium
The Unicode Consortium 组织负责 Unicode 标准,正如他们所说,“我们为每个字符提供一个唯一的编号,无论平台是什么,无论程序是什么,无论语言是什么”。
总结
对一般 Web 开发来说,我们用不上晦涩难懂的标准文档。但学习标准我们可以收获很多,比如解决一些棘手的 bug,获取第一手学习资源,全面深入地理解相关技术,了解技术的发展前沿。