前端开发与 Web 规范

对于前端开发

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

• Web 自 1989 年诞生时由三种技术形成：HTML、HTTP、URL。CSS 和 JavaScript 是过几年后才呈现的。

• Web 的架构和变迁：

  • 只读时代（1989-2005）：HTML/CSS/JavaScript
  • 体验时代（2005-2010）：Ajax/Web API/jQuery
  • 麻利时代（2010- 至今）：Fetch/NodeJs/Webpack

前端利用的畛域

• To Business，体现为一个为企业提供许多品种的服务的网站，规模宏大业务宽泛的一个畛域。
• To Customer，直接触达客户的网站，包含电商平台、在线教育、手机端的 H5 等等，都是 ToC 的利用。
• To Developer，进步 Web 开发效率的工具，比方 VS Code 等代码编辑器。

前端语言、框架、工具

• 前端语言：

  • HTML -> Structural
  • CSS -> Presentational
  • JavaScript -> Behavioral
  • WebAssembly 当初也能够在浏览器中运行

• 常见前端框架

  • NodeJs —— Ryan Dahl
  • Babel —— Sebastian McKenzie
  • Webpack —— Tobias Koppers
  • Koa —— TJ Holowaychuk
  • React —— Facebook
  • Vue —— 尤雨溪

• 前端开发

  • 浏览器，举荐浏览 深刻了解古代浏览器
  • 网络，举荐浏览 An overview of HTTP
  • 理解学习服务器端开发

前端学习路线图

前端学习路线图 Frontend Developer Roadmap

对于 Web 规范

理解 Web 规范组织

• W3C: World Wide Web Consortium
• ECMA: Ecma International
• WHATWG: Web Hypertext Application
• IETF: Internet Engineering Task Force

W3C 与 ECMA

• W3C 规范

  • 官网：https://www.w3.org
  • GitHub：https://github.com/w3c
  • 标准查问：https://www.w3.org/TR

• Ecma TC39

  • 官网：https://www.ecma-international.org
  • TC39：https://tc39.es
  • GitHub：https://github.com/tc39

W3C 流程

W3C 标准制订流程：

TC39 流程

ECMA TC39 标准制订流程：

如何参加

• 关注会议

  • W3C 会议

    • 年度大会：Advisory Committee、Technical Plenary and Advisory Committee
    • 工作组会议：每月会议、各种研讨会

  • ECMA 会议

    • General Assembly 年度大会
    • TC39 会议

前端必须晓得的开发调试常识

前端 Debug 的特点

• 多平台
  浏览器、Hybrid、NodeJs、小程序、桌面利用 ……
• 多环境
  本地开发环境、线上环境 ……
• 多工具
  Chrome devTools、Charles、vConsole……
• 多技巧
  Console、BreakPoint、sourceMap、代理 ……

chrome devTools

在浏览器界面中右键“查看”或按 F12 关上，理解各个板块的作用。

• Elements 能够用于批改增加元素和款式等
• Console 控制台能够用于打印日志和 debug 等

• Sources

  • 能够用于查看页面资源文件、预览代码、各种断点调试和 debug 等
  • 前端代码天生具备 ” 开源 ” 属性，出于平安思考，JavaScript 代码通常会被压缩，压缩后的代码只有一行，会变得不可浏览。为了解决这个问题，监控平台存储 SourceMap，利用 SourceMap 映射源代码，调试时能够定位到源代码的中央。为了平安，当我的项目上线到服务器后再将 souceMap 删除
• Performance 用于性能剖析等
• Network 统计和剖析网络申请信息和状态、抉择网速等
• Application 展现与本地存储相干的信息：Local Storage、Session Storage、IndexedDB、Web SQL、Cookie

挪动端 H5 调试

• 真机调试，应用手机扫码或应用数据线连贯电脑进行调试

• 代理调试，常用工具：

  • Charles: 适宜查看、管制网络申请，剖析数据
  • Fiddler: 与 Charles 相似，适宜 Windows 平台
  • Whistle: 基于 Node 实现的跨平台 Web 调试代理工具

罕用开发调试技巧

• 线上即时批改 Overrides

  • 关上 Sources 面板下的的 Overrides
  • 点击 Select folders for Overrides. 抉择一个本地的空文件夹目录
  • 容许受权
  • 在 page 中批改代码，批改实现后保留
  • 关上 devTools，点击右上角的三个小点 -> More tools -> Changes，就能看到所有批改了

• 利用代理解决开发阶段的跨域问题

  • 利用代理服务器转接，解决跨域。客户端向代理发送一个申请并指定指标，而后代理向指标服务器转交申请并将取得的内容返回给客户端
  • 反代理技术。以代理服务器来承受 internet 上的连贯申请，而后将申请转发给外部网络上的服务器，并将从服务器上失去的后果返回给 internet 上申请连贯的客户端，此时代理服务器为反向代理服务器

• 启用本地 source map

  • 线上不存在 Source Map 时能够应用 Map Local 网络映射性能来拜访本地的 Source Map 文件

• 小黄鸭调试大法（doge

  传说中程序巨匠随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，而后具体地向鸭子解释每行代码，而后很快就将问题定位修复了。——《程序员修炼之道》