[TOC]

0X00 前端标准与研发工具

原文地址: [全栈之路-前端篇 | 第三讲.基础前置知识【前端标准与研发工具】学习笔记] https://mp.weixin.qq.com/s/JpM5PO2a3wZUeFcrzzN8bg

8.行业标准

前端技术中有众多的开发标准,在后续的学习之中免不了打交道,此处我们简单熟悉了解下常见标准。

Web 1.0 / 2.0 / 3.0

随着互联网的范式不断迭代升级,从只有静态网页的Web1.0到用户直接交互的Web2.0,再到用户自主控制数据的Web3.0。

weiyigeek.top-Web1.0/2.0/3.0

weiyigeek.top-Web1.0/2.0/3.0


那Web 1.0、Web 2.0 和 Web 3.0之间有什么区别呢?

  • Web 1.0 :“只读”的信息展示平台

在 Web 1.0 时代,即从 1991 年到 2004 年,是万维网革命的第一阶段,通常称为只读网络。网站是信息性的,仅包含超链接在一起的静态内容,或者简单地说,没有CSS、动态链接、交互性(如登录用户、对博客文章的评论等)。此时我们作为一个普通的互联网用户,只能去看也就是 read-only 不能写。

例如:新浪、网易、搜狐性门户站点,只能浏览查看后台管理员发布的文章。

而随着互联网发展,交互的方式也进步了,作为互联网普通用户,此时互联网不但可以读了而且还可读可写了,这就是web2.0。

  • Web 2.0 :“互动”的内容生产网络

在 Web 2.0 时代,从 2004 年至今,是万维网革命的第二阶段,通常称为读写网络。目前大家都都生活在Web 2.0时代,也离不开Web 2.0带来的便捷,此时社交网络包含许多在线工具和平台,人们可以在其中分享他们的观点、意见、想法和经验,它突出了用户生成的内容、可用性和最终用户的互操作性。

Web 2.0 应用程序倾向于与最终用户进行更多交互。因此,最终用户不仅是应用程序的用户,而且是工具的参与者。例如:新浪微博,你可以发表自己的微博;Facebook 你可以发表自己的动态;微信你可以发表自己的朋友圈等;以及博客站点提供与浏览者评论交流。

Web 2.0 的缺点:“中心”的单一化环境,在查看缺点之前,让我们先看看传统的 web2.0 应用程序是如何工作的。

如下图所示,客户端(用户)将向服务器发出 HTTP 请求,如果一切正确,它将将该网页作为响应发回。可以看到它有一个主要缺陷是所有数据都存储在由公司控制的集中式服务器上,Facebook、谷歌和 Twitter 等开始将用户数据存储在他们的服务器中,以便他们可以通过网络为我们提供更好的内容。这反过来又会使我们在他们的网站上停留的时间更长,从而为这些公司提供更多的广告收入。

这些公司最终开始将我们的信息出售给广告商,侵犯个人隐私外还在我们身上盈利!无疑这个是中心化的时代。

weiyigeek.top-Web2.0客户端用户请求流程

weiyigeek.top-Web2.0客户端用户请求流程

  • Web 3.0 :“去中心”的个性化环境

Web3.0 概念旨在创建一个去中心化但安全的互联网,人们可以在其中安全地交换金钱和信息,而无需中间商或大型科技公司。与将数据存储在单个数据库或云提供商中的 Web2.0 不同,Web3.0 应用程序要么在区块链上运行,要么在点对点节点(服务器)上运行。

采用去中心化的模式,用户的所有数据都是通过钱包/私钥来控制的,而这个时候,数据的所有权属于用户自己,而不是平台方。在web3.0中平台方变成了一个个DAPP,他们通过区块链上现有的基础协议和功能,来搭建属于自己的应用平台。比如在以太坊上智能合约使用EVM虚拟机,数据存储和交互使用swarm协议,信息的传递使用whisper协议,DAPP通过构建自己的激励代币ERC20 token来实现整个应用的激励,从而避免了作恶的可能性,也通过这种方式使得生态能够稳健运行。

简而言之,Web3.0将是一个不会依赖任何中心组织、完全由用户掌控的时代。它的到来将彻底打破现在科技巨头的垄断,改写当前数字经济的运行方式,并引发大量自下而上的创新。

关于从Web1.0-Web 3.0的变迁和概念特点,总结如下所示:

  • Web1.0:Yahoo、新浪和搜狐等,内容为主,少交互;
  • Web2.0:Facebook、微信和抖音等,关系为主,多交互;
  • Web3.0: 区块链、物联网和人工智能等,数据为主,去信任去中介化的价值互联。
weiyigeek.top-Web1.0-3.0区别

weiyigeek.top-Web1.0-3.0区别

W3C/WHATWG

什么是W3C?

万维网联盟(外语缩写:W3C)创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构, W3C标准定义了一个用于应用程序开发的开放式Web平台,该平台具有前所未有的潜力,使开发人员能够构建丰富的交互体验,由任何设备上都可以使用的海量数据存储提供支持,W3C制定这些技术规范和指南的过程旨在最大限度地达成对技术报告内容的共识,确保高技术和编辑质量,并获得W3C和更广泛社区的认可。
官网地址: https://www.w3.org/standards/

其中标准不是某一个标准,而是一系列标准的集合,网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)

即对应的标准也分三方面:
1.结构化标准语言包括:HTML、XHTML(可扩展超文本标记语言)、XML(可扩展标记语言)、HTML5标准、SVG (可缩放的矢量图形) 标准
2.表现标准语言包括: CSS(层叠样式表)标准
3.行为标准包括: DOM(文档对象模型)标准 / ECMAScript 标准 (ECMA-262)

参考地址: https://www.webstandards.org/learn/faq/


什么是WHATWG?

Web 超文本应用技术工作组 (WHATWG) 的组织于2004年成立,它是一个由四个主要的浏览器厂商(包括苹果、谷歌、微软、Mozilla)组成的行业组织。

该组的创建是由于 W3C 开发更现代的 HTML 标准的速度缓慢,并且计划将 HTML 转换成一个名为 XHTML 的变体(具有类似 XML 的结构),浏览器厂商不赞同这种做法,最终WHATWG 击败了W3C(万维网标准机构),赢得了 HTML 和 DOM 的控制权(标准)。

小小插曲: WHATWG(当时由来自苹果、Mozilla 和 Opera 的成员组成)认为,W3C 的领导层(还包括许多与浏览器无关的实体)并没有把 Web 开发社区的最大利益放在心上。

他们表示反对并开发了后来成为 HTML 5 标准的东西,在浏览器厂商的支持下,W3C 和 WHATWG 宣布,他们终于把他们的分歧放在一边,并签署了一份新的谅解备忘录,并且 W3C 正式批准将其作为 HTML Web 标准的下一个主要迭代。

根据这份新协议,W3C 正式发布未来的 HTML 和 DOM 标准,并支持 WHATWG,将控制权完全交还给浏览器厂商。取而代之,W3C 及其数百名成员将起草未来的 Web 标准需要包含什么特性的“建议”, 然后,WHATWG 将决定把哪些加入到他们的产品中。

当前由 WHATWG 维护的 HTML Living Standard 将成为 HTML 标准的官方版本, DOM Living Standard 也是如此。


WHATWG 和 W3C 的合作

由于认为有两个不同的 HTML 和 DOM 规范声称是规范性的信念通常对社区有害,并且将工作重新组合在一起的共同愿望,W3C 和 WHATWG 协商(部分)如下,如果感兴趣可参考下述链接:

  1. W3C 和 WHATWG 在 WHATWG 存储库中协同处理 HTML 和 DOM,以生成标准和建议/审核草稿快照。

  2. WHATWG 维护 HTML 和 DOM 标准。

  3. W3C 直接在 WHATWG 存储库中促进社区工作(桥接社区,开发用例,提交问题,编写测试,调解问题解决方案)。

  4. W3C 停止独立发布与 HTML 和 DOM 相关的指定规范列表,而是将 WHWWG 审核草案纳入 W3C 建议书。

参考来源:


HTML、HTML5、XHTML、XML

什么是HTML?

HTML(超文本标记语言 —— HyperText Markup Language)是构成 Web 世界的一砖一瓦, 它定义了网页内容的含义和结构。
其通常与CSS(层叠样式表)连用,他们两个是构建 Web 的核心技术。前者HTML提供页面的结构,后者CSS提供(视觉和听觉)布局。


什么是HTML5?

HTML5 是 (HyperText Markup Language 5) 的缩写,“HTML5”一词被广泛用作指代现代网络技术的流行语,HTML5 技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,它由不同的技术构成,其在互联网中得到了非常广泛的应用,HTML5中还结合了其他元素,对原有的功能进行调整和修改,针对视频、音频、图像、动画以及与设备的交互都进行了规范。

标准参考: https://html.spec.whatwg.org/multipage/ && https://www.w3.org/html/


HTML 历史版本

HTML 1.0 产生于1990年,1997年HTML4.0成为互联网标准, 2008年发布了HTML5它是互联网的下一代标准,2014年10月W3C发布了HTML5的最终版。

扩展:随着YouTube彻底抛弃了Flash,实现向HTML5的全面过渡,越来越多的网站平台都开始转向使用HTML5开发。


什么是XHTML?

XHTML是HTML的一个变体,它使用 XML的语法,可扩展标记语言。XHTML有所有相同的元素(对于段落等)作为 HTML 变体,但语法略有不同, 因为XHTML是一个XML应用程序,可以使用其他XML带有它的工具(例如 XSLT、 用于转换XML内容的语言)。


什么是XML?

XML(可扩展标记语言)是一种简单的基于文本的格式 用于表示结构化信息:文档、数据、 配置、账簿、交易、发票等等。 它派生自一种较旧的标准格式,称为 SGML(ISO 8879),以便更适合Web使用。
其用途是共享结构化信息,在程序之间,人与人之间,计算机与人之间,两者兼而有之本地和跨网络。

标准参考: https://www.w3.org/standards/xml/


扩展参考

W3C HTML+CSS介绍: https://www.w3.org/standards/webdesign/htmlcss
WHATWG 发布的技术标准: https://spec.whatwg.org/


CSS 标准

什么是CSS?

CSS( Cascading Style Sheets , ——级联样式表)是描述结构化文档呈现的语言 (如 HTML 和 XML),包括颜色、布局和字体,它允许人们调整演示文稿 到不同类型的设备,例如 大屏幕、小屏幕或打印机。
CSS 独立于 HTML 和 可与任何基于 XML 的标记一起使用语言, HTML 与 CSS 的分离使得维护网站、共享变得更加容易,以及跨页面样式表和定制页面到不同的环境,当前最新版本为 CSS 3.0。

标准参考: https://www.w3.org/Style/CSS/


DOM 标准

什么是DOM?

DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML 文档交互的 API。
DOM 是载入到浏览器中的文档模型,以节点树的形式来表现文档,每个节点代表文档的构成部分(例如:页面元素、字符串或注释等等)。

扩展知识
DOM 是万维网上使用最为广泛的 API 之一,因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建,移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。

DOM 并不是天生就被规范好了的,它是浏览器开始实现JavaScript时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在WHATWG 维护 DOM 现存标准。

标准参考:https://dom.spec.whatwg.org/


SVG 标准

什么是SVG?

可缩放矢量图形(Scalable Vector Graphics,SVG)基于 XML 标记语言,用于描述二维的矢量图形。

能做什么?

SVG 作为一个基于文本的开放网络标准,SVG 能够优雅而简洁地渲染不同大小的图形,并和CSS、DOM、JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上,SVG 相对于图像,就好比 HTML 相对于文本。
SVG和传统的点阵图像模式(如 JPEG 和 PNG)不同的是,SVG 格式提供的是矢量图,这意味着它的图像能够被无限放大而不失真或降低质量,并且可以方便地修改内容,无需图形编辑器。通过使用合适的库进行配合,SVG 文件甚至可以随时进行本地化。

当前 SVG 是由万维网联盟(W3C)自 1999 年开始开发的开放标准。


WebFonts 标准

什么是WebFonts?
WebFonts是一种技术,它使人们能够在Web上按需使用字体,而无需在操作系统中安装。W3C拥有通过HTML、CSS2和SVG下载字体的经验。直到最近,由于缺乏可互操作的字体格式,可下载字体在Web上并不常见。WebFonts计划通过创建一种行业支持的、开放的Web字体格式(称为“WOFF”)来解决这一问题。


JavaScript、EcmaScript 标准

什么是Javascript?

JavaScript(缩写:JS)是一门完备的动态编程语言。当应用于 HTML 文档时,可为网站提供动态交互特性。由布兰登·艾克(Brendan Eich,Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人)发明。
JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式,完整的JS实现包含三个部分:ECMAScript,文档对象模型和浏览器对象模型。

除此之外,JavaScript 的流行程度,随着除浏览器外最流行的跨平台 JavaScript 运行环境——Node.js 平台的成功而大大提升。Node.js 使开发者可以在 PC 上使用 JavaScript 作为脚本语言以自动化处理和构建功能完备的 HTTP 和 Web Sockets (en-US) 服务器。

应用场景:

JavaScript 的应用场合极其广泛,简单到幻灯片、照片库、浮动布局和响应按钮点击,复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。
JavaScript 相当简洁,却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具,可以使 开发工作事半功倍。


什么是EcmaScript?

JavaScript 和 JScript 与 ECMAScript 兼容,但包含超出 ECMAScript 的功能,简单的说ECMAScript有的JS都有。
由于发展初期,JavaScript的标准并未确定,同期有Netscape网景的JavaScript,微软的JScript和CEnvi的ScriptEase三足鼎立。直至1997年,在ECMA (欧洲计算机制造商协会-European Computer Manufacturers Association) 的协调下,由Netscape、Sun、微软、Borland组成的工作组确定统一标准ECMA-262,称之为ECMAScript,

EcmaScript 版本:ES5于2009年发布;ES6于2015年发布,也称ES2015;ES7于2016年发布,当前最新版为ECMAScript 7。

标准参考:


温馨提示:

  • ECMA:读音类似“埃科妈”,是欧洲计算机制造商协会(European Computer Manufacturers Association)的简称,是一家国际性会员制度的信息和电信标准组织。
  • Ecma 国际:1994 年之后,由于 ECMA 组织的标准牵涉到很多其他国家,为了体现其国际性,更名为 Ecma 国际(Ecma International)。
  • ECMAScript: 由 Ecma 国际在标准 ECMA-262 中定义的脚本语言规范, JavaScript 是 ECMA-262 标准的实现和扩展。
  • ECMA-262:Ecma 国际的标准,都会以 Ecma-Number 命名,ECMA-262 就是 ECMA 262 号标准,具体就是指 ECMAScript 遵照的标准。1996 年 11 月,网景公司将 JavaScript 提交给 Ecma 国际进行标准化, ECMA-262 的第一个版本于 1997 年 6 月被 Ecma 国际采纳。

温馨提示:虽然最常见的脚本语言ECMAscript(更广泛地称为JavaScript)是由Ecma开发的,但浏览器中提供的许多API都是由W3C定义的。例如,ECMAScript 规范并没有描述文档对象模型(DOM),该模型由 万维网联盟(W3C)制定。


小程序(MiniApp) 标准

什么是小程序?

MiniApp是一种新的移动应用程序格式,一种依赖于Web技术(特别是CSS和JavaScript)并与本机应用程序功能集成的混合解决方案。
超级应用程序是一个托管和支持其他应用程序(即小应用程序)的软件平台,通过使用平台的资源来执行它们。

应用场景&特点
MiniApps因其在一些超级应用程序上的使用而流行起来,因为它诞生了一些字符,有助于填补Web和本机之间的空白。

  • 它无需安装。
  • 多个 Web 视图以提高性能。
  • 它提供了一些通过本机访问操作系统功能或数据的机制。
  • 内容通常更值得信赖,因为应用程序需要由平台验证。
  • 一个小应用可以分发到多个小应用平台(Web、本机应用程序,甚至操作系统),这些平台还提供小程序的入口,以确保用户可以轻松发现它。


扩展学习: 小应用并非旨在取代渐进式 Web 应用程序 (PWA)、本机应用程序或 Web。

其主要区别如下

  • PWA可以在浏览器中的几乎任何支持Web的环境中运行,而MiniApp绑定到特定平台或超级应用程序
  • 分发机制的不同,MiniApps打包和独立,PWA的资源分布在网络上。
weiyigeek.top-MiniApp应用和PWA的架构图

weiyigeek.top-MiniApp应用和PWA的架构图

下表总结了其中一些差异:

特征 渐进式网络应用程序 小程序
源代码 标准标记语言 (HTML)、样式表 (CSS) 和脚本 (JavaScript)。 HTML、CSS 和 JavaScript 的非标准方言
已部署格式 Web资源(主要:HTML,CSS,JavaScript代码和WebAssembly模块) HTML,CSS,JavaScript和其他资源打包在ZIP容器中。
包装 否。Web 上链接的资源。 是的。每个供应商不同的封装格式。
需要在 Web 服务器上托管文件 是的
免安装使用 是的,在浏览器中运行。 超级应用或操作系统上运行。
使用独立图标安装 从浏览器或应用市场(可选)
服务业 访问网络应用程序接口 访问非标准 Web API,包括某些系统本机 API

标准参考: https://www.w3.org/TR/mini-app-white-paper/


9.研发工具

俗话说,工欲善其事必先利其器,作为一个前端开发者,必须要有适合自己的开发编辑器、浏览器调试器工具以及有一定的美工,图像处理功底,其次是了解学习在企业开发中协同开发最重要的代码版本管理相关工具。

开发编辑器

由于市场上开发工具很多,此处作者介绍最常用的几款前端开发工具(PS:当然也可以使用其做其他编程开发)。

Visual Studio Code (首选)

Visual Studio Code,简称VS code,是微软公司开发的一款轻量级的开发工具,它是基于开源构建即免费自由,支持市场上众多开发语言,包括但不限于(Java、Go、Javascript、Python、C++、C#)等。

其特点如下:

  • 开源,免费。
  • 智能提示,借助 IntelliSense 超越语法突出显示和自动完成功能,它提供基于变量类型、函数定义和导入模块的智能补全功能。
  • 调试功能强大,启动或附加到正在运行的应用,并使用断点、调用堆栈和交互式控制台进行调试。
  • 内置 Git 命令,查看差异、暂存文件并直接从编辑器进行提交。
  • 可扩展和可定制,市场应用上有众多强大的插件,实现编辑器功能增强。
  • 自信而轻松地进行部署,借助 Microsoft Azure,您可以部署和托管React,Angular,Vue,Node,Python(以及更多!)站点,存储和查询关系和基于文档的数据,并使用无服务器计算进行扩展。(当然也能借助插件实现其他云服务器部署)
  • 跨平台,其支持Windows、Linux、以及苹果 MacOS 系统上运行。

VS 官网(下载递增)地址: https://code.visualstudio.com/
Github 项目地址: https://github.com/Microsoft/vscode

weiyigeek.top-VS官网下载示例图

weiyigeek.top-VS官网下载示例图

温馨提示:Visual Studio Code 编辑器常规配置以及常用插件可以参考此篇文章 【 https://blog.weiyigeek.top/2019/3-8-375.html#1-Visual-Studio-Code-编辑器


Sublime Text

Sublime Text 是一个轻量、简洁、高效、跨平台的编辑器, 当前版本为 Sublime Text 4

其特色功能如下:

  • 良好的扩展功能,官方称之为安装包 (Package)。
  • 右边没有滚动条,取而代之的是代码缩略图,这个功能非常赞
  • 强大的快捷命令 “可以实时搜索到相应的命令、选项、snippet 和 syntex, 按下回车就可以直接执行,减少了查找的麻烦。”
  • 即时的文件切换。
  • 随心所欲的跳转到任意文件的任意位置。
  • 多重选择 (Multi-Selection) 功能允许在页面中同时存在多个光标。
  • 支持 VIM 模式
  • 支持宏,简单地说就是把操作录制下来或者自己编写命令,然后播放刚才录制的操作或者命令。
  • 支持GPU渲染, 它可以在Linux、Mac和Windows上使用GPU渲染界面

官网地址: https://www.sublimetext.com/

weiyigeek.top-Sublime Text下载示例图

weiyigeek.top-Sublime Text下载示例图


WebStorm

WebStorm 最聪明的JavaScript IDE,是由JetBrains公司推出,WebStorm 是一个适用于 JavaScript 和相关技术的集成开发环境。类似于其他 JetBrains IDE,它也会使您的开发体验更有趣,自动执行常规工作并帮助您轻松处理复杂任务,有30天试用期限,或者免费的教育版本。它可以轻松进行 JavaScript 开发:

  • 代码检测,更可靠和更易于维护的代码。
  • 享受高效的编码,得益于 JavaScript 开发所需的全部功能开箱即用,您可以直接开始编码
  • 减轻处理复杂任务的压力,WebStorm 将简化这些和其他具有挑战性的任务,以便您专注于大局。

其特色功能如下:

  • 专门针对 JavaScript 打造: 无论您是使用 JS、TS、React、Vue、Angular、Node.js、HTML 还是各种样式表,WebStorm 都能满足您的需求。
  • 最智能的编辑器: 自动补全代码、检测错误和冗余并提供修复建议,以及帮助您安全地重构代码。
  • 内建开发者工具: 使用 WebStorm 调试和测试您的客户端和 Node.js 应用,并利用版本控制。充分使用 linter、构建工具、终端和 HTTP 客户端,这些