最近用jqmobi折腾个小项目，由于框架本身一起其他使用原因，连续遇到DOMException 12以及DOMException 7错误。查阅各个资料，发现国内几乎没有相关比较系统的文章。为方便他人以及自己查找匹对，故这里整理一篇小文。

本文内容整理参考自：SitePoint > Reference > JAVASCRIPT > DOM Core > DOMException

一、DOMException是？

DOMException是W3C DOM核心对象。DOMException接口表示一个处理的错误，当一个操作不可能执行的时候，会抛出一个异常。例如试图创建一个无效的DOM, 或通过一个不存在的节点作为参数节点操作方法。

var node = document.getElementsByTagName('h1').item(0);
var refnode = node.nextSibling;
var newnode = document.createTextNode('这就是为何你挂了！');
node.insertBefore(newnode, refnode);

上面代码演示了一个会嗝屁的insertBefore操作，因为refnode不是一个子节点。在Opera浏览器下，上面的操作就会导致下面显示的异常错误：

Inline script thread
Error:
Unhandled Exception: [Object DOMException]
code: 8
message: NOT_FOUND_ERR

DOM并不对每个可能发生的错误定义一个异常，例如参数、语法错误就不在其中，这种情况有其自己的一套错误报告机制来处理。

实际上，大多数浏览器已经把DOM异常作为本地机制。除了显示异常代码和信息外，还显示了浏览器可以提供的其他信息（如行数或堆栈轨迹）

二、DOM Exceptions兼容性

兼容性见下表：

Internet Explorer			Firefox			Safari			Opera
5.5	6.0	7.0	1.5	2.0	3.0	1.3	2.0	3.0	9.0	9.5

上表的兼容性数据还是比较老的，按照常规，IE9也应该支持的，最新的Chrome浏览器一定支持。

考古价值的IE浏览器不支持该接口，他们使用本地错误（解析错误之类）。例如，上面插入节点的例子，在老IE下抛出的就是：Invalid argument. 在XML中，会给出更多的信息：Insert position Node must be a Child of the Node to insert under.

三、常量列表

该接口定义了ExceptionCode整数值——向外暴露code属性——指向每种类型的错误；这些定义参考下面些常量：

INDEX_SIZE_ERR code 1

如果索引是负值，或是超过了允许值。例如splitText的offset参数比字符串长度还要长。

DOMSTRING_SIZE_ERR code 2

DOMString的特定字符数据太大。其大小显示是依赖实现的，未被DOM定义（每个浏览器的限制细节参见DOM Core）。

HIERARCHY_REQUEST_ERR code 3

节点不允许有新的子节点，或者新节点已经是其该节点的祖先节点。例如，尝试将Element节点塞入Text节点。

WRONG_DOCUMENT_ERR code 4

试图使用跨文档的节点操作。例如，appendChild的子节点来自其他文档。而不是先输出(使用importNode)。

INVALID_CHARACTER_ERR code 5

一个非法的或无效的字符指定一个有限制的字符串，例如元素的name.

NO_DATA_ALLOWED_ERR code 6

为不支持数据的节点指定数据。如Element节点本身不包含数据，其子节点包含。

NO_MODIFICATION_ALLOWED_ERR code 7

试图修改一个不能被修改的节点。例如，装载一个只读的节点。

NOT_FOUND_ERR code 8

引用的节点不存在。例如，insertBefore相关子节点不是引用的子节点。

NOT_SUPPORTED_ERR code 9

实现不支持的特定操作。例如使用一个节点的方法，但是此方法并没有实现，就是抛出此错误。

INUSE_ATTRIBUTE_ERR code 10

试图添加一个正在使用的属性。例如使用setAttributeNode引用一个已经在另一个元素使用的Attr, 而不是克隆它首先(使用cloneNode)。

INVALID_STATE_ERR code 11

试图使用一个不可用的对象。这种错误的抛出通常是因为某些内部原因，方法无法实现特定的操作。

SYNTAX_ERR code 12

无效或非法的字符串被指定。例如，用无效的CSS值设置selectorText属性的CSSStyleRule. //zxx: 我遇到该错误是因为在特定情况下，对<title>标签使用了innerHTML方法。

INVALID_MODIFICATION_ERR code 13

尝试修改一个节点的类型。例如，使用不匹配最初规则类型的值设置cssText属性的CSSRule.(如，为at-rule设置style-rule values值).

NAMESPACE_ERR code 14

操作与命名空间冲突。例如createElementNS使用的名称歪瓜裂枣。

INVALID_ACCESS_ERR code 15

一个属性或操作不支持指定的节点。例如，尝试在一个不含float值的CSS属性上使用getFloatValue的CSSPrimitiveValue方法。

关于code:ExceptionCode(也就是上面列表中一而再再而三的code)的整数值表示DOMException的类型。

四、最后的说明

本文内容没什么看头。重要的记住这里有篇关于DOMException的文章即可，回头可以迅速找到就OK啦！上面展示的列表中对ExceptionCode不同值的解释太泛太笼统了，后面的举例感觉是要故意展示一些方法，属性等。因此，离自己所希望的人人进来，人人都有启发的愿景还是有一定差距的。DOMException的各个错误也是不容易碰到的，但是，一旦碰到是很头疼的，整个页面的JS基本上就会报废，而且，错误不易查找。例如，使用数字作为元素id，在某些特定情况下，某些浏览器下，就会报DOMException的错误。

我现在比以前懒的，要是过去，刚毕业那会，激情无限的时候，估计会废寝忘食把每个错误都呈现一遍。现在嘛，唉，搞不动了，而且，错误呈现实在不易。因此，抱歉，大家只能将就上面一些笼统泛泛的解释了吧。

不过嘛，团结才是力量，本文可以无限评论的。因此，您要是遇到DOMException错误，并因为这里或那里解决了，记得一定要把您遇到的错误code、具体情境以及解决方法。以评论或邮件(zhangxinxu@zhangxinxu.com)的形式告知，我一定会整理出现，放在正文中的。这样，集思广益，细流成海，以后，一旦遇到浏览器报DOMException的错误，来这里就可以搞定，岂不很好。

因此，希望本文可以成为一个解决DOMException错误的一个平台，收集各个同行的经验，造福自己以及其他同行；而不仅仅是个普通文章。想法是美好的，具体就要看您的贡献与支持了！一起努力吧！

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2396

（本篇完）

一、容我唠叨

我们都知道，CSS3 media queries是响应布局实现之利器。国外很多著名的前端站点，如css-tricks, smashingmagazinegazine等都采用了响应布局。

虽然国内此技术应用就像是打不着的打火机，没法跟如火如荼的欧美相比。但是，毕竟趋势是向前发展的，总会迎来遍地开花的时候，只是时间的长短而已。

本文所涉及的三个关键技术点，伪类(IE8+), js(getComputedStyle, IE9+)以及media queries(IE9+)都需要现代浏览器的支持。因此，如果您不是做HTML5开发，或是从事的是面向大众的普通web页面，本文内容没有任何实用价值。有帮助的，估计就是拓宽思路，增长眼界了。因此，本文内容很快就会归于沉寂，或许5年之后，某君阴差阳错进入此处，发现此文，会不由得惊叹——原来很多年前就有人介绍这个技术啦！但是，历史的发展与推动少不了那些湮没在历史中的开拓者。

media queries可以让设备在不同尺寸下应用不同的CSS样式、布局等。以适应手持设备、普屏显示器、宽屏显示器，以及未来冰箱上的联网显示器，汽车上的数码设备等。然后，仅仅通过CSS做布局可能无法应对所有的交互请求。

举个简单例子，我们打开浏览器可能处于非最大化状态，此时，如果作为普屏处理，加载的图片可能就是128*128的小尺寸图片。但是，当我们最大化以获得更好阅读体验的时候，需要使用更大尺寸的图片256*256, 使用media queries? 拜托，CSS只能改变外在的尺寸，你难道要2倍尺寸拉伸？显然，更合理的做法是加载256*256尺寸的中等尺寸图片。以目前的技术而言，估计除了使用JS修改图片src外，很难有其他更可用的方法了。

OK, 现在问题来了，如何让JS的修改与CSS布局改变同步呢？

二、CSS交互与JS交互同步问题

如何让CSS样式、布局改变的时候，同时准确触发JS的交互呢？

方法一、直接宽度/高度值匹配
何意？CSS3 media queries跨界触发一般都有一个宽度或高度值，或是color(很少使用)。例如，普屏图片宽度128*128，可能就是如下CSS：

@media screen and (max-width: 1024px) {
    img {
        width: 128px;
        height: 128px;
    }
} 

意思就是screen(屏幕)宽度不超过1024像素(max-width:1024px)的时候，图片宽度是128像素，高度也是128像素。

因此，我们可能通过浏览器窗口尺寸改变的resize事件中捕获浏览器窗口尺寸，与1024对比，如果小于则触发对应的普屏事件处理，大于，则宽屏处理。

window.addEventListener("resize", function() {
    // window.innerWidth IE9+浏览器支持
    if (window.innerWidth <= 1024) {
        // 普屏处理
    } else {
        //宽屏处理
    }
});

确实是简单高效的方法。但是，也是有不足的。

① 可维护性
一个载体所对应的数值是会经常变的。例如，小胖今天体重148斤，明天喝碧生源厕所来回几个小时，可能就只有145斤了。同样的，对于1024这个值，变动的几率是很大的。变动其实没什么，麻烦的是下面的JS中的判断的数值与CSS中的限制是要一致的。也就是CSS宽度阈值改变，JS也要跟着变。显然，这种高耦合增加了后期的维护成本。

② 宽度的计算与不确定性
window.innerWidth返回的是窗口内部宽度（不包括浏览器的框框），单位是像素。但是，width属性的单位并不固定。有些站点，可能使用em, %或最新的vw, rem, in等（完整单位参见之前“CSS长度值及时间、频率、角度单位”一文）。

而这些单位的宽度转换成px就需要计算，而这些单位很多是相对的，例如em是与字体大小相关的，如果网页的字体大小被用户手动改变（视力不佳用户，或是“Ctrl + 加号”的误操作），可能你之前按照12像素比例的宽度计算就会不准确。这就是宽度计算的不确定性。

可见，我们有必要寻求更佳的同步方法。什么呢，就通过CSS本身！

通过CSS本身？
比方说吧（虽然这个例子实用性不佳），我们通过media queries让图片宽度变成128像素，就可以通过检测图片应用的宽度判断当前设备状态。

当然，这里只是举例，其实这比上面1024px方法更搓，因为，牵扯到实际样式的CSS是会经常变动的，JS显然不能与之高耦合。

那该如何应用呢？很简单，应用在不会使用的元素，不会产生额外影响的CSS属性。例如在<head>标签上使用z-index属性（from Stephanie）。

@media screen and (min-width: 45em) {
    head {
        z-index: 2;
    }
}

不过，根据Jeremy Keith的测试，Webkit浏览器貌似不支持，其返回的z-index值是auto, 不是数值2. 我那热乎乎的小心脏，瞬间冰冻，啊~~

应用在<body>标签上到是可以的，不过，由于body标签暴露在外，参与CSS布局，如何其设置了定位属性（relative, absolute等），z-index立马勃起，如果里面在层级复杂点，哦呵呵，兄弟你把妹的时间估计要陪代码咯！

不过，对于一般的页面（不是类似游戏页面，幻灯片页面的页面），只有某些艺高人才敢在body上增加定位属性（违背最小化影响原则 – part 7），因此，在body上设置z-index属性一般问题不大，但是，从可理解性上讲，z-index弱了点。因为，z-index值一般是数值。你说：

800~1024     z-index:1;
1024~1280     z-index:2;
1280~1440     z-index:3;
1440~1680     z-index:4; 

两个月后，你在看JS中，zIndex的1, 2, 3, 4，你还记得对应的数值范围吗？别人经手你的代码，知道各个数值对应的含义吗？（别跟我扯注释~~）

因此，我们需要寻求更佳的方案。

方法二、body标签+伪类+content内容生成
因为每个页面都有body标签，在该标签上打标记便于整站通用。

这里的伪类指:after, :before亦可，因为，使用该CSS属性与实际用途冲突概率要比z-index属性小多了，更加安全。

content内容生成我专门写过一篇文章：“CSS content内容生成技术以及应用”，后来又结果伪类属性写了篇：“:after伪类+content内容生成经典应用”。您有兴趣可以看看。而这里，则是一个新的应用典型了。

使用content内容生成的最大好处在于，我们可以随意定义里面的内容（z-index只能数值），例如：

{ content: "普屏"; }

显然，这个描述性的文字是很泛的，概括性强，不会因为1024px变成980px而跟着变动，而且，含义明显，一目了然。

因此，上面的一番分析总结，body:after + content是相当好的一个方法。

我们唯一剩下的技术难点就是如何使用JS获取content的内容。当当当当，前几天的写的“获取元素CSS值之getComputedStyle方法熟悉”一文内容就派上用场了。

使用方法就是标题中的getComputedStyle:

var content = window.getComputedStyle(document.body, ":after").getPropertyValue("content");

然后，我们就可以根据content的具体内容，准确捕获media queries越界的瞬间，并作出相关的JS交互了！

if (content === "窄屏") {
    // ……
} else if (content === "普屏") {
    // ……
} else if (content === "宽屏") {
    // ……
}

三、百闻不如一见

您可以狠狠地点击这里：伪类+js与media queries跨界demo

下图为宽屏(1680px)下等比缩放的效果图：

我们修在宽度改成1024px，则图片不仅尺寸变小了，src地址也应用了小图的地址：

相关CSS代码如下：

.demo img {
    width: 512px;
}
@media screen and (max-width: 1024px) {
    body:after {
        display: none;
        content: 'normalscreen';
    }
    .demo img {
        width: 256px;
    }
}

JS代码比较长，这里就不完整展示了，不过有个东西很重要，需要提醒下：
getComputedStyle返回的content值在某些浏览器下是带有引号的，因此，你不能使用===直接匹配，可以使用简单正则test方法（demo页面的方法），或是索引查找indexOf方法，或是字符分隔split方法等。

if (content === "normalscreen") {}

if (/normalscreen/.test(content)) {}

四、我肚子很饿

上午驾驶员考试，考桩考和小路，请假了，下午才回来。于是，晚上忙着赶活，完成本文，晚饭也懒得吃，因此，现在还饿着。本来想补一个media queries与transition动画配合，使用JS做响应延迟的例子（跨界的时候，应用了transition的元素动画，此时，即时响应的JS交互可能就会出问题，如定位等）。

不过，肚子饿饿，就懒得搞了。好，我要赶快撤了，去吃西北口味的“茄子牛肉盖浇饭”，我口水下来咯~~

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2387

（本篇完）

一、碎碎念~前言

我们都用过jQuery的CSS()方法，其底层运作就应用了getComputedStyle以及getPropertyValue方法。

对于那些只想混口饭吃的人来讲，晓得CSS()如何使用就足够了。对于希望在JS道路上越走越远的来人说，简单了解一些JS库底层实现对自己的学习很有帮助。可能谈不上信手拈来的使用，至少对创造一些创意新颖的新技术拓宽了思路。

jQuery为何受欢迎，其中原因之一就是方法名称比较短。好比打架一样，块头大的潜意识认为厉害，就不由得心生畏惧，退避三舍；小个子（或村妇，小孩）嘛，自然以为是软豆腐，愿意接受作为对手。

因此，当看到类似getComputedStyle这么长的方法名的时候，我们身体里那个懒惰小人突然就醒了：哎哟哟，这东西，就跟放心食品一样，几年才见一回。看上去又蛮复杂，想到晚上还要跟妹子聊天。这东西，就让它从旁边过吧，反正不会掉块肉的。

网上不是有这么个段子嘛：可怕的是，比你聪明的人比你更勤奋。那么，这里的“勤奋”的差异体现在什么地方呢？就拿这个getComputedStyle举例：懒惰青年是看一下，立马像看见凤姐一样视线离开；普通青年是看一下，发现自己不了解，百一下或谷一下，熟悉了解之；勤奋青年是不仅了解，还抽出时间实践之（如做个简单demo测试），熟悉方法的特异性，验证一些观点正确性。

您可以按照你现在的心理状态看看你是哪类青年：如果此时，您已经对本文的内容没有兴趣了（当然，您的工作与JS关系亲密），您是……（你懂的）；如果您看完本文内容，发现，还是有不少收获，心中回味下，然后ctrl+w去其他地方觅食，不再回来，那您是普通青年；如果您看完本文，然后对所说的一些内容作了额外的测试，例如IE9浏览器是否支持测试等，并通过评论形式指出可能的错误，不得不说您是勤奋青年，假以时日，必有一番技术作为。从我文章的些评论来看，有不少同行就是这样的勤奋人儿。

の, 好久没写文章，话又多了，打住，进入正题。

二、getComputedStyle是？

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。

getComputedStyle() gives the final used values of all the CSS properties of an element.

语法如下：

var style = window.getComputedStyle("元素", "伪类");

例如：

var dom = document.getElementById("test"),
    style = window.getComputedStyle(dom , ":after");

就两个参数，大家都懂中文的，没什么好说的。只是额外提示下：Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），不过现在嘛，不是必需参数了。

三、getComputedStyle与style的区别

我们使用element.style也可以获取元素的CSS样式声明对象，但是其与getComputedStyle方法还有有一些差异的。

1. 只读与可写
   正如上面提到的getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写，能屈能伸。
2. 获取的对象范围
   getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。

四、getComputedStyle与defaultView

如果我们查看jQuery源代码，会发现，其css()方法实现不是使用的window.getComputedStyle而是document.defaultView.getComputedStyle，唷？这是怎么一回事？

实际上，使用defaultView基本上是没有必要的，getComputedStyle本身就存在window对象之中。根据DennisHall的说法，使用defaultView可能一是人们不太乐意在window上专门写个东西，二是让API在Java中也可用（这我不懂，忘指点~~）。

不过有个特殊情况，在FireFox3.6上不使用defaultView方法就搞不定的，就是访问框架(frame)的样式.

五、getComputedStyle兼容性

对于桌面设备：

	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
基本支持			9
伪类元素支持

对于手机设备：

	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
基本支持			WP7 Mango
伪元素支持	?	?		?	?

上面打问号的表示没有测试，是否兼容不知。如果您方便测试，欢迎将测试结果告知，这里将及时更新，并附上您的姓名，以谢您做的贡献。

我们先把注意力放在桌面设备上，可以看到，getComputedStyle方法IE6~8是不支持的，得，背了半天的媳妇，发现是孙悟空变的——郁闷了。不急，IE自有自己的一套东西。

六、getComputedStyle与currentStyle

currentStyle是IE浏览器自娱自乐的一个属性，其与element.style可以说是近亲，至少在使用形式上类似，element.currentStyle，差别在于element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的<style>属性等）。

因此，从作用上将，getComputedStyle方法与currentStyle属性走的很近，形式上则style与currentStyle走的近。不过，currentStyle属性貌似不支持伪类样式获取，这是与getComputedStyle方法的差异，也是jQuery css()方法无法体现的一点。

//zxx: 如果你只知jQuery css()方法，你是不会知道伪类样式也是可以获取的，虽然部分浏览器不支持。

例如，我们要获取一个元素的高度，可以类似下面的代码：

alert((element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height);

您可以狠狠地点击这里：使用getComputedStyle和currentStyle 获取元素高度demo

结果FireFox下显示24px(经过计算了), 而IE浏览器下则是CSS中的2em属性值：

getComputedStyle方法与currentStyle属性其他具体差异还有很多，我以一个普通按钮做元素，遍历了其中靠谱的属性名和属性值，您可以狠狠地点击这里：getComputedStyle和currentStyle属性展示demo

仔细对比查看，我们可以看到不少差异，例如浮动属性，FireFox浏览器下是这个(cssFloat)：

IE7浏览器下则是styleFloat ：

而IE9浏览器下则是cssFloat和styleFloat都有。

等其他N多差异。

七、getPropertyValue方法

getPropertyValue方法可以获取CSS样式申明对象上的属性值（直接属性名称），例如：

window.getComputedStyle(element, null).getPropertyValue("float");

如果我们不使用getPropertyValue方法，直接使用键值访问，其实也是可以的。但是，比如这里的的float，如果使用键值访问，则不能直接使用getComputedStyle(element, null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！

使用getPropertyValue方法不必可以驼峰书写形式（不支持驼峰写法），例如：style.getPropertyValue("border-top-left-radius");

兼容性
getPropertyValue方法IE9+以及其他现代浏览器都支持，见下表：

	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
基本支持			9

OK，一涉及到兼容性问题(IE6-8肿么办)，感觉头开始微微作痛了~~，不急，IE自由一套自己的套路，就是getAttribute方法。

八、getPropertyValue和getAttribute

在老的IE浏览器（包括最新的），getAttribute方法提供了与getPropertyValue方法类似的功能，可以访问CSS样式对象的属性。用法与getPropertyValue类似：

style.getAttribute("float");

注意到没，使用getAttribute方法也不需要cssFloat与styleFloat的怪异写法与兼容性处理。不过，还是有一点差异的，就是属性名需要驼峰写法，如下：

style.getAttribute("backgroundColor");

如果不考虑IE6浏览器，貌似也是可以这么写：

style.getAttribute("background-color");

实例才是王道，您可以狠狠地点击这里：getPropertyValue和getAttribute获取背景色demo

结果FireFox下一如既往的rgb颜色返回(Chrome也是返回rgb颜色)：

对于IE9浏览器，虽然应用的是currentStyle, 但是从结果上来讲，currentStyle返回的对象是完全支持getPropertyValue方法的。

九、getPropertyValue和getPropertyCSSValue

从长相上看getPropertyCSSValue与getPropertyValue是近亲，但实际上，getPropertyCSSValue要顽劣的多。

getPropertyCSSValue方法返回一个CSS最初值(CSSPrimitiveValue)对象(width, height, left, …)或CSS值列表(CSSValueList)对象(backgroundColor, fontSize, …)，这取决于style属性值的类型。在某些特别的style属性下，其返回的是自定义对象。该自定义对象继承于CSSValue对象（就是上面所说的getComputedStyle以及currentStyle返回对象）。

getPropertyCSSValue方法兼容性不好，IE9浏览器不支持，Opera浏览器也不支持（实际支持，只是老是抛出异常）。而且，虽然FireFox中，style对象支持getPropertyCSSValue方法，但总是返回null. 因此，目前来讲，getPropertyCSSValue方法可以先不闻不问。

十、补充~结语

有了jQuery等优秀库，我们有熟悉底层的getComputedStyle方法的必要吗？

实际上，本文一直没有深入展开getComputedStyle方法一个很重要的，类似css()方法没有的功能——获取伪类元素样式。但从这一点上将，熟悉getComputedStyle方法有必要。

下一篇文章，我就将介绍如何实现getComputedStyle方法在伪类元素上的特异功能，实现CSS3 media queries下一些JS交互，及实际应用。

well, 开篇已经啰哩吧嗦不少内容了，这里就不再讲废话了。行文匆忙，文中难免有表述不准确之处，欢迎指正。欢迎补充，感谢阅读，希望本文的内容能够对您的学习有所帮助。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2378

（本篇完）

本文小动漫demo访问点击后面：zxx-carton-test(svg).html

一、关于鑫情动画

大学时期，因为兴趣，花了不少时间学习flash动画制作以及AS脚本。后来开发个人网站时候，一方面想自娱自乐，另一方面由于这份无法割舍的情愫，开辟了个“阳光鑫情”
的频道（目前首页即可见）。

就是类似下面截图的，自己开发（播放器），自己配音，自己手绘人物、场景的轻松小动漫。

要知道，这玩意很耗精力的。
首先录音：表情啊，语调啊什么的要一气呵成，所以经常因为一些瑕疵不能重来；而后音频处理：主要包括降噪，静音，长度精简等；接着手绘：要根据音频内容在flash软件上绘制合适的人物以及场景，虽然都是傻傻简单的人物造型，真正绘制起来，也要一顿饭的功夫；然后动画呈现：根据音频语句关键时间点添加合适的关键帧，制作动画，还要手动更改同步字幕。最后发布：要导出flash，在photoshop中处理截图（尺寸限制，大小优化），然后后台上传。

Adobe Audition → Adobe Flash → Adobe Photoshop

后来，工作忙了，任务重了，还要博客这块的压力，我只是个普通凡人，无法同时专注于几个事情，因此，“阳光鑫情”就让它去海南晒太阳去了。

就像男女朋友一样，即使已经分手很久了，也可能对EX念念不忘。

上周五一节前的几天，基本上没有什么活，各种x, y, z因素参杂在一起，让我突然脑中灯泡一亮——我是不是可以用HTML5实现“鑫情动画”？跑马灯式地过了遍各个环节的技术实现，发现可行。Have an idea, just do it!

花了几天时间折腾了下，还真像模像样的。

作总结有助于自我提高，同时本身具有实际应用价值，因此，分享下，顺便介绍一些HTML5小知识。

二、你也可以得瑟几个搞笑小动漫

我们做前端的心中也是有文艺情怀的，只是犹如醇厚的美酒，平时都窖藏的很深而已。

你只要略通点JS，完全可以做几个搞笑动漫，自娱自乐，一抒自己的搞笑气质和文艺情怀，哇咔咔。

您可以狠狠地点击这里（请使用FireFox, Chrome, Opera等浏览器访问，IE10应该也可以）：HTML5搞笑小动漫demo

如何使用？
首先，调用如下CSS：

<link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/zxxCarton.css" type="text/css" />

然后，调用如下JS（不依赖于任何库的原生JS）：

<script src="http://www.zhangxinxu.com/study/js/zxxCarton.js"></script>

最后，调用类似下面的一行脚本就可以了：

zxxCarton({ /* 动画相关数据 */ });

很简单吧！

三、兴奋吧！其实你被忽悠了~~

就像魔术一样，说穿了很简单，但是，一旦自己操作起来，就不是那么回事了。

说个最简单的，音频文件如何获取？自己录制，编辑可不是很轻松的活。除非你做无声动画（抱歉，本动画JS脚本是基于音频文件运行的），或者从网上download。即使你轻松搞到声音资源，但是考虑到不同浏览器对音频文件的支持不同，您还需要对文件做格式转换，例如从mp3格式转成ogg格式。

虽然芙蓉姐长得有点抽象，但是跟凤姐站一块，那活脱脱写实派了。同样的，虽然这里的音频处理要折腾点，但是，比起传统flash实现，要节约N多脑细胞和N多把妹时间。

拿本文演示demo举例：
我是从搜狗音乐中下载了一个“笑话”音频，然后使用Adobe Audition做了简单编辑和格式转换（直接文件另存为）。一回生两回熟，有了经验后，音频部分分分钟就可以搞定了。剩下的就是填数据了。

对了，忘说了，还有一个可能要花点时间的就是动画元件（如场景，人物，道具等）处理了。与音频文件一样，你可以自己制作，或是从网上download；或者直接使用文字作为元件。

拿本文演示demo举例：
里面的人物（包括baby）都自己用鼠标+画笔工具搞出来的，以SVG背景形式载入的。具体相关，后面介绍脚本数据的时候会介绍。

本段更多的是下点调料，重点在下一段，关于动画数据的介绍。

四、将行为以数据形式呈现

下面是难点也是重点，关于动画呈现的数据介绍。

主体参数以及结构：

{
    // 动画的舞台，如果使用默认的document.body, zxCarton.js会自动创建一个id为carton_container的新舞台
    container: document.body,
    // 动画默认等待播放时候显示的主标题
    title: "标题",
    // 动画默认等待播放时显示的副标题，如果不想显示副标题，可以使用空字符串
    subtitle: "副标题",
    // 必须数据，动画音频文件
    audio: {
        // IE浏览器, Chrome
        urlMp3: "xxx.mp3",
        // Opera, FireFox
        urlOgg: "xxx.ogg"
    },
    // 舞台元件显示以及运动的数据，基于时间轴
    data: []
}

云里雾里？下面是demo页面使用数据，一看就知庐山面目了：

{
    title: "测试动画",
    subtitle: "by zhangxinxu 2012-04-26",
    audio: {
        urlMp3: "baby-marry.mp3",
        urlOgg: "baby-marry.ogg"
    },
    data: []
}

时间轴参数
下面要介绍的就是上面的data属性，其为一个基于关键时间点的对象数组（类似于时间轴）。

所谓“关键时间点”，就是一段话结束的那个时间点，或是一个镜头切换的那个时间点。一个时间点上的完整数据示例如下（绿色的注释很重要）：

{
    // 当前关键时间点的时间，单位是秒，如果是0，默认播放开始时候舞台呈现的一切
    time: 0,
    // 关键字text, 表示舞台上需要呈现/隐藏(值为null)某文本元件
    text: {
        // customTextId表示文本元件的唯一id, 可随意定义，用来准确匹配舞台元素
        "customTextId": {
            // 文本元件中显示的文字（支持HTML字符）
            html: "文本文件中显示的文字",
            // 文本元件的样式控制，例如这里就是文字大小100px（数值默认单位px，下同）
            styles: {  fontSize: 100 }
        }
    },
    // 关键字shape, 表示舞台上需要呈现的图形元件（背景图片形式）
    shape: {
        // 图形元件的唯一id，只能是当前元件的背景图片地址，如果同一背景图用做多个元件，可以使用customBgUrl.svg?v=1, 2, 3, ...
        "customBgUrl.svg": {
            // 图形元件的样式控制，一般只关心高宽以及位置（动画效果）
            styles: {
                width: 300,
                height: 300
            },
            // 图形元件中的对话框内容，一般用在人物对话以及物件说明上
            dialog: {
                // direction指当前对象物体（一般为说话者）的面部朝向
                direction: "right",
                // 对话框相对于当前图片元件内部的偏移位置
                offsets: { x: 100, y: -10 },
                // 对话框中的文字内容
                word: "对话框中的文字内容"
            }
        }
    },
    // 关键时间点上的字幕
    title: "舞台下方呈现的字幕"
}

说明：无论是文字元件，或是图形元件，在下一个关键时间点（flash中的关键帧）上的时候，如果需要隐藏，则设为null；如果样式一样，可以设置对应的styles属性值为null, {}或可读性更好的"same"；如果有位置和尺寸的变化，仅需要设置要变化的样式即可。

所有的元件都是绝对定位的，因此，你无需再styles中设置position属性，更多注意力放在尺寸以及位置上。

对照下面demo的实际代码再次具体分析：
先看看0秒时候：

{
    time: 0,
    text: {
        "customTextId_1": {
            html: "5个月",
            styles: {
                fontSize: 100,
                fontWeight: "bold",
                left: "50%",
                marginLeft: -125,
                top: "30%"
            }
        }
    },
    title: "结婚才5个月"
}

time: 0表示动画开始播放的第一秒舞台的呈现。只有text，表示舞台只有文本元件。"customTextId_1"表示这个文本元件的id为customTextId_1. html: "5个月"表示文本元件里面显示的文字是“5个月”。styles就是文字的大小，位置什么的。title就是舞台同步字幕咯！
该时间点上舞台截图如下：

然后就是2.5秒的时候：

{
    time: 2.5,
    shape: {
        "zxx_baby_1.svg": {
            styles: {
                width: 300,
                height: 300,
                left: "30%",
                top: "25%"
            },
            dialog: null
        }
    },
    text: {
        "customTextId_1": null
    },
    title: "妻子就生下了一个白白胖胖的小男孩"
}

time: 2.5表示第2.5秒的时候，舞台发生一些变化。text: { "customTextId_1": null }表示在这个时间点上，id为customTextId_1的文本元件从舞台上移除。而新增的shape表示舞台添加背景图片地址为zxx_baby_1.svg，高宽300像素，左30%, 上25%的图形元件，没有对话框内容(dialog: null)。舞台字幕变成了“妻子……小男孩”。如下图：

下面就是第7秒，demo中，2.5秒→7秒是有动画的，如何实现的，如下：

{
    time: 7,
    shape: {
        "zxx_baby_1.svg": {
            styles: {
                width: 400,
                height: 400,
                left: "26%",
                top: "20%"
            }
        }
    },
    title: "丈夫非常地怀疑"
}

前后时间点上，同一元件同时存在，且样式有差异，即默认以动画形式呈现（动画时长为前后两个时间点的时差）。因此，你只需要关心关键时间点上：各个元件存在与否，位置如何即可。例如这里，小baby图形元件尺寸变成了400 * 400, 位置也发生了移动。

基本上，这几个时间点将80%~90%属性以及值含义介绍了，其他一些细节等对照后面几个时间点的源代码（右键demo页面→查看页面源代码）和效果应该就明白了。为了节约篇幅，后面几个时间点就不一一详述了。

五、应用到的CSS3/HTML5技术

要说HTML5的应用，这里最最重要的就是audio音频使用。应用的HTML5代码类似下面：

<audio preload="auto">
    <source src="baby-marry.mp3"></source>
    <source src="baby-marry.ogg"></source>
    <p>您的浏览器不支持<code>audio</code>元素！</p>
</audio>

多个source时候，浏览器会从上往下应用，例如FireFox浏览器，先玩玩mp3格式，发现不支持，得，继续下面一个，ogg格式，可以，就播放之~~

为了声音的播放与动画呈现同步，需要音频可以一次性播放完毕的时候在可以执行动画。因此，动画的播放控制如下(audio为标签为<audio>的音频元素)：

audio.addEventListener("canplaythrough", function() {
    // 声音播放
    this.play();

    // 动画播放
    play();
});

而声音播放完毕的重新播放是调用的ended事件：

audio.addEventListener("ended", function () { }, false);

在本demo中，还使用了HTML5 SVG背景技术。使用SVG背景的好处在于图形元件尺寸拉伸的时候，没有位图那样的模糊或是锯齿等。本demo的SVG背景图我是在这个页面上使用画笔画下来的。关于何为SVG, SVG如何创建，如何使用等推荐参考我之前的文章：“使用SVG实现gradient背景渐变”。这里就不详细介绍了。

当然，你也可以使用普通的jpg图片作为背景图。

您可以狠狠地点击这里：jpg背景图作为图形元件动画demo

最后，动画效果是使用的CSS3的transition属性，这个讲得够多的了，不多说，有兴趣可以参考我之前的“CSS3 Transitions, Transforms和Animation使用简介与应用展示”一文，讲得很详细。

六、局限、以及未来

局限很明显，就是浏览器兼容性。不过，目前看来，在手机上应用是无障碍的。

虽然这里的HTML5实现比Flash实现省了一定的功夫，但是，从实际操作的角度讲，还是麻烦了点；而且受众也小，使用者需要懂一点JS，要懂一点音频处理等。

我大胆设想了下，如果浏览器可以支持音频输入录制的话，加上科大讯飞的语言识别技术和一些其他音频分析技术。对应的时间点可以自动呈现出现，对应的字幕也直接通过语言识别呈现。然后，呈现出的是可视化的操作界面，我们所要做的就是在关键时间点上创建以及移动元件，会自动生成动画数据，一旦保存到数据库，直接就可以在线生成一个网页动漫了。按照这种设想，其实就是把Flash部分动画制作功能搬到了浏览器上，集制作，发布一体。而且，学习成本低很多。

如果这样，可以使从事艺术的，或是医学的，或是建筑的，各行各业人都能做个简单的搞笑动漫。声音录入，简单操作，保存发布！ 妈妈再也不用担心我的动漫了，so easy! 你说，这种情景出现会不会加速我国动漫事业的发展呢？

呵呵，貌似有点想多了。不过，如果技术允许，这个idea做成产品还是可行的。至少目前在手机上就是可以的，手机支持声音录入，语音识别；现在不是流行你猜我画吗？再多画几张，录个音就变成搞笑动漫/文艺动漫/言情动漫/等，说不定还真会火呢？我对产品不懂，想法傻b了点，希望不要见笑。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2367

（本篇完）

一、现象描述

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：

<input /> <input type="submit" />

间距就来了~~

我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：

.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
}

<div class="space">
    <a href="##">惆怅</a>
    <a href="##">淡定</a>
    <a href="##">热血</a>
</div>

您可以狠狠地点击这里：inline-block元素间间距demo

这种表现是符合规范的应该有的表现（如果有人认为是bug就太()ay ()oy 了）。

不过，这类间距有时会对我们布局，或是兼容性处理产生影响，需要去掉它，该怎么办呢？以下展示N种方法（欢迎补充）！

二、方法之移除空格

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：

<div class="space">
    <a href="##">
    惆怅</a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>

或者是：

<div class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
</div>

或者是借助HTML注释：

<div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

等。

三、使用margin负值

.space a {
    display: inline-block;
    margin-right: -3px;
}

margin负值的大小与上下文的字体和文字大小相关，其中，间距对应大小值可以参见我之前“基于display:inline-block的列表布局”一文part 6的统计表格：

例如，对于12像素大小的上下文，Arial字体的margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。

由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。

四、让闭合标签吃胶囊

如下处理：

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血</a>
</div>

注意，为了向下兼容IE6/IE7等喝蒙牛长大的浏览器，最后一个列表的标签的结束（闭合）标签不能丢。

在HTML5中，我们直接：

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血
</div>

好吧，虽然感觉上有点怪怪的，但是，这是OK的。

您可以狠狠地点击这里：无闭合标签去除inline-block元素间距demo

五、使用font-size:0

类似下面的代码：

.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器，就是Chrome, 其默认有最小字体大小限制，因为，考虑到兼容性，我们还需要添加：
类似下面的代码：

.space {
    font-size: 0;
    -webkit-text-size-adjust:none;
}

您可以狠狠地点击这里（去年制作的一个简单demo）：font-size:0清除换行符间隙demo

补充：根据小杜在评论中中的说法，目前Chrome浏览器已经取消了最小字体限制。因此，上面的-webkit-text-size-adjust:none;代码估计时日不多了。

六、使用letter-spacing

类似下面的代码：

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

根据我去年的测试，该方法可以搞定基本上所有浏览器，包括吃“东鞋”、“西毒(胶囊)”、“南地(沟油)”、“北钙(三鹿)”的IE6/IE7浏览器，不过Opera浏览器下有蛋疼的问题：最小间距1像素，然后，letter-spacing再小就还原了。

七、使用word-spacing

类似下面代码：

.space {
    word-spacing: -6px;
}
.space a {
    word-spacing: 0;
}

一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。据我测试，word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing即使负值很大，也不会发生重叠。

您可以狠狠地点击这里：word-spacing与元素间距去除demo

与上面demo一样的效果，这里就不截图展示了。如果您使用Chrome浏览器，可能看到的是间距依旧存在。确实是有该问题，原因我是不清楚，不过我知道，可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。

.space {
    display: inline-table;
    word-spacing: -6px;
}

八、其他成品方法

下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法（注意，其针对的是block水平的元素，因此对IE8-浏览器做了hack处理）：

.yui3-g {
    letter-spacing: -0.31em; /* webkit */
    *letter-spacing: normal; /* IE < 8 重置 */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}

.yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}

以下是一个名叫RayM的人提供的方法：

li {
    display:inline-block;
    background: orange;
    padding:10px;
    word-spacing:0;
    }
ul {
    width:100%;
    display:table;  /* 调教webkit*/
    word-spacing:-1em;
}

.nav li { *display:inline;}

也就是上面一系列CSS方法的组组合合。

九、结语

其他去除间距的方法肯定还有，欢迎大家通过评论方式进行补充。上文部分方法可能有测试不周全之处，因此，部分细节上可能会有纰漏，欢迎指正。

参考文章：Fighting the Space Between Inline Block Elements

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2357

（本篇完）

一、base64百科

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，可用于在HTTP环境下传递较长的标识信息。

某人： 唉，我彻底废柴了，为何上面明明是中文，洒家却看不懂嘞，为什么？~~

好吧，我也不喜欢专业术语的解释。你只要知道，base64编码就是长得像下面这样子的代码：
thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

上面代码大家都熟悉吧，迅雷下载链接哦（咳咳，该地址很纯洁），就是base64编码后的地址，所以以后看到这种：一堆连续字母，最后有1~2个"="的代码就是base64。

base64:URL就是URL地址是base64编码的。

例如下面这个：

<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />

二、base64与文件数据编码

在网络中，通过HTTP传输的文件还可以通过base64对数据进行编码进行传输。就如上面的这个base64的gif格式图片。当然，可以base64编码的文件不仅仅是图片，也可以是字体文件，例如(中间有缺省)：

@font-face{
    font-family: forTest;
    src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 ... RFERuENEGADl7JlY=) format('woff');
}

自然，对于background-image图片，我们也可以使用base64编码进行传输，例如：

background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

而使用base64编码作为background-image图片就是本文要着重阐述的。

三、如何获得图片的base64编码

其实在我之前“基于HTML5的可预览多图片Ajax上传”以及“zSlide-基于CSS3/HTML5演示文档jQuery插件”实际上就与图片的base64编码的获取打过交道了。如下本地图片转换成可预览的base64编码的核心脚本：

var reader = new FileReader(), htmlImage;
reader.onload = function(e) {
    htmlImage = '<img src="'+ e.target.result +'" />';    // 这里e.target.result就是base64编码
}
reader.readAsDataURL(file);

上面说的你只需要了解，实际上，目前base64编码工具不少，对于我们前端制作，下面这个本地图片 base64编码获取页面是值得推荐的：Encode Data URL By PuterJam

直接将桌面图片拖到条条里就有了响应的background-image url属性可用的base64地址了：

该转换页面的原理就是上面所说的HTML5 文件本地预览原理，具体可以自己查阅资料。

四、使用base64:URL的优缺点

个人觉得base64:URL传输图片文件的好处在于：

1. 减少了HTTP请求
2. 某些文件可以避免跨域的问题
3. 没有图片更新要重新上传，还要清理缓存的问题

不足在于：

1. 浏览器支持
   使用base64编码图片作为背景图片的这种技术IE6/IE7浏览器是不支持的（IE9浏览器IE7模式下支持，这里被@前端的那点破事鄙视了 ）。对于目前PC页面，兼容性问题使没有文件上传以及无需更新缓存的优点不存在了。
2. 增加了CSS文件的尺寸
   base64编码图片本质上是将图片的二进制大小以一些字母的形式展示，例如一个1024字节的图片，base64编码后至少1024个字符，这个大小会被完全嵌入到CSS文件中（不过幸运的是也可以被gzip了，而图片文件被gzip效果不明显）。
3. 编码成本
   图片完成后还需要base64编码，目前估计手工完成的多，因此，增加了一定的工作量，虽然不多。

五、优缺点权衡下的实际应用价值

权衡上面所展示的优缺点，貌似base64:URL图片没有什么用武之地啊，实际上非也，有一种情况时有base64编码作为background-image背景图片利要远大于弊的。何种情况呢？

在web页面制作的时候，由于某些现实原因，我们可以会用到下面这一类图片：

• 这类图片不能与其他图片以CSS Sprite的形式存在，只能独行
• 这类图片从诞生之日起，基本上很少被更新
• 这类图片的实际尺寸很小
• 这类图片在网站中大规模使用

想想看，你的网站中有没有同时满足上面四条的背景图片呢？

//zxx: 假设已经过去了今天朝鲜火箭勃起的时间

怎样，想到了没？提点下，例如下面这个企鹅微博中的loading gif图片(537字节，勉强算是)：

537字节的大小实际上还是偏大了点，让我们看个更better的例子，大家可以去豆瓣首页，可以看到下图所示的垂直线：

为background-image图片（for 等高布局）：

从bg_line.png这样的命名可以预知（不是：home_bg_line.png），该背景图片会在（可以在）网站中多处使用。

图示平铺图片地址为：http://img3.douban.com/pics/bg_line.png

大小1 * 1 像素，png格式，大小88字节。//zxx: 当图片颜色简单到一定程度的时候，gif格式图片大小要小于png8, 所以，这个点如果保存成gif格式，只需要43字节，为png一半大小

像这种图片大小极小，但又占据了一次HTTP请求，同时不能与其他背景图片Sprite，而网站很多地方都使用。因此，没有什么背景图片比这个更适合使用本文的“base64:URL图片”技术进行优化了！

为了比对优化的好处，我们来看个实际的demo.

六、base64:URL图片的实际应用

我博客首页的个人信息介绍处的虚点是使用背景图片实现的（考虑到IE6 dot边框跟dashed搞基，不同浏览器虚点间距差异等）。

现在，demo就要展示如何使用base64:URL图片实现该虚点效果。

您可以狠狠地点击这里：base64 URL虚点背景demo

相关CSS代码如下：

.dot {
    background-image: url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);
   *background-image: url(http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/zxx_dotted.gif);    // IE6~IE7
    background-repeat: repeat-x;
    background-position: left bottom;
}

可以看到，使用base64的CSS代码量基本上跟下面使用完整地址差不多，因此，对于一些级小尺寸图片，所谓增加CSS文件大小的不足可以忽略（再考虑到gzip），同时减少了1个HTTP请求，加上这个图片网站很多地方使用，因此，累积节约的HTTP请求就很惊人了。

当然，唯一美中不足的是，对于IE6~IE7浏览器不能享受到这种“百利仅一害”的优化技术，我们还需要专门为它们擦屁股。不过，权衡来看，还是很值得的，毕竟目前，在中国IE8浏览器是大头（就在最近），IE6, IE7 就乖乖地泻下去吧~~

最后，展示下demo页面YSLOW分析图吧，可以看到，没有任何CSS background-image请求~~

七、虽是一篇小短文，结尾也要干爹疼

IE6/IE7又一次暴露了自己的屌丝形象，对其，我已无力再次吐槽，不过，毕竟历史长河中的有功之人，就等其静静退出历史舞台吧。

再次提醒下，使用base64编码代替CSS背景图片是有局限性的，并不是所有图片都适合使用base64编码这种技术的。例如：
1. CSS Sprite图片后期维护会死人，只能是独立图片
2. 图片尺寸过大，CSS文件就会变成了臃肿的大棒子，反而不利于加载
3. CSS文件的优点就是重用，因此，如果背景图片就一个地方使用，减少的请求数有限，考虑到其他成本，还不如直接使用普通url图片地址
4. 如果图片经常改动，好吧，哥们，苦逼的前端加班仔中就多了一个你

因此，技术本身虽好，需天时地利人和方可使用。

在微博上，@朴灵提过MHTML这个东东，好像与base64编码相关的，对此我几乎一无所知，希望有相关了解的人可以补充下。

另外，周末时节，想着明早可以睡到自然醒，文笔过于仓促，出现错误在所难免，文中有表述不准确的地方欢迎指正，感谢阅读，祝大家周末快乐！

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2341

（本篇完）

为避免无用功，翻译之前先要百一下，看看是否有人已经翻译了，结果发现10年的时候有篇名字类似的译文，叫做：“每位网页设计师新手都应知道的10件事”，还是不错的译文，有兴趣的可以看下。不过本文内容只是单纯针对表单设计，名字虽然匹配率高，但是内容却迥然不同。好了，节约口水，直接进入译文主体~~

—————- 以下为翻译全文 —————–

有很多设计糟糕的表单，不管你是否喜欢他们，表单都是必不可少的。Joe Leech（cxpartners负责用户体验的）将介绍其在表单设计上的一些经验。

估计没有什么比表单更让设计师出气了。表单不一定可以让（设计师）表现创意，还是可以？我们可能需要从做基本的层面，重新审视表单，理解表单——表单是用户和软件之间的对话。

忘掉切换啊，点击什么的，表单是我们数字设计师（我想应该是依赖计算机进行设计的设计人员）将面临的最富有的交互。下一次，你要对付一个表单的时候，不要认为就是要应用好看的CSS效果或是添加漂亮的jQuery特效。表单设计的水是很深的。

我已经做过上百个表单用户测试，为保险公司、假期预订交互设计过一些非常复杂的表单，以及其他很多。可能你最近使用的某个表单就是我设计的。//zxx: 可有可无的牛皮糖

下面这些经验教训，我希望在我开始设计表单事前先学会之。

1. 不要标记必填字段

你知道小星号(*)就表示必填字段？我已经见过很多次因为这个用户测试失败。作为概念来讲，必填字段没有多大意义，等同离线（这个概念）。对于开发者，这个是很好的，他们提供了一个很好的黑白方式去完成。星号以及必填字段（导致表单完成）失败是因为他是个需要学习的行为。在用户测试中我看到的典型行为是用户在（表单）上面填写表单，结束于某个东西阻止他们时候或者他们碰了某个按钮。

解决方法很简单，可选字段标记，优质用户需要驻足思考是否要填写的字段处标记。

下面两张截图以腾讯微博注册页面为例分别演示：阻止用户填写表单的事情，以及“不标记必填字段”。

这里所有字段都是必填的

2. 不要使用微调

HTML5近来春风得意，其提供了很多足以亮瞎双眼的工具用来把玩。我们需要好好思考我们的新玩具是否得当。现在的数字字段（指类似type="number"的input框）都提供了小小的上下小尖角运行用户来回调数值。

现在有两个问题。首先，浏览器默认显示的小三角真不是一般的小，点击很繁琐，你还可以想象加菲猫般的手指在iPhone上挣扎的情景。这就是所谓的费茨法则 （Fitt’s Law, 人机交互重要法则，其最基本的观点就是任何时候，当一个人用鼠标来移动鼠标指针时，屏幕上的目标的某些特征会使得点击变得轻松或者困难。目标离的越远，到达就越是费劲。目标越小，就越难点中），越小的东西越难点中。

我好想听到你在叫嚣了：你可以直接在数字文本框中键入数值啊。是的，你可以，但是，让我们看看浏览器的显示，向上向下的微调箭头使得文本框长得很像我们信赖的朋友（下拉）选择框。首次使用微调交互的用户（因为长得像下拉框）认为他们不能键入（内容）。

我的建议是避开知道它们（指微调表单元素）变得更普遍，或者浏览器开发者整改默认设计。

3. 只有一种按钮类型或最好每个表单就一个按钮

还有一个鲜为人知的心理学原理，叫做“希克法则(Hick’s Law)”，基本观点是当选项增加时，人们下决定的时间就会增加。我知道，这不是rocket science（电影，是关于青春期焦虑的喜剧佳作），但仍是值得铭记于心的规则。

你可以通过帮助你的优质用户做选择来帮助他们。让所有的基本按钮都是一个颜色，每页都只有一个按钮（非基本按钮）来帮助他们做选择。哪个按钮是我应该点击的呢？哦，很简单嘛，那个大大的色色的按钮！

4. 大块区域

我之前是学神经科学的，因此研究过心理学记忆——特别是短期和工作记忆。现在当面告诉你，不，短期记忆能力不是7+/-2, 4+/-1或是人说三五句话，作为人类的我们擅于处理视觉刺激，局限是数目越小我们做得越好。将表单块分成更小的组可以让评估更容易，往往促使用户进入表单（的东西）来自他们的记忆。

请确保你的字段组长度大约为4。

5. 想想你为何对某事抱有疑问，对于用户感觉又如何

这可能是我给出的最直接的建议，但经常是利用率最低的。

见下图：

质疑你提出的每个问题。有必要吗？那是什么感觉要问这个？

很多业务需要问问题，作为设计师的我们可以争得面红耳赤（原文说的是争得脸都蓝了）。有必要提这样的问题，对于了解我们的业务需要这样可以让我们妥协的数据（译者：我想应该指问问题得到的数据）。

我们可以通过告诉我们的优质用户我们为何需要问那样的问题再帮助它们。放心的使用和数据共享通常都是好的。

再次示例：

仍是一个艰难的提问，但是希望我们尝到了药丸的甜头。

下图为译者的补充截图：

//zxx: 下面为广告~~注意不要勿点~~嘻嘻~~

6. 日期是个不安分的家伙

输入日期确实是个挑战，有些缺陷你可以避免。单一的最大问题是错误的处理。

最简单的方法是浮出日历。值得注意的是在英国一周开始于星期一，而在美国则是星期天。如果你的用户注意力不集中，他们可能选择星期天，而实际上他们本想选择星期一的。

同样需要注意的是国际日期的格式。在美国，最开始的是月份，而在日本，最前面的是年份。因此，日期4/5/12可以以三种方式解释。

这就是为什么最好使用选择框。

下图为译者补充截图（还是企鹅微博注册页）：

7. 表单是开发者的工艺品

与设计师一样，表单也是开发人员的工艺品。了解输入数据可能出现的错误以及设计应付的后端代码是一项挑战（译者：算是对开发人员的赞许，有戴高帽子之嫌，哈哈）。

下面很简单例子。输入货币值。用户可能犯很严重的错误。迫使用户满足某种特定的格式会让用户沮丧，让我们来正视它，这是开发人员这边的偷懒（译者：作者应该认为，对于开发人员而言，匹配固定格式比各种形式都匹配要轻松些，因此，迫使用户满足特定格式是开发人员的一点懒惰）。

对于开发人员而言，没有什么挑战好过构建防弹表单（指防御能力很强的表单）了。

8. 不要在表单中使用垂直分栏（列）

在表单中使用列的最大问题是流动。表单开始于上面，结束语底部，而列的出现会打破这种流动。

不要假设用户通过标签访问表单，而因此以列的形式导航表单。在用户测试中，这种情况是罕见的。大部分情况下，我们看到的是：输入细节，使用鼠标/触控板/手指点击进入下一个字段，然后再输入内容，等~~

9. 一个输入框可以搞定的时候就不要使用两个

大部分用户不是盲打，在用户测试中，我们可以看到人在输入内容时候都要看键盘。

当要往表单中输入电话号码的时候，会要求添加区号和电话号码，哦，问题来了。用户看不到，或确实记不住这儿有两个输入框，结果第一个框输入了完整数字，如果这个文本框限制了一定数目的字符限制，问题就更糟了。

电话号码就使用一个字段，同样的，门牌号/街道什么的都是如此 – 只使用一个文本输入框。。

10. 友善点

你会惊讶到底有多少相当粗鲁的错误消息出现在这里或那里。

下面是我最近碰到的一个例子：

事实明摆着你可以选择一个未来时间，结果出现了滑稽的反应，恩，不太好。

你作为用户设身处地想一下，作为用户，看到这个错误提示会有什么反应。恼火？或许更糟糕。亲切友善是容易的。

我折腾了一个图片（如下，点击可以查看超大图），它包含有更多的最佳实践方法，以设计出更好的表单。

—————- 以上为翻译全文 —————–

作者貌似是个英国佬，不循规蹈矩的语句以及一些不太懂的英式幽默可苦了我了。至此，完毕，感谢阅读。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2336

（本篇完）

一、说明、引言

我JS还是比较薄弱的，本文的内容属于边学边想边折腾的碎碎念，可能没什么条理，可能有表述不准确的地方，可能内容比较拗口生僻。如果您时间紧迫，或者JS造诣已深，至此您就可以点击右侧广告（木有？则RSS或盗版）然后撤了。

事件是个大课题，真要从断奶开始讲起的话，可以写个12期的连载。关于JS事件的文章（类似DOM/BOM事件模型，IE与其他浏览器事件差异，DOM1/DOM2事件定义等）落叶般随处可见。熟豆子反复炒一点意思都没有，因此，这里谈谈自己感兴趣的自定义事件以及周边。

所谓自定义事件，就是有别于有别于带有浏览器特定行为的事件(类似click, mouseover, submit, keydown等事件)，事件名称可以随意定义，可以通过特定的方法进行添加，触发以及删除。

二、JS自定义事件

循序渐进便于接收。慢慢来~~

先看个简单的事件添加的例子：

element.addEventListener("click", function() {
    // 我是临时工
});

这是个简单的为DOM元素分配事件处理函数的方法(IE 不支持)，有别于：

element.onclick = function() {
   // 我是临时工
};

addEventListener()可以为元素分配多个处理函数（而非覆盖），因此，我们可以继续：

element.addEventListener("click", function() {
    // 我是二代临时工
});

然后，当element被click(点击)的时候，就会连续触发“临时工”和“二代临时工”函数。

抽象→具象→本质→数据层
你有没有觉得这种行为表现有点类似于往长枪里面塞子弹(add)，（扣动扳手 – click）发射的时候按照塞进去的顺序依次出来。这种行为表现为我们实现自定义事件提供了思路：我们可以定义一个数组，当添加事件的时候，我们push进去这个事件处理函数；当我们执行的时候，从头遍历这个数组中的每个事件处理函数，并执行。

当多个事件以及对应数据处理函数添加后，我们最终会得到一个类似下面数据结构的对象：

_listener = {
    "click": [func1, func2],
    "custom": [func3],
    "defined": [func4, func5, func6]
}

因此，如果我们脱离DOM, 纯碎在数据层面自定义事件的话，我们只要以构建、遍历和删除_listener对象为目的即可。

函数式实现
还是那句话，循序渐进，我们先看看函数式的实现（只展示骨干代码）：

var _listener = {};
var addEvent = function(type, fn) {
    // 添加
};
var fireEvent = function(type) {
    // 触发
};
var removeEvent = function(type, fn) {
    // 删除
};

上面的代码虽然显得比较初级，但是目的亦可实现。例如：

addEvent("alert", function() {
    alert("弹出！");
});

// 触发自定义alert事件
fireEvent("alert");

但是，函数式写法缺点显而易见，过多暴露在外的全局变量（全局变量是魔鬼），方法无级联等。这也是上面懒得显示完整代码的原因，略知即可。

字面量实现
众所周知，减少全局变量的方法之一就是使用全局变量（其他如闭包）。于是，我们稍作调整（代码较长，为限制篇幅，使用了滚动条，完整显示点击这里 – JS交互, RSS中无效果）：

var Event = {
    _listeners: {},
    // 添加
    addEvent: function(type, fn) {
        if (typeof this._listeners[type] === "undefined") {
            this._listeners[type] = [];
        }
        if (typeof fn === "function") {
            this._listeners[type].push(fn);
        }
        return this;
    },
    // 触发
    fireEvent: function(type) {
        var arrayEvent = this._listeners[type];
        if (arrayEvent instanceof Array) {
            for (var i=0, length=arrayEvent.length; i<length; i+=1) {
                if (typeof arrayEvent[i] === "function") {
                    arrayEvent[i]({ type: type });
                }
            }
        }
        return this;
    },
    // 删除
    removeEvent: function(type, fn) {
    	var arrayEvent = this._listeners[type];
        if (typeof type === "string" && arrayEvent instanceof Array) {
            if (typeof fn === "function") {
                // 清除当前type类型事件下对应fn方法
                for (var i=0, length=arrayEvent.length; i<length; i+=1){
                    if (arrayEvent[i] === fn){
                        this._listeners[type].splice(i, 1);
                        break;
                    }
                }
            } else {
                // 如果仅仅参数type, 或参数fn邪魔外道，则所有type类型事件清除
                delete this._listeners[type];
            }
        }
        return this;
    }
};

使用类似下面：

Event.addEvent("alert", function() {
    alert("弹出！");
});

// 触发自定义alert事件
Event.fireEvent("alert");

您可以狠狠地点击这里：JS自定义事件字面量书写demo

默认页面document通过Event.addEvent()绑定了两个自定义的alert事件，因此，此时您点击页面的空白区域（非按钮与示例代码区域），就会有如下图所示的连续两个alert框：

demo页面还有两个按钮，用来清除已经绑定的alert事件。第一个按钮清除所有alert事件，而点击第二个按钮清除第一个alert事件。例如我们点击第二个按钮：

清除完毕后再点击页面的空白区域， 您会发现只会弹出“第二个弹出！”字样的弹出框了。这表明，第一个绑定自定义事件被remove掉了。

字面量实现虽然减少了全局变量，但是其属性方法等都是暴露而且都是唯一的，一旦某个关键属性(如_listeners)不小心在某事件处reset了下，则整个全局的自定义事件都会崩溃。因此，我们可以进一步改进，例如，使用原型链继承，让继承的属性(如_listeners)即使出问题也不会影响全局。

原型模式实现
代码如下（相比上面增加了addEvents, fireEvents, removeEvents多事件绑定、执行与删除方法，篇幅较长，增加滚动限高，点击这里完整展示 – JS交互, RSS中无效果）（一堆代码看得头大，建议直接跳过）：

var EventTarget = function() {
    this._listener = {};
};

EventTarget.prototype = {
    constructor: this,
    addEvent: function(type, fn) {
        if (typeof type === "string" && typeof fn === "function") {
            if (typeof this._listener[type] === "undefined") {
                this._listener[type] = [fn];
            } else {
                this._listener[type].push(fn);
            }
        }
        return this;
    },
    addEvents: function(obj) {
        obj = typeof obj === "object"? obj : {};
        var type;
        for (type in obj) {
            if ( type && typeof obj[type] === "function") {
                this.addEvent(type, obj[type]);
            }
        }
        return this;
    },
    fireEvent: function(type) {
        if (type && this._listener[type]) {
            var events = {
                type: type,
                target: this
            };

            for (var length = this._listener[type].length, start=0; start<length; start+=1) {
                this._listener[type][start].call(this, events);
            }
        }
        return this;
    },
    fireEvents: function(array) {
        if (array instanceof Array) {
            for (var i=0, length = array.length; i<length; i+=1) {
                this.fireEvent(array[i]);
            }
        }
        return this;
    },
    removeEvent: function(type, key) {
        var listeners = this._listener[type];
        if (listeners instanceof Array) {
            if (typeof key === "function") {
                for (var i=0, length=listeners.length; i<length; i+=1){
                    if (listeners[i] === listener){
                        listeners.splice(i, 1);
                        break;
                    }
                }
            } else if (key instanceof Array) {
                for (var lis=0, lenkey = key.length; lis<lenkey; lis+=1) {
                    this.removeEvent(type, key[lenkey]);
                }
            } else {
                delete this._listener[type];
            }
        }
        return this;
    },
    removeEvents: function(params) {
        if (params instanceof Array) {
            for (var i=0, length = params.length; i<length; i+=1) {
                this.removeEvent(params[i]);
            }
        } else if (typeof params === "object") {
            for (var type in params) {
                this.removeEvent(type, params[type]);
            }
        }
        return this;
    }
};

啰哩吧嗦的代码直接跳过，其实上面代码跟字面量方法相比，就是增加了下面点东西：

var EventTarget = function() {
    this._listener = {};
};

EventTarget.prototype = {
    constructor: this,
    // .. 完全就是字面量模式实现脚本
};

然后，需要实现自定义事件功能时候，先new构造下：

var myEvents = new EventTarget();
var yourEvents = new EventTarget();

这样，即使myEvents的事件容器_listener跛掉，也不会污染yourEvents中的自定义事件(_listener安然无恙)。

您可以狠狠地点击这里：原型模式下的JS自定义事件demo

从demo右半区域的源代码展示可以看出如何使用addEvents, fireEvents方法同时添加和触发多个自定义事件的。

//zxx: 下面为广告~~注意不要勿点~~嘻嘻~~

三、DOM自定义事件

我们平常所使用的事件基本都是与DOM元素相关的，例如点击按钮，文本输入等，这些为自带浏览器行为事件，而自定义事件与这些行为无关。例如：

element.addEventListener("alert", function() {
    alert("弹出！");
});

这里的alert就属于自定义事件，后面的function就是自定义事件函数。而这个自定义事件是直接绑定在名为element的DOM元素上的，因此，这个称之为自定义DOM事件。

由于浏览器的差异，上面的addEventListener在IE浏览器下混不来(attachEvent代替)，因此，为了便于规模使用，我们需要新的添加事件方法名（合并addEventListener和attachEvent），例如addEvent, 并附带事件触发方法fireEvent, 删除事件方法removeEvent，(命名均参考自MooTools库)。

如何直接在DOM上扩展新的事件处理方法，以及执行自定义的事件呢？

如果不考虑IE6/7浏览器，我们可以直接在DOM上进行方法扩展。例如添加个addEvent方法：

HTMLElement.prototype.addEvent = function(type, fn, capture) {
    var el = this;
    if (window.addEventListener) {
        el.addEventListener(type, function(e) {
            fn.call(el, e);
        }, capture);
    } else if (window.attachEvent) {
        el.attachEvent("on" + type, function(e) {
            fn.call(el, e);
        });
    }
};

//zxx: 上面代码中的HTMLElement表示HTML元素。以一个<p>标签元素举例，其向上寻找原型对象用过会是这样：HTMLParagraphElement.prototype → HTMLElement.prototype → Element.prototype → Node.prototype → Object.prototype → null。这下您应该知道HTMLElement所处的位置了吧，上述代码HTMLElement直接换成Element也是可以的，但是会让其他元素（例如文本元素）也扩展addEvent方法，有些浪费了。

这样，我们就可以使用扩展的新方法给元素添加事件了，例如一个图片元素：

elImage.addEvent("click", function() {
    alert("我是点击图片之后的弹出！");
});

由于IE6, IE7浏览器的DOM水平较低，无法直接进行扩展，因此，原型扩展的方法在这两个浏览器下是行不通的。要想让这两个浏览器也支持addEvent方法，只能是页面载入时候遍历所有DOM，然后每个都直接添加addEvent方法了。

var elAll = document.all, lenAll = elAll.length;
for (var iAll=0; iAll<lenAll; iAll+=1) {
    elAll[iAll].addEvent = function(type, fn) {
        var el = this;
        el.attachEvent("on" + type, function(e) {
            fn.call(el, e);
        });
    };
}

您可以狠狠地点击这里：基于DOM扩展自定义方法demo

点击demo页面张含韵小姐年轻时候相片，就会有该图片alt属性值。

测试代码如下(demo页面有代码完整展示)：

<img id="image" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" alt="年轻的张含韵" />

document.getElementById("image").addEvent("click", function() {
    alert("这是：" + this.alt);
});

只能点到为止
直接在DOM上进行事件方法扩展其实是个糟糕的做法，因此，这里我并没有对自定义事件做进一步深入探讨（这个下一部分会讲）。

基于DOM扩展缺点有：缺少标准无规律、提高冲突可能性、性能以及浏览器支持。
扩展名字任意命，很有可能就会与未来DOM浏览器本身支持的方法相互冲突；扩展无规律，很有可能出现A和B同名不同功能的扩展而造成冲突；IE6-7浏览器下所有扩展都要通过遍历支持，其性能开销可想而知；另外IE8对DOM扩展的支持并不完整，例如其支持Element.prototype，却没有HTMLElement.prototype.

虽然我从事的站点就是基于MooTools库的，但是，我对MooTools库基于DOM扩展方法的做法是不支持的。相反，我更亲近jQuery库的做法，也就是下面要讲的“伪DOM自定义事件”。

四、伪DOM自定义事件

这里的“伪DOM自定义事件”是自己定义的一个名词，用来区分DOM自定义事件的。例如jQuery库，其是基于包装器（一个包含DOM元素的中间层）扩展事件的，既与DOM相关，又不直接是DOM，因此，称之为“伪DOM自定义事件”。

//zxx: 下面即将展示的代码目的在于学习与认识，要想实际应用可能还需要在细节上做些调整。例如，下面测试的包装器仅仅只是包裹DOM元素，并非选择器之类；$符号未增加冲突处理，且几个重要方法都暴露在全局环境中，没有闭包保护等。

原型以及new函数构造不是本文重点，因此，下面这个仅展示：

var $ = function(el) {
    return new _$(el);
};
var _$ = function(el) {
    this.el = el;
};
_$.prototype = {
    constructor: this,
    addEvent: function() {
        // ...
    },
    fireEvent: function() {
        // ...
    },
    removeEvent: function() {
        // ...
    }
}

于是我们就可以使用类似$(dom).addEvent()的语法为元素添加事件了（包括不包含浏览器行为的自定义事件）。

自定义事件的添加
如果只考虑事件添加，我们的工作其实很简单，根据支持情况，addEventListener与attachEvent方法分别添加事件（attachEvent方法后添加事件先触发）即可：

addEvent: function(type, fn, capture) {
    var el = this.el;
    if (window.addEventListener) {
        el.addEventListener(type, fn, capture);
    } else if (window.attachEvent) {
        el.attachEvent("on" + type, fn);
    }
    return this;
}

显然，事情不会这么简单，有句古话叫做“上山容易下山难”，自定义事件添加容易，但是如何触发它们呢？——考虑到自定义事件与浏览器行为无关，同时浏览器没有直接的触发事件的方法。

自定义事件的触发
又是不可避免的，由于浏览器兼容性问题，我们要分开说了，针对标准浏览器和IE6/7等考古浏览器。

1. 对于标准浏览器，其提供了可供元素触发的方法：element.dispatchEvent(). 不过，在使用该方法之前，我们还需要做其他两件事，及创建和初始化。因此，总结说来就是：

document.createEvent()
event.initEvent()
element.dispatchEvent()

举个板栗：

$(dom).addEvent("alert", function() {
    alert("弹弹弹，弹走鱼尾纹~~");
});

// 创建
var evt = document.createEvent("HTMLEvents");
// 初始化
evt.initEvent("alert", false, false);

// 触发, 即弹出文字
dom.dispatchEvent(evt);

createEvent()方法返回新创建的Event对象，支持一个参数，表示事件类型，具体见下表：

关于createEvent()方法我自己了解也不是很深入，不想滥竽充数，误人子弟，所以您有疑问我可能作答不了，希望对熟知该方法的人可以做进一步的解释说明（例如事件接口与document关系，UIEvent是什么东西等）。

initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。支持三个参数：initEvent(eventName, canBubble, preventDefault). 分别表示事件名称，是否可以冒泡，是否阻止事件的默认操作。

dispatchEvent()就是触发执行了，dom.dispatchEvent(eventObject), 参数eventObject表示事件对象，是createEvent()方法返回的创建的Event对象。

2. 对于IE浏览器，由于向下很多版本的浏览器都不支持document.createEvent()方法，因此我们需要另辟蹊径（据说IE有document.createEventObject()和event.fireEvent()方法，但是不支持自定义事件~~）。

IE浏览器有不少自给自足的东西，例如下面要说的这个"propertychange"事件，顾名思意，就是属性改变即触发的事件。例如文本框value值改变，或是元素id改变，或是绑定的事件改变等等。

我们可以利用这个IE私有的东西实现自定义事件的触发，大家可以先花几分钟想想……

// zxx: 假设几分钟已经过去了……

大家现在有思路了没？其实说穿了很简单，当我们添加自定义事件的时候，顺便给元素添加一个自定义属性即可。例如，我们添加自定义名为"alert"的自定义事件，顺便我们可以对元素做点小手脚：

dom.evtAlert = "2012-04-01";

再顺便把自定义事件fn塞到"propertychange"事件中：

dom.attachEvent("onpropertychange", function(e) {
    if (e.propertyName == "evtAlert") {
        fn.call(this);
    }
});

这个，当我们需要触发自定义事件的时候，只要修改DOM上自定义的evtAlert属性的值即可：

dom.evtAlert = Math.random();	// 值变成随机数

此时就会触发dom上绑定的onpropertychange事件，又因为修改的属性名正好是"evtAlert", 于是自定义的fn就会被执行。这就是IE浏览器下事件触发实现的完整机制，应该说讲得还是蛮细的。

自定义事件的删除
与触发事件不同，事件删除，各个浏览器都提供了对于的时间删除方法，如removeEventListener和detachEvent。不过呢，对于IE浏览器，还要多删除一个事件，就是为了实现触发功能额外增加的onpropertychange事件：

dom.detachEvent("onpropertychange", evt);

大综合
结合上面所有论述与展示，我们可以得到类似下面的完整代码（为限制篇幅，滚动定高，想查看完整代码推荐去原demo，或是点击这里完整显示– js交互，RSS中无效果。）：

var $ = function(el) {
    return new _$(el);
};
var _$ = function(el) {
    this.el = (el && el.nodeType == 1)? el: document;
};
_$.prototype = {
    constructor: this,
    addEvent: function(type, fn, capture) {
        var el = this.el;
        if (window.addEventListener) {
            el.addEventListener(type, fn, capture);
            var ev = document.createEvent("HTMLEvents");
            ev.initEvent(type, capture || false, false);

            if (!el["ev" + type]) {
                el["ev" + type] = ev;
            }
        } else if (window.attachEvent) {
            el.attachEvent("on" + type, fn);
            if (isNaN(el["cu" + type])) {
                // 自定义属性
                el["cu" + type] = 0;
            }
            var fnEv = function(event) {
                if (event.propertyName == "cu" + type) { fn.call(el); }
            };
            el.attachEvent("onpropertychange", fnEv);
            if (!el["ev" + type]) {
                el["ev" + type] = [fnEv];
            } else {
                el["ev" + type].push(fnEv);
            }
        }
        return this;
    },
    fireEvent: function(type) {
        var el = this.el;
        if (typeof type === "string") {
            if (document.dispatchEvent) {
                if (el["ev" + type]) {
                    el.dispatchEvent(el["ev" + type]);
                }
            } else if (document.attachEvent) {
                el["cu" + type]++;
            }
        }
        return this;
    },
    removeEvent: function(type, fn, capture) {
        var el = this.el;
        if (window.removeEventListener) {
            el.removeEventListener(type, fn, capture || false);
        } else if (document.attachEvent) {
            el.detachEvent("on" + type, fn);
            var arrEv = el["ev" + type];
            if (arrEv instanceof Array) {
                for (var i=0; i<arrEv.length; i+=1) {
                    el.detachEvent("onpropertychange", arrEv[i]);
                }
            }
        }
        return this;
    }
};

您可以狠狠地点击这里：JS DOM自定义事件demo

demo页面中的的张含韵小姐图片上通过级联形式联系添加了三个事件（一个是包含浏览器行为的click事件，还有两个是自定义不含行为的alert事件）：

$(elImage)
    .addEvent("click", funClick);
    .addEvent("alert", funAlert1)
    .addEvent("alert", funAlert2);

而funClick方法中有等同下面脚本：

$(e.target).fireEvent("alert");

因此，点击图片，才会出现三个弹出框：用户点击图片 → 执行funClick → 第一个弹框 → 执行fireEvent → 触发自定义"alert"事件 → 连续两个"alert"事件弹框

当点击图片下面的按钮清除掉自定义"alert"事件后，再点击图片就只有一个弹出咯（funAlert1和funAlert2提前回家扫墓去了）！

五、清明节前的结语

明天回家，很显然，我要钓鱼钓死在河边上。

时间等客观原因，本文展示的些脚本并未做非常详尽严谨的测试，因此，不建议直接Copy到实际项目中应用，更多旨在相互交流与学习。例如在IE浏览器下，最后的“伪DOM自定义事件”，click事件通过点击触发时的事件类型(event.type)是click, 但是通过fireEvent触发的时候事件类型是propertychange, 这些细节在测试学习的时候都是可以忽略的，但是要是实际应用，这都是需要完善的。

本想以很通俗易懂的语言阐述我想表达的内容，但是，现在回过头看看，做得并不好，术语，啰嗦的话语还是显得多了点，这方面的功力还需要加强，或许是本身理解不透彻的缘故，无法驾驭自然无法语言通俗化。

虽说自己JS方面的学习比两年前要好多了（那个时候连addEventListener和attachEvent放在一起干嘛的都不清楚），但是心里清楚的很，JS还是很薄弱的，跟真正优秀的JS开发人员相比，要积累的还有很多。什么时候能够像看有色小说一样把《JavaScript语言精粹》一书读下来，恩，估计可以有脸得瑟得瑟了~~

本文涉及的一些知识点欢迎补充提点，有表述不准确的地方欢迎指正。

最后，祝大家清明节快乐！额？怎么这句话怪怪的——上坟一般快乐不起来吧~~那大家祝我清明回家钓鱼大丰收，大爆箱！！哈哈！！

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2330

（本篇完）

下面就来看看为何Ross Bruniges说不要过分依赖JavaScript库~~

库是很棒的东西，但千万不要因此让你JavaScript的学习打折扣。 – by 开发者Ross Bruniges

JavaScript库已经成为了一个web开发人员的工具包的重要组成部分，一个很好的理由（zxx: 应指指依赖理由）。库让每个浏览器的JavaScript实现无差异，使开发人员可以专注于编写代码，10次中有9次将只是工作 – 这是一个了不起的事情。

但你可曾停下来想过学习JavaScript，而不是一切都依靠库？尽管我不主张离开库，但我依然要给你些东西让你去思考，以及可能会让您更上一层楼的JavaScript权威指南。

1. 库库也会尿裤裆，知识在手莫惊慌

每个开发者都怕怕的事情之一就是一些你依赖的东西不顶用了（zxx: 应指冲突之类）。这可能是个核心的库函数或是插件，而这两个都是你迫切需要的（用来修复某些问题）。

库提供了很好的抽象层于浏览器的各种差异之上，但是，“引擎盖”下面，它们仅仅就是JavaScript, 因此，一点点的基础知识就可以让你开始明白大致哪里出了问题。即使你无法自己修正该错误，你还可以高亮错误的位置然后反馈给（编写该）库的核心团队。

2. 坏坏代码难免有，越早发现越好走

如果你使用允许社区插件（zxx：指论坛之类的些杂碎插件）的库（zxx: 如jQuery, 鱼龙混杂太多），您可能已经遇到了一个不得不从你项目上咔嚓掉的糟糕插件，或者你花了大量时间试图让其工作。能够注意到一种可能会造成性能问题的模式就意味着站点上线后是愉悦的还是让人不爽的客户端。

3. 买爱疯，宁换肾；需不需要先自问？

根据你要求的功能，你需要的代码可能不需要库。例如，你只是做一些简单的dom操作，值得你一试。

页面的大小和性能是web上重要因素，一个JavaScript的大小20K ~ 80K大小不等。在高度连接的桌面设备上，80Kb不算多。但是，如果你的站点是针对手机用户的，则越轻量越好。我最近推出了一个CSS动画可用时只需要JavaScript的站点。

我决定我并不需要的库所提供的援助之手，因为我只要处理一个浏览器JavaScript实现。 最终，JavaScript的总大小约2KB。

4. 国际油价要接轨，技术俱进抱大腿

JavaScript是一个不断发展的语言，我们现在身处一个全新的世界，远远超出我们认为可用的能力的范围。你可以在Server端使用node.js, 你可以通过app访问地理位置信息。HTML5提供了新的APIs，可用于控制嵌入式多媒体，信息存储，并确定你的用户是否在线。

因为我们正在谈论有关新技术和开发技术，文档目前的水平是能够在传统深入和密集API文档中发现所需。了解JavaScript对于你研究这些你想使用的功能会是一个巨大的帮助。许多网上例子不使用库，有助于你能够从最底层准确了解发生了什么。

学习资源

那么，我所说的这些对你有所触动了吗？如果是这样，开始学习的最佳之地就是你使用的JS库，在code.google.com/apis/library上有非压缩版本，而且我推荐你从最新的版本入手。

如果你遇到什么不懂的，可以去Mozilla MDC（zxx:MDC指Mozilla Developer Center, 类似于国内蓝色理想）寻求解释。如果你寻找HTML5提供的可能示例，html5demos.com满是精彩而又简单的例子。

——— 以上就是翻译内容了 ———

译者现身说法

是不是感觉作者说得有点淡，一股忧郁的无力吐槽的感觉。无法让那些依赖库完成一些功能的泛泛之辈们引起重视，因此，末了，我也一舒己见。

首先，作者的观点我都是赞同的，但是在托辞与表达上过于苍白无力，无法发人深省，看了只会让人打瞌睡。

如果你认定了前端这条路，依赖JavaScript库只会让你日后成为一个悲催的前端人员：工资涨不上，新技术跟不上，混迹于各个公司间，妄图有所发展，结果都是平淡收场，虽说铁定饿不死，但是而立之年的人生压力会让你觉得混得真是惨淡。这些都是可以预见的。

在中国，从事所谓前端之人何其多也，可以依赖JavaScript库实现功能的人何其多也，比牛魔王身上的虱子还要多。时间流逝，就凭抱着JS库过日子，你怎么可能从这么多人之间脱颖而出（当然你爸姓李或有干爹另当别论）。

正如Ross Bruniges所说的，如果JS库报错或是插件冲突了，你晓得症结在哪里吗？好不容易从哪搞来个插件，效果实现了，一上线，尼玛IE6下老是爆掉，你知道什么原因吗？手机页面，没有JS库你能搞定里面的交互吗？你能读懂node.js代码吗？你能读懂HTML5 APIs文档中的JS示例代码吗？如果不能，你永远就是在别人手下干活，按部就班做事的命，这东西不是钓鱼，靠经验积累就行的。你必须好好学习原生JS, 这决定了你以后的位置和高度。

世事无常，如何应对风云万变，扎实的基本功才是王道（学什么新东西都快）。新技术层出不穷，各种框架、库应接不暇，三年河东三年河西，如何在时代大潮中屹立不倒？只要掌握了语言本身，才能兵来将敌水来土堰，永远不要担心没饭吃。

设想下，如果jQuery被国家禁止使用了，你还能完成页面上的各类交互吗？不要将自己栓死在一棵树上。

依赖库，只是应用；掌握核心，才能创造。应用与创造的差异不言而谕。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2314

（本篇完）

一、开篇无关紧要的话

今天四处闲逛，看到迅雷UEDxwei兄写了篇名为“浅谈个人在瀑布流网页的实现中遇到的问题和解决方法(http://cued.xunlei.com/log031)”的文章，我两只沉沉的萝卜眼顿时放出无数闪亮的小星星。

倒不是文章本身，而是可以用来制作demo的图片资源啊，啊咔咔（得瑟中……）！！

因此，本文即将展示的demo中的图片都有迅雷UED提供，这里先郑重感谢。

二、稍稍要紧的话

跟风，尤其受pinterest的煽风点火，瀑布流现在不少人关注。我正好最近比较闲，加上有人曾在我站点提出希望我介绍点瀑布流的东西，所以，今儿个也随下大流。

pinterest以及上面迅雷UED xwei的瀑布流demo（至少在FireFox下还是有致命的显示bug的）都是采用的绝对定位实现的，有相对复杂的位置计算。

我一向不喜欢吃别人嚼过的米饭，于是尝试使用另外的原理实现。我是个流体布局控，对绝对定位啊、浮动啊什么的一向没什么好感，于是，这里要介绍的就是基于多栏列表流体布局实现的瀑布流布局效果。

大致结构、布局见下面的手绘图：

没有复杂的位置计算，不需要知道里面元素的高度以及宽度，且易理解，关键是具体实现~~

三、高潮来了：demo展示

您可以狠狠地点击这里：基于多栏列表瀑布流布局demo

欢迎各种滚动，缩放等测试。低版本IE浏览器也是兼容滴。问题嘛也是有滴，就是滚动到一定位置再F5刷新的时候，部分加载的内容有丢失，需要重新滚动加载。这个嘛，我个人觉得小小demo，没必要折腾啦（实际上要实现也比较容易，改动如下：每次滚动不是append一个节点，而是连续回调直到加载到屏幕下方。不懂什么意思？花点功夫看看JS实现原理就会明白了）~~

四、说说原理

第一次进入的时候，根据浏览器宽度以及每列宽度计算出列表个数，然后不管三七二十一，每列先加载个5张图片再说。

当滚动的时候，对每一列的底部位置做检测，如果在屏幕中或屏幕上方，则立即append一个新图片（注意：为了简化代码，提高性能，同时便于演示等，这里只append了一个）。因为，滚动时连续的，因此，我们实际看到的效果是图片不断load出来。

当浏览器宽度改变的时候，页面上有个id为waterFallDetect空span标签，这个标签作用有两个：一是实现两端对齐效果，二是用来检测瀑布流布局是否需要刷新。

检测原理如下：
该span标签宽度与一个列表宽度一致，当浏览器宽度变小的时候，如果小到一定程度，显然，浏览器最右边的列表就会跑到下一行，把空span挤到后面去，空span发生较大的水平位移，显然，可以通知脚本，布局需要刷新；当浏览器宽度变大的时候，如果变大的尺寸超过一列的宽度，显然，这个空span灰跑到第一行去，同样是发生较大的水平位移，因此，又可以通知脚本刷新瀑布流布局了。

这个方法的好处是几乎没有计算就可以一点不差地知道何时瀑布流布局需要刷新。这显然要比设置resize定时器+位置尺寸计算要简单高性能地多。

滚动时的页面刷新是基于HTML字符串的处理，而不是更改每个DOM元素的位置（这是绝对定位实现的处理），因此，这里的效率显然更高。

五、总结：基于多栏列表流体布局瀑布流效果优点

1. 简单：最大限度利用了浏览器的流体特性进行布局，省去了很多计算的麻烦；新人更易懂和上手
2. 更好的性能：这个体现在多处，如浏览器宽度改变，瀑布流刷新时候的效率等
3. 无需知晓尺寸：如果是要绝对定位实现瀑布流，必须知道每个小模块的高度以及宽度（否则无法定位），而基于列表的布局则无需知道高宽

无聊时候的折腾，有不足与不准确之处欢迎指正。一些实现的具体细节等也是非常欢迎提问交流的。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2308

（本篇完）