jQuery 那些容易被忽略的问题

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

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

阅读更多

概览 HTML 5 语义化标签

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

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

阅读更多

CSS 3 典型概念与布局详解

层叠样式表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 技术相关的一些主题。

阅读更多