仅显示以下 5 篇带「代码」关键字的文章。 返回词云  或  查看全部文章

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

强制留在本页

2013-04-28 by Dron

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

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

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

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

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

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

2013-01-14 by Dron

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

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

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; 这个注释后,再重新运行一下试试。

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