分类 » 前端开发

Gulp 结构化最佳实践

分类: 标签:‚ ‚  评论:9 9 评论

在 Gulp 的官方文档中,Gulp 的任务都是写在 gulpfile.js 这一个文件中的,如果任务数量不多,这并不会有什么问题,但当任务数量较多时,会造成代码可读性差,难以维护,多人协作时还会容易造成冲突。因此,更好的处理方式是把 Gulp 的代码结构化。 开始结构化 https://github.com/QMUI/qmui_web 这是一个前端框架,主要由一个 SASS 方法合集与内置的工作流构成,其中工作流部...

Read More –>

SassDoc 详细介绍与最佳实践

分类: 标签:‚ ‚ ‚ 

SassDoc 是一款专门为 Sass 代码生成注释的工具,通过 SassDoc,开发者可以通过类似 JSDoc 的方式在 Sass 代码上添加注释,然后直接用命令生成文档。最近在处理团队框架 QMUI Web 时,遇到了需要为大量 Sass 方法写文档的问题,因此研究了这个工具,本文将会详细说明 SassDoc 的使用方法以及其中的最佳实践。 基本使用 在 Sass 中,可以使用多行注释 /* xxxx */ 和单...

Read More –>

QMUI 团队 Web 前端框架正式发布

分类: 标签:‚ ‚ ‚  评论:1 1 评论

QMUI Web 一个旨在提高 UI 开发效率、快速产生项目 UI 的前端框架,由腾讯 QMUI 团队出品。 Github: https://github.com/QMUI/qmui_web 官网:http://qmuiteam.com/web QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成。通过 QMUI We...

Read More –>

HTML 不同空格的特性与表现研究

分类: 标签:‚ ‚ ‚  评论:8 8 评论

一. 概要 在编写 HTML 模板时,有时候会利用空格来充当文字排版的手段,最为常见的情况是在一段文字之间插入空格,来分隔相对独立的词汇。但面对这种情况,一般是不会直接使用普通空格(半角空格,即英文输入法下键盘直接输入的空格),因为当我们期望连续输入几个这样的空格来制造一段空白时,实际最终网页上显示出的空白大小只有一个空格的大小,因此通常会用   来代替半角空格,连续输入多个   ...

Read More –>

使用 HTML5 History 新特性增强 Ajax 的体验

分类: 标签:‚ ‚ ‚  评论:20 20 评论

一. 场景再现 如大家熟知,Ajax 可以实现页面的无刷新操作,但会造成两个与普通页面操作(有刷新地改变页面)有着明显差别的问题—— URL 没有修改以及无法使用前进、后退按钮。例如常见的 Ajax 分页,在第一页点击第二页的链接,Ajax 分页完成后浏览器地址栏上显示的 URL 依然是第一页的 URL,使用后退按钮也无法回到第一页。url 的改变代表一个标识,在传统的网页体验中,内容的变更伴随 url 的改变,ur...

Read More –>

WAI-ARIA —— 让盲人更清楚我们的网页

分类: 标签:‚  评论:7 7 评论

我曾经根据网上一些流行的无障碍建议对博客进行改进,希望能方便视障人士浏览我的博客,但经过一番“改进”之后,我发现这些建议并不完全奏效,用 NVDA 实际测试后,网站的无障碍可访问性并没有得到明显提升。最近几天,我重新思考了无障碍网页的设计,最终得到一些比较有效的方法,在这里整理一下! 一. 视障人士是如何浏览网页的? 要想让盲人清楚我们的网页,首先要了解盲人是如何浏览网页。如大家熟知,视障人士是通过屏幕阅读器来感知网...

Read More –>

特征检测而不是浏览器检测!

分类: 标签:‚ ‚  评论:44 44 评论

正如上一篇文章所述,最近趁着有空把 jQuery 的浏览器模块抽取出来,再修改成独立简洁的一个对象 —— support,可以方便地使用 JavaScript 进行特征检测。 是的,这里要介绍的,是特征检测而不是浏览器检测! 由于 JavaScript 在不同的浏览器中存在差异,尤其是不同内核的浏览器之间的差异更是明显,因此在传统的前端开发中,在实现某些功能的过程中会判断浏览器的型号和版本,再实现一个跨浏览器的解决方...

Read More –>

Let's free of jQuery! — Part Two

分类: 评论:9 9 评论

接着上一篇《Let's free of jQuery!》,上一篇主要介绍 jQuery 中最常用的一些方法的原生解决方案,本篇则会介绍余下相对较少用到的内容。 11. form 表单序列化 在 jQuery 中,有一个 serialize() 方法,该可以通过序列化表单值,创建 URL 编码文本字符串,在 ajax 提交表单时很有用,下面介绍一下原生的方法: function formToString(formOb...

Read More –>

Let’s free of jQuery!

分类: 标签:‚  评论:12 12 评论

8月份时,断断续续把整个网站的 JavaScript 重写了一遍,原因很简单,自这个博客创建以来,一直都是依赖于 jQuery 库,随着 jQuery 库的愈发臃肿,以及自身对于 JavaScript 的日渐熟悉,摆脱 jQuery 的想法也越来越强烈了,于是终于在上个月,达成目标了。这里必须补充一下,Kayo 之所以想摆脱 jQuery ,原因有二: 一是因为 jQuery 的体积已经比较臃肿了,加载需时,对于移...

Read More –>

HTML5,CSS3 与 Javascript 制作视频播放器

分类: 标签:‚ ‚ ‚  评论:56 56 评论

早一段时间,有一直研究 HTML5 和 CSS3 ,自己也做了不少 Demo ,只是 HTML5 Video 和 Audio 由于自己平时比较喜欢留意不同的播放器,因此特别想做一个自己喜欢的设计,考虑到会比较花时间,所以一直没有做出完整的 Demo 。 刚好最近有灵感了,就下定决心做一个完整的视频播放器。首先放出成品: 做完这个播放器之后,感觉 HTML5 Video 提供的 API 已经很完善,考虑到一个播放器所...

Read More –>

HTML5 Page Visibility

分类: , 标签:‚ ‚  评论:26 26 评论

HTMl5 推出了一个很“特别”的 API Page Visibility ,之所以说它特别,是因为这个 API 关注的是一个很少人留意的功能 —— 浏览器标签( tab ) 是否被激活。这里必须解释一下,这个“激活”,指的是这个标签是否正被用户浏览,或者说是否为当前标签。 那么,这个 API 究竟有些什么用途呢?通常,很多传统的页面在用户没有激活它的时候,它还会继续工作,例如,当用户正在浏览新闻门户,而他之前打开的...

Read More –>