Dron 博客

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 扩展。

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。

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