前端开发者指南2018

发表于 更新于 分类于

2018 前端开发者指南笔记

前端开发指南

何为前端开发者

Web 前端开发，也称客户端开发，是通过为网站或者 Web 应用编写 HTML 、CSS 和 JavaScript，使用户可以与之交互的一种实践，前端相关开发面临的挑战是，由于开发前端的工具和技术日新月异，开发者需要持续关注领域的发展。

2017 前端技术发展回顾

  1. HTML5.2 发布

  2. VUE 飞速发展

  3. 使用 Web 技术构建应用程序的前端 JavaScript 开发者变得越来越好，也越来越糟

  4. 涌现出诸多试图与主流 JavaScript 应用工具 React、Angular、Vue 相抗衡

  5. React 继续被追捧

  6. eslint、prettier 的结合使代码这件事更快，更轻松

  7. Flexbox 和 Grid 获得支持，未来是美好的

  8. 有了无头的 Chrome 了

  9. 未来将不需要 less sass

  10. css 革命正在进行 (flexbox grid css in js 等技术)

  11. Chrome 正在占领主导地位，担心历史是否会重演

  12. Prettier 从一个意想不到的地方，慢慢变成了主角（真的好用，谁用谁知道）

  13. 很多开发者采用静态检查，主要是出于主观原因和赶时髦，大多数开发者并不需要类型（我觉得这也是为什么脚本语言也能发展到如此规模），他们只是吧已经复杂的问题和解决方案变得更加复杂化，像大多数事情一样，这种趋势大部分是主观教条而非客观价格。

  14. 静态网站生成器，也慢慢出现在开发者的选项清单内。React 静态生成器

  15. Web 组件仍然在潜伏，等待开发人员的大力推动，但可能永远不会发生。

  16. JavaScript 趋于稳定，但是 css 开始爆发了，将会使开发人员疲惫不堪。css css in js

  17. yarn 似乎满足了需求，因为很多人从 npm 换到了 yarn ，然而 yarn 最大的价值在于它为 npm 带来了竞争，从而使 npm 变得更好

  18. ES 模块化将变为浏览器的一部分，如果使用 ES 模块，那么编译工具将是必须的。（webpack 将伴你我前行）

  19. 2018 开发者报告

  20. Cypress 作为一个完整的测试方案出现了，测试将会越来越好，对于应用程序的代码，端到端的测试才是重点（体会比较深的一点是，你修改了项目中多出文件，那么怎么保证代码没有出错呢，没有代码测试，只有一个一个去试）

  21. 在某些情况下 React 开始和 JQuery 一较高下

  22. webpack 的统治地位，被 parcel 分到了市场

  23. GraphQL 开始流行

  24. 所有现代浏览器都支持 ECMAScript

  25. React Router 开始稳定下来

  26. 移动开发，仍然艰难，而如今强烈倡导 web 平台为解决这一痛苦方案获得大量支持

2018 展望

  1. 在未来许多年里，没什么可以改变或者减少 React 的使用和普及

  2. 今年，GraphQL 将会取代很多 REST 接口

  3. 随着离线功能和无缝移动体验发展， web 会越来越原生化

  4. HTML 5.3 即将到来

  5. 推荐使用和学习 CSS transforms 3d、CSS transitions、CSS flexbox、CSS filters 和 CSS grid （都与 IE11 一下无缘）

  6. JavaScript 的使用将继续增长，不会出现任何放缓

  7. 通用、同构的 JavaScript 解决方案将继续发展 例如 next

  8. Web 组件仍然等待开发者的大力支持

  9. 相信将来的不久PostCSS,CSSnext 和 CSS in js 将会称为 css 预处理的最终解决方案

  10. 旧的以服务器为中心的单页模式（服务端渲染）将再次显现，但是有了一些新的变化，单页应用逐渐变得不那么流行，人们将会减少单页面应用的复杂性。

  11. 人工智能飞速发展，很好奇会给 web 发展带来什么

  12. Vue 使用可能会超过 Angular

  13. AR、AV、AI 将会继续发展，各行其是

  14. JavaScript 的 Symbol 和 Generators 语法可能会被大多数开发者忽略

  15. 越来越多的开发者脱离原生 JavaScript 去尝试其他衍生语言，但是就和离婚一样，人们只会转移问题而很少解决问题，偏好和价值只会被重拍，历史将会被重演

  16. 对于 UI 组件书理想的 css 仍在然所中，不会停止

  17. 状态管理得到重置，人们尝试简化它，希望今年是像 mobx 之类的解决方案能够发光的一年

前端实践

前端工作职位头衔

前端开发者

是最通用的，用来描述 HTML、CSS、DOM 和 JavaScript 拥有相关知识和技能，能够在 web 平台上进行技术工作的人的头衔

前端工程师（又称 JavaScript 开发者或者全栈 JavaScript 开发者）

这个头像通常给来自计算机科学，工程背景并使用相关技术进行前端工作的开发者，通常需要一个计算机科学学位和几年软件开发的经理。

CSS HTML 开发者

前端开发头衔，描述了开发者拥有 HTML 和 CSS 的相关技能，但不包括 JavaScript 和应用相关技能

前端网页设计师

当工作头衔中包含设计一词时，这意味着设计者拥有前端技能但同事叶拥有相关的设计技能

Web前端用户界面UI开发者/工程师

当 UI 或 界面 一词出现在头衔中，这意味着开发者应该掌握了前端开发或者前端工程技术下，同时掌握交互设计技术

移动端前端工程师

开发者拥有开发移动端前端的经验

前端 SEO 专家

SEO 技术

前端开发运维

包含前端技术和运维技术，就发者在软件实践的协同、集成、部署、和自动化评估方面有丰富经验

前端测试质量管理

拥有测试管理软件的单元测试、功能测试、用户测试和其他测试方面的丰富经验

注意：
如果在工作头衔中遇到了全栈，这意味着雇主所描述的是一个整个 Web、app 就发各方能负责的角色，很可能还包含后端

前端开发者使用的 Web 技术

一下是前端开发者必须掌握的核心技能：

  1. 超文本标记语言 HTML

  2. 级联样式表 CSS

  3. 统一资源定位器 URL

  4. 超文本传输协议 HTTP

  5. JavaScript 编程语言

  6. JavaScript 对象表示法 JSON

  7. 文档对象模型 DOM

  8. Web API 接口 HTML5 或浏览器 API

  9. Web 内容可访问性指南

超文本标签语言又称为 HTML

关于此部分的规范与文档

所有的 W3C HTML 规范

HTML 参考手册,有简体中文

级联样式表 CSS

所有 CSS 规范

CSS 参考手册，简体中文

超文本传输协议 HTTP

超文本传输协议 HTTP 是一个对分布式协作超媒体信息系统的应用协议，HTTP 是万维网数据通信的基础

HTTP 协议规范

HTTP2 协议

统一资源定位器 URL

统一资源定位器 URL 又被称为网页地址，是一个用于定位存于计算机网络中特定资源的参考，也指提取该资源的技术，URL 是统一资源识别器 URI 的一种，尽管很多人将这两个术语互相代指对方， URL 同时也指定了获取特定资源的方法， URI 对此并不适用， URL 大部分被用于代指 http 但也被用于文本传输 ftp， 电子邮件 mailto， 数据库链接 JDBC 和许多其他应用

URL 规范

URL 当前标准

文档对象模型 DOM

文档对象模型是一个跨平台独立的概念，用于表示 HTML，XHTML，和 XML 文档中的对象交互，每个文档中的节点都被以树状组成，称为 DOM 树，在 DOM 树中的对象可以通过方法来被修改和处理， DOM 的共有接口子它的程序接口 API 中已被声明

DOM 第三版规范

DOM 当前规范

JavaScript 编程语言

JavaScript 没啥说的了,为什么官方不能叫 JavaScript，而叫 ECMAScript，因为 JavaScript 是甲骨文的商标，别人不能用。

ECMAScript 规范，中文翻译版

Web APIs 又称 HTML5

当使用 JavaScript 编写网页代码时，有很多可以使用的 API

Web API 接口文档，中文版

JSON

这是浏览器与服务器异步通信，大量的替代了 XML ，尽管原先是从 JavaScript 脚本语言中提炼出来的， 但是 json 是一个与语言无关的数据格式，而且最早的 json 格式是由其他人提出的， ECMA 标准使用较少，金描述了允许的语法规则，而 RFC 还提供了一些语义和安全方面的考量，官方的 JSON 互联网媒体文件类型是 application/json JSON 的后缀名为.json

JSON 入门介绍

前端开发技能

除了 HTML、CSS、DOM、JavaScript、HTTP、URL 和浏览器开发知识之外，前端开发人员还可以掌握一下一项或者多项内容

内容管理系统

Nodejs

跨浏览器测试

跨平台测试

单元测试

跨设备测试

可访问性

搜索引擎优化

交互或用户界面设计

用户体验

可用性

电子商务系统

门户系统

线框图

css 布局网格

DOM 操作例如 jQuery

移动网络性能

负载测试

性能测试

渐进增强优雅降级

版本控制

MVC MVVM MV*

函数式编程

数据格式 例如 json xml

数据 API 例如 Restrul API

web 字体嵌入

可缩放矢量图形 SVG

正则表达式

内容策略

任务运行程序，构建工具，过程自动化

响应式网页设计

面向对象编程

应用程序构架

模块

依赖经理

包管理

JavaScript 动画

css 动画

图标图形

UI 小工具

代码质量测试

代码覆盖测试

代码复杂性分析

集成测试

命令行 CLI

模板策略

模板引擎

单页应用程序

XHR 请求

网络，浏览器安全

HTML 语义

浏览器开发工具

前端面试题

十道每个 JavaScript 开发人员都应该直到的

  1. 可以列举对 JavaScript 应用程序开发人员非常重要的两种编程范例吗？

JavaScript 是一个多范式语言，支持面向对象编程和函数式编程一起的命令式编程过程式编程，JavaScript 支持原型继承的面向对象

所以答案：
原型继承，函数式编程

学习部分：JavaScript 的两大支柱第 1 部分,原型

这篇文章对原型进行了一些讲解，大多是一些道理。

JavaScript 的两大支柱第 2 部分,函数式编程

这篇和上面的差不多

  1. 什么是函数式编程

函数式编程通过组合数学函数来成圣程序并且避免共享状态和可变数据，函数式编程是 JavaScript 中基本概念之一

通常提到函数式编程呢么一般会想到，纯函数，没有副作用，由简单的功能函数组成

  1. 函数式编程与面向对象编程右什么优缺点

面向对象的优点：很容易理解面向对象的基本该你你，并且易于解释方法调用的含义，面向对象程序员更倾向于使用命令式的风格，而不是声明式的风格，这种风格读起来就像一套简单易懂的计算机指令

面向对象的缺点：通常取决于共享状态，对象和行为通常在一个实体上加在一起，可以通过任意数量的具有非确定性顺序的函数随机访问，这可能会导致不良行为，例如竞争条件

函数式编程优点：使用功能范例，程序员可以避免任何状态或者副作用，从而消除由于多个功能集成相同资源而导致的错误，和面向对象相比，函数式倾向于从根本上简化并容易针对更一般的重用代码重新组合

函数式编程缺点：过渡使用函数式编程，可能会降低可读性，因为代码通常更加抽象，而且简介不太具体，和面向对象相比函数式编程学习路线更为陡峭，因为面向对象的广泛流行使得面向对象的语言和学习材料变得更具对话性，而且函数式编程经常使用微积分，单数和类别论中的语言习惯和符号，这些都需要在这些理论右经验和基础来理解。

  1. 什么是双向数据绑定和单项数据绑定，他们有什么不同

双向数据绑定意味着 UI 字段会动态绑定到数据模型，以便在 UI 字段更改时，数据模型一同更改，反之亦然

单向数据流意味着该模型是数据的唯一来源，用户界面触发消息中的变化，将用户意图交给模型，只有模型有权更改程序的状态，其效果是数据总是以单向的流动，使得维护和理解更加方便。

  1. 什么是异步编程，为什么他在 JavaScript 中很重要

同步编程意味着，除了条件和函数调用外，代码从上到下按顺序执行，会被运行时间长的任务堵塞，如网络请求和磁盘读写。

异步编程意味着引擎在事件中循环运行，当遇到堵塞任务时，请求开始，并且代码继续运行而不会堵塞结果，当相应就绪时，将触发中断，这将导致运行事件处理程序，控制流将继续执行，这样，一个单独的程序县城可以处理许多并发操作。

用户界面本质上是异步的，并且话费大量时间等待用户输入来中断事件循环并触发事件处理程序。

nodejs 在默认情况下是异步的，这意味着服务器以相同的方式工作，等待网络请求的循环，并在处理第一个请求时接受更多的传入请求

这在 JavaScript 中很重要，因为他非常适合用户界面代码，并且非常有利于服务器性能。

剩下五个看不懂。就不写了

前端面试题集合

前端面试题集合

JavaScript 小结

另一个面试题

面试准备

前端面试清单

前端开发学习

第二部分指出了自我学习导向学习，和定向学习，以便为开发人员使用。

尽管列出了一系列学习资源，或者记载了一个学习范畴，并不是说要学习所有内容，可以选择一个专业相关的知识，而下面则提供了该领域需要掌握的技能

自我向导学习

这一部分会聚焦个人可以利用的帮助自学过程的付费和免费资源

了解互联网/万维网

互联网或国际网，是网络和网络所串联成的庞大网络，这些网络以一组标准网络 TCP、IP 协议族相连，链接全世界几十亿个设备，形成逻辑上的单一巨大国际网络，由无数个局域网组成，通过光纤网络等技术相链接，互联网并不等同于万维网即 www ，万维网只是一个基于超文本相互链接组成的全球性系统，且是互联网所能提供的服务之一。

万维网是如何工作的

MDN 文档，这个理论短期内不会有实质性帮助，但是看过之后肯定会从中收益 – MDN 文档爸爸说的

互联网是如何工作的

了解 Web 浏览器

Web 浏览器通常称为浏览器是用于检索，呈现和遍历万维网上的信息资源的软件应用程序，信息资源右统一资源标识符 URI URL 标示，可以是网页，图像，视频或者其他内容，资源中存在的超链接使得用户可以轻松访问到其他相关资源，监管浏览器主要使用万维网，但他们也可以用于专用网络中的 web 服务或者文件系统中的文件提供的信息

前面是布局引擎，后面是 JavaScript 引擎

  1. Chrome ( 引擎 : Blink + V8)
  2. Firefox ( 引擎 : Gecko + SpiderMonkey)
  3. Internet Explorer ( 引擎 : Trident + Chakra)
  4. Safari ( 引擎 : Webkit + SquirrelFish)

从全世界使用份额来看，Chrome 市场占有率第一呀

无头浏览器 :

走近 Quantum : 什么是浏览器引擎 ?

域名

什么是域名

学习 HTTP

HTTP 超文本传输协议，是分布式、协作、超媒体信息系统的应用协议，HTTP 是万维网数据通信的基础

CORS 跨域资源共享是一种机制，允许网页向非本域名下的资源提供者请求首先限制的资源

WebSockets 是一种单个 TCP 链接上进行全双攻协议，WebSockets 通信协议在 2011 年被 W3C 确定为标准

HTTP 文档

MDN HTTP [阅读]

HTTP 视频/文章/教程
HTTP 状态码
CORS 规范
CORS
WebSockets

搜索引擎优化

了解 JavaScript

参考/文档:

了解 DOM BOM 和 JQuery

了解 web 字体，图标和图片

字体

图片

学习 web 浏览器 APIs

MDN 提供了大量有关 Web/浏览器 API 的信息。

除了 MDN，以下资源也有助于了解所有的 Web/浏览器 API：

学习 PWA

不像传统的应用程序，PWA 是传统 web 页面（网站）和移动应用之间的混合体。这个新的应用程序试图将现代浏览器的特点和移动体验的优势结合起来。

在 2015 年，设计师 Frances Berriman 和 Google Chrome 工程师 Alex Russell 提出了 “Progressive Web Apps”，用来描述通过现代浏览器来支持新功能的应用，包含 Service Workers 和 Web App 清单。它让用户将 web app 升级为本地系统最好的应用程序。

根据 Google 开发者提供的信息，它有以下优点：

  • 渐进式 - 适用于每个用户，不管浏览器如何选择，因为它是以渐进增强为核心开发的。
  • 响应式 - 兼容多种设备：桌面、移动端、平板或者未来的某些形态。
  • 网络低依赖 - Service workers 可以在离线或者低质量网络下工作。
  • 类似应用 - 像一个有 app 风格的交互和导航的应用程序。
  • 持续更新 - 随时一直都是最新的，多亏了 service worker 持续工作。
  • 安全 - 通过 HTTPS 协议提供服务，防止窥探和确保内容不被篡改。
  •  可被发现 - 由于 W3C 清单[6] 和 service worker 允许搜索引擎找到他们，从而将其识别为“应用”。
  • 粘性 - 借助推送通知功能可以维持用户粘度。
  • 可安装 - 用户可以添加常用的 app 到桌面，免去去应用商店下载的麻烦。
  • 可链接 - 通过链接即可分享内容，无需下载安装。

了解如何设计 JS API

学习无头浏览器

无头浏览器是一种没有图形用户界面的网页浏览器。

无头浏览器在类似于流行的 Web 浏览器的环境中提供了对网页的自动控制，但是是通过命令行界面或使用网络通信来执行。它们对于测试网页特别有用，因为它们能够以与浏览器相同的方式渲染和理解 HTML，包括诸如页面布局，颜色，字体选择和 JavaScript 与 AJAX 的执行等样式元素，这些元素在使用其它测试方法时通常是不可用的。Google 在 2009 年表示，使用无头浏览器可以帮助他们的搜索引擎索引到使用 AJAX 的网站的内容。

— 维基百科