关于 javascript 的文章：
所有文章
周骅，前端研发，目前就职于字节跳动。
介绍 scroll-driven animations
什么是 scroll-driven animations 先看这个示例，随着横向滚动条的滚动，唱片封面图出现了平滑的翻转、平移等动画效果。先设想一下，如果借助传统的 web 动画技术，我们应该如何实现这个效果。 如果使用传统的 web 动画技术，这个效果实现起来还是非常麻烦的，需
记录遇到的关于 regexp.test() 的一个小坑
起因是我的一段代码运行后得到了出乎意料的结果，类似于： const tokens = sentence.split(''); const index = 0; while (true) { const token = tokens[index]; if (/[a-z]/i.tes
征服 number 类型的 input 框
在移动端 H5 页面开发中，有时候会有一些数值输入方面的需求。如果需要让用户比较方便地输入小数、负数，最简单的方式是使用 number 类型的 input 框，输入时软键盘会切换为数字键盘方便输入（ios 是带数字的全键盘，并允许 1e5 这类的表示方法）。但是在实际使用的时候会
深入了解 javascript 的 sort 方法
在 javascript 中，数组对象有一个有趣的方法 sort，它接收一个类型为函数的参数作为排序的依据。这意味着开发者只需要关注如何比较两个值的大小，而不用管“排序”这件事内部是如何实现的。不过了解一下 sort 的内部实现也不是一件坏事，何不深入了解一下呢？ 算法课上，我们
“===” 也有不靠谱的时候
自古js多奇葩，语言层面上有许多坑，入坑多了也就习惯了。那就再多一个坑吧。 javascript在判断两个值是否相等时，有两种方式 == 和 ===。这两者的区别我就不多说了，随便一本 js 书上都有，总之一般情形下我们有这样的结论：== 省事，但结果混乱，很多情形下近乎伪科学，
谈谈正则表达式中的 “.”
好久没更新内容了，今天分享一个小的知识点，一个正则表达式方面的很容易被人忽视的坑。 我们知道，正则表达式中，可以用 . 表示任意单个字符，但在 underscore 和 jquery 的源代码中，我们可以看到，这些著名类库的代码中，经常并不是用 . 来表示任意字符，而是使用 [\
干货！一步步实现自己的表单验证器
表单验证的需求简直太常见了。“所有用户的输入都是不可信的”这个思想指导我们在设计表单的时候，一定要进行用户输入的验证。对于用户体验而言，越早的反馈则越佳，所以表单验证的工作应该尽可能地在前端就进行（当然，前端对于后端而言也是输入端，所以后端仍然需要进行检验）。简单的表单验证完全可
巧妙判断一个单词是否有重复字母
今天上午刷到一道题，大体是写一个方法判断一个单词中是否有重复的字母（或者说一个字符串中是否有重复的字符）。我的思路是一个字符一个字符地遍历，如果发现有重复的停止： function isIsogram(str) { str = str.toLowerCase(); for (le
聊聊 rel=noreferrer 的事
背景 .scale { font-size: 2em; } 在一个页面 A 中，点击一个链接，浏览器会跳转到页面 B。那么如何描述 A 和 B 的关系呢？我们把 A 定义为 B 的 refer/referrer/referer（由于历史的原因，你看到上面这几个词都可以认为是同一个
判断回文字符串的新方法
当年去携程面试时，刘大师问了一个判断回文字符串（类似于 123454321）的方法，我是有备而来，刷刷就写了： function test(str) { return str.split('').reverse().join('') === str; } So easy。不过刘大
在 Node.js 中使用多线程编程
在以前的博文 别说不可能，Node.js 中实现 sleep 中，我向大家介绍了 Node.js addon 的用法。今天的主题还是 addon，继续挖掘 c/c++ 的能力，弥补 Node.js 的弱点。 我曾多次提到过 Node.js 的性能问题。其实就语言本身而言，Node
学写 jquery 缓动函数
问题引入：实现如下效果 两个方块的追逐效果，使用 css3，实现起来没什么难度： <div id="container"> <div id="first"></div> <div id="second"></div> </div> #container { position: r
别说不可能，Node.js 中实现 sleep
Node.js 最让人不爽的就是其单线程特性，很多事情没法做，对 CPU 密集型的场景，性能也不够强劲。很长一段时间，我想在 javascript 语言框架下寻求一些解决方案，解决无法操作线程、性能差的问题。曾经最让我印象深刻的方案是 fibers，不过 fibers 也好，其他
phantomjs 配合 kindlegen，kindle 看天涯不费力
前言 kindle 看书挺舒服的，网页上看到大段文字就想搬到 kindle 里去。以前会用一些转寄的服务，网页上随手点个 send to kindle，倒也方便。嗯……还是不要自欺欺人了，read it later === read it never。 后来固定用多看了，多看的推
长姿势
javascript 有一个鲜为人知的运算符，叫“趋向于”， 写作 --> 。可以声明一个变量 然后让它趋向于另一个数。 var x = 10; while (x --> 0) { console.log(x); } 就会打印 9,8,7,6,5,4,3,2,1,0 了 233
canvas 元素的宽高
设置一个元素的尺寸，推荐的做法是通过css设置其 width 和 height。不过今天我们说说一个特例：canvas。本文内容比较简单，我不做示例。 常见的设置 canvas 元素尺寸有两种方法。 给 canvas 元素设置属性，例如： <canvas width="400"
javascript 实现各种字符串搜索算法
我觉得在前端开发中过多地考虑算法没有太多实际的意义。但这仅仅是我觉得，我并没有证据证明这一点。那为何不来尝试一下，面对一个特定的任务，我将使用不同的算法来实现，看看究竟效率相差多少。今天我想通过字符串搜索这一场景来进行测试。 测试场景 主字符串就以 ABC 的一篇文章内容为例，略
另辟蹊径复制样式
技能get✓\checkmark✓ 先说一个需求，我想给一个元素应用另外一个指定元素的样式，应该怎么做？对于一个特定的项目，我想通常做法是规范代码风格，直接把 class 复制过来就可以了。但现实情况可能并不会如此简单。比如我们假定这个指定元素是不可预测的，它的样式可能由 cla
在 Node.js 中实现阻塞
Node.js 中与生俱来的单线程编程、回调函数异步式风格让我们有时喜有时忧。先说单线程，很多人会费解于 Node.js 的单线程如何能做到高并发？这个问题不是本文重点，点到为止。澄清一点，Node.js 的单线程仅仅指 javascript 引擎是单线程的，无论如何我们没有办法
fibers in Node.js
fiber/纤程 在操作系统中，除了进程和线程外，还有一种较少应用的纤程（fiber，也叫协程）。纤程常常拿来跟线程做对比，对于操作系统而言，它们都是较轻量级的运行态。通常认为纤程比线程更为轻量，开销更小。不同之处在于，纤程是由线程或纤程创建的，纤程调度完全由用户代码控制，对系统
