i,unbug

Undeniable[Better:见贤思齐,闻庸自省. Unique:独立思索,志在远方. Genuine:谦逊真诚,宽以待人.]

[译]JavaScript文件操作(2)-FileReader

Posted by on Jun 4, 2012 in HTML5 | 0 comments

上篇文章中,我介绍了在JavaScript操作文件,重点讲了如何取得File对象。 这些对象包含的文件的元数据在上传或者拖放到浏览器中时可以获取到。有了文件当然接下来就是读取文件了。

FileReader

FileReader 功能很简单: 从文件中读取数据和保存到JS变量中。此API特意设计成跟XMLHttpRequest 一样因为都是从外部读取数据。读取过程都是异步的不会造成浏览器阻塞。

FileReader 可以返回几种格式来文件数据的格式, 而且这些格式在读取文件时是必须的。通过以下几个方法可以宣告读取完毕:

  • readAsText() – 返回文件内容的纯文本格式
  • readAsBinaryString() –返回文件内容的二进制格式 (不推荐– 推荐使用 readAsArrayBuffer())
  • readAsArrayBuffer() – 返回文件内容的 ArrayBuffer 格式(图片文件推荐使用)
  • readAsDataURL() – 返回文件内容的 data URL格式
Read More

[译]JavaScript文件操作(1)-基础

Posted by on Jun 4, 2012 in HTML5 | 4 comments

多年前,我在Goolge面试中被问及哪些改变会能使我得以提高Web的用户体验的。 在我的心目中的第一位是有不用<input type="file"> 控件实现文件操作的办法。尽管Web的多数部分已经改变,但操作文件还是最原始落后的方式。终于,HTML5新的API到来了,在较新的桌面浏览器中我们有更多操作文件的方式了 (iOS 暂时不支持)。

文件类型

文件类型定义在 File API[1] 的规范里,并且是File的抽象. 每个File实例都有以下属性:

  • name – 文件名
  • size – 文件的大小字节数
  • type – 文件的MIME type

一个File对象给出了一个文件的基本信息而无需直接访问文件内容。这点很重要,因为读取文件需要进行磁盘操作,文件的大小直接影响了读取过程消耗的总时间。一个File对象实是一个文件的引用,而获取文件的内容则是另一个完全不同的过程。

Read More

来看看EcmaScript6新特性的类继承和模块化

Posted by on Jun 4, 2012 in JavaScript | 0 comments

ES6新增了很多非常实用的功能,我对其中的类和模块化非常感兴趣,
1.类新增extends继承,super和prototype:

class Point extends Base {
    constructor(x,y) {
       super();
       this[px] = x, this = y;
       this.r = function() { return Math.sqrt(x*x + y*y); }
    }
get x() { return this[px]; }
get y() { return this; }
proto_r() { return Math.sqrt(this[px] * this[px] +
this * this); }
equals(p) { return this[px] === p[px] &&
this === p; }
}

2.模块化其实跟commonjs规范差不多,可以export对外公布方法,也可以import引入模块中的方法.

modules:

module math {
  export function sum(x, y) {
    return x + y;
  }
  export var pi = 3.141593;
}

import {sum, pi} from math;
alert(sum(pi,pi));

详情

Read More

[译]手把手教你编写iOS上Mobile Web App实现Fixed Position和模拟滚动

Posted by on Jun 3, 2012 in Mobile Web App | 5 comments

背景概述

Google已经在Mobile Web App开发上取得了很大的突破. HTML5已经拉近了Mobile设备Native App与Web App的差距. mobile Gmail 正是Google的Fixed position的最佳实践之一. iPad上的基于两栏的Gmail也运用了这种实现机制.

桌面浏览器本身就支持 position: fixed. 但 mobile Safari在iOS5之前不支持, 我们只能定制一个模拟滚动的工具来替代原生的滚动.

本教程就是在Mobile Web App上如何实现position: fixed的,就以下几点来讲:

  • 如何布局
  • 通过transforms实现滚动的动画效果
  • 通过 transitions实现滚动的惯性冲力
  • 触摸屏幕时中止滚动,即在打断 transitions的执行
Read More

Blog终于重启了

Posted by on Jun 2, 2012 in Lounge | 4 comments

最后一编Blog是去年7月份,自己亲手开发的GAE还是很有动力去写些东西的.无奈,Google最终还是收费了.而且价格和计费方式让我很受伤很受伤啊!不过也感谢GAE让我学到不少东西,即使大部分是后端知识.十 个月过去了,说忙也没比以前多忙,只是没有写过一编Blog.到是写了不少微博.新的公司新的环境新的项目总有很多新的收获,趁着这会真的不忙的时候我重启了Blog.为了说明我的决心我真的拿出点诚意来了,我上JustHost买了空间买了独立IP.安装了Wordpress,精心挑选了个主题小改了一翻,安装了不少插件.就这么两天就搞定了!

Read More
Page 4 of 41234