伴随着 W3C 协议规范的不断更新，以及现代化浏览器技术的快速进步，Web 前端技术整体取得了日新月异发展，交互体验更加丰富与多样化，与此同时业务逻辑也在极速的膨胀。开发人员函需从大量 DOM 底层处理的劳动中解放出来，更加从容的面对纷繁复杂的各式交互需求。本文开头先简单的梳理一下历史，然后基于现代化前端框架的主要特性，逐一与 Backbone 进行比较和剖析。

从前端技术发展趋势的角度而言，目前层出不穷的现代化前端框架的诞生，都可以认为是 Angular 和 Backbone 等古典前端框架设计思想走向融合之后的产物。虽然截至到本文执笔的时间点，Backbone 已经略微old school，但之所以依然单独对 Backbone 着重笔墨，主要是在组件化和作用域控制等方面，Backbone 更加接近于现代化前端框架的设计理念，而这两点又正好是同一时期的 Angular 并没有解决好的问题。

开发小组在 2015 年 11 月的时候，就已经开始尝试使用webpack+babel+react+reflux技术栈，但是团队对这种编译式前端开发的反馈并不友好，一方面 webpack 1.x 版本的打包效率仍然较差，每次保存操作后页面 reload 的速度缓慢如蜗牛，非常影响开发过程中的心情愉悦指数。另一方面，团队的同学们对于传统jQuery+backbone+handlebar+requirejs开发方式带有思维惯性，不太能接受 JSX 和 ES6 模块化的写法。

对于 React 的组件化思想，笔者本人非常推崇，但是遗憾 facebook 并未提供出解决组件间通讯的官方实现，其 Virtual DOM 与 Webpack.sourcemap 结合使用后，debug 变成一件非常困难的事情，并未在实际开发中体现其性能和效率上的优势。且因为社区驱动的 Reflux**、Redux** 的存在，实质上又为开发带来了额外的复杂度。更具有决定因素的是，截至在 2015 年底 React 依然停留在 0.14.x 版本，技术栈本身还处于不断成熟的过程，API 也一直在调整与变化。最终从技术成熟度的角度考量，还是稳妥的选择了 **Angular 1.6.x** 版本。

JavaScript 是一款基于原型的的多范式动态脚本语言，支持命令式、函数式以及面向对象式的编程风格。其标准化工作主要由欧洲计算机制造商协会（ECMA，European Computer Manufacturers Association）负责，其语言标准被称为ECMAScript，其它组织可以遵循该标准开发各自的 JavaScript 实现，例如 Firefox 内置的 SpiderMonkey 以及 Chrome 内置的 V8 解析引擎（ECMAScript 规范文档主要针对解析引擎的开发人员，而非 JavaScript 脚本的编写人员）。

2012 年之后推出的 Web 浏览器都完整实现了 ECMAScript 5.1 标准，而 2015 年发布的 ECMAScript 6 标准（官方称为 ECMAScript 2015，俗称为 ES6），目前已经被 Firefox 和 Chromium 以及 NodeJS 进行了较为完整的实现，所以本文将会基于此介绍 JavaScript 的重点语法特性，以及一些较为用常用的核心工具函数，本文在写作过程当中参考了 Mozilla 开发者社区的 《JavaScript Guide》 和 《JavaScript Reference》 两篇官方文档。

伴随Vue、Angular、React等编译式前端框架的崛起，前端开发人员逐渐从繁琐的 DOM 操作当中解脱出来。但是在项目实践过程当中，依然存有诸多问题需要通过直接操作 DOM 来解决，虽然现代化浏览器已经支持selectAll()等 HTML5 新特性，但是针对一些强调页面兼容性的场景，为了屏蔽各款浏览器解析引擎所遵循规范的差异，依然需要借助于jQuery来完成 DOM 文档操作。

因此jQuery这款诞生于 2006 年的 JavaScript 库，依然在现代化前端开发当中扮演着较为重要角色。本文结合笔者 Web 前端开发工作当中积累的实践经验，较为系统的总结了jQuery实践过程当中一些比较容易被开发人员所忽略的问题。例如 jQuery 对象与 DOM 对象的相互转换、jQuery 选择器性能、异步对象$.Deferred()以及 JavaScript 性能优化相关的话题。

本文翻译自 Mozilla 社区的《HTML Reference》，包含了 HTML5 新增的元素标签及属性，并对使用场景、语义化用法进行了简要说明，便于快速定位日常开发所需要的 HTML 标签，书写更加优雅的语义化 DOM 结构。本文所涉及的 HTML 元素全部通过 Can I use 进行了兼容性校对，在标注各个 HTML 元素兼容性状态的同时，提供了 W3C 和 Mozilla 推荐的标准 Demo 用例，便于快速开发格式良好的 Web 页面，体现更加语义化的文档结构。

HTML 超文本标记语言（Hypertext Markup Language）是构建 Web 页面的基石，用于结构化的组织页面元素与内容，可以嵌入图像、视频等多媒体，也可以用于创建交互式表单，并在一定程度上描述文档的外观和语义。HTML 语义化（Semantic HTML）则是指合理的使用 HTML 元素编写 Web 页面内容，强调 Web 页面编码信息的含义凌驾于其表现样式之上，有利于 Web 浏览器执行规范化解析，改善网页文档的可访问性，方便搜索引擎爬虫索引。

层叠样式表（CSS，Cascading Stylesheet）用于指定 Web 浏览器的渲染样式，CSS 2.1 规范于 2011 年发布之后日益变得丰富与庞大，因此 W3C 工作组将规范分散至不同模块，每个模块都独立的进行版本更新。其中，全部 CSS 2.1 特性模块都被升级至 3 作为版本号，而全新的功能模块则从版本号 1 开始进行定义。因而 CSS 3 并非实际意义上的 W3C 规范，准确的描述应该为 CSS 标准规范第 3 版与部分新规范第 1 版的集合。

伴随 Web 浏览器技术的日新月异，现代 CSS 开发的重点，已经不在于处理浏览器碎片化引发的各类兼容性问题，而是在确保代码可维护性前提下，符合 Web 页面的语义标准，从而尽可能准确的表达各类交互创意。在阅读 W3C 工作组成员 Lea Verou 的《CSS Mastery》之后，开始重新审视前端重度交互下 CSS 提供的各类全新特性，结合 Mozilla 社区的 《CSS Reference》 一文，重新讨论 CSS 技术相关的一些主题。