Archive for the ‘Javascript’ Category

浏览器们的原生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 »

主流框架中DOMContentLoaded事件的实现

在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件、DOM操作某些结点等。原来比较常用的是window的onload事件,而该事件的实际效果是:当页面解析/DOM树建立完成,并完成了诸如图片、脚本、样式表甚至是iframe中所有资源的下载后才触发的。这对于很多实际的应用而言有点太“迟”了,比较影响用户体验。为了解决这个问题,FF中便增加了一个DOMContentLoaded方法,与onload相比,该方法触发的时间更早,它是在页面的DOM内容加载完成后即触发,而无需等待其他资源的加载。Webkit引擎从版本525(Webkit nightly 1/2008:525+)开始也引入了该事件,Opera中也包含该方法。到目前为止主流的IE仍然没有要添加的意思。虽然IE下没有,但总是有解决办法的,下文对比了一下几大主流框架对于该事件的兼容性版本实现方案,涉及的框架包括:

Prototype
jQeury
moontools
dojo
yui
ext

Read the rest of this entry »