Latest Publications

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);

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

(更多…)

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

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

其实,在Ajax应用中是完全可以解决以上的“前进”、“后退”以及链接收藏问题的,但是鉴于各种浏览器的“特性”,需要解决很多问题才能实现这一目标,以下列出了实现浏览兼容历史管理方案需要解决的一些主要问题。

(更多…)

Flex中的布局

首先说说Flex中的元素分类,从功能层面可以把Flex中的元素分为组件(Components)和容器(Containers)两大类:
组件 – 是指那类具有明确交互或数据展示功能的元素,例如Button、Checkbox、Datagrid、List等。
容器 – 是指那类用来放置其他元素的元素,容器往往不具有特定的交互功能,主要的功能就是容纳元素。容器再细分又可以分为布局(Layout)容器和导航(Navigator)容器,其中布局容器的功能就是用来布局界面元素的,例如Application、Panel等;导航容器主要用于进行功能性的导航,进行界面切换,例如TabNavigator等。
(更多…)

Flex MXML初探

MXML

MXML是Adobe为Flex推出的一套基于XML的标记语言,目的在于简化Flex的UI开发。实际功能则不仅仅局限于此,除了可以实现布局、控件等UI之外,还可以实现数据定义、与服务器交互等功能。MXML中的标签基本上都与Flex类库中的某个类相关联的(编译器标签除外),这一点从framework中的mxml-manifest.xml文件中可以看到。

(更多…)

Flash、Flex、Flash Player和AIR之间的关系和联系

从Adobe的产品范畴来看,Flash和Flex是面向开发人员的工具,开发人员依赖这两个工具来开发Flash应用程序。而Flash Player与AIR则是Flash的运行环境(runtimes),其中Flash Player主要用于浏览器而AIR主要用于桌面程序。

(更多…)

onmouseover & onmouseout

问题描述

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

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

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

(更多…)

把inline脚本写在合适的位置

今天读到Steve Souders的一篇关于如何放置内联脚本的文章-Positioning Inline Scripts,现总结在文本。

之前译的一篇文章《无阻塞加载脚本》谈到的是外部脚本对于页面性能的影响,例如阻塞资源下载、阻塞页面渲染等。而对于inline的脚本,同样存在类似的问题,有的甚至是有过之而无不及。

(更多…)

主流框架中DOMContentLoaded事件的实现

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

无阻塞加载脚本[译]+示例

      随着越来越多的站点向”Web2.0″应用发展,脚本的数量也在迅速增加。而与此同时脚本给页面性能带来的负面影响也是令人担忧的。在主流浏览器(例如IE6、IE7)中,由于脚本而产生的阻塞有以下两种:

  • 脚本会阻塞下载位于它之后的资源。
  • 脚本会阻塞渲染位于它之后的元素。

(更多…)

关于锚点

关于A标签的页内锚点,记录一下:
1. 目标元素的ID和Name都可以作为锚点,区别在于ID对于目标元素的类型是无限制的,而name则仅适用于以下元素:A, APPLET, FORM, FRAME, IFRAME, IMG, and MAP.
(更多…)