乐趣区

关于前端:Web标准与前端开发和前端必须知道的开发调试知识笔记

jiezi

前端开发与 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

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

退出移动版