Dron 博客

坚持创新，追求卓越

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 下未做测试。

阅读全文

获取 html 注释节点

2013-05-03 by Dron

Tracker 需要移除页面的 HTML 注释节点，鉴于注释的复杂性，为了靠谱点，不使用正则了，顺手写了个获取 HTML 注释的工具函数：

var getHtmlCommentNodes = function(){
  var cn, push;

  cn = document.COMMENT_NODE;
  push = [].push;

  return function f( node ){
    var result, c, l, i;

    result = [];

    if( node.nodeType == cn )
      result.push( node );
    else if( c = node.childNodes, l = c.length )
      for( i = 0; i < l; i ++ )
        push.apply( result, f( c[ i ] ) );

    return result;
  }
}();

用法：

getHtmlCommentNodes( document.documentElement );
阅读全文

强制留在本页

2013-04-28 by Dron

有一些特定应用，在用户离开当前页面时会弹出一个对话框，询问是否真的离开，给用户多一次选择，以确保未完成的草稿得已保存。

这种弹窗都是在页面的 onbeforeunload 事件里实现的，这个事件还可以用来发送统计请求。我今天在考虑这个问题时来了灵感，如果在这个事件里强制地址跳回本页会如何呢？于是我造了一段测试代码：

window.onbeforeunload = function(){
  setTimeout( function(){ location.href = "#"; }, 0 );
};

将上面的代码粘贴到任意网页的 console 中执行，神奇的事情发生了：点击该网页的其它链接，根本跳不走，其实是跳走了立刻又被跳了回来（查看控制台的网络面板可以验证）。如果是在地址栏上输入其它地址，回车后也会强制被替回来，有点意思。

在 Chrome/Safari 中测试通过，Firefox 不通过，IE/Opara 未测试，有点暴力，不推荐使用。

阅读全文

使用 chrome 的 disable-web-security 参数联调线上数据

2013-04-23 by Dron

受浏览器的同源策略限制，开发环境中前端页面无法跨域使用线上数据，解决方法有很多种，典型的如中间夹了一层网络代理。

我找了一下 Chrome 的选项，没有关于降低跨域限制的，于是想到了启动参数，果然在这里：

open -a /Applications/Google\ Chrome.app --args --disable-web-security

加这个参数启动 Chrome，访问任意页面，不再受同源策略限制，页面中的 JS 可以任意发送跨域网络请求。

阅读全文

关于英文名 dron 的来历

2013-03-06 by Dron

今天跟人聊英文名，扯到了 dron 的来历，我也不好意思说当时是因为拼错了 dom 这个词，就把预想好的解释给说了：

Dynamic（有活力的）
Rational（理智的）
Optimistic（乐观的）
Nice（友好的）

阅读全文

A 星寻路

2013-02-15 by Dron

今天整理硬盘时发现了五年前写的 A 星寻路。

印象中这是我学习算法的初个版本，自从 @寒冬winter 老师当即秀出来更优越的版本后，我再也没碰过算法了，现在再看，代码已然晦涩、思路全无，风格更是我现在十分讨厌的单行的超长逻辑运算，笑自己原来也曾这么年轻过。

阅读全文

2013 烟花彩蛋

2013-02-09 by Dron

去年在这个博客上线的 2012 地裂特效 大家还有印象么？今年也不例外，刚刚在博客上悄悄上线了你看到的这个小效果，给大家拜年了！

农村现在已经开始不安静了，回响在耳边的是远近传来的贺除夕的各种鞭炮声音，噼里啪啦的，让人心情很是复杂，我也应个景，早在几天前，我已经开始进入了准备状态，着手写这个效果，可是没办法完全投入，这几天总是各种瞎忙不知所事，算了下，前后用了有 4 个晚上的零碎时间，总算赶在除夕凌晨把这事给了了，祝来到我博客的新老朋友新年快乐、飞黄腾达！

2013-2-9 更新: 本来进入博客的每一个页面都有这个效果，后来嫌给切换页面时造成干扰，改为只 进入本博文页面 才展示效果。

阅读全文

如梦令 - 码农

2013-01-19 by Dron

即兴淫诗一首，献给深夜还在调 bug 的苦逼码农们：

常现黎明三更，研码不知惜命，
兴尽撸一发，误入递归深境，
不幸，不幸，IE 停止响应。

阅读全文

JavaScript 执行覆盖分析工具 —— Tracker

2013-01-14 by Dron

这个工具写了有小半个月了，本来想等做完美了再发出来，想想每天的进展这样慢就算了，先发也能更早收到使用者的反馈，初版肯定会有很多 bug，希望大家能够向我提出来。

为了能更快速的完成开发，我们往往会在项目里引入各种各样的 JS 库，而实际上，项目本身对这些 JS 库的利用率很少，很多情况下只是用了它其中的一两个功能，这样导致项目产生大量的冗余代码，一定程度上影响了网页加载速度，如果有方便的工具，可以分析出项目在运行过程中覆盖到的 JS 代码，将大大有利于我们做后续的瘦身工作，Tracker 这个工具的想法就这样产生的。另外，和 JSCoverage 一样，Tracker 也能帮助我们方便地发现测试用例对源码的覆盖程度。

阅读全文

Ajax 一个 GBK 目标后内容乱码的解决方案

2013-01-10 by Dron

Ajax 请求一个 GBK 的页面时，如果内容出现乱码，说明服务器在响应内容时没有指定 Charset 编码，浏览器对于这样的响应默认以 UTF-8 解码，故出现乱码，通常在服务器端配置个 Header 就可以解决。

如果请求的目标是不可控的（比方说别人的站点），通过 XHR 对象的 overrideMimeType() 也可以指定编码：

xhr.overrideMimeType( "text/html;charset=" + charset );
阅读全文

Firefox 浏览器 document.write 之后...

2013-01-07 by Dron

今天遇到一个诡异问题，经查问题出现在 Firefox 浏览器上 document.write 之后，我把复现问题的主要代码摘出来了：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <script>
    // navigator.a = 1;
    setTimeout( function(){
      document.write( "blank" );
      alert( "window: " + ( window.window === window ) );
      alert( "navigator: " + ( window.navigator === navigator ) );
      alert( "document: " + ( window.document === document ) );
      alert( "location: " + ( window.location === location ) );
      alert( "String: " + ( window.String === String ) );
    }, 1 );
  </script>
</html>

如果不运行代码，凭经验你们先猜猜以上 alert 都会是什么结果？（限 Firefox 浏览器）

戳这里在线试试

打开 // navigator.a = 1; 这个注释后，再重新运行一下试试。

最后，我也没弄明白为什么。

阅读全文

关于 ArrayLike 的二三事

2012-11-29 by Dron

在浏览器中，经常会遇到一些具有部分数组特性的对象，如 Arguments、NodeList 等，这些对象是一组数据的有序集合，有长度、下标等特性。

它们不是真正意义的 Array，我们喜欢称作 ArrayLike 或「伪数组」，不能使用 Array 的原生方法来直接操作它们，但是可以跨原型链来对它们实施调用，如：

Array.prototype.slice.call( arguments, 0 );
阅读全文

游戏《勇敢的小蝌蚪》设计草稿

2012-05-17 by Dron

这个游戏想很久了，一直没有时间把需求设计写出来，今晚刚好有一点空闲，那就把之前的零碎想法整理一下吧。

勇敢的小蝌蚪

名称也斟酌很久，最后确定「勇敢的小蝌蚪」，因为小蝌蚪确实很不容易的，竞争对手那么多，还有各种障碍，没有相当手段千万百计是通不了关滴。

玩家的角色是一只小蝌蚪，控制小蝌蚪的游戏速度与方向寻找大保垒，对手是其它十万只蝌蚪，场景在一个透明液体中，过程中可以吃不同气泡增加能量或技能或装备，获胜条件是找到并进入保垒中，会有一些障碍：红色液体，黄色液体，甚至褐色固体，有特殊关卡：直肠关、硅胶套关和食道关。

阅读全文

牛顿撞球

2012-05-14 by Dron

又有新作品了，这次叫《牛顿撞球》。

凡是名字扯上「牛顿」的东西，都显得很高端的样子，名字不是我起的，这个物件本身就叫牛顿撞球，也叫弹性钢球，之前我也不知道它叫什么，是从同事手机上一个应用得知的，看到他手机上的这个应用，我这个程序控立马就兴奋起来，遂实现了一个。

源码放在 github 了: https://github.com/ChineseDron/newton-billiard-ball

阅读全文

错觉艺术(2)：将普通照片立体化

2012-05-09 by Dron

花了几个小时，终于把我儿子的照片 P 完了，兴奋之余，决定还是把博客文章也一起写完。

直接看 Demo，后面的内容就当是废话吧。

实现原理简单得不得了，大多数人一眼就看明白：把照片按照景物的距离 P 成多层，每个层按距离的大概比例做位移，离镜头越远的景物，移动的速度越快，反之则相反。镜头焦点处的层不动，焦点之前的景物和焦点之后的景物移动方向保持相反。

个人感觉，本例的难点不在于 JS 实现，JS 大概也就几十行就搞定了，主要工作量在于 P 图上，把一张图分层，每个图层还要分别做镂空填补（可通过印章），图层僵硬的边缘要柔化（可用橡皮），当然，分得图层越多，立体效果越好。

阅读全文

相册前端源码下载

2012-05-06 by Dron

见《相册小样预览》博文的评论中，有不少朋友提出要源码，我直接放这儿吧，需要的朋友自行下载。

不过遗憾目前并没有后台管理功能，需要自行开发，我是通过 Google 的 Picasa 软件进行维护的。JS 代码不是源码状态，没有做压缩。可以直接修改。

下载地址

阅读全文

错觉艺术(1)：JavaScript 版的 3D 地球

2012-04-26 by Dron

最近被炒得比较火的「绿色承诺，拯救地球」活动中，有一个 Flash 版的 3D 地球，我一看来了兴趣，一直想用纯 JavaScript 也实现一版，直到昨晚才腾出点时间，开始折腾这事。

这里是 Demo。

实现原理也简单，直接把 .mask 的 <div> 设置为 display:none 就能看明白：上下两个层重叠，上层放一个 png 背景图，该 png 图片中间有个篓空的圆形，目的是透过该圆形看到后一层的图片，这样，基本的球状就完成了；下层放的是一张滚动的地图，该地图被拆碎分放到 99 个 div 容器中，这些容器大小不一，成条状横向并排，使之拼合起一张完整的地图，这些 div 的宽度是根据正弦曲线计算得出，越靠中间的 div 越宽，使地图能呈现出曲面效果，滚动地图的实现是通过对这些 div 改变背景图片的位置来完成，此外，我对这些 div 做了不同程度的纵向拉伸，边缘低，中间高，也是根据的正弦曲线算法，使地图滚动时点的物理走向更能加接近球面的特点，当然，这是错觉艺术，更像是卷纸，不是真正意义上的球面。

由于中间的容器排列方法为横向，并且拉伸了高度，这样做，决定了地球只能做正东或正西方向的滚动，其它方向的滚动需要改变容器的排列和拉伸方法，小有复杂，我做了一些实验，效果不是很理想。

阅读全文