一兮-生活，工作，点点滴滴

Javascript复制JSON数据

一兮 — Wed, 11 Apr 2012 14:23:50 +0800

复制数据很简单。

var a = jsonobj;

简单的就将jsonobj的值复制到了变量a中，但如果jsonobj是个json数据的话，你会发现修改a的值时，jsonobj也会跟着改变。

如果你对javascript中的prototype那套机制比较了解的话可能就会大概明白是怎么回事，是的，因为json其实也是个object，所以var a = jsonobj 赋值时，中间有个原型链会将两个关联起来。

要达到想要的复制数据也很简单：

var a = JSON.parse(JSON.stringify(jsonobj));

将json序列化为string再还原成json，因为中间产生了新的对象，所以两者不再关联。

这种写法看起来很不科学，但应该是比较好的办法了。

新Indexed Database(indexdb)标准

一兮 — Thu, 08 Mar 2012 10:59:46 +0800

W3c在去年12月6日时对indexdb的草案做了一些修改，虽然变动不是很大，但是却直接使得以前的代码不能正常work，主要在数据库创建的部分。

目前firefox10以后以及ie10(windows8 Consumer Preview)支持此标准，chrome未测，未知，但未来应该都会遵循这个标准。

具体的可以参考w3c的官方文档，地址在这里：http://www.w3.org/TR/IndexedDB/

在网上查找关于indexdb的教程的也需注意查看时间，如果是针对firefox10之前的代码或者12月6日前的代码在最新的浏览器上是不能正常work的。

写这篇文章本来是要填之前在那边win8的文章里说IE10里面indexdb bug那个坑的。后来重构的时候，发现这并不是BUG，是遵循的标准程度不一样的原因。而伴随着前几天windows8 consumer preview新出来的IE10已经遵循最新的indexdb标准，所以代码已经和firefox一样，所以这里不再理会那个所谓的bug.这里重点讲下新的数据库声明方式（这是变动部分），而是用indexdb的方法并没有变动。

比较大的一个变动部分是废弃了以前的 setVersion()方法，所以导致我们在创建数据库和createObjectStore的流程有一些变动，而且多了一些新的回调方法。

首先是创建数据库

var DB={};
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB; //各浏览器的各自的私有方法，这个不多说了；
DB.openDatabase(function(){
   console.log('Database open');   //数据库初始化完成后我们回到这里。
});
DB.openDatabase = function(callback) {
   var request = indexedDB.open('quicknote',1);   //注意区别以前的方法，这里第二个参数不再是description，而是数据库版本号
   request.onsuccess = function(e) {     //数据库打开成功回调
       DB.db = e.target.result;    //我们用DB.db来存放indexdb
       callback();
   };
 
   request.onupgradeneeded = function(e){    //第一次打开数据库或数据库升级时会触发，完成后根据情况触发success或者error
       DB.db = e.target.result;
       var db = DB.db;
       if(!DB.db.objectStoreNames.contains('notes')){    //createObjectStore,以前需要在setVersion时才能执行。
	/* create object store*/
	  db.createObjectStore('notes', {keyPath:'id', autoIncrement:true})
	      .createIndex('updated', 'updated', { unique: false });
       }
   };
 
   request.onerror = function(e){   //数据库打开错误回调
       console.log(e);
   }
}

上面就是新的indexdb的数据库初始化方式，相对以前的来说，代码简化了不少，也不用人为的判断数据库版本号了。

烦心事真多，很无助。

一兮 — Tue, 28 Feb 2012 21:47:57 +0800

家里遇到一些事，很是烦恼。
却又无能为力。
感觉自己帮不上什么忙又是很无助。
我需要一些法律援助，有谁能推荐吗？

关于win8 metro版的Quick Note

一兮 — Tue, 10 Jan 2012 00:16:24 +0800

随着US时间1月8号M$第一波参赛程序的提交截止，Quick Note for Win8的开发也算是告一段落，中间因为一些各种准备不充分问题，虽然这次提交的版本还没达到最完美的我想要的最完美的状态，但总算顺利的完成任务。

这之间有很多波折，从最早的win8 developer preview发布时，我曾第一时间在我的笔记本上直接硬盘安装win8，大概的了解了metro界面和以前传统desktop的区别，并简单的从visual studio 11 preview中创建了一个split的javascript metro项目，build，整个过程很顺利，简单的浏览了项目文件的组成，当时评估是基于web的APP很好移植，甚至你可以简单的理解成使用javascript build的metro程序其实就是封装了一个全屏的IE10而已（现在开来，这句话理解也确实没有错）。

凭着这个了解，粗略的评估了quick note应该是比较容易移植到win8 metro下，而因为preview中的win8 app store并没有开放，当时得到的消息是今年的2月份开放，所以这事情搁置了一旁，然后投入到另一个项目的开发中。

然后上个月下旬的时候得到一个消息说，M$在5个国家地区（不包括CN）有个第一波提交metro app的评选，将会出现在win8 beta版本的store中预置，这是个绝好的先机，所以迅速将重心转移到这边。

首先要思考的第一个问题是quick note数据的存放问题，因为考虑之前偶尔会有用户抱quick note chrome版本数据丢失的问题，所以这次想找个比较稳妥的数据储存模式，在了解懂啊winRT并没有提供SQL的数据库支持，并在一些第三方的选择比如winrtsql等，最后还是选择了使用html5中的indexdb，第一，这是metro中唯一有文档的数据库级别的储存，第二，之前在firefox中的quick note也是使用indexdb储存，移植应该会很顺利。

然后是文件的迁移，并解决一些列bug，以及一些IE10的兼容问题，以及一些metro app的一些特殊兼容问题，比如不允许直接使用innerHTML之类的方法（当然也包括jquery的.html()方法），debug，竟然出奇的顺利，两天时间就能把chrome的quick note移植到win8中，并还有和diigo的云同步功能。

事情转变在某天晚上看了win8 build大会的视频后，重新认识了metro UI的设计。

因比赛的评分使用metro UI的分值比重是50%，看了视频后，直接推翻直接准备在基于split view的模板上重新设计quick note。

和UI nancy简单的讨论后，然后开始迅速的搭建HTML结构原型。

并尽量的去使用metro winJS中提供的UI，比如app bar ,setting ,listview之类的东西。

后来又添加上了系统层的share，search之类的东西。

因为时间问题，中间取舍了很多，最后提交的版本中，里面有个indexdb的小bug也未来得及解决，只是用了一些hack的办法去处理（关于什么bug，和firefox中indexdb的区别，我后面会专门开文章介绍）。

虽然赶在了截止之前提交了程序，但是是否能入围，只能祈祷。我自己做出来的东西，我只能打70分，如果给我更充裕的时间，我能研究透win8的API，应该能把quick note做的更完善。

祈祷能入围吧。

javascript 处理二进制流

一兮 — Thu, 27 Oct 2011 17:19:02 +0800

在javascript中，二进制流一般是一个[object ArrayBuffer]的对象，一般的javascript方法是没法处理这个object的。

要处理它，我们需要用Uint8Array将它转换成一个8位的整形数组。

当然，如果你需要，你还能将它还原成string

// t is a arraybuffer
 
var uInt8Array = new Uint8Array(t);
//转换为二进制数组 例如 var byte3 = uInt8Array[4]
 
for(i=0;i<uInt8Array.length;i++){
  d+=String.fromCharCode(uInt8Array[i])
}

CSS3最新中文手册

一兮 — Fri, 14 Oct 2011 09:04:14 +0800

来自其他网站的，这个比较全：

http://css.doyoe.com/

JS 获取浏览器版本

一兮 — Tue, 11 Oct 2011 17:06:54 +0800

在写JS时，很多情况我们需要知道浏览器的版本来做一些工作。

javascript获取浏览器版本方法：

//获取浏览器名
navigator.appName    // Microsoft Internet Explorer / Netscape 等等
 
//针对IE 获取详细浏览器版本
navigator.appVersion.split(";")[1]   // MSIE 8.0 / 7.0 /6.0
 
//其他获得浏览器详细版本
navigator.appVersion

在chrome/firefox中，navigator 这个全局对象还提供了更多的关于客户端的信息，有兴趣可以console一下或者each一下。

Android调试，还是得原生ROM好

一兮 — Mon, 10 Oct 2011 11:11:27 +0800

之前在把diigo的power note的界面做了一些调整，在我的milestone上调试的时候，发现设置的titlebar的高度在一些activity生效，一些activity不生效，而且变的很窄。

当时手机的ROM是最新的MIUI，程序在android虚拟机上一切正常。后来猜测是可能是因为MIUI的深度定制UI导致这个BUG的发生。

下载了CM7重刷后，果然如此，问题解决。

如此，只能抛弃持续使用一年的MIUI了。

git查看远程仓库地址

一兮 — Thu, 29 Sep 2011 11:32:41 +0800

或许一些人使用git很少在命令行下，一般都会使用类似smartgit之类的可视化工具。如何查看当前项目的远程地址呢：

$ git remote -v

这个命令可以显示对应项目的远程克隆地址。

Add-on SDK 关于content scirpt的一些

一兮 — Fri, 09 Sep 2011 11:27:34 +0800

Firefox 的Add-on SDK (jetpack)从1.0rc2版本开始后，对content script的机制有个重要的改动，现在不能在content script中直接来操作页面的dom 和监听DOM事件

但诡异的是，这个改动它并没有写到它的开发文档里面。虽然可能的原因是使用到这个用处的人并不多或者jetpack本就不提倡这样使用。

因为在Read Later Fast / Quick Note / Awesome Screenshot for firefox 都使用到了这些东西，从而导致使用新的SDK build后的一些功能失效。

最初以为是BUG，去mozilla的bug系统搜时发现果然有这么一个说法：

https://bugzilla.mozilla.org/show_bug.cgi?id=660780

后来看到release note中确实提到了关于content script的改动：

We’ve changed the way content scripts interact with web pages, in order to improve security.

Previously, content scripts that accessed DOM objects in the page would frequently access the same objects as those being accessed by the page. This gives rise to two problems:

many changes to the page would be visible to the page, making it obvious to the page that an add-on was modifying it.

a malicious page might redefine functions and properties of them so they don’t do what the add-on expects. For example, if a content script callsdocument.getElementById() to retrieve a DOM element, then a malicious page could redefine its behavior to return something unexpected.

To deal with these problems, DOM objects like the global window object are now implemented in a way that ensures that content scripts that access those objects will get the native implementations of their properties and methods.

Content scripts that modify those DOM objects will modify a proxy object instead of the real object.

大致是说，为了安全性考虑云云，在content script与DOM交互的时候用到一个中间的代理。

但这个代理是什么却没有明确的说道，你需要去参考那个bug页面阅读后才明白是怎么回事。

简单点说，就是content script使用的页面的window对象不再是当前的window对象，而使用了一个代理的的 unsafeWindow 对象

如果这个变动导致你在content script中使用的document 或者jquery函数失效的话，你可以在content script中加上这么一句：

1	var document=unsafeWindow.document,$=unsafeWindow.$;