Map 的两个小扩展

2018-09-03 by Dron

在以前,实现数据映射,我们利用给对象属性赋值,就像这样:

var mapping = Object.create( null );
mapping[ key ] = value;

ES6 的 Map/WeakMap 提供了更为便利及语义化的用法,功能更加强大,key 支持所有数据类型:

const mapping = new Map;
mapping.set( key, value );

通过继承 Map/WeakMap,很容易扩展功能,以 Map 为例,本文讲述一个带 过期控制持久化 能力的 Map 扩展。

三门问题和 JavaScript 仿真实验

2017-05-20 by Dron

1990 年 9 月美国《广场杂志》的「请教玛丽琳」专栏,曾刊登如下逻辑题:

假设你在进行一个游戏节目。现给三扇门供你选择:一扇门后面是一辆轿车,另两扇门后面分别都是一头山羊。你的目的当然是要想得到比较值钱的轿车,但你却并不能看到门后面的真实情况。主持人先让你作第一次选择。在你选择了一扇门后,知道其余两扇门后面是什么的主持人,打开了另一扇门给你看,而且,当然,那里有一头山羊。现在主持人告诉你,你还有一次选择的机会。那么,请你考虑一下,你是坚持第一次的选择不变,还是改变第一次的选择,更有可能得到轿车?

博客新增标签云

2016-11-27 by Dron

标签,是对一件事物的标志性描述,通常都会采用相关性很强的关键字,以便于检索和分类,网络上的应用已然十分广泛。

在此前,我对标签并不感冒,所以我的文章一直以来都从不用标签来管理,也不加任何分类,直到前天与同事聊天,当被问到我的博客都写些什么内容时,我竟一时无法很好回答。

现在再问我同样的问题,我会直接让他去看看这个页面 —— 标签云

这是我突然加上去的功能,与传统博客标签最大的区别在于,它并不是我手动打上去的,而是写程序自动算出关键字,再综合所有文章的结果得出。

火拼乒乓球

2016-11-21 by Dron

刚把今年 6 月份写的一个游戏稍加整理发到了网站上 —— 火拼乒乓球

我机器上有大量的半成品的项目,都是脑子一热写的,过了兴奋劲之后,再也不想去搭理了,乒乓球就是其中一个:把最主要的游戏流程写完,直接就是封存了好几个月,差的游戏结束场景至今也并未补上,偷懒做个「再来一发」链接回到首页发布了事,算是给自己一个交代。

其实,现在要在维护这个游戏已经有点困难了,这将近半年的时间,想到代码要重新读一遍就头疼,而且这半年来,我个人喜好的变化不少,早已完全无热情。

放上来让它自生自灭,相信过不了多久,等浏览器升级若干个版本,兼容性问题就会慢慢显露出来。

服务器迁移小记

2016-11-06 by Dron

上个月,2016 杭州云栖大会召开,阿里云宣布云产品全线打折,刚好我的服务器 12 月到期,顺手就购入三年,真的很便宜。

本站一直用的万网虚机,记不清几年了,原来的技术方案是 PHP + MySql,新的服务器上,我准备部署 Node + MongoDB,也就引发了这篇文章所述的事情。

图片 RGBA 拾色器

2016-05-24 by Dron

前端同学在切页面时,很多简单效果可以直接 CSS3 实现掉,这样就不必使用图片了,大大减少图片处理的时间。

市面上的拾色器,包括 PhotoShop 中的吸管,都没有提供图片像素中 Alpha 通道的值,遂用 <canvas>getImageData 方法简单实现了个在线版,有需要的同学请自行收藏。

getImageData 方法返回画布上指定矩形区域的 ImageData,包括该区域中所有像素点的 R、G、B、A 四个通道的颜色信息。上一篇文章 也提到它。

简述年会新春特别奖的前端实现

2016-05-17 by Dron

回乡心切,去年年底我早早的就撤了,年会并没有参加,亲手为年会定制的一个烟花抽奖程序——新春特别奖,年会时的现场秀也因此没能感受到,遗憾之余听说 @文龙 中了头奖,心里平衡了许多:三天时间的开发总算没白忙活!

写本文前,我将程序简单做了下脱敏和静态分离:

进入页面后,片头动画开始播放,「你」划燃火柴,转身面向炮仗,进入等待状态(此时应该跟观众唠唠家常,提高下神秘感);待唠瞌尽兴,「你」将火柴移向并点燃引信,待引信燃尽,炮仗应声升空,爆炸,焰火奇迹般的组成一个花名(中奖者),拍照留念,背景持续燃放烟花,完毕。

本文将介绍该效果的前端实现。

悄悄发布个押韵字查询工具

2016-05-14 by Dron

对联、打油诗词一直是我的兴趣,平时代码之余,我也常常鼓捣些打发时间,2011 年,我曾经有篇 博文 整理了之前写过的句子,现在看来,已经自觉太小儿科了些。

押韵是诗歌中很重要的属性,韵脚押得好能使诗歌念起来朗朗上口,寻找押韵字是个很大麻烦,所以我写了一个 小工具 用来解决这个问题。

码农自己当老家新厝的设计师

2016-05-06 by Dron

这篇文章迟发了大概一年半的时间。

有朋友已经知道这段时间我在做什么了,是的,我在农村老家新筑起了一个巢,目前施工(毛坯 + 装修)基本完成,剩下极少的收尾,而真正令我兴奋的:房子是我亲手设计的!

前年在考虑先买房还是先在老家自建时,犹豫得比较久,不过能自己体验一把设计,想想就激动,内心便十分笃定了。

生成任意长度的圆周率

2016-04-25 by Dron

周末,闲来无事折腾了一个任意长度的圆周率 生成器,代码十分好懂不解释了(百行未压缩,自己读),原理见 梅钦类公式

这是我写过的第三版与 PI 相关的代码。

第一版的博文在百度空间(百度空间已经倒闭看不到了),根据正方形与内接正圆的比值为 4:PI 抽随机点演算;第二版见《用 JavaScript 演算圆周率 PI(二)》。前两版均受浮点计算精度限制,只有现在这版是可以生成任意长度的,不过长度越长,计算起来越慢,测试需谨慎。

(本文完)

小球是怎么落入指定球洞的?

2016-01-18 by Dron

这篇文章首发在 淘宝前端团队博客,现在转发到作者自己(也就是我本人)的博客上。

不知大家是否还有印象,淘宝玩法平台(一个内部系统)前不久发布了一款新的游戏 —— 小球入洞,该游戏伴随着淘宝技术部去年双 11 当天举办的一次抽奖活动,第一次在大家面前亮相。

游戏支持预先设定必中奖项:离开发射器的小球在来回弹跳一阵之后,不偏不倚的落入到指定奖项对应的球洞中。体验该功能,可在游戏测试页右侧选项区进行如下的设置:

本文试着介绍游戏的这个「掉落至指定球洞」的功能,讲的偏思路,并不涉及公式和代码,我尽可能直白,如果你觉得晦涩,可以在评论处我们接着探讨。在继续之前,为了表达上的方便,我将对游戏在视觉上进行如下图的划分:

Math.random() 二三事

2015-12-07 by Dron

这篇文章首发在 淘宝前端团队博客,现在转发到作者自己(也就是我本人)的博客上。

随机数是统计学领域的一个重要概念,对于游戏来说同样意义非凡,用好随机数,可以使你的游戏更真实、更人性、富有魅力。

千行代码实现 IE8 兼容的仿 angular 指令式模板控制器

2015-05-19 by Dron

Angular 出来的时候火了一阵,现在受到 React 的冲击显得有些冷却,之前我只是听说,也听过 @隐若 老师的一些分享,但一直没有机会用上或深入了解他的特性。

直到上个月初,内部要做个 xx 平台,平台上的表单功能有些繁琐,所有表单域都是根据配置项动态渲染出来的,验证、联动什么的也都是配置。初步判断用 Angular 的指令和双向数据绑定可以很好满足,不过后来并没有直接用上 Angular,具体原因就不在这儿展开了。

web 另类方法实现“另存为”功能

2013-05-31 by Dron

HTML5 的 FileReader 带给我们很强大的文件只读访问能力,可是在 HTML5 新增的 JS 中却没有发现有方便的另存到本地文件的相关 API,以往的办法要么调用浏览器的 save as 命令(兼容程度不详),要么将内容提交到服务器,由服务器附加 content-type: application/octet-stream 头并原文打回来实现。

偶然间,发现 HTML5 的 <a> 标签有了一个新属性,叫 download,取值是一个文件名,当一个带有 download 属性的 <a> 链接被点击时,其形为不再是一个网页跳转,而变成将目标以指定的文件名另存到本地,兼容性还不错的样子。

<a>href 值是可以随便改的,也就是说要另存的文件内容可以通过 JS 的方式轻松生成,对其指定一个 DataURI 就可以决定要保存的文件内容了,配合 Base64,甚至可以产生一个二进制文件!

原理简单,实现无比容易,就不在这儿贴代码了,戳我可以看看 live demo

Tracker 新增“活动监视器”插件

2013-05-14 by Dron

Tracker 刚刚上线了一个小功能,叫做「活动监视器」,名字来源于 OSX,Tracker 的这个小功能,用于监控 JavaScript 的活动。

如果你想找到网页中某个功能的 JavaScript,可以尝试下这个功能,方法:进入“活动监视器”面板,点击「开始监控」按钮,Tracker 进入监控状态,这时再切到「当前网页」面板,进行一系列操作(确保网页没跳转到其它地址)后,再回到「活动监视器」,你会看到你进行的这一堆操作,已经在监视器中产生了一些日志,点击某条日志的「查看」链接可切换到代码面板,橙色标注的代码即是刚刚活动的 JS 代码。

另外,「活动监视器」也可以监视异步的代码,希望可以帮到你。

Tracker 主页君:http://ucren.com/tracker/docs/index.html

将 WebWorker 改造成无外链文件模式

2013-05-06 by Dron

WebWorker 允许我们在浏览器中使用多线程来进行高耗时计算,但是,WebWorker 必须引用同域的 JS 文件,这在有些场景下不是很方便应用。

我尝试对此进行包装,期望调用 WebWorker 的地方可以直接声明 Worker 文件的内容,不需再外链一个 JS 文件,以下是未经所有浏览器测试的代码,如需应用,你可能需要做些测试和改进。

var myWorker = function(){
  var functionBodyRegx, URL, contentType, code, url;

  functionBodyRegx = /^[^{]+\{([\s\S]*)\}$/;
  URL = window.URL || window.webkitURL;
  contentType = { type: "text/javascript; charset=utf-8" };

  return function( fn ){
    code = fn.toString().match( functionBodyRegx )[ 1 ];
    url = window.opera ? 
      "data:application/javascript," + encodeURIComponent( code ) :
      URL.createObjectURL( new Blob( [ code ], contentType ) );

    return new Worker( url );
  }
}();

测试代码:

var worker = new myWorker( function(){
  onmessage = function( event ){
    postMessage( event.data );    
  }
} );

worker.onmessage = function( event ){
  alert( event.data.message );
};

worker.postMessage( { message: "hello myWorker!" } );

戳这里

在 Chrome/Safari/Firefox 下测试通过,IE/Opara 下未做测试。