- 前端技术

JSON 入门指南

2008-10-10T16:04:33+08:00

JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 的交互。本文将快速讲解 JSON 格式，并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理。
尽管有许多宣传关于 XML 如何拥有跨平台，跨语言的优势，然而，除非应用于 Web Services，否则，在普通的 Web 应用中，开发者经常为 XML 的解析伤透了脑筋，无论是服务器端生成或处理 XML，还是客户端用 JavaScript 解析 XML，都常常导致复杂的代码，极低的开发效率。实际上，对于大多数 Web 应用来说，他们根本不需要复杂的 XML 来传输数据，XML 的扩展性很少具有优势，许多 AJAX 应用甚至直接返回 HTML 片段来构建动态 Web 页面。和返回 XML 并解析它相比，返回 HTML 片段大大降低了系统的复杂性，但同时缺少了一定的灵活性。

现在， JSON 为 Web 应用开发者提供了另一种数据交换格式。让我们来看看 JSON 到底是什么，同 XML 或 HTML 片段相比，JSON 提供了更好的简单性和灵活性。
JSON 数据格式解析

和 XML 一样，JSON 也是基于纯文本的数据格式。由于 JSON 天生是为 JavaScript 准备的，因此，JSON 的数据格式非常简单，您可以用 JSON 传输一个简单的 String，Number，Boolean，也可以传输一个数组，或者一个复杂的 Object 对象。

String，Number 和 Boolean 用 JSON 表示非常简单。例如，用 JSON 表示一个简单的 String “ abc ”，其格式为：

"abc"

除了字符 "，\，/ 和一些控制符（\b，\f，\n，\r，\t）需要编码外，其他 Unicode 字符可以直接输出。

这与绝大多数编程语言的表示方法一致，例如：

12345（整数）
-3.9e10（浮点数）

Boolean 类型表示为 true 或 false 。此外，JavaScript 中的 null 被表示为 null，注意，true、false 和 null 都没有双引号，否则将被视为一个 String 。

JSON 还可以表示一个数组对象，使用 [] 包含所有元素，每个元素用逗号分隔，元素可以是任意的 Value，例如，以下数组包含了一个 String，Number，Boolean 和一个 null：

["abc",12345,false,null]

Object 对象在 JSON 中是用 {} 包含一系列无序的 Key-Value 键值对表示的，实际上此处的 Object 相当于 Java 中的 Map，而不是 Java 的 Class 。注意 Key 只能用 String 表示。

例如，一个 Address 对象包含如下 Key-Value：

city:Beijing
street:Chaoyang Road
postcode:100025（整数）

用 JSON 表示如下：

{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}

其中 Value 也可以是另一个 Object 或者数组，因此，复杂的 Object 可以嵌套表示，例如，一个 Person 对象包含 name 和 address 对象，可以表示如下：

{"name":"Michael","address":
    {"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
}

JavaScript 处理 JSON 数据

上面介绍了如何用 JSON 表示数据，接下来，我们还要解决如何在服务器端生成 JSON 格式的数据以便发送到客户端，以及客户端如何使用 JavaScript 处理 JSON 格式的数据。

我们先讨论如何在 Web 页面中用 JavaScript 处理 JSON 数据。我们通过一个简单的 JavaScript 方法就能看到客户端如何将 JSON 数据表示给用户：

function handleJson() {
  var j={"name":"Michael","address":
      {"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
  };
  document.write(j.name);
  document.write(j.address.city);
}

假定服务器返回的 JSON 数据是上文的：

{"name":"Michael","address":
    {"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
}

只需将其赋值给一个 JavaScript 变量，就可以立刻使用该变量并更新页面中的信息了，相比 XML 需要从 DOM 中读取各种节点而言，JSON 的使用非常容易。我们需要做的仅仅是发送一个 Ajax 请求，然后将服务器返回的 JSON 数据赋值给一个变量即可。有许多 Ajax 框架早已包含了处理 JSON 数据的能力，例如 Prototype（一个流行的 JavaScript 库：http://prototypejs.org）提供了 evalJSON() 方法，能直接将服务器返回的 JSON 文本变成一个 JavaScript 变量：

new Ajax.Request("http://url", {
  method: "get",
  onSuccess: function(transport) {
    var json = transport.responseText.evalJSON();
    // TODO: document.write(json.xxx);
  }
});

服务器端输出 JSON 格式数据

下面我们讨论如何在服务器端输出 JSON 格式的数据。以 Java 为例，我们将演示将一个 Java 对象编码为 JSON 格式的文本。

将 String 对象编码为 JSON 格式时，只需处理好特殊字符即可。另外，必须用 (") 而非 (') 表示字符串：

static String string2Json(String s) {
    StringBuilder sb = new StringBuilder(s.length()+20);
    sb.append('\"');
    for (int i=0; i        char c = s.charAt(i);
        switch (c) {
        case '\"':
            sb.append("\\\"");
            break;
        case '\\':
            sb.append("\\\\");
            break;
        case '/':
            sb.append("\\/");
            break;
        case '\b':
            sb.append("\\b");
            break;
        case '\f':
            sb.append("\\f");
            break;
        case '\n':
            sb.append("\\n");
            break;
        case '\r':
            sb.append("\\r");
            break;
        case '\t':
            sb.append("\\t");
            break;
        default:
            sb.append(c);
        }
    }
    sb.append('\"');
    return sb.toString();
}


将 Number 表示为 JSON 就容易得多，利用 Java 的多态，我们可以处理 Integer，Long，Float 等多种 Number 格式：

static String number2Json(Number number) {
    return number.toString();
}


Boolean 类型也可以直接通过 toString() 方法得到 JSON 的表示：

static String boolean2Json(Boolean bool) {
    return bool.toString();
}


要将数组编码为 JSON 格式，可以通过循环将每一个元素编码出来：

static String array2Json(Object[] array) {
    if (array.length==0)
        return "[]";
    StringBuilder sb = new StringBuilder(array.length << 4);
    sb.append('[');
    for (Object o : array) {
        sb.append(toJson(o));
        sb.append(',');
    }
    // 将最后添加的 ',' 变为 ']':
    sb.setCharAt(sb.length()-1, ']');
    return sb.toString();
}


最后，我们需要将 Map 编码为 JSON 格式，因为 JavaScript 的 Object 实际上对应的是 Java 的 Map 。该方法如下：

static String map2Json(Map map) {
    if (map.isEmpty())
        return "{}";
    StringBuilder sb = new StringBuilder(map.size() << 4);
    sb.append('{');
    Set keys = map.keySet();
    for (String key : keys) {
        Object value = map.get(key);
        sb.append('\"');
        sb.append(key);
        sb.append('\"');
        sb.append(':');
        sb.append(toJson(value));
        sb.append(',');
    }
    // 将最后的 ',' 变为 '}':
    sb.setCharAt(sb.length()-1, '}');
    return sb.toString();
}


为了统一处理任意的 Java 对象，我们编写一个入口方法 toJson(Object)，能够将任意的 Java 对象编码为 JSON 格式：

public static String toJson(Object o) {
    if (o==null)
        return "null";
    if (o instanceof String)
        return string2Json((String)o);
    if (o instanceof Boolean)
        return boolean2Json((Boolean)o);
    if (o instanceof Number)
        return number2Json((Number)o);
    if (o instanceof Map)
        return map2Json((Map)o);
    if (o instanceof Object[])
        return array2Json((Object[])o);
    throw new RuntimeException("Unsupported type: " + o.getClass().getName());
}


我们并未对 Java 对象作严格的检查。不被支持的对象（例如 List）将直接抛出 RuntimeException 。此外，为了保证输出的 JSON 是有效的，Map 对象的 Key 也不能包含特殊字符。细心的读者可能还会发现循环引用的对象会引发无限递归，例如，精心构造一个循环引用的 Map，就可以检测到 StackOverflowException：

@Test(expected=StackOverflowError.class)
public void testRecurrsiveMap2Json() {
    Map map = new HashMap();
    map.put("key", map);
    JsonUtil.map2Json(map);
}


好在服务器处理的 JSON 数据最终都应该转化为简单的 JavaScript 对象，因此，递归引用的可能性很小。

最后，通过 Servlet 或 MVC 框架输出 JSON 时，需要设置正确的 MIME 类型（application/json）和字符编码。假定服务器使用 UTF-8 编码，则可以使用以下代码输出编码后的 JSON 文本：

response.setContentType("application/json;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter pw = response.getWriter();
pw.write(JsonUtil.toJson(obj));
pw.flush();


小结

JSON 已经是 JavaScript 标准的一部分。目前，主流的浏览器对 JSON 支持都非常完善。应用 JSON，我们可以从 XML 的解析中摆脱出来，对那些应用 Ajax 的 Web 2.0 网站来说，JSON 确实是目前最灵活的轻量级方案。

有关从 Flash 应用程序迁移到 ActionScript 3.0 的提示

2008-09-02T17:13:30+08:00

Adobe Flash CS3 Professional 引入了很多优秀的新功能, 包括 ActionScript 3.0 编程语言和 ActionScript 3.0 FLA 文件格式。本文是我转向使用 ActionScript 3.0 的过程中注解和反思的总结。我还提供了以下问题的解决方案:

关于影片剪辑处理的更改
关于下载数据、内容和元件的更改
关于 ActionScript 3.0 中构建对象类的更改
关于影片剪辑处理的更改以下注解解决如何处理影片剪辑的问题:

1. 显示对象与影片剪辑
我在 ActionScript 3.0 注意到的第一个地方就是 MovieClip API。在 ActionScript 3.0 中, MovieClip API 不再包含我经常使用的多数命令。我发现有一个新的模型用于画面对象, 其中影片剪辑作为画面对象容器, 为便于控制保留了注册项列表。 MovieClip API 现在主要用于反转时间轴。

在 ActionScript 3.0 中, 可以使用 addChild 方法查看显示在舞台上的画面对象。例如, 假设您要从“库”创建“组合框”组件的实例。要查看显示在舞台上的实例, 您需要编写以下代码:

import fl.controls.ComboBox;

var myCombo:ComboBox = new ComboBox();
addChild(myCombo);2. 实例验证
我发现了 ActionScript 3.0 类中处理实例方式的一些不同之处。在创作期间置于舞台的实例自动将其实例名称与其影片剪辑容器关联, 名称在 ActionScript 3.0 类中可用。像在 ActionScript 2.0 中一样在类中声明名称会触发编译器错误。反过来, 我也发现当针对不存在的实例设置属性时, 编译器也会报告错误。

要验证未定义的实例, 请使用 getChildByName 方法, 如以下代码所示:

var myInstance = getChildByName("instanceNameInQuestion");
if( myInstance!= null )
{
   // Then do something...
}3. 影片剪辑 (画面对象) 属性更改
在 ActionScript 3.0 中, 下划线 (_) 已从属性名称中去掉。在某些情况下, 为常用属性设计值的主要也已更新。

影片剪辑的 alpha 属性现在的设置范围为 0-1 而不是 0-100。例如, 50% 不透明应设置为:

myInstance.alpha = 0.5;画面对象的 scaleX 和 scaleY 属性现在以类似方式设置。例如, 150% 正常缩放应设置为:

myInstance.scaleX = 1.5;
myInstance.scaleY = 1.5;4. this, _root, _parent, and _global
this 别名可用于 ActionScript 3.0 中, 其行为与 ActionScript 的先前版本一样。 _global 路径在 ActionScript 3.0 中不存在。 _parent 可作为任何画面对象的父属性来访问。 _root 路径不再存在, 但使用舞台属性可以产生同样的结果。

5. 处理深度
我很快发现, swapDepths 和 getNextHighestDepth 在 ActionScript 3.0 不复存在。作为替代, 您要使用与影片剪辑容器关联的 DisplayObjectContainer 方法。 ActionScript 3.0 中的术语基于子对象列表中的画面对象“索引”, 而不是“深度”概念。

要将 myInstance 剪辑发送以堆序列的顶部, 请使用以下代码:

setChildIndex(myInstance, numChildren - 1);6. 使用 Drawing API
与 MovieClip API 的其他更改一样, 动态 Drawing API 已移动到画面对象的图形属性。除新位置外, 其使用过程相同 - 有几处明显的增强。

以下代码显示如何动态画出矩形, 然后将此矩形作为遮罩应用到其他实例。遮罩对象没有时间轴, 因此作为子画面而不是影片剪辑来创建:

import flash.display.Sprite;

// Create mask
var maskArea = new Sprite();
maskArea.graphics.beginFill(0xFF0000);
maskArea.graphics.drawRect(-29.5, -22.5, 59, 46);
addChild(maskArea);

// Apply mask
myInstance.mask = maskArea;注: 在考查以前与 MovieClip 对象关联的常用任务时, 请尝试在浏览 ActionScript 3.0 对象时考查 DisplayObject 类。有关深度控制和画面对象管理的更多信息, 请参见文档中关于 DisplayObjectContainer 类的说明。

关于下载数据、内容和元件的更改以下注解针对载入图像、服务器数据、元件和 URL 的载入:

7. 载入图像和 SWF
图像和 SWF 文件的载入不再通过 loadMovie 命令或 MovieClipLoader 类进行。而是使用 URLRequest 类和 Loader 类来完成此任务。

以下代码显示图像载入器脚本的骨架:

import flash.display.Loader;
import flash.net.URLRequest;

var request:URLRequest = new URLRequest("img/image1.jpg");
var loader:Loader = new Loader();
loader.load(request);
addChild(loader);8. 载入服务器数据和 XML
使用新的 ActionScript 3.0 XML 功能和新的 URLLoader 类, 我发现 XML 数据源的使用比以前容易得多。

以下示例显示如何载入 XML 文件并响应数据载入过程的完成:

import flash.display.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;

var loader = new URLLoader();
loader.load(new URLRequest("conf/settings.xml"));

function onDataHandler(event:Event):void
{
   if((event.target as URLLoader) != null )
   {
      var settingsXML = new XML(loader.data);
   }
}
loader.addEventListener(Event.COMPLETE, onDataHandler);9. 显式载入元件
attachMovie 命令和链接标识符在 ActionScript 3.0 中不复存在。有两种方法从库载入元件。两种方法都需要您为目标元件打开“链接”属性中的“为 ActionScript 导入”选项。由于您不再添加标识符, 必须使用类名称处理所有内容。如果要附加的元件没有自定义类, 请使用默认情况下插入的元件名称。这种情况下, Flash 使用元件的名称为您创建一个骨架类。在“链接”属性中设置类名称后, 您将必须确定类名称是显式已知还是动态提供。

当类名称与显示已知的元件关联时, 使用以下代码方案:

var myInstance = new MyClassName();
addChild(myInstance);注: 所有实例均使用 ActionScript 3.0 中的新关键字创建。

10. 动态载入元件
使用新关键字非常容易, 也是一种不错的脚本约定, 但仅适用于显示知道待实例化类的名称这种情况。在构建模板时, 我发现我在尝试实例化一个类的位置, 该类的名称通过 XML 字符串动态提供或使用某种命名约定。在这些情况下, 我使用为动态创建元件实例发现的第二种解决方案。

当类的名称不是显式已知时, 使用 UILoader 类, 如以下代码所示:

import fl.containers.UILoader;

// Attach movie
var myInstance = new UILoader();
myInstance.scaleContent = false;
myInstance.source = "myClassName";;
addChild(myInstance);11. 载入 URL
getURL 命令在 ActionScript 3.0 中不复存在。要调用 URL, 需要创建一个 URLRequest 实例, 然后调用 navigateToUrl 方法。以下 try 声明显示 ActionScript 3.0 异常处理的错误处理类型; 它显示如何调用 URL:

import flash.net.*;

var url = "";
var request:URLRequest = new URLRequest(url);
try {
   navigateToURL(request);
}
catch (e:Error) {
   // Handle error...
}关于 ActionScript 3.0 中构建对象类的更改以下注解针对 package 关键字、数据类型设置与类型检查、关于事件处理的更改, 可保证填充事件的对象属性:

12. package 关键字
ActionScript 3.0 类的结构与 ActionScript 2.0 类区别不大。也许, 最大的结构区别在于使用 package 关键字启动 ActionScript 3.0 文件。

如果类 (myClass) 保存到名为 myCode 的文件夹中, 则类文件的结构类似于:

package myCode
{
   import flash.display.MovieClip;

   public class myClass extends MovieClip
   {
      function myClass(){
         // write out class as usual from here...
      }
   }
}13. 数据类型确定与类型检查
ActionScript 3.0 包含一些新的运算符, 可用于数据类型确定、类型检查和类型转换。当我使用事件或扫描画面对象以查找特定类型时, 我发现这些运算符非常有用。

要在编译器认为实例不是影片剪辑而将其转换为影片剪辑, 请使用 as 关键字, 如下所示:

(loader.content as MovieClip).play();要检查对象是否为特定类型的类, 请使用 is 关键字, 如下所示:

if( myInstance is myClass )
{
   // do something...
}注: is 运算符替代 ActionScript 以前版本中的 instanceof 运算符。

14. 关于事件处理的更改
在 ActionScript 3.0 中, 事件有了新的发展。格式对比以前的版本有很大的区别, 但语法变化很小。在对象实例中封装事件句柄函数不再被认为是最佳实践。

以下代码显示如何将鼠标句柄指派给按钮:

import flash.events.MouseEvent;
function clickHandler(event:MouseEvent):void
{
   // Handle event here...
}
addEventListener(MouseEvent.CLICK, clickHandler);15. 确保事件的目标属性已填充
我发现, 在 ActionScript 3.0 中创建自定义控件非常容易。但是, 在通过自定义控件侦听事件时遇到了问题。在开发应用程序时, 我经常在一个事件句柄函数中处理来自多个组件的事件。我还经常将事件对象的目标属性作为一种引用方式, 向回引用播放事件的对象。我遇到的问题起因于事件对象的目标属性作为空值到达事件句柄函数。由于我无法向回引用原始对象, 我设置动态环境非常困难。

通过 Flash 用户界面组件代码适当深入挖掘后, 我发现还其他参数与 addEventListener 命令关联。我发布了目标属性为空的原因: 事件系统在将目标引用发送到我的事件句柄时删除了此引用。解决此问题的方法就是通过调整显示在 addEventListener 命令末尾的可选参数来更改不适当的设置组。

我将以下代码放入自定义按钮控件, 以确保事件的目标属性保持填充状态:

import flash.events.MouseEvent;
function clickHandler(event:MouseEvent):void
{
   // Do something on click...
}
addEventListener(MouseEvent.CLICK,clickHandler,false,0,true);请注意, 最后一个参数设置为 true。这就是导致事件系统将引用留给事件目标的设置。

Google 与 Yahoo 即将对 Flash 提供搜索

2008-07-01T16:24:48+08:00

Adobe，Google 以及 Yahoo 即将联合对网站中的 Flash 内容提供搜索，Google 和 Yahoo 都在开发相应的 Flash 索引技术，该技术不需要网站所有者做任何额外的工作。

　　以前，搜索引擎仅仅是对 Flash 站点中的静态文字和链接进行索引，无法抓取 Flash 的内容，就象阅读书的目录索引，而不是书本身。Flash 高级产品经理 Justin Everett-Church 说。现在，Google 和 Yahoo 将能对整本书进行阅读，就是说，他们将使用 Web 爬虫程序对 Flash 站点中的所有内容进行索引并输出到搜索结果，以前，因为 Flash 内容无法被搜索引擎抓取而备受 Web 设计者以及网站所有者批评。

　　Ogilvy 广告公司的 Bill Hunt 说，一些大公司，如珠宝商 Tiffany & Co 将因此受益，Tiffany & Co 拥有一个非常华丽的 Flash 购物站，到目前位置，大多数站点内容，如，产品页，对搜索引擎来说是不可视的，也不会出现在 Google 的搜索结果中。一个典型的例子是，在 Google 中搜索 "Tiffany gold ring"，排在前面的是 overstockjeweler.com 而不是 Tiffany 自己的网站。

　　对那些希望用 Flash 建设网站又不愿牺牲搜索排名的公司，这更是一个好消息，如果 Google 和 Yahoo 保守承诺，将 Flash 搜索做起来，将改观 Flash 最大的缺陷。

　　Everett-Church 说，Google 已经开始对他们的搜索结果进行调整，而 Yahoo 的开发稍微滞后一些。这两家公司都在认真地寻求这一目标，但 Google 在这方面又胜过 Yahoo 一筹，虽然不是很大的落后，但 Yahoo 已经没有多少地盘可以拱手相让了。

本文国际来源：http://venturebeat.com/2008/06/30/new-deal-makes-invisible-flash-content-visible-to-search/

网页文件批量上传的解決方案

2008-04-07T11:51:19+08:00

曾经设计和使用网页功能來上传文件的人都知道，传统的网页上传方式非常不友善！
一次只能选择一个文件、上传时没有进度提示、服务器有文件限定时得上传完才知道....，真是罄竹难书。
相册、博客和影音等服服务太盛行），许多的解決方案陆续推出了。包括：

Windows FTP上传技术
通过FTP技术，将原本逐一上传的功能转为和系统的资源管理器（Windows平台限定）結合，让网友可以快速选取文件，然后批次上传。知名的Coppermine开源相册系统（http://oss.org.cn/modules/article/view.article.php/32/c5/）就是采用这种解決方案。它的优点也就是缺点，因为和资源管理器结合，用户可以方便选取、上传，但相反的，在上传时的服务机制就完全失去弹性，与web结合性太差。

改用桌面软件或插件方式设计不少大型的服务网站采用这种方式，也就是将上传功能写成一个独立的应用程序或整合到其他程序裡面。像是Google 推出的 PICASA 相册，网友除了用 PICASA 软件来管理自己的照片外，也可以直接用其中的上传功能將照片传到网络相册里。這個缺点不用说大家也知道，那就是只有他家的软件和网站能用。

整合 Flash object 的上传方式
这就是我們要推荐的方式（flickr采用的方式之一）。分析要达到大量上传的目的，有二個重要因素：一是文件的选择要够方便；二是传送的状态要能即时显示。為了达到第一个要求，必須让选取文件的动作跳脫原本的浏览器规范（一次一个），所以用 Flash object 来开启文件选择提示框。其次，因为 Flash object 在上传，会依据他所传出的数据包来推算上传状況，虽然不是以主机实际收到的数据包为准，但在网络正常的情況下，二者的代表意义是相同的。
因此，以Flash object上传的方式是最好的作法。因为 Flash 的普遍性高，在跨操作系统的考量下，比 Windows 上传精灵更理想；再者，Flash 上传的程序很简单、文件也很小，並不需要像设计软件一样，搞得很复杂；最后，也是最重要的，它可以让网页设计师轻松整合到自己的网站里，与网站流程完全整合在一起。
基于上述的理由，我们强烈建议大家可以玩玩这个免费开源的程序。然后帮自己的网站加上批量上传的功能吧～～

源码下载：http://sourceforge.net/projects/jsmultiupload/

flash动态载入图片，缩放后产生锯齿的平滑处理。。

2008-01-04T16:19:39+08:00

大家实际应用中，经常会用到动态载入图片，为了更好的显示图片，也经常要对图片做缩放操作。但在flash中，动态载入的图片，经过缩放后一般都会产生锯齿，十分难看，而flash as中又没有直接可以对图片去锯齿的参数据。所以在实际的操作中，可能要拐个弯，借助BitmapData类来平滑处理图片，下面是我随意写的对载入图片作平滑处理的一段代码：

先创建一个临时mc，用于载入图片。图片载入完成后，隐藏临时层并通过BitmapData重新绘制载入的图片，设置平滑参数，并对绘制的图片做缩放。。

import mx.utils.Delegate;//
import flash.display.BitmapData;//

_root.createEmptyMovieClip("imgMc",1);
imgMc.createEmptyMovieClip("temp",1);

var mclListener=new Object();
mclListener.onLoadInit=Delegate.create(this,function(target_mc){
    target_mc._visible=false;
    var w=target_mc._width;
    var h=target_mc._height;

    var bmp=new BitmapData(w,h,true,0);
    bmp.draw(target_mc);
    target_mc._parent.attachBitmap(bmp,2,"auto",true);//设置平滑

    target_mc._parent._width=400;
    target_mc._parent._height=400/w*h;
});
var MCL=new MovieClipLoader();
MCL.addListener(mclListener);
MCL.loadClip("http://www.jovey.net/blog/upload/slideshow/1.jpg",imgMc.temp);

有空写个平滑处理的类，估计用起来会比较顺手些。。不知道as3里面有没有好有解决方法。。。

Delegate 类的用法

2007-12-28T12:04:34+08:00

之前做过的一些项目的程序中，一直会遇到类中方法的调用范围的一些问题，
如以下这段代码是当flash改变大小时执行一个layOut函数：
class mymovie extends MovieClip {
    function mymovie() {
        var myListener:Object = new Object();
        myListener.onResize =function () {
            layOut();
            trace("this1:"+this);
        }
        Stage.addListener(myListener);
    }
    private function layOut(){
        trace("this2:"+this);
    };
}
trace结果：[object,object],第二个未执行。
但使用时会发现，onResize函数中并不能调用layOut函数，应该它调用的是myListener范围内的layOut。所以我之前的用了一个比较傻方法，给myListener定义一个动态属性thisObj指向类mymovie。如：
class mymovie extends MovieClip {
                var thisObj;
    function mymovie() {
        var myListener:Object = new Object();
                                myListener.thisObj=this;
        myListener.onResize =function () {
            this.thisObj.layOut();
            trace("this1:"+this.thisObj);
        }
        Stage.addListener(myListener);
    }
    private function layOut(){
        trace("this2:"+this);
    };
}
这样做虽然可以执行了，但是如果程序大一点，用的地方多一点，就会发现程序代码非常乱，最后还是会分不清thisObj是指向谁的。
其实在早之前就知道Delegate可以解决作用范围的问题，但是旧的项目一直懒得去改，正好这段时间有新的项目，而且旧的也要改版，所以准备用Delegate类来解决。用了一下，效果还是不错的。（听说在as3里，已经不需要使用它，因为 AS3 对于函数操作会自动进行 Delegate，相当于系统或者编译器帮我们调用了Delegate）。
代码如下：
import mx.utils.Delegate;
class mymovie extends MovieClip {
    function mymovie() {
        var myListener:Object = new Object();
        myListener.onResize =Delegate.create(this,function () {
            layOut();
            trace("coverthis1:"+this);
        }
        );
        Stage.addListener(myListener);
    }
    private function layOut(){
        trace("coverthis2:"+this);
    };
}

体验淘宝UED招聘［前端开发工程师］题目

2007-09-26T18:28:09+08:00

2007-09-28补充：今天google关键字“淘宝UED”，发现这日志紧跟在淘宝UED官网后面，看来博客PR的功劳不小啊。。
最近淘宝在蓝色上面做了招聘广告后，淘宝UED招聘网站也火了一把，我也不能免俗，上去体验了一下前端开发工程师的题目(主要是flash as)，随便写也不知道对不对，呵呵。
================它的题目是这样的===============
第一道：
小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。

从这段描述可以得到以下对象：

function Dog() {
    this.wow = function() {
        alert('Wow');
        }
    this.yelp = function() {
        this.wow();
    }
}

小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。

请根据描述，按示例的形式用代码来实现（提示关键字: 继承，原型，setInterval）。

我的：
这题的题目一直没看懂，以两个对象，要求写类，不知道是扩展一个疯叫的方法，还是派生一个疯狗的类，或是生成一个狗的实例，让他疯叫。。
Dog.prototype.MadDog=function(){
    var _vid=setInterval(this,"yelp",500);
}

第二道：
使用纯CSS实现未知尺寸的图片(高宽都小于200px)在200px的正方形容器中同时水平和垂直居中。

我的：
#block{
     width:200px;
     height:200px;
     background-image:url(http://www.jovey.net/blog/logo_88x31.gif);
     background-position:center center;
     background-repeat:no-repeat;
}

第三道：
请给Array本地对象增加一个原型方法，它的用途是删除数组条目中重复的条目(可能有多个)，返回值是一个仅包含被删除的重复条目的新数组。

我的：
Array.prototype.delMul=function(){
    var tempArr=new Array();
    var myArr=this;
    myArr.sort();
    var si=0;//start point
    while(si        if(myArr[si]==myArr[si+1]){
            tempArr.push(myArr[si+1]);
            myArr.splice(si+1,1);
        }else{
            si++;
        }

    }
    return tempArr;
}
var myArr=["a","b","c","d","e","a","f","g","a"];
trace(myArr.delMul());
trace(myArr);

CSS Hack汇总快查

2007-05-28T10:46:32+08:00

不错的文章，在蓝色上看到的
原文：http://andymao.com/andy/post/76.html
蓝色地址：http://www.blueidea.com/tech/web/2007/4733.asp

屏蔽IE浏览器（也就是IE下不显示）

*:lang(zh) select {font:12px  !important;} /*FF,OP可见*/
select:empty {font:12px  !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7识别

*+html  {…}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
IE6及IE6以下识别

* html  {…}
这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body  select {……}
这句与上一句的作用相同。
仅IE6不识别

select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值，流释在冒号前。
仅IE6与IE5不识别

select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
仅IE5不识别

select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别
盒模型解决方法

selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
清除浮动

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
截字省略号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。
只有Opera识别

@media all and (min-width: 0px){ select {……}  }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器，只有IE5.x可见

@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5/MAC的过滤器，一般用不着

[Copy to clipboard] [ - ]CODE:
/*\*//*/
    @import "ie5mac.css";
/**/
IE的if条件Hack

所有的IE可识别

只有IE5.0可以识别

IE5.0包换IE5.5都可以识别

仅IE6可识别

IE6以及IE6以下的IE5.x都可识别

仅IE7可识别
以上内容可能并不全面，欢迎大家能和我一起把这些技巧都汇总起来，为以后工作的查询提供一个方便，同时在这里感谢那些研究出这些HACK的作者们。

在PHP中使用正则表达式

2006-05-22T09:55:26+08:00

1 前言
    PHP被大量的应用于Web的后台CGI开发，通常是在用户数据数据之后得出某种结果，但是如果用户输入的数据不正确，就会出现问题，比如说某人的生日是"2月30日"！那应该怎么样来检验暑假是否正确呢？在PHP中加入了正则表达式的支持，让我们可以十分方便的进行数据匹配。

2 什么是正则表达式：
    简单的说，正则表达式是一种可以用于模式匹配和替换的强大工具。在几乎所有的基于UNIX/LINUX系统的软件工具中找到正则表达式的痕迹，例如：Perl或PHP脚本语言。此外，JavaScript这种客户端的脚本语言也提供了对正则表达式的支持，现在正则表达式已经成为了一个通用的概念和工具，被各类技术人员所广泛使用。
    在某个Linux网站上面有这样的话："如果你问一下Linux爱好者最喜欢什么，他可能会回答正则表达式；如果你问他最害怕什么，除了繁琐的安装配置外他肯定会说正则表达式。"
    正如上面说的，正则表达式看起来非常复杂，让人害怕，大多数的PHP初学者都会跳过这里，继续下面的学习，但是PHP中的正则表达式有着可以利用模式匹配找到符合条件的字符串、判断字符串是否合乎条件或者用指定的字符串来替代符合条件的字符串等强大的功能，不学实在太可惜了……

3 正则表达式的基本语法：
    一个正则表达式，分为三个部分：分隔符，表达式和修饰符。
    分隔符可以是除了特殊字符以外的任何字符（比如"/ !"等等），常用的分隔符是"/"。表达式由一些特殊字符（特殊字符详见下面）和非特殊的字符串组成，比如"[a-z0-9_-]+@[a-z0-9_-.]+"可以匹配一个简单的电子邮件字符串。修饰符是用来开启或者关闭某种功能/模式。下面就是一个完整的正则表达式的例子：
/hello.+?hello/is
    上面的正则表达式"/"就是分隔符，两个"/"之间的就是表达式，第二个"/"后面的字符串"is"就是修饰符。
    在表达式中如果含有分隔符，那么就需要使用转义符号""，比如"/hello.+?/hello/is"。转义符号除了用于分隔符外还可以执行特殊字符，全部由字母构成的特殊字符都需要""来转义，比如"d"代表全体数字。

4 正则表达式的特殊字符：
    正则表达式中的特殊字符分为元字符、定位字符等等。
    元字符是正则表达式中一类有特殊意义的字符，用来描述其前导字符（即元字符前面的字符）在被匹配的对象中出现的方式。元字符本身是一个个单一的字符，但是不同或者相同的元字符组合起来可以构成大的元字符。
元字符：
    大括号：大括号用来精确指定匹配元字符出现的次数，例如"/pre{1,5}/"表示匹配的对象可以是"pre"、"pree"、"preeeee"这样在"pr"后面出现1个到5个"e"的字符串。或者"/pre{,5}/"代表pre出现0此到5次之间。
    加号："+"字符用来匹配元字符前的字符出现一次或者多次。例如"/ac+/"表示被匹配的对象可以是"act"、"account"、"acccc"等在"a"后面出现一个或者多个"c"的字符串。"+"相当于"{1,}"。
    星号："*"字符用来匹配元字符前的字符出现零次或者多次。例如"/ac*/"表示被匹配的对象可以是"app"、"acp"、"accp"等在"a"后面出现零个或者多个"c"的字符串。"*"相当于"{0,}"。
    问号："?"字符用来匹配元字符前的字符出现零次或者1次。例如"/ac?/"表示匹配的对象可以是"a"、"acp"、"acwp"这样在"a"后面出现零个或者1个"c"的字符串。"?"在正则表达式中还有一个非常重要的作用，即"贪婪模式"。

     还有两个很重要的特殊字符就是"[ ]"。他们可以匹配"[]"之中出现过的字符，比如"/[az]/"可以匹配单个字符"a"或者"z"；如果把上面的表达式改成这样"/[a-z]/"，就可以匹配任何单个小写字母，比如"a"、"b"等等。
    如果在"[]"中出现了"^"，代表本表达式不匹配"[]"内出现的字符，比如"/[^a-z]/"不匹配任何小写字母！并且正则表达式给出了几种"[]"的默认值：
[:alpha:]：匹配任何字母
[:alnum:]：匹配任何字母和数字
[:digit:]：匹配任何数字
[:space:]：匹配空格符
[:upper:]：匹配任何大写字母
[:lower:]：匹配任何小写字母
[:punct:]：匹配任何标点符号
[:xdigit:]：匹配任何16进制数字

另外下面这些特殊字符在转义符号""转义后代表的含义如下：
s：匹配单个的空格符
S：用于匹配除单个空格符之外的所有字符。
d：用于匹配从0到9的数字，相当于"/[0-9]/"。
w：用于匹配字母，数字或下划线字符，相当于"/[a-zA-Z0-9_]/"。
W：用于匹配所有与w不匹配的字符，相当于"/[^a-zA-Z0-9_]/"。
D：用于匹配任何非10进制的数字字符。
.：用于匹配除换行符之外的所有字符，如果经过修饰符"s"的修饰，"."可以代表任意字符。

    利用上面的特殊字符可以很方便的表达一些比较繁琐的模式匹配。例如"/d0000/"利用上面的正则表达式可以匹配万以上，十万一下的整数字符串。

定位字符：
    定位字符是正则表达式中又一类非常重要的字符，它的主要作用是用于对字符在匹配对象中的位置进行描述。
^：表示匹配的模式出现在匹配对象的开头（和在"[]"里面不同）
$：表示匹配的模式出现在匹配对象的末尾
空格：表示匹配的模式出现在开始和结尾的两个边界之一
"/^he/"：可以匹配以"he"字符开头的字符串，比如hello、height等等；
"/he$/"：可以匹配以"he"字符结尾的字符串即she等；
"/ he/"：空格开头，和^的作用一样，匹配以he开头的字符串；
"/he /"：空格结束，和$的作用一样，匹配以he结尾的字符串；
"/^he$/"：表示只和字符串"he"匹配。

括号：
    正则表达式除了可以用户匹配，还可以用括号"()"来记录需要的信息，储存起来，给后面的表达式读取。比如：
/^([a-zA-Z0-9_-]+)@([a-zA-Z0-9_-]+)(.[a-zA-Z0-9_-])$/
就是记录邮件地址的用户名，和邮件地址的服务器地址（形式为username@server.com之类的），在后面如果想要读取记录下来的字符串，只是需要用"转义符＋记录的次序"来读取。比如"1"就相当于第一个"[a-zA-Z0-9_-]+"，"2"相当于第二个([a-zA-Z0-9_-]+)，"3"就是第三个(.[a-zA-Z0-9_-])。但是在PHP中，""是一个特殊的字符，需要转义，所以""到了PHP的表达式中就应该写成"1"。
其他特殊符号：
"|"：或符号"|"和PHP里面的或一样，不过是一个"|"，而不是PHP的两个"||"！意思就是可以是某个字符或者另一个字符串，比如"/abcd|dcba/"可能匹配"abcd"或者"dcba"。

5 贪婪模式：
前面在元字符中提到过"?"还有一个重要的作用，即"贪婪模式"，什么是"贪婪模式"呢？
比如我们要匹配以字母"a"开头字母"b"结尾的字符串，但是需要匹配的字符串在"a"后面含有很多个"b"，比如"a bbbbbbbbbbbbbbbbb"，那正则表达式是会匹配第一个"b"还是最后一个"b"呢？如果你使用了贪婪模式，那么会匹配到最后一个"b"，反之只是匹配到第一个"b"。
使用贪婪模式的表达式如下：
/a.+?b/
/a.+b/U
不使用贪婪模式的如下：
/a.+b/
上面使用了一个修饰符U，详见下面的部分。
6 修饰符：
    在正则表达式里面的修饰符可以改变正则的很多特性，使得正则表达式更加适合你的需要（注意：修饰符对于大小写是敏感的，这意味着"e"并不等于"E"）。正则表达式里面的修饰符如下：
i ：如果在修饰符中加上"i"，则正则将会取消大小写敏感性，即"a"和"A" 是一样的。
m：默认的正则开始"^"和结束"$"只是对于正则字符串如果在修饰符中加上"m"，那么开始和结束将会指字符串的每一行：每一行的开头就是"^"，结尾就是"$"。
s：如果在修饰符中加入"s"，那么默认的"."代表除了换行符以外的任何字符将会变成任意字符，也就是包括换行符！
x：如果加上该修饰符，表达式中的空白字符将会被忽略，除非它已经被转义。
e：本修饰符仅仅对于replacement有用，代表在replacement中作为PHP代码。
A：如果使用这个修饰符，那么表达式必须是匹配的字符串中的开头部分。比如说"/a/A"匹配"abcd"。
E：与"m"相反，如果使用这个修饰符，那么"$"将匹配绝对字符串的结尾，而不是换行符前面，默认就打开了这个模式。
U：和问号的作用差不多，用于设置"贪婪模式"。

7 PCRE相关的正则表达式函数：
PHP的Perl兼容正则表达式提供的多个函数，分为模式匹配，替换和匹配数目等等：
1、preg_match ：
函数格式：int preg_match(string pattern, string subject, array [matches]);
这个函数会在string中使用pattern表达式来匹配，如果给定了[regs]，就会将string记录到[regs][0]中，[regs][1]代表使用括号"（）"记录下来的第一个字符串，[regs][2]代表记录下来的第二个字符串，以此类推。preg如果在string中找到了匹配的pattern，就会返回"true"，否则返回"false"。

2、preg_replace ：
函数格式：mixed preg_replace(mixed pattern, mixed replacement, mixed subject);
这个函数会使用将string中符合表达式pattern的字符串全部替换为表达式replacement。如果replacement中需要包含pattern的部分字符，则可以使用"()"来记录，在replacement中只是需要用"1"来读取。

3、preg_split ：
函数格式：array preg_split(string pattern, string subject, int [limit]);
这个函数和函数split一样，区别仅在与split可以使用简单正则表达式来分割匹配的字符串，而preg_split使用完全的Perl兼容正则表达式。第三个参数limit代表允许返回多少个符合条件的值。

4、preg_grep ：
函数格式：array preg_grep(string patern , array input);
这个函数和preg_match功能基本上，不过preg_grep可以将给定的数组input中的所有元素匹配，返回一个新的数组。

下面举一个例子，比如我们要检查Email地址的格式是否正确：
function emailIsRight($email) {
if (preg_match("^[_.0-9a-z-]+@([0-9a-z][0-9a-z-]+.)+[a-z]{2,3}$",$email)) {
return 1;
}
return 0;
}
if(emailIsRight('y10k@963.net')) echo '正确
';
if(!emailIsRight('y10k@fffff')) echo '不正确
';
?>

上面的程序会输出"正确不正确"。

8.PHP中的Perl兼容正则表达式和Perl/Ereg正则表达式的区别：
虽然叫做“Perl兼容正则表达式”，但是和Perl的正则表达式相比，PHP的还是由一些不同，比如修饰符“G”在Perl里面代表全部匹配，但是在PHP中没有加入对这个修饰符的支持。
还有就是和ereg系列函数的区别，ereg也是PHP中提供的正则表达式函数，不过和preg相比，要弱上很多。

1、ereg里面是不需要也不能使用分隔符和修饰符的，所以ereg的功能比preg要弱上不少。
2、关于"."：点在正则里面一般是除了换行符以外的全部字符，但是在ereg里面的"."是任意字符，即包括换行符！如果在preg里面希望"."能够包括换行符，可以在修饰符中加上"s"。
3、ereg默认使用贪婪模式，并且不能修改，这个给很多替换和匹配带来麻烦。
4、速度：这个或许是很多人关心的问题，会不会preg功能强大是以速度来换取的？不用担心，preg的速度要远远比ereg快，笔者做了一个程序测试：

time test:

echo "Preg_replace used time:";
$start = time();
for($i=1;$i<=100000;$i++) {
$str = "ssssssssssssssssssssssssssss";
preg_replace("/s/","",$str);
}
$ended = time()-$start;
echo $ended;
echo "
ereg_replace used time:";
$start = time();
for($i=1;$i<=100000;$i++) {
$str = "ssssssssssssssssssssssssssss";
ereg_replace("s","",$str);
}
$ended = time()-$start;
echo $ended;
echo "
str_replace used time:";
$start = time();
for($i=1;$i<=100000;$i++) {
$str = "sssssssssssssssssssssssssssss";
str_replace("s","",$str);
}
$ended = time()-$start;
echo $ended;
?>
结果：
Preg_replace used time:5
ereg_replace used time:15
str_replace used time:2
str_replace因为不需要匹配所以速度非常快，而preg_replace的速度比ereg_replace要快上不少。

9.关于PHP3.0对于preg的支持：
    在PHP 4.0中默认加入了preg支持，但是在3.0中确没有。如果在3.0中希望使用preg函数，必须加载php3_pcre.dll文件，只要在php.ini的extension部分设置加入"extension = php3_pcre.dll"然后从新启动PHP就可以了！
    其实正则表达式还常用于UbbCode的实现，很多PHP论坛都使用了这个方法（比如zForum zphp.com或者vB vbullent.com），但是具体的代码比较长。

adobe之Ajax开发（Spry framework for Ajax）.

2006-05-18T11:25:06+08:00

现在Ajax的应用和讨论是越来越多，Ajax和Flash的比较竞争也越来越激烈，最近一直在忙Flash相册（类似FPV）的开发，今天看到了Ajax做的相册，真是大吃一惊，没想到用Ajax实现起来这么简单，效果也是这么好。我对Flash的热忠也开始了动摇。世界在变，好东西也在变啊。[追意布落格www.jovey.net]
现在就来看看adobe的Spry framework吧：
点击查看Spry framework的使用Demo　相册｜产品表格｜RSS阅读器｜
下载Spry Prerelease 1
Spry framework 是Adobe(macromedia)开发的提供给网页开发者的一个javascript库，它更方便开发者（偏于页面设计的网站开发人员）用ajax创建更富体验的用户界面。
Spry framework第一版是数据性能的一个预览，开发者们使用html,css和尽少的javascript就能实现页面无刷新地把XML数据结合到HTML文档中。Spry framework是基于HTML的，开发者们只需要懂一些基本的HTML,Css和Javascript就可以很容易地执行。
Spry framework项目还刚刚开始，现在发布了预览版，用户可以有大量的时间使用和测试，有问题可以反馈给项目组，估计以后的版本，功能将更加地强大，使用也将更简易方便。