无线前端开发 - cssoul.com

学习html5的history API

黑幕困兽 — Mon, 29 Aug 2011 11:40:30 +0800

不得不佩服下谷歌Chrome团队，利用HTML5和CSS3实现了一本相当漂亮的在线电子书：《关于浏览器和互联网20件事》。

访问地址：http://www.20thingsilearned.com

话说这本电子书已经出来很久了，不过今天来看依然觉得相当的赞。我们无需刷新页面，就可以来回切换电子书页面，这正是OPOA（One Page One Application）的完美体现。

现在正在学习关于history API这方面的东西，所以特别感兴趣的是他们如何使用window.history.pushState()和window.history.replaceState()来做页面之间的不刷新切换。

今天查阅了一些资料，基本上对history API有了一个基本了解。

首先要说的就是history是个全局，即window.history。看到这个变量名你一定很熟悉，因为经常可以看到用window.history.back()或者window.history.go(-1)来返回上一页的JavaScript代码。

所以history并不是什么新东西，在HTML4的时代，我们可以使用它的这几个属性和方法：

length：历史堆栈中的记录数。

back()：返回上一页。

forward()：前进到下一页。

go([delta])：delta是个数字，如果不写或为0，则刷新本页；如果为正数，则前进到相应数目的页面；若为负数，则后退到相应数目的页面。

现在，HTML5为其又添加了以下2个方法：

pushState(data, title [, url])：往历史堆栈的顶部添加一条记录。data为一个对象或null，它会在触发window的popstate事件(window.onpopstate)时，作为参数的state属性传递过去；title为页面的标题，但当前所有浏览器都忽略这个参数；url为页面的URL，不写则为当前页。

replaceState(data, title [, url])：更改当前页面的历史记录。参数同上。这种更改并不会去访问该URL。不过目前只有Safari 5.0+、Chrome 8.0+、Firefox 4.0+和iOS 4.2.1+支持。如果想兼容老浏览器的话，可以试试History.js，而且它还修正了一些bug。

当然，在移动平台上，我们可以大胆尝试html5的history API。ios3.0+ 和Android2.0+ 平台的内置浏览器对history都比较完美了，利用它我们可以web app更趋向与native app。

下面，推荐几篇文章：

.Manipulating the browser history

.Session history and navigation

.Manipulating History for Fun & Profit

HTML5 Geolocation API

黑幕困兽 — Sun, 28 Aug 2011 21:10:42 +0800

HTML5提供了一组API用来获取用户的地理位置，如果浏览器支持且设备具有定位功能，就能够直接使用这组API来获取当前位置信息。

该API是navigator对象的一个属性 – Geolocation。目前除了ie内核浏览器外，其他浏览器的最新版本基本都支持Geolocation。同时，移动设备IOS 3.0+ 和 Android 2.0+ 系统也支持它，现在很多移动设备的应用加入了地理定位的元素。

那么我们接下来看如何使用Geolocation API：

一、检查浏览器是否支持Geolocation
var hasGeolocation = !!(navigator.geolocation); if(hasGeolocation){ alert(“浏览器支持hasGeolocation”); }

二、navigator.geolocation 的方法:

* navigator.geolocation有三个方法，分别是getCurrentPosition()、watchPosition()和clearWatch()

getCurrentPosition()方法

* getCurrentPosition()方法检索用户的当前位置，但只检索一次。当该方法被脚本调用时，方法以异步的方式来尝试获取宿主设备的当前位置。

* 该方法最多可以有三个参数：

geolocationSuccess：带回当前位置的回调（callback）（必需的）
geolocationError：有错误发生时使用的回调（可选的）
geolocationOptions：地理位置选项（可选的）

调用如下所示：

navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, geolocationOptions);

watchPosition()方法

* watchPosition()方法定期轮询用户的位置，查看用户的位置是否发生改变。其最多可带三个参数。

调用如下所示：

var watchPositionHandler = navigator.geolocation.watchPosition(geolocationSuccess, geolocationError, geolocationOptions);

clearWatch()方法

* clearWatch()方法终止正在进行的watchPosition()，该方法只能带一个参数。在调用时，其找到之前已经开始了的watchID参数并立即停止它。

调用如下所示：

navigator.geolocation.clearWatch(watchID);

三、navigator.geolocation返回一个Position对象:

* Position对象有两个属性：timestamp和coords。timestamp属性表示地理位置数据的创建时间，coords属性又包含七个属性：

coords.latitude：估计纬度
coords.longitude：估计经度
coords.altitude：估计高度
coords.accuracy：所提供的以米为单位的经度和纬度估计的精确度
coords.altitudeAccuracy：所提供的以米为单位的高度估计的精确度
coords.heading：宿主设备当前移动的角度方向，相对于正北方向顺时针计算
coords.speed：以米每秒为单位的设备的当前对地速度

* 注意altitude, altitudeAccuracy, heading, speed不一定被浏览器支持，所以大家最好看一下官方规范的描述，多一些了解。

四、注意事项

* Geolocation App是不能直接访问设备的，只能通过请求浏览器来访问设备；
* Geolocation涉及到用户隐私，在获取 Geolocation 的时候，需要先征求用户的意思。
* Geolocation目前没有比较好的前端兼容解决方案，但是在移动设备 iOS 和 Android上，我们可以大胆尝试使用。

利用css3的animation实现slide

黑幕困兽 — Fri, 26 Aug 2011 18:47:39 +0800

其实去年就开始接触到了css3动画，由于精力有限，然后就是关于这方面的资料并不多，所以只了解了下皮毛。

最近看了一下移动Javascript框架jQuery Mobile的源码，发现里面的页面切换，很多动画效果都是用css3来实现的。其实现在很多人依旧因为ie不支持css3而放弃去了解这方面知识，作为无线前端开发，很幸运能够走在大家前面去了解这些东西。

今天，主要介绍一下animation,那么先看下面一段代码。

/* 确保我们是在一个 3-D 空间 */ -webkit-transform-style: preserve-3d;


/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */ 
-webkit-animation-name: x-spin;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear; } 
/* 定义要调用的动画 */ 
@-webkit-keyframes x-spin { 
0% { -webkit-transform: rotateX(0deg); } 
50% { -webkit-transform: rotateX(180deg); } 
100% { -webkit-transform: rotateX(360deg); }

}

animation对应的CSS属性列表：

animation-name 动画的名称。

animation-duration 定义动画播放一次需要的时间。默认为0；

animation-timing-function 定义动画播放的方式，参数设置类似transition-timing-function animation-delay 定义动画开始的时间

animation-iteration-count 定义循环的次数，infinite即为无限次。默认是1。

animation-direction 动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。

—————————————————————

有兴趣的可以看看我利用animation实现slide幻灯片。

点击查看Demo

JavaScript正则表达式

黑幕困兽 — Sun, 19 Jun 2011 02:42:05 +0800

上周，小组上做了下JavaScript正则表达式的分享，同时自己又重新温习了一下这个知识点。

其实在使用JavaScript过程中，正则表达式的使用场景还是蛮多的，当然很多情况可能是校验表达用到。不过这方面的正则很多，随便google一下就一大堆方案。要学好JavaScript，这块知识点也是不能落下的。

这个ppt也只说到比较常用的知识点，比较难的方面没有涉及到。不过对入门还是比较有帮助：）

View more presentations from 346682530

谈谈JavaScript中的this关键字

黑幕困兽 — Wed, 25 May 2011 23:52:38 +0800

this是神马？

在JavaScript中,掌握this关键字的使用非常重要。作为新手，在编码时常常会不知道当前this关键字引用的究竟是哪个对象，所以我们很有必要了解this。
首先，我们要知道两点：
在全局代码中，this始终是全局对象本身；
在函数代码中，this值在进入上下文时确定，即this值它不是静态的绑定到一个函数。

为什么使用this？

通过下面这个例子，我想大家应该就会明白this的作用。

function showColor() {
  alert(this.color);
};

var a = new Object;
a.color = "red";
a.showColor = showColor;

var b= new Object;
b.color = "blue";
b.showColor = showColor;

a.showColor();		//输出 "red"
b.showColor();		//输出 "blue"

我们实例化了两个对象a和b，这两个对象其实就拥有了两个作用域。两个对象的showColor属性都调用函数showColor ，而此时this在这两次调用过程中值都不一样。也就是说，使用this可以达到重用函数的作用。

this 使用场景

1、调用对象的方法

var obj = {
	x: 100,
	y: function () {
		return this.x;
	}
};
var test = obj.y();  //test的值为100，this指代对象obj

2、函数中使用

function test(num) {
	 this.a = num;
	 this.b = function () {
		return this.a;
	}
}
var obj = new test(10);
var c = obj.b();  //c的值为10，this指代对象obj

3、函数的调用

function test() {
 	return this;
}
test();  //此时this指代window

4、行内事件函数中的this

function click_handler() {
 	alert(this);
}
<button id='btn' onclick='click_handler()'>点击</button>

this在此例子中，指代window对象，并不是知道dom元素#btn ，如果要让this指代触发事件的dom元素，可以使用下面的方式。

5、事件监听函数中的this

  function click_handler() {
	alert(this);
  }
  function handler() {
	document.getElementById('btn').onclick = click_handler;
  }
  window.onload = handler;
<button id='btn'>点击</button>

6、特殊（诡异）情况

var obj = {
	x:100,
	y:function(){
		setTimeOut(
			function(){alert(this.x);},2000);
	}

};
obj.y();

此时this并不是指向对象obj，this.x的值为undefind，该情况比较特殊，很多公司面试题会以这个为考点。要解决这个问题，我们可以通过一下方式：

var obj = {
	x:100,
	y:function(){
		var that = this;
		serTImeout(
			function(){alert(that.x);},2000);
	}
};
obj.y();

7、this与 apply()、call()

通过call和apply可以重新定义函数的执行环境，即this的指向，这对于一些应用当中是十分常用的。

1、call();

function changeStyle( type , value ){
    this.style[ type ] = value;
}

var one = document.getElementById( 'one' ); 

changeStyle.call( one , 'fontSize' , '100px' );

changeStyle('fontSize' , '300px');  //出现错误，因为此时changeStyle中this引用的是window对象，而window并无style属性。

2、apply();

function changeStyle( type , value ){
    this.style[ type ] = value;
}

var one = document.getElementById( 'one' ); 

changeStyle.apply( one , ['fontSize' , '100px' ]);

changeStyle('fontSize' , '300px');  //出现错误，原因同上

5.1东极行

黑幕困兽 — Wed, 18 May 2011 23:55:56 +0800

5.1三天长假，和一伙朋友到舟山那边的东极玩了一次，这是我第一次零距离亲近大海，感觉相当不错，非常值得回味。

今年长假都有出去玩，非常有意义，摆脱掉 – “宅”！

话说世界上有南极和北极，在中国东海上还镶嵌着一颗璀璨的明珠——东极”。这个应该很多人都不知道吧～
东极主要风景有庙子湖、青浜岛、东福山。我们这次玩了庙子湖、东福山两个岛，时间有限，当然挑了最有意思的两个岛了。

我们从舟山沈家门港出发，坐东极轮首先来到庙子湖岛。刚到岛上，就感到一股浓厚、古朴的渔家特色。

庙子湖岛上面住着很多居民，有一个小镇 – 东极镇。镇上有个博物馆，记录着过去的小岛故事～

岛周围有一大片养殖区，具体也不知道是什么，周围很多渔船在忙碌着～

好多当地人的私家船安逸的飘在海里，很想自己开着体验一把。

放好行李，我们就在岛上绕了一圈，吹着海风，看着美景，相当给力，一个字 – “爽”~

第二天，我们坐小岛之间的公交轮，到另一个岛 – 东福岛去玩，途经举着火把的财伯公雕像。

东福岛相对比较好玩，山比较高，风景更多，植物也相对茂盛，我们绕了大半个山，看到很多迷人的风景。

其实，我们是冲着这个“福”字绕的，大家都没有方向感找了很久才找到它。”福如东海.寿比南山”之说的”福如东海”就是现东福山岛，而据说刻有“福”字的石头能与海天佛国普陀山的”天下第一石”媲美。

下午，我们有跟旅社主人一起去钓鱼，玩的很开心，大家还钓到了10多条鱼哦，这就是我们在岛上吃的美味。（ps：虽然我不喜欢吃海鲜）

这次去玩，天气不是很好，本来想早点起来看日出，却只好作罢。有机会还想去玩玩，吼吼～

一次优化总结

黑幕困兽 — Wed, 18 May 2011 21:56:10 +0800

其实之前有整理过优化总结word文档，但是后来要做一次小组周会分享，并重新整理成了个ppt。每次写ppt都感觉没什么好写的，总有难以下手的感觉，不过每次写的过程中都会发现一些自己还模凌两可的问题，写完后都觉得还是蛮有收获的。
写ppt就当做是学习沉淀的一种方式，以后要多写。）：

春天的西湖,还是很美的~

黑幕困兽 — Mon, 25 Apr 2011 16:18:19 +0800

上周末，和朋友一起骑着新买的”宝马”游了趟西湖。还是那样，每次去西湖都是人挤人，苏堤上基本木有办法骑车。
最近天气很不错，春天的西湖到处都是绿色，到处都是花香，随处都是唯美的风景。

用怀旧的风格来表达自己对西湖的情感～

走在苏堤上，远眺对面被绿色环抱的宝俶塔。

柳条垂下，映衬着波光粼粼的湖水～

路边的花开的正茂盛……

最后，来张情侣车照片。（ps：大家都说这是情侣车，那就是吧。。。）

关于淘宝Android 2.0客户端前端的那些事…

黑幕困兽 — Tue, 12 Apr 2011 15:00:20 +0800

淘宝Android 2.0客户端已经上线了，有兴趣同学可以下载玩玩～
下载地址：http://wap.taobao.com/channel/act/other/a_taobao.xhtml

淘宝Android 2.0客户端更加注重“逛”的感觉，这次UI相比之前的版本有了很大的视觉突破，当然颜色仍然是橙色为主。

那么，这次改版前端主要做了些什么呢？
还是跟以前一样，很多页面仍然是Native app与Web app相结合。比如：宝贝简介、描述、评价，下订单，地址管理，旺旺聊天。
大部分情况都只需要Native把web页面包含进去就ok了，不过有时候也需要Native与web进行一些交互。这时候怎么实现呢？我们采用的方法是web页面设置一个标识，然后web服务端通过程序判断是否开启这个标识。当然通信的最终实现还是JavaScript调用客户端的方法（这些方法需要跟客户端的开发同学一起约定好方法名以及参数）。

这次对于前端来说，有两个页面改善比较大，一个是“宝贝简介页面”，另一个就是“旺旺聊天页面”。

宝贝简介页面：宝贝图片展示优化

之前的宝贝展示这块，用手指滑动该区域，页面不能上下拖动。现在，通过一个奇技淫巧解决了该问题。
造成页面不能拖动的原因是滑动过程中需要用到“return false;” ，阻止浏览器默认的事件，当然浏览器上下滑动的事件也被阻止了。这次优化主要是通过JavaScript脚本判断手指上下滑动的区间值，来判断页面是否需要上下滚动，进而通过scroll方法解决了这个问题。
同时，宝贝展示这块也用到了不少的css3属性，比如：box-shadow，border-image，webkit-border-radius……值得注意的是，低版本Android对多个box-shadow支持很差，最终有些地方换成border-image，用图片来解决阴影效果。

旺旺聊天页面

其实旺旺聊天内容滑动的实现方式跟宝贝展示基本差不多，都是通过touch事件来处理的。这里就不再阐述了，以后整理整理弄个demo上来。

总之，淘宝Android 2.0客户端开发过程中还是有所收获，以后的版本应该会不断的减少Web页面的份量，大家拭目以待吧。

插画元素网站

黑幕困兽 — Mon, 11 Apr 2011 14:40:08 +0800

我个人非常喜欢网页设计拥有手绘元素，这次展示的是创意插图作为网站的背景的网站。