Archive for the ‘Javascript’ Category

HTML5实战之桌面通知

桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和WebIM是最为天然的结合。不过,目前支持Desktop Notification功能的浏览器只有Chrome5+。
关于通知的基础知识可以参考以下文档:
W3C标准:https://varnow.org/use_iframe/
使用教程:https://varnow.org/time-to-start-render-calc/
本文主要记录通知功能在Web IM中实际使用时的一些经验。

在实际使用的过程中,应该尽量减少通知功能对用户的干扰,最大程度的减少通知功能的出现,这就需要解决以下几个问题:
1. 收到多条消息时确保只出现一条通知;
2. 当用户处于IM出现的页面中时(页面处于Focus状态)将不出现通知;
3. 当用户使用多Tab开启多个存在IM的页面时,只要有一个页面处于Focus状态将不出现通知;
此外,还需要解决一个便利性问题
4. 如何让用户点击通知浮动层即可定位到具体的聊天窗口

Read the rest of this entry »

HTML5实战之本地存储(3) – 请求同步

在实际上项目当中,经常需要使用短轮询(每隔一定时间就向服务器发送一次请求,请求通常会立即返回)和长轮询(每次请求服务器会Hold一段时间直到有新数据或者超时,客户端收到数据后会立即进行下一次请求)来从服务器拉取数据,然后动态的更新页面。随着功能的增加,一个页面中往往存在不止一个这样的轮询请求,而且在用户开启多个Tab页面时,总得请求数会翻倍。而“请求同步”指的是在以上场景中,即使是开启多个Tab也只有一个Tab页面维持轮询连接,一旦数据返回后,就将数据同步到其他无连接的页面,最大程度的减少请求。实现的思路也很简单,先解决由谁来进行请求的问题,之后基于本地存储将数据进行同步即可。具体的实现则有不少细节需要注意的,以下详细阐明。

Read the rest of this entry »

HTML5实战之本地存储(2) – 操作同步

本文介绍Tab之间的操作同步的实现,所谓操作同步是指将用户在某个Tab窗口中的操作同步到所有其他同一站点得Tab中。例如IM窗口的操作(打开、最大化、最小化、关闭、设置等),由于很多用户会在多个Tab之间切换,而IM在每个页面中都存在,因此对于数据同步的要求是比较高的,以前的做法是使用服务器方式来同步,即所有操作都向服务器发请求,然后广播,Tab收到消息后再响应。缺点是比较浪费资源,另外延时也比较严重。

Read the rest of this entry »

HTML5实战之本地存储(1) – 兼容性与存储监听

很早之前调研过HTML5的本地存储-《DOM Storage全解析》,大致上对localStorage、sessionStorage等API做了下了解,但是一直没有机会真正的在项目中使用。终于这次借重构Web IM的机会,对本地存储做了更深入的使用,除了基本的API使用之外还在次基础上封装了一些应用层的库,例如Tab之间的操作同步、Tab之间的请求同步等。本文主要做一个阶段性的经验总结。

Read the rest of this entry »

DOM Storage全解析

Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤。此外,在IE6及以上版本中还可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用Flash Local Storage,但是这几种方式都存在兼容性方面的局限性,因此真正使用起来并不理想。针对以上情况,HTML5中给出了更加理想的解决方案:假如你需要存储复杂的数据则可以使用Web Database,可以像客户端程序一样使用SQL(不过Web Database标准当前正陷于僵局之中,而且目前已经实现的浏览器很有限);假如你需要存储的只是简单的用key/value对即可解决的数据则可以使用Web Storage。 本文主要从各个方面介绍一下Web Storage的具体情况。

Read the rest of this entry »

从另外两道题说起

最近貌似流行做Javascript题,Dmitry A. Soshnikov这又出了几道题-The quiz,还可以自我评分,有兴趣的可以去试试看自己可以得几分。本文主要挑了2道比较绕的题目来说几个知识点:
1. Javascript中的”,”(逗号)操作符
2. Javascript中”;”(分号)的重要性
3. Javascript中with块中的作用域
下面请看题目。

Read the rest of this entry »

Javascript预解析相关一则

先来看一段代码:
alert(”a” in window); /*true – 1*/
if( false ){
var a = 1;
}
alert(”b” in window); /*false – 2*/
if( false ){
b = 1;
}
alert(”b” in window); /*false […]

Read the rest of this entry »

浏览器环境相关检测技术介绍

本文主要介绍以下几项的检测方法:
1. Javascript版本信息
2. Cookie是否开启
3. 用户的屏幕分辨率
4. Flash版本号以及浏览器是否开启了Flash拦截功能
5. 浏览器字体大小是否正常(某些浏览器缩放后会导致页面布局混乱)
6. 浏览器的Ajax功能是否正常,包括Get方式和Post方式
7. 浏览器的图片浏览功能是否正常
8. 用户的网络速度
通过对以上几个问题的检测,开发人员能够比较全面的了解目标浏览器的整体环境。

Read the rest of this entry »

Javascript的“预解析”

1. Javascript在执行前会进行类似“预解析”的操作:首先会创建一个当前执行环境下的活动对象,并将那些用var申明的变量设置为活动对象的属性,但是此时这些变量的赋值都是undefined,并将那些以function定义的函数也添加为活动对象的属性,而且它们的值正是函数的定义。

Read the rest of this entry »

客户端实现准确的服务器时间同步

一、问题描述

需要解决的问题很简单,就是如何在页面上比较准确的显示服务器时间。目前比较常用的方法就是根据基准时间使用setTimeout或setInterval来计算最新的时间,这样的问题在于setTimeout与setInterval的时间精度比较低,经测试一分钟大概能相差几秒(与电脑性能以及运行的任务也相关),这样的精度在某些需求下是无法满足的。除此之外,如果要获得比较准确的时间可以定期与服务器进行校准,只是这样实现的成本大一些。

Read the rest of this entry »