发表于
2016-10-23 08:01:03
获取 html 注释节点
Tracker 需要移除页面的 HTML 注释节点，鉴于注释的复杂性，为了靠谱点，不使用正则了，顺手写了个获取 HTML 注释的工具函数：vargetHtmlCommentNodes =function(){varcn, push;cn =document.COMMENT_NODE;push = [].push;returnfunctionf(node){varresult, c, l, i;result = [];if( node.nodeType == cn )result.push( node );elseif( c = node.childNodes, l = c.length )for( i =0; i < l; i ++ )push.apply( result, f( c[ i ] ) );returnresult;}}();用法：getHtmlCommentNodes(document.documentElement );
...继续阅读
(16)
发表于
2016-10-23 07:57:38
将 WebWorker 改造成无外链文件模式
WebWorker允许我们在浏览器中使用多线程来进行高耗时计算，但是，WebWorker 必须引用同域的 JS 文件，这在有些场景下不是很方便应用。我尝试对此进行包装，期望调用 WebWorker 的地方可以直接声明 Worker 文件的内容，不需再外链一个 JS 文件，以下是未经所有浏览器测试的代码，如需应用，你可能需要做些测试和改进。varmyWorker =function(){varfunctionBodyRegx, URL, contentType, code, url;functionBodyRegx =/^[^{]+\{([\s\S]*)\}$/;URL =window.URL ||window.webkitURL;contentType = {type:"text/javascript; charset=utf-8"};returnfunction(fn){code = fn.toString().match( functionBodyRegx )[1];url =window.opera ?"data:application/javascript,"+encodeURIComponent( code ) :URL.createObjectURL(newBlob( [ code ], conten
...继续阅读
(13)
发表于
2016-10-23 07:19:47
Tracker 新增“活动监视器”插件
发表于
2016-10-22 19:12:00
web 另类方法实现“另存为”功能
HTML5 的 FileReader 带给我们很强大的文件只读访问能力，可是在 HTML5 新增的 JS 中却没有发现有方便的另存到本地文件的相关 API，以往的办法要么调用浏览器的 save as 命令（兼容程度不详），要么将内容提交到服务器，由服务器附加 content-type: application/octet-stream 头并原文打回来实现。偶然间，发现 HTML5 的<a>标签有了一个新属性，叫download，取值是一个文件名，当一个带有download属性的<a>链接被点击时，其形为不再是一个网页跳转，而变成将目标以指定的文件名另存到本地，兼容性还不错的样子。<a>的href值是可以随便改的，也就是说要另存的文件内容可以通过 JS 的方式轻松生成，对其指定一个DataURI就可以决定要保存的文件内容了，配合Base64，甚至可以产生一个二进制文件！原理简单，实现无比容易，就不在这儿贴代码了，戳我可以看看 live demo。
...继续阅读
(14)
发表于
2016-10-22 19:09:04
发表于
2016-10-22 19:05:33
“短”化你的代码
我们来玩个找茬儿，看看下面这段代码，找找 md5 函数的定义在哪里：<!DOCTYPE html><html><head><title></title><metacharset="utf-8"></head><body><script>Function("
...继续阅读
(10)
发表于
2016-10-22 19:00:17
千行代码实现 IE8 兼容的仿 angular 指令式模板控制器
Angular 出来的时候火了一阵，现在受到 React 的冲击显得有些冷却，之前我只是听说，也听过 @隐若 老师的一些分享，但一直没有机会用上或深入了解他的特性。直到上个月初，内部要做个 xx 平台，平台上的表单功能有些繁琐，所有表单域都是根据配置项动态渲染出来的，验证、联动什么的也都是配置。初步判断用 Angular 的指令和双向数据绑定可以很好满足，不过后来并没有直接用上 Angular，具体原因就不在这儿展开了。Angular 的模板是基于 DOM 结构的，这一点与其它字符串类的前端模板有一个最大的不同：在数据发生变更时，无需使用 innerHTML 属性来更新整个视图，可以通过数据对比的手段实现最小范围的 DOM 节点更新。在渲染开销上有一定的优势，另外一个好处是：可以保留已注册的事件，而不必使用事件代理。但是，Angular-1.3.15 压缩后还有 126kb，对于仅模板需求的小应用来说还是满大的，另外有点小遗憾的是 1.3 之后的版本不再对 IE8 进行兼容，这在当下国内环境中有点不太合适。为了满足技术宅的那点小兴趣，我决定自己实现一个仿 Angular 模板控制器，没有双向数据绑定、没有 MVC、没有指令、没有过滤器、没有依赖注入器等，我对这个项目的定义是，只要实现超过 2000 行代码就放弃，当然，这已经是我上个月的决定了，因为我已经将它写出来了，JS 部分在
...继续阅读
(10)
发表于
2016-10-22 18:48:53
Math.random() 二三事
发表于
2016-10-22 18:33:13
生成任意长度的圆周率
周末，闲来无事折腾了一个任意长度的圆周率生成器，代码十分好懂不解释了（百行未压缩，自己读），原理见梅钦类公式。这是我写过的第三版与 PI 相关的代码。第一版的博文在百度空间（百度空间已经倒闭看不到了），根据正方形与内接正圆的比值为 4:PI 抽随机点演算；第二版见《用 JavaScript 演算圆周率 PI（二）》。前两版均受浮点计算精度限制，只有现在这版是可以生成任意长度的，不过长度越长，计算起来越慢，测试需谨慎。（本文完）
...继续阅读
(14)
发表于
2016-10-22 18:28:03
码农自己当老家新厝的设计师
发表于
2016-10-22 18:10:21
悄悄发布个押韵字查询工具
对联、打油诗词一直是我的兴趣，平时代码之余，我也常常鼓捣些打发时间，2011 年，我曾经有篇博文整理了之前写过的句子，现在看来，已经自觉太小儿科了些。押韵是诗歌中很重要的属性，韵脚押得好能使诗歌念起来朗朗上口，寻找押韵字是个很大麻烦，所以我写了一个小工具用来解决这个问题。对联诗词没有特色？不妨来点 Rap 绕舌？你说创作艰辛路途坎坷？肚里没点墨水全都白扯?药！药！切可闹！煎饼果子来一套？现在我来给你支个大招。从今往后写词不用美刀！这个工具你说屌或不屌？如此好玩，胜过大嫂！快速押韵帅到爆表！还不快点收藏以后好找？闲来无事找点乐子，这个工具你来使使，编首浪漫歌词哄哄妹纸，整点打油小诗教教孩子。
...继续阅读
(10)
发表于
2016-10-22 17:11:00
图片 RGBA 拾色器
前端同学在切页面时，很多简单效果可以直接 CSS3 实现掉，这样就不必使用图片了，大大减少图片处理的时间。市面上的拾色器，包括PhotoShop中的吸管，都没有提供图片像素中 Alpha 通道的值，遂用<canvas>的getImageData方法简单实现了个在线版，有需要的同学请自行收藏。getImageData方法返回画布上指定矩形区域的ImageData，包括该区域中所有像素点的 R、G、B、A 四个通道的颜色信息。上一篇文章也提到它。
...继续阅读
(13)
发表于
2016-10-22 03:32:12
小球是怎么落入指定球洞的？
发表于
2016-05-24 02:35:53
图片 RGBA 拾色器
前端同学在切页面时，很多简单效果可以直接 CSS3 实现掉，这样就不必使用图片了，大大减少图片处理的时间。市面上的拾色器，包括PhotoShop中的吸管，都没有提供图片像素中 Alpha 通道的值，遂用的getImageData方法简单实现了个在线版，有需要的同学请自行收藏。getImageData方法返回画布上指定矩形区域的ImageData，包括该区域中所有像素点的 R、G、B、A 四个通道的颜色信息。上一篇文章也提到它。查看全文...
...继续阅读
(11)
发表于
2016-05-17 00:19:27
简述年会新春特别奖的前端实现
回乡心切，去年年底我早早的就撤了，年会并没有参加，亲手为年会定制的一个烟花抽奖程序——新春特别奖，年会时的现场秀也因此没能感受到，遗憾之余听说 @文龙 中了头奖，心里平衡了许多：三天时间的开发总算没白忙活！写本文前，我将程序简单做了下脱敏和静态分离：进入页面后，片头动画开始播放，「你」划燃火柴，转身面向炮仗，进入等待状态（此时应该跟观众唠唠家常，提高下神秘感）；待唠瞌尽兴，「你」将火柴移向并点燃引信，待引信燃尽，炮仗应声升空，爆炸，焰火奇迹般的组成一个花名（中奖者），拍照留念，背景持续燃放烟花，完毕。本文将介绍该效果的前端实现。查看全文...
...继续阅读
(23)
发表于
2016-05-14 03:29:48
悄悄发布个押韵字查询工具
对联、打油诗词一直是我的兴趣，平时代码之余，我也常常鼓捣些打发时间，2011 年，我曾经有篇博文整理了之前写过的句子，现在看来，已经自觉太小儿科了些。押韵是诗歌中很重要的属性，韵脚押得好能使诗歌念起来朗朗上口，寻找押韵字是个很大麻烦，所以我写了一个小工具用来解决这个问题。查看全文...
...继续阅读
(25)
发表于
2016-05-06 17:04:52
码农自己当老家新厝的设计师
这篇文章迟发了大概一年半的时间。有朋友已经知道这段时间我在做什么了，是的，我在农村老家新筑起了一个巢，目前施工（毛坯 + 装修）基本完成，剩下极少的收尾，而真正令我兴奋的：房子是我亲手设计的！前年在考虑先买房还是先在老家自建时，犹豫得比较久，不过能自己体验一把设计，想想就激动，内心便十分笃定了。查看全文...
...继续阅读
(19)
发表于
2016-04-25 04:45:22
生成任意长度的圆周率
周末，闲来无事折腾了一个任意长度的圆周率生成器，代码十分好懂不解释了（百行未压缩，自己读），原理见梅钦类公式。这是我写过的第三版与 PI 相关的代码。第一版的博文在百度空间（百度空间已经倒闭看不到了），根据正方形与内接正圆的比值为 4:PI 抽随机点演算；第二版见《用 JavaScript 演算圆周率 PI（二）》。前两版均受浮点计算精度限制，只有现在这版是可以生成任意长度的，不过长度越长，计算起来越慢，测试需谨慎。（本文完）查看全文...
...继续阅读
(13)
发表于
2016-01-18 11:24:31
小球是怎么落入指定球洞的？
这篇文章首发在淘宝前端团队博客，现在转发到作者自己（也就是我本人）的博客上。不知大家是否还有印象，淘宝玩法平台（一个内部系统）前不久发布了一款新的游戏 —— 小球入洞，该游戏伴随着淘宝技术部去年双 11 当天举办的一次抽奖活动，第一次在大家面前亮相。游戏支持预先设定必中奖项：离开发射器的小球在来回弹跳一阵之后，不偏不倚的落入到指定奖项对应的球洞中。体验该功能，可在游戏测试页右侧选项区进行如下的设置：本文试着介绍游戏的这个「掉落至指定球洞」的功能，讲的偏思路，并不涉及公式和代码，我尽可能直白，如果你觉得晦涩，可以在评论处我们接着探讨。在继续之前，为了表达上的方便，我将对游戏在视觉上进行如下图的划分：查看全文...
...继续阅读
(20)
发表于
2015-12-07 12:06:43
Math.random() 二三事
这篇文章首发在淘宝前端团队博客，现在转发到作者自己（也就是我本人）的博客上。随机数是统计学领域的一个重要概念，对于游戏来说同样意义非凡，用好随机数，可以使你的游戏更真实、更人性、富有魅力。查看全文...
...继续阅读
(9)
发表于
2015-12-07 04:06:43
Math.random() 二三事
这篇文章首发在 淘宝前端团队博客，现在转发到作者自己（也就是我本人）的博客上。 随机数 随机数是统计学领域的一 …继续阅读Math.random() 二三事
...继续阅读
(60)
发表于
2015-05-19 22:34:08
千行代码实现 IE8 兼容的仿 angular 指令式模板控制器
Angular 出来的时候火了一阵，现在受到 React 的冲击显得有些冷却，之前我只是听说，也听过 @隐若 老师的一些分享，但一直没有机会用上或深入了解他的特性。直到上个月初，内部要做个 xx 平台，平台上的表单功能有些繁琐，所有表单域都是根据配置项动态渲染出来的，验证、联动什么的也都是配置。初步判断用 Angular 的指令和双向数据绑定可以很好满足，不过后来并没有直接用上 Angular，具体原因就不在这儿展开了。查看全文...
...继续阅读
(9)
发表于
2015-05-19 14:34:08
千行代码实现 IE8 兼容的仿 angular 指令式模板控制器
angular 出来的时候火了一阵，现在受到 react 的冲击显得有些冷却，之前我只是听说，也听过 @隐若 …继续阅读千行代码实现 IE8 兼容的仿 angular 指令式模板控制器
...继续阅读
(44)
发表于
2014-06-17 14:51:50
发表于
2013-06-03 22:32:40
发表于
2013-05-31 00:11:21
web 另类方法实现“另存为”功能
HTML5 的 FileReader 带给我们很强大的文件只读访问能力，可是在 HTML5 新增的 JS 中却没有发现有方便的另存到本地文件的相关 API，以往的办法要么调用浏览器的 save as 命令（兼容程度不详），要么将内容提交到服务器，由服务器附加 content-type: application/octet-stream 头并原文打回来实现。偶然间，发现 HTML5 的标签有了一个新属性，叫download，取值是一个文件名，当一个带有download属性的链接被点击时，其形为不再是一个网页跳转，而变成将目标以指定的文件名另存到本地，兼容性还不错的样子。的href值是可以随便改的，也就是说要另存的文件内容可以通过 JS 的方式轻松生成，对其指定一个DataURI就可以决定要保存的文件内容了，配合Base64，甚至可以产生一个二进制文件！原理简单，实现无比容易，就不在这儿贴代码了，戳我可以看看 live demo。查看全文...
...继续阅读
(27)
发表于
2013-05-30 16:11:21
web 另类方法实现“另存为”功能
HTML5 的 FileReader 带给我们很强大的文件只读访问能力，可是在 HTML5 新增的 JS 中却 …继续阅读web 另类方法实现“另存为”功能
...继续阅读
(37)
发表于
2013-05-13 16:55:21
Tracker 新增“活动监视器”插件
活动监视器，在 OSX 里是任务管理器，而在 Tracker 里却成了监控 JavaScript 活动的工具， …继续阅读Tracker 新增“活动监视器”插件
...继续阅读
(23)
发表于
2013-05-05 16:50:11
将 webworker 改造成无外链文件模式
HTML5 为我们带来了强大的 Worker 对象，她允许我们在浏览器中使用多线程来进行高耗时计算，可是，Wo …继续阅读将 webworker 改造成无外链文件模式
...继续阅读
(17)
发表于
2013-04-22 16:25:51
使用 chrome 的 disable-web-security 参数联调线上数据
联调线上数据是 web 开发中经常讨论的话题，受浏览器的同源策略限制，测试页无法直接使用线上数据，实现的方法各 …继续阅读使用 chrome 的 disable-web-security 参数联调线上数据
...继续阅读
(31)