YY in Limbo 混沌海狂想 » XML

HTML5, CSS3, ES5…新的web标准和浏览器支持一览

Dexter.Yy — Mon, 29 Jun 2009 00:40:26 +0000

好罢这篇本来是我私下做的笔记，我特别喜欢在Evernote上做备忘的笔记，虽然上次看到漏屋老师的文章里说我现在的年龄才刚刚进入记忆力的巅峰期……但是我的自信心仍然屡受打击！比如跟别人讨论The Dark Knight里小丑在医院对检察官说了什么让他变成双面人，我一句对白都想不起来，还有big bang theory s2里penny玩age of conan时的人物名字是”Queen Penelope”，我看的时候印象很深，一个月后就连奥德赛都想不起来了。留份笔记总觉得心里踏实些……啊又跑题了

本文整理了一些最重要（或者说人气比较高罢）的新标准，虽然它们多数还只是w3c的草案，离Recommendation级别还早，却已经成为新一轮浏览器大战中备受追捧的明星，开发者社区里也涌现出大量相关的demo和API封装，有些已经进入生产环境（比如google在iphone上实现的gmail离线应用），其实我觉得如今的web领域里，从厂商私有技术转换成委员会标准再转换成通用技术产生杀手级应用的周期已经显著的加速了，是因为现在web application的需求太高了么…… UPDATE：刚才在solidot发软文的时候我突然想明白怎么表述这个问题：其实现在很多浏览器厂商同时也是基于浏览器的应用开发者和web标准的制定者，就好像修筑舞台的工程师同时也是舞台上的演员和舞蹈动作的导演一样，所以google, mozilla, apple们都在不遗余力的实现那些有利于开发web应用的技术标准，即时它们还是W3C Working Draft，相比之下IE team就比较缺乏动力，果然计划经济缺乏活力亚XD……

由于是源自笔记，对每个条目我只会列出称呼和语法特征，暂时没时间写详细的解释和可执行的示例，但是会给出相关的文档地址，除了列出已经支持该特性的浏览器，也会为不支持的浏览器提供替代/过渡的实现。

===================废话结束的分割线=======================

CSS3 Media queries

对整个外链css文件和部分css代码使用的媒体类型侦测，人气高的原因显然是因为移动设备……

<link media=“all and (orientation:portrait)” src="screen.css" type="text/css">

@media all and (min-color: 4) { ... }

w3c标准：http://www.w3.org/TR/css3-mediaqueries/
MDC文档：https://developer.mozilla.org/En/CSS/Media_queries
Opera文档：http://www.opera.com/docs/specs/css/

支持：Firefox 3.5+, Safari 3+, Opera 7+

CSS3 2D Transforms

css变形，有人用这个实现伪3d效果以及旋转效果的jquery插件

-moz-transform: rotate(-45deg) skew(15deg, 15deg);

sprite.style['-webkit-transform'] = 'rotate(' + v + 'rad)';

w3c标准：http://www.w3.org/TR/css3-2d-transforms/
MDC文档：https://developer.mozilla.org/En/CSS/CSS_transform_functions
webkit博客的介绍: http://webkit.org/blog/130/css-transforms/

支持：Firefox 3.5+, Safari 3.1+
替代/过渡：IE5.5+ Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

CSS3 Transitions and CSS Animations

备受期待的css动画，webkit团队提出的草案，transition实现简单的属性渐变，animation定义更复杂的动画效果

transition-property: width;
transition-duration: 1s;
animation-name: 'diagonal-slide';
animation-duration: 5s;
animation-iteration-count: 10;
@keyframes 'diagonal-slide' {}

w3c标准：http://www.w3.org/TR/css3-transitions/
w3c标准：http://www.w3.org/TR/css3-animations/
webkit博客的介绍：http://webkit.org/blog/138/css-animation/
约翰同学的介绍：http://ejohn.org/blog/css-animations-and-javascript/

支持：Safari 3.1+

CSS3 Downloadable fonts

能在网页里嵌入任意字体是设计师的梦想……不过这里支持的也仅限truetype和opentype

@font-face {}

w3c标准：http://www.w3.org/TR/css3-fonts/#font-resources
MSDN文档：http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx
MDC文档：https://developer.mozilla.org/en/CSS/@font-face

支持：Firefox 3.5+, Safari 3.1+, Opera 10.0+, IE4.0+

附赠：其他CSS3 property的兼容性

ppk同学维护的文档: http://www.quirksmode.org/css/contents.html
css3.info维护的文档：http://www.css3.info/modules/selector-compat/
一个测试页面：http://westciv.com/iphonetests/

HTML5 DOM Storage

简洁的持久存储，键值对的形式

window.localStorage
window.sessionStorage //可跨域，标签页关掉就清空

w3c标准：http://www.w3.org/TR/webstorage/
ppk同学维护的兼容性列表：http://www.quirksmode.org/dom/html5.html#localstorage
MDC文档：https://developer.mozilla.org/en/DOM/Storage
MSDN文档：http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

支持：Firefox 3.5+, Safari 4.0+, IE 8.0+

HTML5 Offline Application Cache

用一个manifest文件缓存静态资源（图片,css, js之类）在离线状态下使用，不是结构化数据

<html manifest="foo.manifest">

CACHE MANIFEST
index.html
style/default.css
images/logo.png

w3c标准：http://www.w3.org/TR/offline-webapps/#offline
MDC文档：https://developer.mozilla.org/en/Offline_resources_in_Firefox

支持：Firefox 3.5+

HTML5 Database Storage

本地数据库，支持sql，最早是google gears实现，现在的w3c草案的编辑也是google的工程师……但奇怪的是，gears的api跟现在的草案不兼容，chrome甚至为了保留捆绑的gears的数据库api而删除了webkit实现的html5 api……而google在iphone上实现gmail离线功能的时候又采用webkit的api……真纠结……

var db = window.openDatabase("notes", "", "The Example Notes App!", 1048576);
db.transaction(function(tx) {
tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {});
});

w3c标准：http://www.w3.org/TR/offline-webapps/#sql
webkit博客的介绍：http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/
iphone的文档：http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3-SW1

支持：Safari 3.1+
替代/过渡：Gears http://code.google.com/p/gears/wiki/Database2API

HTML5 Web Workers

多线程，在后台执行复杂运算，不能操作dom，线程之间通过消息事件通信

var myWorker = new Worker('my_worker.js');
myWorker.onmessage = function(event) { event.data };
myWorker.postMessage(str);

w3c标准：http://www.w3.org/TR/workers/
MDC文档：https://developer.mozilla.org/En/Using_web_workers

支持：Firefox 3.5+
替代/过渡：Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal

HTML5 Geolocation

地理api

window.navigator.geolocation

w3c标准：http://www.w3.org/TR/geolocation-API/
MDC文档：https://developer.mozilla.org/En/Using_geolocation

支持：Firefox 3.5+
替代/过渡：Gears http://code.google.com/p/gears/wiki/GeolocationAPI

HTML5 Drag and Drop

原生拖拽事件

ondragstart
ondrag
ondragend
//拖拽过程中
ondragenter
ondragover
ondragleave
ondrop

w3c标准：http://www.w3.org/TR/html5/editing.html#dnd
MDC文档：https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
apple文档：http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html#//apple_ref/doc/uid/30001233

支持：Firefox 3.5+, Safari 2.0+, Chrome 1.0+, IE 5.0+

HTML5 Audio and Video

用html标签来嵌入视频音频的好处并非是“开源格式”，而是“开放性”，让多媒体可以与其他页面元素交互，或者用页面技术去跟视频“mashup”，这种随意组合和交互的能力是web技术兴盛的基石，也是像flash这类封闭RIA容器最大的缺点。

<video controls>
<source src=“zombie.ogg” type=“video/ogg”/>
<source src=“zombie.mp4″ type=“video/mp4″/>
video>

MDC文档：https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
webkit博客的介绍：http://webkit.org/blog/140/html5-media-support/

支持：Firefox 3.5+, Safari 3.0+, Chrome 3.0+
替代/过渡：用video标签嵌套embed http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/

HTML5 Canvas

apple发明，最早应用于dashboard，目前主流的js图像技术，mozilla已经在实现OpenGL ES标准的Canvas 3D了，另外据说ie team为支持canvas做了大量工作……实际上canvas api相当底层，特别是交互方面，不如svg直观，所以出现了很多封装它的库

var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(220, 220, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

MDC文档：https://developer.mozilla.org/en/Canvas_tutorial

支持：Firefox 1.5+, Safari 2.0+, Chrome 1.0+, Opera 9.0+
替代/过渡：excanvas.js http://code.google.com/p/explorercanvas/

SVG

w3c标准：http://www.w3.org/TR/SVG12/
IBM DW教程：http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id=84896

支持：Firefox 1.5+, Safari 3.0+, Chrome 1.0+, Opera 9.0+
替代/过渡：raphael.js http://raphaeljs.com/

XMLHttpRequest 2

主要是增加跨域能力以及请求过程中的事件

w3c标准：http://www.w3.org/TR/XMLHttpRequest2/
MDC文档：https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest (XDR)
MSDN文档：http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

支持：Firefox 3.5+（实现了部分）, IE 8.0+（实现了部分）

Access Control

千呼万唤的跨域访问控制，目前firefox3.5和ie8有一些不同，ie8搞的XDR和XDM我也不知道是不是准备提交给w3c标准化的东西……

Access-Control-Allow-Origin: http://foo.example

w3c标准：http://www.w3.org/TR/cors/
MDC文档：https://developer.mozilla.org/En/HTTP_Access_Control
Cross-document Messaging (XDM)
MSDN文档：http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx

支持：Firefox 3.5+, IE8.0+

E4X (ECMA-357)

Firefox和ActionScript3早就实现了的东西……不过其实现在json这么流行，有没有E4X好像都无所谓了～（瞎说的，其实在js代码里直接写dom对象而不是html字符串，会方便很多）

MDC文档：https://developer.mozilla.org/en/E4X

支持：Firefox 1.5+

ECMAScript 5 Native JSON

原生的JSON支持，速度和安全性都比eval强一百倍亚一百倍，另外要注意Douglas Crockford的json2.js是一个用js实现的js解释器，所以安全性更好

JSON.parse( text, translate )
JSON.stringify( obj, translate )
String.prototype.toJSON
Boolean.prototype.toJSON
Number.prototype.toJSON
Date.prototype.toJSON

MDC文档：http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/
MSDN文档：http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx

支持：Firefox 3.5+, IE8+
替代/过渡：json2.js http://www.json.org/json2.js

ECMAScript 5 Array Extras

js1.6里实现的数组方法，主要是forEach, map, fliter这几个函数式编程里非常重要的方法，还有反向查询

Array.prototype.indexOf( str )
Array.prototype.lastIndexOf( str )
Array.prototype.every( fn )
Array.prototype.some( fn )
Array.prototype.filter( fn )
Array.prototype.forEach( fn )
Array.prototype.map( fn )

MDC文档：https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras

支持：Firefox2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/过渡：都可以通过扩展Array.prototype来模拟

ECMAScript 5 isArray()

区分数组和对象

Array.isArray([]); // true

支持：无
替代/过渡：Array.isArray = function(a){ return Object.prototype.toString.call(a) === “[object Array]“;};

ECMAScript 5 Object

用GOOGLE I/O演讲里的话来说：更鲁棒(robust)的对象系统

Object.getPrototypeOf( obj )

约翰同学的讲解：http://ejohn.org/blog/objectgetprototypeof/

支持：Firefox3.5
替代/过渡：object.__proto__ 或 object.constructor.prototype

Object.create( proto, props ) //克隆或继承对象
Object.keys( obj ) //数据结构的映射
Object.getOwnPropertyNames( obj )
Object.preventExtensions( obj ) //不能添加新属性
Object.isExtensible( obj )
Object.seal( obj ) //不能删除和修改属性的配置，不能添加新属性
Object.isSealed( obj )
Object.freeze( obj ) //不能删除和修改属性的配置，不能添加新属性，不能写属性
Object.isFrozen( obj )

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支持：无
替代/过渡：Object.create和Object.keys可以自己实现

ECMAScript 5 Property Descriptor

对象属性的访问控制

Object.getOwnPropertyDescriptor( obj, prop )
Object.defineProperty( obj, prop, desc )
Object.defineProperties( obj, props )
desc = {
value: true,
writable: false, //修改
enumerable: true, //for in
configurable: true, //删除和修改属性
get: function(){ return name; },
set: function(value){ name = value; }
}

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支持：无
替代/过渡：Object.defineProperties其实相当于jQuery.extend，用来实现Mixin

ECMAScript 5 Getters and Setters

python和ruby里都有的属性访问方法

obj = {
get innerHTML() { return …; },
set innerHTML(newHTML) { … }
};

MDC文档：https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters

支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/过渡：

非标准，Firefox1.5里的旧方法

HTMLElement.prototype.__defineGetter__("innerHTML", function () {});
HTMLElement.prototype.__defineSetter__("innerHTML", function (val) {});

支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+

标准

Object.defineProperty(document.body, "innerHTML", { get : function () {} });

MSDN文档：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

支持：IE8+ (只能对DOM使用)

ECMAScript 5 Strict Mode

ES5的严格模式，删除了旧版本中容易引起问题的元素，并且会显式的报错，方便调试

"use strict"; //以下情况下抛出异常
//对未定义的变量赋值
//操作被设置为不可写，不可配置或不可扩充的属性
//删除变量，函数，参数
//在对象直接量里重复定义属性
//eval做关键字，在eval的字符串里定义变量
//覆写arguments
//使用arguments.caller和arguments.callee（匿名函数必须具名才能引用自己）
//(function(){ ... }).call( null ); // Exception
//使用with

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

支持：无
替代/过渡：……从现在开始养成严谨的编程习惯

ECMAScript 5 其他新特性

传递函数的引用时，绑定this

Function.prototype.bind(thisArg, arg1, arg2....) /

支持：无
替代/过渡：prototype http://www.prototypejs.org/api/function/bind

ISO-formatted dates

Date.prototype.toISOString() // Prints 2009-05-21T16:06:05.000TZ

支持：无
替代/过渡：datejs http://code.google.com/p/datejs/

String.prototype.trim()

支持：Firefox3.5
替代/过渡：各种正则实现 http://blog.stevenlevithan.com/archives/faster-trim-javascript

===================废话又开始的分割线=======================

其实我把这个东西发出来是希望能促进创新的氛围，让更多人认识到很多新技术已经进入到“实用”阶段。

如果只是想做个实验性的webgame，或是只能用于特定平台的应用（比如iphone，greasemonkey），firefox3.5+webkit的支持就已经足够罢。

如果不能无视主流平台，有很多技术能让你gracefully degrade（优雅的退化）或者选取不同的方法实现兼容的接口。

如果你等不及IE x在若干年后实现xx，希望提前享受福利，有些技术的设计原则就是让你能在没有native支持的情况下可以自己实现一模一样的功能或语法糖（syntactic sugar），比如ES5对象的继承和访问控制，从ES4/ActionScript3时期那些老土的关键词（class extands private static）改成了Object.create(p, attrs).defineProperty(o, n, attrs).defineProperties(o, attrs).freeze().getOwnPropertyNames().map(fn)，不会只是为了酷炫罢……

很多人都喜欢抱怨“我这辈子都没机会用HTML5”，但是只要把视线从自己脚下那巴掌大块地移开看看别处，会发现世界其实一直都在改变喔XD

新项目”YyOPML”——把OPML转换成web界面——大家一起来晒feed订阅列表吧！

Dexter.Yy — Fri, 30 May 2008 17:28:30 +0000

首先要说一下目前的矛盾现状：一方面feed订阅和在线阅读器都还不够普及，多数普通网民就算经常访问blog网站，也还没养成订阅的习惯，主要还是通过门户媒体获取资讯，另一个方面，较早开始接触RSS订阅的人——特别是那些blogger和互联网geek们——不但已经对各种在线或离线的阅读器了如指掌，把阅读feed变成了上网的主要活动和习惯，而且很多人收集的feed已经多到让自己烦恼焦虑的程度。后者努力的整理删减自己的订阅列表，前者却经常抱怨不知道怎么寻找可订阅的信息来源…………这种不平衡于是引发了一种禁断的活动——朋友之间交换OPML订阅列表……

OPML是Google Reader乃至所有阅读器都支持导入导出的一种XML规范的“大纲(outline)”数据文件（题头图片里那个蓝色的方块就是OPML的标志，跟feed的著名橙色标志对应，说实话写文前我还不知道OPML也有标志……囧），通常包含用户订阅的所有feed，之所以说是“禁断”……是因为交换这种文件，直接导入到双方的阅读器里之后，很容易使信息爆炸的程度翻倍，而且对于这些导入的feed，不能像原主人那样清楚来历和订阅的理由，于是也不知道该如何看……因此直接交换的下场通常都很惨……

这个项目就是我的解决方案：让导出的OPML源文件支持直接在浏览器里作为网页来展示，而界面上使用完全展开的并排布局，可以像hao123或谷歌网站导航那样一目了然的查找网址，让访问者自己来挑选值得订阅的feed。(不过，你要有使用标签分类feed的习惯，否则显示效果肯定不好…不过那样的话，就算用常规的树状布局，效果也很差的…)

以下是示例页面，这里的“dexteryy.xml”就是我从自己的google reader里导出的OPML文件，包含完整的订阅列表：

http://www.limboy.com/yyopml/dexteryy.xml

还有谁像我一样没什么隐私担心暴露愿意分享OPML的话，可以留下网址或opml文件，我会收集到上面来……

项目主页：http://code.google.com/p/yyopml/

下载程序源码：http://code.google.com/p/yyopml/downloads/list

使用方法是：用文本编辑器打开OPML文件，在第一行后面加上以下内容：

xml-stylesheet href="style/yyopml.xsl" type="text/xsl"?>

然后跟解压出来的style目录一起传到服务器上，保持在同一个目录里，就可以直接用浏览器看opml文件了。

目前我提供的界面主题有两种，都是如上所说的“网站导航”风格，一个是灰色的面板风格（默认），一个是GOOGLE风格，对应的CSS文件分别是style/ui/yyopml_panel.css和style/ui/yyopml_google.css

支持在页面里切换皮肤，如果要更换默认皮肤，请修改style/ui/yyopml.js里的以下代码：

theme = theme || "panel";

把“panel”换成你要改成默认设置的css文件的后缀，比如”google”。

也可以在网址里加上参数，直接调用某种皮肤，比如”http://www.limboy.com/yyopml/dexteryy.xml#theme=google“，可以用google风格作为默认皮肤打开页面。

==================面向Coder的分界线====================

源码包括一个用来把XML转换成HTML来显示的XSL文件，和界面效果相关的文件。其中yy_core.js是我开发中的一个轻量级/FP风格的javascript库，很多代码都基于jquery，同名的方法接口也尽量跟jquery保持一致，命名空间跟土豆网的js库一样叫“TUI”，提供DOM选择器（我重写的精简功能）和一些常用工具，比jquery小很多(压缩后12k)，这个东西其实年初就想发出来……但是后来懒了，这次考虑到完成度的问题，也懒得在google code里开项目了，源码包里的yy_core.js是一个base64压缩过的版本……

另外，yyopml.js里有一个滚动条插件，是做这个项目的时候心血来潮写的，可以用类似这样的代码：$(“.list”).scrollbar(); 给那些外部容器overflow:hidden，内部容器高度超长的元素加上CSS定义的滚动条，支持鼠标滚轮，因为是基于“迷你jquery”来开发，所以应该很容易改成jquery的插件，厌倦了overflow:scroll滚动条的同学可以参考一下。

新作品：可以自由编辑的Google地图，700行javascript+70行php

Dexter.Yy — Tue, 13 Mar 2007 10:20:23 +0000

以前在龙骑士城堡提过一种想法，就是用GOOGLE MAPS来做桌面游戏玩家的主题地图。当时推荐的是EEMAP的服务，然则这个网站的注册一直需要邀请码，很不方便，而且界面难看，速度也很慢……

当时就想过自己来做一个GOOGLE MAPS API的应用，但一直没时间看API文档。这几天总算有空闲（辞职就是好哑），把想象中的东西基本上做出来了，我把它叫作Free Map Folio v1.0（取自DND设定集的名字），可以像维基百科那样自由编辑，前端是静态的HTML，数据库用xml，方便部署，而交互操作的程序完全用Javascirpt来写，只需要打开一个HTML页面，然后整个使用过程都不需要刷新页面，也不需要从外部获取数据（只用AJAX提交数据）。

实际应用：桌面游戏玩家主题地图（乱加东西要记得删掉）——http://www.ntrpg.org/yy/maps/
演示地址(上面的镜像)：http://www.limboy.com/project/maps/

Javascirpt的主要代码有700行，都写在一个对象里(yymap)，我本来想把每个单独的功能都封装起来，避免重复代码（DRY原则？），不过后来页面右侧栏加入了“地点列表”之后，程序就改复杂了……………以后有空要做一下重构……

用户只需要访问一个静态的HTML页面，唯一一次从外部获取数据是在地图加载的时候，用了API提供的XmlHttpRequest对象，非常方便，比如GXml.parse可以把responseText获得的文本转换成XML DOM。不过用GXmlHttp和GDownloadUrl的时候，IE7都会遇到一个缓存问题（IE6没试过）：刷新页面后，不会重新下载XML文件，因此页面上的数据不会更新。解决方法是在xml文件的地址后面加随机参数（感谢tinyfool的帮助）：

var ramnum = parseInt(100000*Math.random());var request = GXmlHttp.create();
request.open("GET", "db.xml?x="+ramnum, true);

标记（Marker）的样式可以自定义，所以我做了一个选择图标的功能，先建立所有图标的基本属性（yymap.baseIcon），包括阴影图片和各种尺寸，然后在创建新标记时，根据用户选择的图标，把地址传给icon.image就行了。其实还可以做一个自定义图片的功能，允许用户在编辑器里上传自己的图片（比如照片）当作图标，只是必须把图片处理成固定大小的32位PNG……

点击标记弹出的信息窗口是最麻烦的东西，因为页面里同时只能存在一个信息窗口，而信息窗口里的内容也不能保存在标记的对象里，所以要修改某个标记对应的信息窗内容，就只能修改它的点击事件：

GEvent.addListener(marker, "click", function(){
yymap.whenClickMarker(marker,info,point,icon.image);
});

我在点击事件里传了4个参数：点击的标记对象 , 信息窗的内容, 标记的经纬度, 标记使用的图标，除了用来显示信息窗，也是为了把它们传给全局变量（因为编辑这个标记的时候会用到）。

为了让右侧栏列表与地图上的图标一一对应，我在列表的每个链接上设了跟标记对应的ID，每次做添加、编辑或删除的操作时，除了修改标记本身的点击事件，还要用ID找到列表上对应的链接，修改链接的点击事件…………总之，感觉这个侧栏列表很添乱……却又是必要的功能……

在我写这篇文章时，还有一个搜索地名的功能没做好。本来API提供了地理译码的功能，可以把符合格式的地名转换成JSON数据（用JS对象来传递数据的格式），但这么方便的东西我却享受不了——地理译码还没有支持中国的地名…………在地图上就能很明显的看到：周围日本、印度，都有详细的城市名字，放大后还有交通信息，而中国是一片空白…………

因此对于不熟悉地理的用户来说，要在这样的中国地图上找到某个城市可能太难了，搜索地名是必须的功能。由于没有地理译码，目前使用GOOGLE MAPS API的网站，比如EEMAP，都是自己建立地名和经纬度对应的数据库。我找到了一个很全的“乡镇级中国行政区划地标”，是GOOGLE EARTH用的KMZ文件，但其实就是压缩过的XML，用WINRAR打开就能看到一个KML文件，可以直接拿来当搜索数据库。我考虑过两种实现方法：把用户输入的中文地名用AJAX发给PHP，让PHP搜索这个XML文件里匹配的标签，然后返回相应的经纬度；或者直接用GXmlHttp下载XML，然后用JS的DOM方法来搜索相应的标签，第二种方法很合我的胃口，不需要借道PHP，遗憾的是…………这意味着搜索时要用AJAX获得19M的XML数据……

更新：地名搜索已经完成了，模糊搜索范围包括省会、地级市、县城、村镇……足行匹配，搜索对象在KML文件里排名越靠后，搜索时间越长，不过最多应该不超过5秒……

我刚才测试了一下，搜索不到结果时4.36s，搜索最后一个地名“番阳”需要4.02s，搜索北京1.16s，搜索克拉玛依只需要华丽的328ms

php是由以前的同事Skylin帮忙写的，由于PHP只负责根据AJAX提交的数据，修改XML文件，所以内容很少……然则Skylin不肯用PHP5自带的XML类，而是自己写正则……最后代码只有几十行……果然是高手风范……

比如，这是remove.php:

include "./globals.php";
$file_content = join('',file("../db.xml"));if(preg_match("/rn".intval($_POST['id']).".*rnrn/isU",$file_content,$array))
{
$file_content = str_replace($array[0],'',$file_content);
}
$fp = fopen("../db.xml","w+");
flock($fp,LOCK_EX);
fputs($fp,$file_content);
flock($fp,LOCK_UN);
fclose($fp);
?>

不过正则也容易出现问题，例如：在我最初做的XML数据库里面，标签的前面都有缩进，大概因为有的缩进是TAB，有的是空格，导致正则一直出错，只好把XML里的缩进全部删掉了……

目前已经全部完工，可能还有一些小BUG需要修改，比如：在简介里输入全角字符（比如·和——），会导致后面的字符都无法保存。P.S. 单引号、双引号和”&”容易引起JS错误，我把它们都屏蔽了-_____-b

做了两个攻壳机动队SAC的SVG格式矢量图标

Dexter.Yy — Sun, 07 Jan 2007 04:48:38 +0000

居然有女性舞团要起名叫“个别的十一人”，还要把组织的标志印在衣服上，这难道就是传说中的同人女COSPLAY组织或者SOS团么……不管怎样，我在元旦时接到的一项新任务是帮人做矢量图，包括攻壳机动队SAC里的“笑脸男人”和“个别的十一人”……

本来准备拿Adobe Illustrator来做，但平时用的很少，加上经常看那些用Illustrator做的华丽UI图标，有些心理阴影……做起来很不顺利。不过在导出图片时我看到有SVG格式，便突然觉悟了！

真正的矢量图，就应该是手写生成的哑！

于是先翻SVG的教程，因为很多标签和属性都忘了……IBM DW里的《SVG－可伸缩向量图形介绍》很不错，不能下载的话也可以去这个XML论坛。

看完之后画笑脸男人那种图形基本上就没问题了……作品在此：

http://demo.limboy.com/laughingman.svg

个别的十一人就更简单了：

http://demo.limboy.com/11.svg

不直接放在BLOG里是担心影响访问速度，IE7、Firefox1.5+、Opera 8+都支持直接显示SVG，但目前看来只有IE7支持的最好（3/20/2007更新：不好意思，误导大家了…可能以前机器上装了ADOBE SVG Viewer，没发现IE7不支持SVG-___-b 请参考这篇SVG in IE7?），Opera支持的是不完全版SVG规范。Firefox2.0里仍然不支持少量属性，具体的项目在MDC的文档里有详细说明，主要问题是不支持动画（Animation）和滤镜（Filter），另外，渲染速度也不够理想，我做的笑脸男人可以明显测试出这种区别，因为不能用Animation，所以那段塞林格的文字环绕旋转效果是用JS做的，有部分对DOM的操作，在IE7里要更流畅。目前正在开发的Firefox3，其中一项特性就是会提高SVG的渲染效率，希望尽快推出罢。

把SVG插入到网页里很简单，也是用IMG标签，外面套上object标签，也可以用embed，但最好别用，因为兼容性不好，不符合标准，而object是一个很有前途的标签！在xhtml2.0里，它将会取代img……

随便找个文本编辑器打开图片，可以看到代码很少，比Illustrator导出的图要简洁的多，只有3KB，这也是手写的好处。需要注意的问题一个是中文文本的字体属性，为了兼容浏览环境，最好加上font-family=”Simsun”之类的属性指明字体，字体名称必须用英文。画普通曲线时，用”a [x轴半径], [y轴半径] [旋度（效果没试出来）] ［方向（有点类似4个象限）］［终点坐标］”

文档内的JS有点麻烦，因为是依赖SVG DOM，跟网页里JS的有一些不同，我主要参考了这篇Javascript, SVG and DOM，IBM DW里也有一个文档：《使用脚本动态操作 SVG 文档》