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 做了不同程度的纵向拉伸,边缘低,中间高,也是根据的正弦曲线算法,使地图滚动时点的物理走向更能加接近球面的特点,当然,这是错觉艺术,更像是卷纸,不是真正意义上的球面。

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