技术

征服 number 类型的 input 框

在移动端 H5 页面开发中,有时候会有一些数值输入方面的需求。如果需要让用户比较方便地输入小数、负数,最简单的方式是使用 number 类型的 input 框,输入时软键盘会切换为数字键盘方便输入(ios 是带数字的全键盘,并允许 1e…

继续阅读

从拥挤的兔子到伪随机数算法

阅读《复杂》一书时的笔记及延伸。本文涉及到的生态学、数学、计算机科学部分都比较肤浅,如有错漏,欢迎斧正...

继续阅读

快速排序算法的优化思路总结

前两天在 知乎 上看到了一个关于快速排序算法性能的问题,我简单总结了一个优化思路,现在在自己的博客里也贴一下吧,版权都是我的。 其实里面的大部分内容在我的另一篇博客里有讲过: 深入了解javascript的sort方法 原回答: https://www.zhihu.com/question…

继续阅读

深入了解 javascript 的 sort 方法

在 javascript…

继续阅读

让你的网站成为自定义搜索引擎

起 有一天,我在打理博客的时候,无意看到了这样的提示: “按tab可通过 zhouhua.info 进行搜索”?这是什么?于是我按了 tab: 看起来很高级嘛!输入“正则表达式”看看: 竟然真的有效果!到底发生了什么…… 打开 chrome…

继续阅读

小心别落入正则回溯陷阱

不知才哪儿看来的: 如果你有一个问题,你想到可以用正则来解决,那么你有两个问题了。 我觉得正则表达式实在是一种人难以理解的语言,比xml…

继续阅读

“===” 也有不靠谱的时候

自古js多奇葩,语言层面上有许多坑,入坑多了也就习惯了。那就再多一个坑吧。 javascript在判断两个值是否相等时,有两种方式  和 。这两者的区别我就不多说了,随便一本 js…

继续阅读

谈谈正则表达式中的 “.”

好久没更新内容了,今天分享一个小的知识点,一个正则表达式方面的很容易被人忽视的坑。 我们知道,正则表达式中,可以用  表示任意单个字符,但在 underscore 和 jquery…

继续阅读

干货!一步步实现自己的表单验证器

表单验证的需求简直太常见了。“ 所有用户的输入都是不可信的 ”这个思想指导我们在设计表单的时候,一定要进行用户输入的验证。对于用户体验而言,越早的反馈则越佳,所以表单验证的工作应该尽可能地在前端就进行(当然,前端对于后端而言也是输入端,所以后端仍然需要进行检验)。简单的表单验证完全可以给 input…

继续阅读

巧妙判断一个单词是否有重复字母

今天上午刷到一道题,大体是写一个方法判断一个单词中是否有重复的字母(或者说一个字符串中是否有重复的字符)。我的思路是一个字符一个字符地遍历,如果发现有重复的停止: 这种简单的场景下谈性能没什么意义,两次循环速度并不慢( 也认为是一次循环,但由于是 native…

继续阅读

聊聊 rel=noreferrer 的事

背景 在一个页面 A 中,点击一个链接,浏览器会跳转到页面 B。那么如何描述 A 和 B 的关系呢?我们把 A 定义为 B 的 refer/referrer/referer(由于历史的原因,你看到上面这几个词都可以认为是同一个意思,下面统一描述为 referrer)。通俗地说,A 是 B…

继续阅读

判断回文字符串的新方法

当年去携程面试时,刘大师问了一个判断回文字符串(类似于123454321)的方法,我是有备而来,刷刷就写了: So easy。不过刘大师不喜欢这种 geek 范的东西,只好老老实实又写了一份循环版的……C…

继续阅读

更优雅地绘制阴影

Box-shadow 虽然是一个 css3 的属性,但由于浏览器支持不错,且用它来营造一种立体感、层次感着实方便,这让它成为了互联网上随处可见的 css…

继续阅读

带 Alpha 通道的色彩叠加问题

css3 的 rgba 色彩模式、png/gif 图片的 alpha 通道、canvas 的 rgba 色彩模式、css3 的阴影、css3 的 opacity 属性等等,这些应用在网页中,有意无意间,我们的页面多了许多半透明的效果。我们知道,在没有 alpha…

继续阅读

在 Node.js 中使用多线程编程

在以前的博文 别说不可能,Node.js 中实现 sleep 中,我向大家介绍了 Node.js addon 的用法。今天的主题还是 addon,继续挖掘 c/c++ 的能力,弥补Node.js的弱点。 我曾多次提到过 Node.js 的性能问题。其实就语言本身而言,Node.js…

继续阅读

学写 jquery 缓动函数

问题引入:实现如下效果 两个方块的追逐效果,使用 css3,实现起来没什么难度: 用到了 css3 的 animate 属性,不是很复杂。不过出于兼容性的考虑,我们决定使用 jquery 的 animate 方法来重新实现。 简单粗暴地多次使用 $.animate…

继续阅读

必会 CSS3 技能:background-clip/background-origin

CSS3 中新增了许多 background 类的属性。今天就来聊聊 background-clip 和 background-origin 。为什么把它们俩放一起说呢?因为它们俩很“默契”地拥有相同的属性值。 background-clip 先说 background-clip…

继续阅读

phantomjs 配合 kindlegen,kindle 看天涯不费力

前言 kindle 看书挺舒服的,网页上看到大段文字就想搬到 kindle 里去。以前会用一些转寄的服务,网页上随手点个 send to kindle,倒也方便。嗯……还是不要自欺欺人了,read it later === read it never。 后来固定用多看了,多看的推送和 amazon…

继续阅读

长姿势

javascript 有一个鲜为人知的运算符,叫“趋向于”, 写作 --> 。可以声明一个变量 然后让它趋向于另一个数。 就会打印 9,8,7,6,5,4,3,2,1,0 了 2333333 认真就输了。

继续阅读

padding、margin 纵向取值问题

今天要说一个很基础,但被我自己忽略至今的一个简单问题:padding、margin 在纵向取值为百分数时,它们相对的是父元素的高度吗? 这个问题之所以被忽略,是因为使用场景有限。因为在布局的时候,我们通常只关注宽度,流式布局、响应式布局中,我们常常会给 padding…

继续阅读

canvas 元素的宽高

设置一个元素的尺寸,推荐的做法是通过css设置其 和 。不过今天我们说说一个特例: 。本文内容比较简单,我不做示例。 常见的设置 元素尺寸有两种方法。 给 元素设置属性,例如: 给 对象设置属性,例如: 不过如果你采用css…

继续阅读

javascript 实现各种字符串搜索算法

我觉得在前端开发中过多地考虑算法没有太多实际的意义。但这仅仅是我觉得,我并没有证据证明这一点。那为何不来尝试一下,面对一个特定的任务,我将使用不同的算法来实现,看看究竟效率相差多少。今天我想通过字符串搜索这一场景来进行测试。 测试场景 主字符串就以 ABC 的一篇文章内容为例,略做修改 There…

继续阅读

另辟蹊径复制样式

技能get 先说一个需求,我想给一个元素应用另外一个指定元素的样式,应该怎么做?对于一个特定的项目,我想通常做法是规范代码风格,直接把 class 复制过来就可以了。但现实情况可能并不会如此简单。比如我们假定这个指定元素是不可预测的,它的样式可能由 class…

继续阅读

phantomjs 使用说明

phantomjs 实现了一个无界面的 webkit 浏览器。虽然没有界面,但 dom 渲染、js 运行、网络访问、canvas/svg 绘制等功能都很完备,在页面抓取、页面输出、自动化测试等方面有广泛的应用。 安装 下载phantomjs( 官方下载 。解压到任意目录,并将包含phantomjs…

继续阅读

在 Node.js 中实现阻塞

Node.js 中与生俱来的单线程编程、回调函数异步式风格让我们有时喜有时忧。先说单线程,很多人会费解于 Node.js 的单线程如何能做到高并发?这个问题不是本文重点,点到为止。澄清一点,Node.js 的单线程仅仅指 javascript…

继续阅读

Application Cache

Application Cache 是 HTML5 为 web 应用离线使用而增加的 api,虽然都是有关存储,但与 LocalStorage、 Cookie、SessionStorage 有相当大的不同。Application Cache…

继续阅读

fibers in Node.js

fiber/纤程 在操作系统中,除了进程和线程外,还有一种较少应用的 纤程 (fiber…

继续阅读

如何在 Node.js 环境下操作 DOM

Javascript 之所以为 Javascript,很重要的原因是浏览器为其实现了 DOM 和 BOM 接口( 参考 )。但在 Node.js 环境下,并没有 DOM 和 BOM,所以 html 文档与其他类型的文档并无不同,很难进行处理。而前端大量的 js 类库在 Node.js…

继续阅读

CSS 性能优化系列之加载原理

无论是一位前端开发人员,还是一位产品设计人员,永远需要把用户体验放在第一位。只有良好的用户体验才会带来用户的持续关注和产品使用。那么,对于网站的设计来说,良好的用户体验又是如何建立的呢?因素很多,例如快速响应、良好交互、配色和谐、高易用性、风格统一等等,不过我认为有以下几个方面是在进行CSS…

继续阅读

从 +new Date 说起,Javascript 的一元操作符

在偶然打开 d3 的源代码的时候,我看到了这样一段代码。 大体上可以看出这是在 对象中加入一个 方法以获得当前时间。但是 似乎是一种很不合常规的写法,这个 是干什么用的呢?其实这里并没有用到很高级的 javascript…

继续阅读

网页中元素实现水平居中的方法

网页中元素居中的需求很普遍,今天就要谈谈相对比较简单,使用场合更多的水平居中。 行级元素居中 我们知道 css 中有一个 的属性来定义子元素的水平对齐,不过它仅对行级元素生效。一种思路就是我们将想要居中的元素规定成 或 元素。 注意, 在低版本 IE 和 firefox…

继续阅读