Archive for the ‘Javascript’ Category

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 »

浏览器们的原生JSON对象

一、什么是JSON

JSON是Javascript Object Notation的简写,单从字面上看可以翻译成:Javascript对象标记,在Javascript中可以使用JSON语法来描述一个对象。json.org是如下介绍JSON的:

Read the rest of this entry »

Javascript Callback的两种实现方案

下文主要比较两种现有的Javascript callback实现机制,暂且定为简单版和完整版,简单版的实现只有几行代码,但是无法捕获错误响应,完整版的代码多一些确可以实现错误捕获,而且可以使用的更方便。
简单版

简单版的实现大致如下:

var head = document.getElementsByTagName(’head’)[0];
var script = document.createElement(’script’);
/*onreadystatechange在IE下使用,onload在其他浏览器下使用*/
script.onload = script.onreadystatechange = function(){
if( !script.readyState || (script.readyState && script.readyState == ‘loaded’){
//TODO
}
}
head.appendChild(script);

短短几行代码已经能满足基本的需求了,而且兼容性还很不错。不过无法提供出错处理,而且使用起来不方便。

Read the rest of this entry »

Ajax应用中浏览器历史的兼容性解决方案

Ajax技术的优势在于可以按需加载以及无刷新加载,用户可以在一个单独的页面中完成传统技术中需要多个页面间刷新、切换才能完成的操作,这使得用户体验大大提升,Ajax应用也越来越普及。不过,正是因为其“无刷新”的特点也留下了很多诟病,最严重的一点就是使得浏览器的“前进”、“后退”和“刷新”按钮失效,在操作的过程中,当用户因为某种原因希望撤销当前操作时,却发现曾经熟悉的“后退”按钮依然是灰色的,当用户按下“刷新”按钮后确发现刷新的不是当前的画面……等等。此外,当用户点完了页面上所有可以点的地方后终于发发现了一处有意思的地方,于是决定将有意思的东西发送给他的朋友,当他的朋友收到链接并打开后却没发现任何东西…..这就是在Ajax应用中普遍存在的另一个问题-动态内容的不可收藏性。
其实,在Ajax应用中是完全可以解决以上的“前进”、“后退”以及链接收藏问题的,但是鉴于各种浏览器的“特性”,需要解决很多问题才能实现这一目标,以下列出了实现浏览兼容历史管理方案需要解决的一些主要问题。

Read the rest of this entry »

onmouseover & onmouseout

问题描述

在很多情况下,我们需要这样的一种效果,当鼠标进入元素时做某些操作,而当鼠标离开元素时又做另外一些操作。很自然的我们会想到DOM事件中的onmouseover和onmouseout事件,其中onmouseover表示的是当鼠标从元素之外移入元素时触发的事件,而onmouseout则表示鼠标从元素移出时触发的事件。具体效果请看这个页面。

从页面的效果中可以看出以下两个问题:

当鼠标从当前元素进入到其子元素时会触发当前元素的onmouseout事件,也就是说视其离开了当前元素。
当子元素中发生onmouseove和onmouseout事件时,由于冒泡机制会被父元素捕获。

Read the rest of this entry »