前端开发基础术语总结

作为初入前端，或是对前端感兴趣的网友，最迷茫而又迫切的问题便是：前端开发包含哪些内容，如何快速学习前端知识？

《前端开发者手册》，便是一本不错的启蒙读物。它介绍了前端开发岗位、前端开发相关的知识术语，前端开发的相关资源，以及如何学习前端开发。看完后，你会对前端有一个整体的了解。

花了一个下午的时间看完这本前端开发者手册，感觉还是蛮有收获的，拓宽了我对前端的认知。不过该手册是翻译版本，读起来不是那么顺溜，会有些枯燥。

另外手册中所提供的链接资源，大多数都是国外网址，网页内容是英文的，让人头疼，初学者了解下即可，不必深入纠结，否则会增加对前端的畏惧心理。等学习一段时间后，再查阅国外资源会是不错的选择。

下面的内容是我整理的的知识点：《前端开发者手册》-来自ido321博友的翻译分享。

第一部分：前端开发实践

什么是前端开发者?

一个前端开发者, 要会使用Web技术(如：HTML,CSS,DOM和JavaScript)设计和开发网站应用. 网站应用, 或运行于Web平台 之上, 或用于编译非Web平台环境的输入(如：NativeScript).

前端的工作职称

对于前端开发者最普遍的职称是 “前端开发者” 或者 “前端工程师”, 可以根据任何包含 “前端”, “客户端”, “web UI”, “CSS”, “HTML” 和 “JavaScript” 的职称推断一个人对 HTML, CSS 和 JavaScript 的了解程度.

前端开发者/工程师 (又称作 Web前端开发者/工程师, 客户端开发者/工程师, 前端软件开发者/工程师 或 UI 工程师)

这是通用的职称, 用于描述一个开发者对 HTML, CSS, JavaScript 有很熟练的掌握, 并能在Web平台上应用这些技术.

CSS/HTML开发者

这个职称用于描述一个开发者精通于 CSS 和 HTML, 但是对 JavaScript 和应用不熟悉.

前端JavaScript(可选, 应用程序)开发人员

当职称中包含 “JavaScript应用程序” 时, 这就表示此开发人员是一个拥有高级编程, 软件开发和应用程序开发技能(如: 有构建前端应用程序的实践经验)的高级 JavaScript 开发者.

前端Web设计师

当职称中包含 “设计师” 时, 这就表示此设计师不仅拥有前端技能(如: HTML & CSS), 还拥有专业的设计技能(视觉设计和交互设计).

Web/前端用户界面(又称 UI)开发者/工程师

当职称中包含 “界面” 或者 “UI” 时, 这就表示此开发人员除了掌握前端技能, 还拥有交互设计技能.

移动/平板前端开发者

当职称中包含 “移动” 或者 “平板” 时, 这就表示此开发人员在开发运行在移动或平板设备上的前端应用(或本机程序, 或运行在Web平台, 例如浏览器)很有经验.

前端 SEO 专家

当职称中包含 “SEO” 时, 这就表示此开发者对一个 SEO 策略定制前端技术有着丰富的经验.

前端可访问性专家

当职称中包含 “可访问性” 时, 这就表示此开发者对定制支持可访问性要求和标准的前端技术有着丰富的经验.

前端开发运维

当职称中包含 “开发运维” 时, 这就表示此开发者对软件开发实践与合作, 集成, 部署, 自动化和测量有着丰富的经验.

前端测试/QA

当职称中包含 “测试” 或 “QA” 时, 这就表示此开发者对测试和软件管理, 包括单元测试, 功能测试, 用户测试和 A/B 测试有着丰富的经验.

前端全栈工程师

若你在职称中碰到 “全栈” 或 类似于 “Web开发者” 一样的职位, 这些可能是雇主用来描述这个角色负责 Web/应用程序 开发的各个方面, 即包括前端和后端(还可能包括设计).

前端开发者常用的网络技术

• Hyper Text Markup Language(超文本标记语言, 又称 HTML)
• Cascading Style Sheets (层叠式样式表, 又称 CSS)
• Document Object Model (文档对象模型, 又称 DOM)
• JavaScript Programming Language (JavaScript编程语言, 又称: ECMAScript 6, ES6, JavaScript 2015)
• Web API’s (Web应用程序接口, 又称 HTML5 API 或浏览器 API)
• Hypertext Transfer Protocol (超文本传输协议, 又称 HTTP)
• Uniform Resource Locator’s (统一资源定位符, 又称 URL)
• JavaScript Object Notation (JavaScript对象表示, 又称 JSON)
• Web Content Accessibility Guidelines (网页内容无障碍设计指南, 又称 WCAG) & Accessible Rich Internet Applications (富Internet应用程序的无障碍设计, 又称 ARIA)

前端开发的技术栈

对于任何类型的前端开发人员, HTML, CSS, DOM, JavaScript, HTTP/URL 和浏览器利用是基本的技术要求.

对于HTML, CSS, DOM, JavaScript, HTTP/URL 和浏览器开发之外的, 一个前端开发者还应该掌握下面技术列表中的一个或多个:

• Content Management System (内容管理系统, 又称 CMS)
• js
• Cross-browser testing (跨浏览器测试)
• Cross-platform testing (跨平台测试)
• Unit Testing (单元测试)
• Cross-device testing (跨设备测试)
• Accessibility / WAI-ARIA (无障碍访问/无障碍富Internet应用程序)
• Search Engine Optimization (搜索引擎优化, 又称 SEO)
• Interaction or User Interface design (交互或用户设计)
• User Experience (用户体验)
• Usability (可用性/易用性)
• E-commerce Systems (电子商务系统)
• Portal Systems (门户系统)
• Wireframing (框架)
• CSS layout / Grids (CSS 布局/栅格系统)
• DOM manipulation (e.g. jQuery) (DOM 操作)
• Mobile Web Performance (移动Web性能)
• Load Testing (载荷测试)
• Performance Testing (性能测试)
• Progressive Enhancement / Graceful Degradation (渐进增强/优雅降级)
• Version Control (e.g. GIT) (版本控制)
• MVC / MVVM / MV (MV框架)
• Functional Programming (函数式编程)
• Data Formats (e.g. JSON, XML) (数据格式)
• Data API’s (e.g Restful API) (数据API)
• Web Font Embedding (Web字体嵌入)
• Scalable Vector Graphics (可伸缩向量图形, 又称 SVG)
• Regular Expressions (正则表达式)
• Content Strategy (内容策略)
• Microdata / Microformats (微数据/微格式)
• Task Runners, Build Tools, Process Automation Tools (任务管道, 构建工具, 过程自动化工具)
• Responsive Web Design (响应式设计)
• Object Oriented Programming (面向对象编程)
• Application Architecture (应用架构)
• Modules (模块)
• Dependency Managers (依赖关系管理)
• Package Managers (包管理)
• JavaScript Animation (JavaScript 动画)
• CSS Animation (CSS 动画)
• Charts / Graphs (图表/图形)
• UI widgets (UI工具集)
• Code Quality Testing (代码质量测试)
• Code Coverage Testing (代码覆盖测试)
• Code Complexity Analysis (代码复杂度测试)
• Integration Testing (集成测试)
• Command Line / CLI (命令行/命令行界面)
• Templating Strategies (模板策略)
• Templating Engines (模板引擎)
• Single Page Applications (单页应用)
• XHR Requests (aka AJAX) (XHR 请求, 又称 AJAX)
• Web/Browser Security (Web/浏览器安全)
• HTML Semantics (HTML 语义化)
• Browser Developer Tools (浏览器开发者工具)

团队中的前端

一个构建专业的Web网站或软件的最小化团队也应该包含下列角色:

• 视觉设计 (字体, 颜色, 字距, 视觉概念&主题)
• UI/交互设计/信息架构师 (制定框架, 指定所有用户交互, UI功能和结构信息)
• 前端开发者 (写能够在客户端/设备上运行的代码)
• 后端开发者 (写能够在服务端运行的代码)

这些角色是根据技能的覆盖排序的(后面的角色的技能会覆盖前面的). 一个前端开发者很擅长处理 UI/交互设计, 后端开发者也一样. 团队成员承担多个角色是很少见的.

一个大的团队可能包含下列角色, 而不是如上面所展示的:

• 视觉设计
• UI/交互设计/信息架构师
• SEO 策略师
• 前端开发者
• 开发-运维工程师
• 后端开发者
• API 开发者
• 数据库管理员
• QA 工程师/测试人员

如何成为前端开发者?

如果我从现在开始决定成为一名前端开发人员, 我会努力按照下面所概括的过程进行学习. 学习过程中, 我会假设你是自己最好的老师.

• 粗略了解 Web 是怎么工作的, 确保你知道域名, DNS, URL, HTTP, 网络, 浏览器, 服务器/服务托管, 数据库, JSON, API, HTML, CSS DOM 和 JavaScript. 了解这些的目的是确保你知道它们如何一起工作以及每部分用于做什么. 专注于高水平的前端架构概述. 从简单的网页 制作开始, 并简单学习一下本机 Web 应用(又称 SPA).
• 学习 HTML, CSS, 可访问性和 SEO.
• 学习 UI 设计模式的基本原理, 交互设计, 用户体验设计和可用性
• 学习编程的基本原理
• 学习 JavaScript
• 学习 JSON 和 API
• 学习 CLI/命令行
• 学习软件工程实践(如: 应用设计/架构, 模板, Git, 测试, 监控, 自动化, 代码质量, 开发方法学)
• 定制自己的工具箱
• 学习 Node.js

Internet/web

互联网使用网络协议套件(TCP / IP)链接全球数十亿的设备, 是一个从区域到全球, 由数以百万计的私人, 公共, 学术, 商业, 和政府网络组成的全球性网络系统, 并通过一系列广泛的电子, 无线, 光纤网络技术相互链接. 互联网提供了广泛的信息资源和服务, 如早期的超文本文档和应用万维网(WWW), 电子邮件, 电话和点对点文件共享网络.

第二部分：前端开发学习—自主学习

（原文主要是解释一些前端相关的专业术语，并提供很多资源链接。但链接内容大多都是英文网站，让人头疼，所以就没有添加链接。不过，在文章结尾，我会附上我收藏的前端资源收藏夹，里面资源非常多，而且都是中文的，非常大的福利哦！）

Web浏览器

web 浏览器(通常被称为浏览器)是一个用于检索、展示和遍历在万维网上的信息资源的软件应用程序. 信息资源被定义成统一资源定位符(URI/URL). 它可能是网页, 图片, 视频或者一个内容片断. 超链接的出现使用户能轻松的将浏览器导航到相关的资源, 尽管浏览器主要是为了使用万维网, 但它们还可以用来访问 Web服务器在私人网络所提供的信息或文件在文件系统.

主流的浏览器 如下:

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

最常用的无壳浏览器:

• PhantomJS(引擎: Webkit + SquirrelFish)
• slimerjs(引擎: Gecko + SpiderMonkey)
• TrifleJS(引擎: Trident + Chakra)

域名系统(又称 DNS)

对于个人电脑、服务器或连接到互联网任何资源, 或专用网络而言, 域名系统(DNS)是一个分层分布式命名系统, 用给每个参与的实体分配域名的方式将各种信息联系起来, 更重要的是, 为能访问全球的计算机服务和设备, DNS 将所需的数字 IP 地址转变为人类容易记住的域名. DNS 是大多数互联网服务的必要功能, 因为这是主要的 IP 地址服务.

HTTP/网络(包括 CORS 和 WebSockets)

HTTP, The Hypertext Transfer Protocol, 即超文本传输协议, 是一个用于分布式, 协作和超媒体信息系统的应用协议, 是 WWW 数据通信的基础. – Wikipedia

CROS, Cross-origin resource sharing, 即跨域资源共享, 是一种允许网页上受限制的资源(如: 字体)可以从该资源所在域之外的另一个域被请求. – Wikipedia

WebSockets, WebSocket 是一种协议, 提供了在一个 TCP 连接上进行全双工通信的渠道. 在 2011 年, IETF 将 WebSocket 协议标准化为 RFC 6455, 并且 W3C 正在标准化 Web IDL 的WebSocket API.

Web 主机

Web 主机是一种网络托管服务, 允许万维网访问个人和组织他们的网站, 由拥有服务器的企业提供空间, 或者租赁给客户使用, 并提供网络连接. Web 主机也能提供数据中心空间和连接到互联网上位于数据中心的其他服务器, 称为主机托管

用户界面和交互设计

用户界面设计: 用户界面设计(UI)或用户界面工程师是为机器或者软件做用户界面设计的, 如: 计算机, 家用器具, 移动设备和其它电子设备, 专注于最大限度地提高用户体验. 用户界面设计的目标是尽可能是使用户交互变得简单有效, 实现用户的操作目标(设计是以用户为中心的). – wikipedia

交互设计模式: 设计模式是一种记录解决常见设计问题解决方案的形式化方式. 建筑师 Christopher Alexander 在城市规划和建设体系结构中已经介绍了这种方式, 并已用于其他学科, 包括教学, 教育学和软件架构和设计. – wikipedia

用户体验设计: 用户体验设计(又称 UXD 或 UED 或 XD), 是通过提高可用性、可访问性以及在用户跟产品交互时的愉悦来提高用户体验的过程. 用户体验设计从完成传统的人机交互(HCI), 已经扩展到要处理产品或服务中能被用户感知的所有方面. – wikipedia

人机交互: 人机交互(HCI)不仅特别关注人和计算之间的界面, 也会研究设计和使用 Web 技术. 人机交互领域的研究人员都会去关注当前人类与计算机交互的方式和为人类与计算机提供新的交互方式的设计技术.

HTML & CSS

HTML – 超文本标记语言, 通常被称为 HTML, 是被用于创建网页的标准标记语言. Web浏览器能将 HTML 文件渲染成可见的或者可听到的. HTML 随着线索提示, 语义化地描述了网站的结构, 使它成为一种标记语言, 而不是编程语言.

CSS – 层叠式样式表(CSS)是用于描述外观和格式化标记语言编写的文档的样式表语言. 尽管经常被用来改变用 HTML 和 XHTML 编写的网页和用户界面的样式, 但也可用于任何 XML 文档, 包括纯 XML, SVG 和 XUL. 跟 JavaScript 和 HTML 一样, CSS是被大多数网站用于为Web应用程序创建富有吸引力的网页, 用户界面的一种基础技术, 也为许多移动应用程序创建用户界面.

SEO: 搜索引擎优化

搜索引擎优化(SEO)是在自然的搜索结果中, 影响一个网站或者网页可见性的过程. 一般来说, 越靠前出现(或在搜索结果页中权重高的网页)的网页, 和频繁出现在搜索结果列表中的网站, 就能获取更多来自搜索引擎的用户. SEO 会定位于不同类型的搜索, 包括图片搜索, 本地搜索, 视频搜索, 学术搜索, 新闻搜索和特定行业的垂直搜索引擎.

JavaScript

JavaScript 是一种高级的, 动态的, 无类型的和解释型的编程语言, 它已经在 ECMAScript 语言规范中被标准化. 跟 HTML 和 CSS 一样, JavaScript 是 WWW 内容生成的第三种必不可少的技术; 大多数的网会使用Javascript, 并且 Javascript 被所有现在Web浏览器支持. JavaScript 基于原型和函数优先的特点, 使它成为多范型的语言, 支持面向对象的, 命令式的, 和函数式编程风格. JavaScript 能提供 API 来处理文本, 数组, 日期和正则表达式, 但不包括任何 I/O, 如网络, 存储或图形工具, 对这些的依赖取决于宿主环境中嵌入了什么.

DOM, BOM & JQuery

DOM – 文档对象模型(DOM)用于代表和对象交互的HTML, XHTML 和 XML 文档, 是一种跨平台和语言无关性的约定. 每一份文档的所有节点被组织成一种树结构, 称为 DOM 树. DOM 对象通过使用对象上的方法被处理和操作, 一个 DOM 对象的公共接口被指定为它的应用程序编程接口(API). – wikipedia.org

BOM – 浏览器对象模型(BOM)是一种浏览器规范, 代指 Web 浏览器暴露出的对象. 与文档对象模型不同的是, 目前并没有关于浏览器对象模型的标准和严格定义, 因而浏览器厂商可以按照他们的意愿, 采取任何方式来实现 BOM. – wikipedia.org

JQuery – JQuery 是一个跨平台的 JavaScript 库, 其设计目的是简化客户端的 HTML 脚本操作. JQuery 也是目前最流行的 JavaScript 库, 在目前排名前1000万的网站中, 65% 的网站安装了 JQuery. JQuery 是免费的, 基于 MIT 协议的开源软件.

Web 字体 & 图标

Web 字体是指在 WWW 上使用的字体. 当 HTML 文档第一次被创建时, 字体风格和样式会被每个 Web 浏览器的设置所控制, 因为直到 1995 年网景介绍了标记之前, 个人网页没有控制字体显示的方式, 而标记在 HTML 3.2 规范中被标准化. 然而, 被标记指定的字体必须安装在用户的电脑上, 或者是一种可以依赖的字体, 如: 浏览器默认的 sans-serif 字体或 monospace 字体. 在1996 年 发布的 CSS 1.0 规范也提供指定使用字体的功能.

1998 年, CSS 2.0 规范发布, 意图通过字体匹配, 合成和下载技术, 改善字体的选择过程, 但这些技术并没有得到使用, 并在 CSS2.1 规范中被移除了. 然而, 在 1997 年发布的 IE 4.0 增加了对字体下载的支持, 随后, CSS 3 的字体模块变包含了字体下载, 并且 Safari 3.1, Opera 10 和 Mozilla Firefox 3.5 实现了这一功能, 随后便增加了 Web 字体和所使用字体的下载. –

无障碍设计

无障碍设计是指产品, 设备, 服务, 或者环境是为残疾人设计的. 无障碍设计的概念意味着与一个人的辅助技术(例如, 电脑屏幕阅读器)相兼容, 确保直接访问(即独立)和”间接访问”.

无障碍设计可以理解为 “能够访问”, 并对一个系统或实体是有利的, 其侧重于使身体残障, 或有特殊需要, 或要依赖辅助技术的人群能够访问 Web. 然后, 研究和开发无障碍设计对每个人都带来了好处.

无障碍设计不应该和可用性混淆. 大多数情况下, 可用性是指产品(如: 设备, 服务, 或者环境)能在特定的环境下被特定的用户使用, 来高效地实现制定目标.

无障碍设计和通用性设计是息息相关的. 通用型设计是指产品的创造过程中, 产品对人们是可用的, 并尽可能最大范围覆盖各能力范围内的人群和各种情形下的操作, 即对所有人是可访问的(无论他们访问 Web 是否有障碍).

Web/浏览器 API

BOM 和 DOM 并不是唯一的浏览器 API, 在浏览器内部的 Web 平台上, 它们是可用的. DOM 和 BOM 并不是一切, 但是一个用于浏览器编程的接口可以被认识一个 Web 或者 浏览器 API(悲剧的是, 这些 API 曾被称为 HTML 5 API, 这会和 HTML 5 自身的规范/标准混淆, 因为 HTML 5 规范特指 HTML 5 标记语言). Web 或浏览器 API 也会包括访问设备的 API(如: Navigator.getBattery()), 通过平板和手机设备上的浏览器可以利用这些 API.

JSON(JavaScript Object Notation)

JSON, 有时也称 JavaScript 对象表示, 是一种使用人类可读的文本传输由键值对组成的数据对象的开放格式. 对于异步浏览器/服务器通信(AJAJ), JSON 是主要的数据格式, 很大程度上代替了 XML(AJAX).

尽管最初是从 JavaScript 脚本语言衍生而来, 但是 JSON 是语言无关性的数据格式, 在许多编程语言中, 代码解析和生成 JSON 是很容易的.

JSON 的格式最初是由 Douglas Crockford 指定的, 但目前却被描述成两种标准: RFC 7159 和 ECMA-404. ECMA 标准只允许被合法的语法语句描述, 而 RFC 则提供了一些语义化描述和安全考虑. JSON 的官方网络媒体类型 application / JSON, 扩展名是 .json.

静态网页生成器

静态网页生成器, 是使用服务器端代码编写(如: ruby, php, python, nodeJS 等…), 用静态文本数据 + 模板, 生成从服务器发送到客户端的静态 HTML 文件.

Web 开发者工具

Web 开发者工具允许开发者测试和调试代码, 它们不同于网站生成器和 IDE, 因为 Web 开发者工具不直接参与网页的创建, 而是用于测试网站或 Web 应用的用户界面接口的工具.

Web 开发者工具是浏览器的加载项或内置功能. 当今最流行的web浏览器, Google Chrome, Firefox, Opera, Internet Explorer, 和 Safari 都内置工具用于帮助开发者, 并且在各自的插件下载中心, 还提供很多额外的加载项.

Web 开发者工具允许开发者使用各种各样的 Web 技术, 包括 HTML, CSS, DOM, JavaScript 和 其它浏览器能够处理的组件. 由于日益增长的需求, 更多流行的 Web 浏览器包括了更多面向开发人员的功能.

尽管大多数浏览器都配备了开发者工具, 但是 谷歌开发者工具 是目前谈论最多, 应用最广泛的开发者工具.

命令行

命令行接口或命令语言解译器(CLI), 也称命令行用户界面, 控制台用户界面和字符用户界面(CUI), 是一种用户以连续的文本(命令行)的形式向程序提出需求, 与计算机程序交互的方式.

Node.js

Node.js 用于开发服务端 Web 应用, 是一个开源的, 跨平台的运行时环境. Node.js 应用由 JavaScript 编写, 可以在 OS X, Microsoft Windows, Linux, FreeBSD, NonStop, IBM AIX, IBM System z and IBM i 上的 Node.js 运行时环境运行. Node.js 的开发和维护有 Node.js 基金会提供支持, 这是 Linux 基金会的一个合作项目.

Node.js 提供一个事件驱动的体系架构和非阻塞的 I/O 设计来优化应用程序的吞吐量和实时web应用程序的可伸缩性, 它使用谷歌的 V8 JavaScript 引擎来执行代码, 并有大量的由 JavaScript 编写的基础模块. Node.js 包含内置的模块, 允许应用程序作为一个web服务器而不依赖类似 Apache HTTP Server, Nginx 或 IIS 的软件.

React

React – 用于构建用户界面的JAVASCRIPT库

仅仅是UI – 许多人使用React作为MVC架构的V层。 尽管React并没有假设过你的其余技术栈， 但它仍可以作为一个小特征轻易地在已有项目中使用

虚拟DOM – React为了更高超的性能而使用虚拟DOM作为其不同的实现。 它同时也可以由服务端Node.js渲染 － 而不需要过重的浏览器DOM支持

数据流 – React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

包管理器

包管理器或包管理系统是一系列软件工具的集合, 这些软件工具用和电脑操作系统一致的方式, 使应用的安装, 升级, 配置和删除软件包的过程自动化, 它通常维护一个数据库软件的依赖和版本信息, 防止软件不匹配和无法跟踪.

版本控制

软件配置管理, 版本控制的一个组成部分, 也称为校正控制或源码控制, 用于管理文档, 计算机程序, 大型网站和其它信息集合的变化. 变化通常被定义为一串数字或字母代码, 被称为 “版本编号”, “版本标识”, 或简称”版本”. 举个例子, 初始的文件集合是”版本1″, 当第一个改变文件时, 就变成了”版本2″等等. 每一个版本都和一个时间戳和做出改变的人联系在一起. 版本可以被比较, 恢复和跟其它文件合并.

构建和任务自动化

构建自动化是软件构建和相关流程的自动化过程, 包括: 将计算机源码编译成二进制代码, 打包二进制代码和运行自动化测试. –

网站性能优化

Web 性能优化, WPO, 或网站优化是提高用户浏览器的网站加载和显示速度的知识领域. 由于网速整体提高了, 很适合网站的管理者和维护者去考虑网站呈现给访问者所花费的时间了.

JS 测试

单元测试 –  在计算机程序中, 单元测试是一种软件测试方法, 通过独立的代码单元, 一个或多个计算机程序模块的集合, 和相关联的控制数据, 使用程序和操作过程进行测试, 以确定它们是否适合使用. 直观地说, 可以将一个单元视为应用程序最小的, 可测试的一部分. – Wikipedia

功能测试 – 功能测试是一个质量保证(QA)的过程, 也是一种基于在软件组件测试规范之下的测试案例的黑盒子测试. 功能测试会检查程序的输入和输出, 但很少去考虑内部地程序结构(跟白盒子测试不同). 功能测试通常描述了系统”做什么”. – Wikipedia

集成测试 – 在软件测试中, 集成测试(也称集成和测试, 缩写为 I&T)是各个软件模块结合起来, 作为一个整体进行测试的阶段, 之后便是单元测试和验证测试. 集成测试把已经通过的单元测试作为输入模块, 将它们组织成更大的聚集, 在集成测试中应用计划用于这些聚集而被定义的测试, 并提供为集成测试做好准备的集成系统作为其输出.

无壳浏览器

无壳浏览器是指没有图形用户界面的 Web 浏览器.

无壳浏览器拥有一个和受欢迎的 Web 浏览器相似的环境, 并提供了网页的自动化控制, 但要通过命令行接口或使用网络通信工具执行. 对于测试网页, 无壳浏览器是非常有用的, 因为和普通浏览器一样, 它们能渲染和理解 HTML, 包括样式元素, 如: 页面布局, 颜色, 字体选择, JavaScript 的执行和 AJAX, 但是当使用其它方法时, Ajax 通常就不可用了. 在 2009 年, 谷歌声称使用无壳浏览器有助于搜索引擎使用 Ajax 从其它网站索引内容.

离线开发

离线开发(又称离线优先)是一个领域常识和围绕设备并不总是连接到互联网或电源的开发实践的讨论.

多平台开发

一个网站或应用不仅能运行在各种台式机, 笔记本电脑, 平板和手机, 还能运行于少部分其它设备(手表, 温控器, 电冰箱等等). 你将怎么决定支持哪些平台和为支持这些平台, 怎么去开发, 这被称为多平台开发策略. 接下来, 我会列出常见的多平台开发策略:

• 创建响应式 Web 设计 (RWD) 网站/APP
• 创建RESS (基于服务端组件的响应式 Web 设计) 网站/APP
• 创建自适应/渐进增强地 网站/APP
• 对每一个或每一组平台建立一套网站, Web 应用, 本地应用或混合应用
• 尝试修改你用策略1, 策略2或策略创建的应用. 这可能和点缀与屏幕大小无关的部分 UI 一样简单, 也可以试图完全支持其他平台与整个

第三部分：前端开发工具

（这部分，我摘取的就更少了，对于初学者大概扫一下即可，等到具体学习的时候，再回过来选择自己需要的开发工具。）

常用前端开发工具

开发工具:

• es
• it
• codeKit
• prepros
• Browsersync
• 2.0.
• Wraith

在线代码编辑:

• com
• net
• com
• net
• io
• Plunker

查找工具:

• io
• com
• built with
• com
• The Tool Box
• com
• co

了解代码编辑器

源代码编辑器是一个文本编辑程序, 专门为编辑计算机程序源代码的程序员而设计的, 它可能是一个独立的应用程序或内置在集成开发环境(IDE)或web浏览器中. 源代码编辑器是最基本的编程工具, ,作为程序员的基本工作就是编写和编辑源代码.

代码编辑器应该有如下特点:

• 一份不错的关于如何使用编辑器的文档
• 报告 HTML, CSS 和 JavaScript 代码的质量
• 为 HTML, CSS 和 JavaScript 提供语法高亮
• 为 HTML, CSS 和 JavaScript 提供代码自动完成
• 通过插件的方式自定义编辑器架构
• 有大量的第三方仓库/插件社区, 能够用于自定义编辑器
• 轻量, 简单, 不耦合代码(不需要编辑代码等等)

推荐使用sublime_text/notepad++代码编辑器。

浏览工具

JS 浏览工具:

• js
• js
• js
• html2canvas

参考工具(查看浏览器是否支持某特性)

• com
• HTML5 Please
• HTML5 test
• Browserscope
• com
• com/
• Platform status
• Browser support for broken/missing images
• Big JS-Compatibility-Table
• info
• What Web Can Do Today

浏览器开发/调试工具:

• Opera Dragonfly
• Safari Web Inspector
• Firefox Developer Tools
• Chrome Developer Tools(aka DevTools)
  • Per-Panel Documentation
  • Command Line API Reference
  • Keyboard & UI Shortcuts Reference
  • Settings
• IE Developer tools(aka F12)
• js

同步浏览工具:

• Browsersync

浏览器编码工具(判断用户的浏览器是否支持某特性):

• Modernizr
• ES Feature Tests

浏览器的各种 polyfills/shims:

• js
• webshim
• HTML5 Cross Browser Polyfills
• console-polyfill
• io
• sockjs

浏览器承载测试/自动化:

• browserstack[$]
• browserling[$]
• Sauce labs[$]
• Selenium
• com

无壳浏览器:

• PhantomJS
• slimerjd
• TrifleJS

无壳浏览器的自动化工具:

• nightwatchjs
• casperJS
• Nightmare
• js

浏览器 hacks:

• com

CSS 工具

桌面 & 移动应用 CSS 框架:

• Semantic UI
• Foundation
• Bootstrap
• Metro UI
• css
• Concise
• Materialize
• Material Design Lite(MDL)
• Base

移动应用 CSS 框架:

• Ratchet

DOM 工具

DOM 库/框架:

• jQuery
• js
• keypress
• js
• io

DOM 性能分析:

• DOMMonster

JavaScript 工具

JS 库:

• lodash
• js
• js
• js
• js
• js
• com
• js
• wait
• async
• js

编译转换 (ESX to ESX):

• Babel

JavaScript 兼容性检查:

• info

代码检查:

• jshint
• eshint
• JSlint
  • com

单元测试:

• Mocha
• QUnit
• Jasmine
  • Jest

单元测试的断言库:

• js
• Chai
• js

单元测试监控, 存根和模拟:

• js

编码规范检查:

• JSCS

代码格式化/美化:

• jsfmt
• esformatter
• js-beautify

性能测试:

• jsperf
• js

可视化, 静态分析, 复杂性, 覆盖工具:

• org
• istanbul
• js
• Coveralls[$]
• Plato
• escomplex
• Esprima

优化:

• UglifyJS 2

混淆:

• Javascript 混淆器
• JScrambler[$]

在线代码编辑器:

• com
• net
• net
• co

在线正则表达式编辑器/可视化工具:

• regex101
• regexper
• debuggex
• RegExr

编码规范:

• js 规范指南
• JavaScript 编码原则
• JavaScript 规范指南

静态网页生成器工具

JS 网页生成器:

• Metalsmith
• harp

JS 博客网站生成器:

• io
• io

网站生成器列表:

• net
• staticgen.com

APP(桌面, 移动, 平板等) 工具

前端 App 框架:

• AngularJS& Batarang
• Backbone& Marionette
• React& React-router & Flux & React Developer Tools
• js& vue-loader & vue-router
• Ember& Ember Inspector
• Aurelia
• Polymer& Iron Elements & Paper Elements

全栈 JS App 平台:

• Meteor
• ie
• MEAN

移动 Web UI/网站/App 框架:

这些解决方案可以被用到任何地方, 包括 Web 视图(Web 平台和浏览器引擎等) APP.

• Ratchet
• Kendo UI Mobile
• Mobile Angular UI
• Framework7

本机混合移动 webview 框架:

典型解决方案是使用 Cordova, crosswalk, 或者自定义 Webview 作为本机 API 的桥梁.

• ionic
• io

本机混合移动开发 webview 环境/平台/工具:

驾驶式洗地机典型解决方案是使用 Cordova, crosswalk, 或者自定义 Webview 作为本机 API 的桥梁.

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/26391318/viewspace-2128332/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/26391318/viewspace-2128332/