DOMContentLoaded事件在很多js框架源码中都有出现，对应dom ready。
这些事件名称语义上看起来都很清楚，添加事件监听也跟其他事件一样的简单。

	document.addEventListener("DOMSubtreeModified", function(e) {
	  	// Notify of change!
	  	console.warn("change!", e);
	}, false);

	// Now create a new element to see what it will look like
	var a = document.createElement("a");
	document.body.appendChild(a);

	/*
		Result:

		{
			ADDITION: 2,
			MODIFICATION: 1,
			REMOVAL: 3,
			attrChange: 0,
			attrName: "",
			defaultPrevented: false,
			newValue: "",
			prevValue: "",
			relatedNode: null,
			initMutationEvent: initMutationEvent(),
			bubbles: true,
			cancelable: false,
			constructor: MutationEvent { MODIFICATION=1, ADDITION=2, REMOVAL=3},
			currentTarget: Document en,
			eventPhase: 3,
			explicitOriginalTarget: body.home,
			isTrusted: true,
			originalTarget: body.home,
			target: body.home,
			timeStamp: 0,
			type: "DOMSubtreeModified"
		}

	*/

如果你想单独对某个node添加事件监听，代码如下：

	document.getElementById("slideshowImage").addEventListener("DOMAttrModified", function(e) {
 	// Record the occurrence
  	console.warn(e.attrName + " changed from ", e.prevValue," to: ", e.newValue);
}, false);

attrName–记录哪个属性发生了改变, prevValue—改变前的值,newValue—改变后的值。每个事件都有它各自的属性。详细请看 spec list

运用这些DOM事件能更精确的掌控document。但值得注意的一点是这些事件会频繁的产生，所以添加这些事件监听会使应用很复杂、繁重。但在复杂的web应用中，根据需求来灵活应用它们会非常有用。

文章翻译自 DOM Events in JavaScript

众所周知，less是一种动态样式语言， bootstrap基于less来编写是为了让bootstrap能够继承less的优势，如变量，继承，运算，函数。如果大家想了解或者回顾下less可以看下以前苏河介绍的less

• 让css动起来—-lesscss（1）
• 让css动起来—-lesscss（2）

用less编写bootstrap

为什么使用less？

Bootstrap的核心是用less来编写的，这里允许我介绍下less的作者：Alexis Sellier（他的个人网站貌似被墙了）。Less让我们编写css代码更具乐趣，更加方便和迅速。

Less包含什么？

Less包含变量，混合，对可重用代码的继承以及一些数学的简单操作，甚至是一些颜色的函数。

学习更多

如果你想学习更多，可以直接去官方网站了解http://lesscss.org ，（附中文官网：http://www.lesscss.net/ ）

less的特性

变量

如何管理网站的主体颜色和主体容器的高度和宽度切实让人有点头疼，大家一定有不断的做ctrl+c和ctrl+v的操作来反复替换这些常量吧，但是一旦我们用了less来管理这些变量，就能达到牵一发而动全身的效果，管理起来非常方便

混合

还记得你写border-radius需要申明冗余的类似-moz-border-radius和-webkit-border-radius等属性吧，但是如果我用混合的特征来管理border-radius来达到重用的效果，那么，代码看起来就会非常简洁了。

函数

针对一些复杂的操作，比如栅格布局，数学的加减乘除计算，颜色的变化等等，我们都可以用函数来进行

介绍完less部分，该介绍主体的部分了，既然bootstrap继承less，那么它有哪些特点呢？
bootstrap对less进行了二次封装，提供了很多基础的less变量和函数，个人觉得非常有用，下面就来具体看下bootstrap为我们提供了哪些常用的变量和函数吧。

Bootstrap变量

组件

Bootstrap混合

关于混合

基础的混合
混合就是将一段需要进行合并的样式通过less的一种申明方式写到一起，它可以方便的被其他样式调用，从而达到能够重用的目的。

    .element {
    .clearfix();
    }

带参数的混合
这种混合和基础混合比较类似，它增加接受参数的功能，当然如果你不传任何参数，它会提供一个默认值

    .element {
    .border-radius(4px);
    }

易于扩展
所有的混合都是存储在mixins.less中的，如果各位有什么需要增加的混合可以直接集成到utilities.less中，方便调用。

bootstrap包含的混合

常用混合

表单forms

字体

栅格系统
相关的less代码在mixins.less中

css3属性

背景和渐变

关于less的编译

如果你从githib上下载了源码并对bootstrap进行了修改，你必须针对bootstrap进行编译。关于less的编译我有话要说，现在针对less的编译已经有很多工具了，http://less.cnodejs.net/tools 大家可以访问中文官网对这些工具逐一认识，个人推荐simpleless，非常方便。

未实例化组件前上传按钮的结构类似：

  选择要上传的文件 

组件实例化代码如下：

    KISSY.use('gallery/form/1.2/uploader/index', function (S, RenderUploader) {
        new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue',{
            serverConfig:{
                action:"upload.php"
            },
            name:"Filedata",
            urlsInputName:"fileUrls"
        });
    })

实例化后的结构：

如果是采用ajax上传（firefox/chrome）

    选择要上传的文件


    

对应js配置：name:"Filedata"，必须存在的一个参数，在ajax上传中，组件会生成一个透明度为0，占满模拟按钮的文件域。
服务器端通过这个参数来获取文件的信息，执行上传动作。

为放服务器端返回的路径的隐藏域，比如用户成功上传一个文件后，服务器端返回url，组件会把此url放入这个隐藏域内，多个url以,号隔开。对应的js配置就是：urlsInputName:"fileUrls"。

如果是采用flash上传（IE）

    选择要上传的文件

        
    

flash上传生成的不是一个文件上传域，而是一个swf对象。关于此flash生成的信息，详情可以看KISSY.AJBridge。
（PS:从结构中来看，并没有关键的Filedata的传递，这是因为组件是通过脚本获取这个字段，然后post过去。）

服务器端返回数据说明

上传成功后返回：

{"status":1,"data":{"name":"minghe.jpg","url":"www.36ria.com/minghe.jpg"}}

上传失败后返回：

{"status":0,"message":"图片过大！"}

留意必须使用上述的json格式，目前组件不支持自定义格式。
"status":1，才是上传成功的标识，其他任何状态码都认定为失败。

当然有些场景服务器端除了返回文件名和路径外，还需要返回id或其他字段，这时候如何获取这些字段，并予以处理呢。
加入服务器端返回：

{"status":1,"data":{"name":"minghe.jpg","url":"www.36ria.com/minghe.jpg","id":"minghe"}}

监听uploader的success事件，或在主题内的_successHandler获取服务器返回数据：

flash的跨域策略处理

如果你在使用uploader中遇到IE下进度条不走的情况，多半的原因是由于在域名根目录下没有放跨域策略文件crossdomain.xml导致的。

以淘宝网的跨域策略为例

当不存在crossdomain.xml文件时，控制台会打印错误消息，比如：

上传成功后，会打印服务器返回的json数据。

（特别感谢下：承玉、紫英、林谦、祁幽、卢石、方元、文龙的反馈。）

使用V1.2的uploader

    KISSY.use('gallery/form/1.2/uploader/index', function (S, RenderUploader) {
        var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
    })

修改下use的路径中的版本号即可。

V1.2重要更新说明

1.IE降级处理优先使用flash方式

旧的上传配置，当“type” : “auto”，等价于["ajax","iframe"]，现在等价于["ajax","flash","iframe"]，也就是不支持ajax上传方式的浏览器将切换成flash上传，如果浏览器也不支持flash，将切换成iframe。
不再推荐手动配置type参数，如果你希望兼容旧的处理方式（IE下使用iframe），请配置“type” : ["ajax","iframe"]。

flash上传，就必须在域名根目录下存在跨域策略文件crossdomain.xml。

以淘宝网的跨域策略为例

当不存在crossdomain.xml文件时，控制台会打印错误消息，比如：

上传成功后，会打印服务器返回的json数据。

2.uploader增加multiple和disabled二个属性

v1.2前设置按钮的多选和禁用，需要先获取button的实例，比较繁琐。
v1.2后uploader增加multiple和disabled配置，如下代码：

        ru.on("init", function (ev) {
            var uploader = ev.uploader;
            uploader.set('disabled',true);
            uploader.set('multiple',false);
        })

（ru为RenderUploader的实例）
不再推荐对button的实例进行操作。

3.可以通过js传配置theme（主题）和auth（验证）

详细请看使用js配置参数的示例。
v1.2以前设置主题和验证配置，必须采用伪属性的方式（data-theme-config和data-auth），这是明河的设计失误。
v1.2后不再推荐使用伪属性配置的方式，请使用js方式传参，比如：

        var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue',{
           //主题配置
            themeConfig:{
                cssUrl:'gallery/form/1.2/uploader/themes/default/style.css'
            },
            //验证配置
            authConfig: {
                allowExts:[
                    {desc:"JPG,JPEG,PNG,GIF,BMP", ext:"*.jpg;*.jpeg;*.png;*.gif;*.bmp"},
                    '不支持{ext}格式的文件上传！'
                ],
                max:[3, '每次最多上传{max}个文件！']
            }
        });

配置themeConfig和authConfig参数即可。

4.小更新

• 图片预览在多选下存在bug，先予以禁用（预计在下一个版本解决）
• Filedrop增加isSupport属性

5.重要的bugfix

• 修正取消操作无用的bug，感谢文龙反馈这个问题
• 修正IE6/IE7会报缺少）的错误的bug，这个bug主要是由于google的压缩器引起的
• 修正IE6下可点击区域过小无法调整的bug，感谢方元和我一起探讨解决方案
• 修正进度条消失过快bug，感谢祁幽反馈该问题
• 修正type设置有flash，却不实例化flash按钮的bug，感谢承玉反馈该问题

相关bug有兴趣的朋友可以看https://github.com/kissyteam/kissy-gallery/issues?direction=desc&sort=created&state=open 里面有bugfix的追溯。

KF/Uploader还在不断完善中，欢迎使用者反馈建议或提交bug，可以提交到kissy-gallery的issues列表上。

全局样式

1.要求html5文档类型

Bootstrap使用的css属性和html元素依赖于html5的文档类型声明，请确保每个Bootstrap的页面包含下面的代码：

2.排版和链接样式

全局的排版和链接样式放在scaffolding.less文件内（关于less教程后面会有详细说明）。默认做了如下处理：

• 移除body的外边距
• 设置body的背景颜色为白色background-color: white;
• 使用@baseFone，@baseFontSize，@baseLineHeight属性作为排版基础
• 使用@linkColor设置了全局链接颜色和:hover伪属性的下划线

3.默认样式重置

从 Bootstrap 2开始，CSS重置样式基于Normalize.css，新的重置样式，可以在reset.less中找到（Bootstrap做了许多的简化）。

默认栅格布局系统

Bootstrap的默认布局系统由总宽度为940px的12列组成。
它能够适应各个分辨率的显示设备，比如手机、平板、超高分辨率屏幕等。
（ps：请看demo）

...
...

上面的代码将创建二列栅格，span4容器占总宽度的4/12即（1/3）。

1.如何处理列的偏移

比如我们希望有个栅格是右靠齐。

...
...

第二个span4容器，增加个offset4样式名，表示跟前一个容器相隔4个列距离。

2.处理列的嵌套

（ps：请看demo）
在Bootstrap中使用静态（非浮动）的布局处理栅格的嵌套是非常简单的事。

    Level 1 of column

Level 2
Level 2

.row的容器内部是一个占满12列的层(.span12)，下面嵌套个新的.row容器，内部是span6二列布局。

浮动布局系统

浮动布局系统，就是我们经常使用的float:left;布局方式，比较特殊的是bootstrap使用百分比来定义栅格的宽度。

1.浮动栅格的行容器

（ps：请看demo）

...
...

流动布局，行容器使用. row-fluid 样式名，其他地方不变。

.row-fluid {
    width: 100%;
}
.row-fluid:before, .row-fluid:after {
    content: "";
    display: table;
}
.row-fluid:after {
    clear: both;
}

2.宽度使用百分比，而不是像素值

浮动布局系统比静态布局系统，拥有更强的适应性，同样适应不同分辨率的屏幕。

.row-fluid > [class*="span"] {
    float: left;
    margin-left: 2.5641%;
}
.row-fluid > [class*="span"]:first-child {
    margin-left: 0;
}

3.浮动布局中处理容器的嵌套

（ps：请看demo）
浮动布局中的嵌套处理有点不大一样:嵌套的栅格不需要匹配父容器的栅格数，每一行的宽度都占用父容器的100%宽度。

  Level 1 of column

Level 2
Level 2

定制栅格

LESS中的变量

Bootstrap中定制一套自己的940px栅格系统，只需要很少的less变量。这些变量可以在variables.less中找到。

如何定制

你需要修改@grid*三个变量（指的是上面表格中的三个变量），并重新编译Bootstrap（less重新编译出新的css文件）。关于less的编译可以看 four ways documented to recompile，如果新增了列，务必在grid.less增加上对应的样式。

保留适应性

自适应的栅格系统只能用于默认的940px栅格。为了维持Bootstrap的自适应性，需要额外在 responsive.less中自定义栅格样式。

布局

静态布局

    ...
  

浮动布局

使用container-fluid样式名，产生浮动页面结构，下面的demo中演示了生成常用的2列布局。

效果如下图：

自适应设计

如何让栅格布局系统适应不同分辨率的屏幕？

需要用到css3的media queries，严重推荐阅读《CSS3 media queries使用参考指南》和《CSS3 Media Queries 详解》。Media Queries的引用，让你可以针对不同的设备定制不一样的css样式，可以很方便的让布局系统适应不同的媒体设备。
原文讲得比较晦涩，明河借用《CSS3 Media Queries 详解》举个简单例子：

样式表引用增加media属性。

• screen： 媒体类型里的一种，10种媒体类型
• and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
• (min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Media features部分

screen and (min-width: 400px)的意思是当屏幕的宽度大于等于400px的时候，应用此条CSS，也就是说media非常像条件语句。

bootstrap支持的设备

需要meta标签

使用media queries

Bootstrap默认不包含这些media queries的样式，你可以通过下列的方式引入：

• 页面引入bootstrap-responsive.css
• 重编译bootstrap时，增加@import “responsive.less”
• 修改和单独编译responsive.less为一个独立的文件

Bootstrap 的media queries代码

 // Landscape phones and down
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
  @media (max-width: 767px) { ... }

  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 979px) { ... }

  // Large desktop
  @media (min-width: 1200px) { ... }

• 基础：样式重置，栅格系统，响应式设计支持等
• 零件：按钮，导航，面包屑，分页，进度条，各种常用icon等
• 组件：对话框，下列菜单，tabs，浮出提示，轮播等

有了这样一套风格统一的基础工具、小零件、成品组件，快速搭建美观易用的Web应用会让你轻松不少。

• 点此查看demo
• 点此下载

Bootstrap开源不久，很快就成为GitHub上最热门的项目之一。许多开发者们也把它应用在了自己维护的站点上。事实上，在Bootstrap推出前，前端工具包已经有很多了，也不乏非常流行的如 jQuery + jQuery UI, YUI 等。为什么Bootstrap依然能脱颖而出呢？我们先大致看下它是怎么设计的吧。

Bootstrap现在已经发布了2.0版本，架构更加清晰。其核心部分是在less.css的基础上构建的，入口文件有2个：bootstrap.less 和 responsive.less 。后者是Bootstrap实现响应式设计的配置文件；前者是它的主入口文件，依序包含了下面几部分：

• CSS Reset
• Core variables and mixins
• Grid system and page structure
• Base CSS
• Components
• Utilities

这里第1，第3部分是许多其他前端工具包都有的部分，Bootstrap也提供了自己的版本。

第2部分是less.css扩展的变量、混入功能的应用。它为Bootstrap提供了最大的灵活性，给二次开发带来了许多便利。这是许多其他前端工具包所没有的优势。

第4，第5部分是Twitter贡献的各种零部件风格。其中4是各种基础元素——字型、表单、表格等。而第5部分是各种自定义零部件，其中有十分全面的图标，有各种按钮，以及各种复杂的组件风格等。

Bootstrap发布的是less编译后的文件，bootstrap.css 与 bootstrap-responsive.css。另外，Bootstrap还提供了一些自己风格的jQuery插件。

用户使用时，只要依葫芦画瓢，按Bootstrap提供的demo，写上同样的class，美观、统一的页面就生成了。得益于Bootstrap零部件的全面，只关心html，无需在htlml/css/js间切换，给页面开发带来一气呵成的快感。如果你要自定义风格，修改几个less变量即可实现，极大地解放了生产力。

当然，Bootstrap还有许多其他优点，比如文档丰富、跨平台、社区发展势头好等，这些都可以让开发者放心大胆地选择Bootstrap。

常规样式规则

协议

引入的assets资源文件（js、css、图片文件）忽略协议（http:, https:），比如：
不推荐的写法：

推荐的写法：

不推荐的写法：

.example {
  background: url(http://www.google.com/images/example);
}

推荐的写法：

.example {
  background: url(//www.google.com/images/example);
}

关于google的这点建议，明河倒是觉得有待商榷，有兴趣的朋友看http://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just，里面有详细的讨论，根据一位网友的测试，相对url在IE7、IE8下存在二次加载的问题。

常规格式规则

缩进

使用二个空格缩进（PS：明河一般使用四个空格缩进-_-!）

.example {
  color: blue;
}

大写

只使用小写。
所有的代码只使用小写字母（PS:淘宝的做法是如果跟js的DOM操作相关，作为钩子使用J_Trigger类似的方式）：包括元素名称、样式名、属性名（除了text/CDATA）。
不推荐的写法：

推荐的写法：

尾部空白

删掉冗余的行尾空格。
不推荐的写法：

What?_

推荐的写法：

Yes please.

常规Meta规则

编码

使用utf-8编码。
指定页面的文档编码为utf-8

不需要特别指定样式引用的编码为utf-8。
（ps：关于html编码指定方面的内容，可以看《 Character Sets & Encodings in XHTML, HTML and CSS》）

注释

如果可能，注释还是必不可少的。
使用注释说明下代码：它包括了什么，它的目的是什么，为什么优先使用它。

行动项目

（ps：推荐使用）
google建议养成写TODO的习惯，特别是在项目中，记录下一些要改，但来不及修改的地方，或指派其他同事做修改。
高亮TODO，不同的编辑器有不一样的方式，比如idea是TODO:。

{# TODO(john.doe): revisit centering #}
Test

Apples
Oranges

常规html设计规则

文档类型

使用html5文档声明：

不再使用XHTML（ application/xhtml+xml）。

HTML 的正确性

可以使用一些工具，检验你html的正确性，比如 W3C HTML validator。
不推荐的写法：

This is only a test.

推荐的写法：

HTML 的语义性

使用富含语义性的标签（ps:建议掌握html5新增的部分语义标签）。
google特别指出了要确保html的可用性，看下面的代码
不推荐的写法：

All recommendations

推荐的写法：

All recommendations

多媒体元素降级处理

给多媒体元素，比如canvas、videos、 images增加alt属性，提高可用性（特别是常用的img标签，尽可量得加上alt属性，提供图片的描述信息）。
不推荐的写法：

推荐的写法：

html、css、javascript三层分离

尽可能保持结构（html结构标签）、描述（css）、行为（javascript）的分离，并且让他们尽可能少的交互。确保html文档内容只有html的结构，将css和javascript以资源的方式引入。
不推荐的写法：

推荐的写法：

实体引用

在html页面中避免使用实体引用。
如果你的文件是utf-8编码，就不需要使用像 —, ”, or ☺的实体引用。
不推荐的写法：

The currency symbol for the Euro is “&eur;”.

推荐的写法：

The currency symbol for the Euro is “€”.

可选的标签

忽略一些可选的标签，比如
不推荐的写法：

推荐的写法：

html5的文档，可以忽略head、body标签。
所有可忽略的标签，可以看《 HTML5 specification 》，

type属性

样式和脚本引用可以忽略type属性。
不推荐的写法：

推荐的写法：

不推荐的写法：

推荐的写法：

html格式规则

常规格式

每一块、每一列表、每一表格元素都需要另起一行，并缩进每个子元素。

css样式规则

css验证

尽可能验证css的合法性，可以使用 W3C CSS validator。

id和class名

使用富有含义和通用的id和class名。
(ps：明河经常听周围的同事感慨，取好名字，也是个学问，有时候有些命名会让你很纠结，但好的命名的确可以提高可读性和可维护性。)
使用功能性和通用性的命名方式减少文档或模板的不必要的改动。
不推荐的写法：

/* Not recommended: meaningless */
#yee-1901 {}

/* Not recommended: presentational */
.button-green {}
.clear {}

推荐的写法：

/* Recommended: specific */
#gallery {}
#login {}
.video {}

/* Recommended: generic */
.aux {}
.alt {}

id和class的命名风格

id和class的命名在保持语义性的同时尽可能的短。
不推荐的写法：

#navigation {}
.atr {}

推荐的写法：

#nav {}
.author {}

可以缩写单词，但缩写后务必能让人明白其含义。比如author缩写成atr就非常费解。

选择器

避免出现多余的祖先选择器。（存在性能上的差异问题，可以看 performance reasons）
避免出现元素标签名作为选择器的一部分。
不推荐的写法：

ul#example {}
div.error {}

推荐的写法：

#example {}
.error {}

简化css属性写法

不推荐的写法：

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推荐的写法：

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

使用简洁的属性写法有利于提高可读性和解析效率。

0和单位

属性值为0时，忽略单位。

margin: 0;
padding: 0;

属性值出现小数点忽略0

font-size: .8em;

url的引用

使用url()时忽略刮号中的”"。

@import url(//www.google.com/css/go.css);

16进制符号

不推荐的写法：

color: #eebbcc;

推荐的写法：

color: #ebc;

前缀

给选择器样式名增加前缀（可选）。
在大的项目（多人协作）中使用前缀可以减少样式冲突，同时可以明确选择器归属含义。

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

（PS:一般明河使用前缀来定位样式的归属，比如.nav-item，表明是nav导航下的子元素样式。）

id和class名的分隔符

单词使用“-”来连接。
不推荐的写法：

/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}

/* Not recommended: uses underscore instead of hyphen */
.error_status {}

推荐的写法：

#video-id {}
.ads-sample {}

Hacks

尽可能地避免使用hack的方式解决浏览器样式兼容性问题。
（ps：明河觉得这个很难，毕竟IE横在那里。）
尽量避免使用CSS filters。

css格式规则

css属性按字母顺序书写

（PS：排序忽略浏览器前缀，比如-moz-，-webkit-）

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

块内容缩进

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

缩进所有的块状内容。

不可缺少的;

不推荐的写法：

.test {
  display: block;
  height: 100px
}

推荐的写法：

.test {
  display: block;
  height: 100px;
}

属性值前增加个空格

不推荐的写法：

h3 {
  font-weight:bold;
}

推荐的写法：

h3 {
  font-weight: bold;
}

分隔选择器

不推荐的写法：

a:focus, a:active {
  position: relative; top: 1px;
}

推荐的写法：

h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

1行只有一个css属性，二个规则间有一个空行

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

PPT共有2部分内容：明河讲解Uploader的使用和设计，紫英讲解Uploader的主题制作。

1. colors 变量。一般是主体色+辅色，Bootstrap的定义主要像navbarLinkColor，navbarBackground这种，许多辅色是主色的50%，也应用了less。个人认为这与设计师习惯相符，便于在不同频道间复用。但第一次书写成本可能会增加10%，复用时可以同时减少设计师与前端的工作量。
2. .broder-radius，.bos-shadow等函数在Bootstrap中都有定义。个人觉得这对提高开发效率有不少帮助。
3. Bootstrap是利用 less 的 import 来组织代码的，既便于调试，也便于打包。书写优雅，学习成本较低。

其他细节：

1. zindex，Bootsrtap里有十分细致的 zindexDropdown，zindexTooltip等。个人认为与全站z-index约定不同，这个涉及范围小一些，在多人维护的项目中可以减少调试工作。
2. Bootstrap中许多小模块的组织使用了嵌套的方式，个人觉得这种方式用来组织小模块还是很方便的。但是不宜滥用，太深的嵌套会导致性能下降。
3. less其实还有命名空间可以使用，Bootsrtap在定义 gradient(horizontal、vertical、radial等)，popoverArrow(top、left、bottom、right) 等mixin时采用了这种组织方式。

kissy1.2coreAPI所有的变更

seed模块变更

1.弃用KISSY.app()

app方法用于创建应用命名空间，1.1.6中常用到，比如明河维护的是淘宝退款业务，业务代码开头是KISSY.app(‘refund’)，创建一个refund应用。这样所有的页面模块都添加在refund命名空间下，而避免直接污染KISSY这个全局变量。
app作为1.1.6最基本的代码组织方式，在kissy1.2已经不再推荐使用。由于kissy1.2引入全新的loader机制实现命名空间隔离，每个模块都是封闭的，直接使用KISSY.add 加入KISSY环境中，不再需要额外的应用命名空间。

2.KISSY.error()

抛出错误异常，留意下面的代码，当抛出错误后，不会再执行后来的js代码（没有弹出2），实际上只对script标签内的代码起作用，所以demo后面的js依旧有效。

（ps：请看demo页）

dom模块变更

（PS：以下文章中的DOM指代KISSY.DOM）

1.DOM.clone()

这是非常实用的方法，严重推荐掌握。
DOM.clone()用于克隆元素，原生的DOM克隆方法存在浏览器差异，比如深度拷贝上的差异，有些浏览器无法克隆源元素的事件监听，有兴趣的朋友可以看http://www.w3help.org/zh-cn/causes/SD9029。kissy的DOM.clone()，只要设置第三个参数，即withDataAndEvent=true，克隆元素的同时可以把源元素的事件和data一并克隆过来，而且当你设置第二个参数，即deep=true时可以开启深度克隆，将克隆源元素的子节点（文本也算子节点哦）。
看下面的demo代码（demo页中）：

可以把elDemoClone = DOM.clone(elDemo,true,true);换成elDemoClone = DOM.clone(elDemo,false,true);试下效果，你就发现没有任何东西加入到id为J_DemoWrapper的层，使用firebug查看下，你会发现，其实有加入

，只是这个层的内容为空，如下图：

这就印证了明河前面说的，文本也是子节点，当第二个参数，即deep=false时，没有开启深度拷贝，那么将不会克隆任何子节点。
（PS：留意KISSY.clone()用于克隆数组或对象，作用与KISSY.DOM.clone()并不相同，不是同一个方法。）

2.DOM.outerWidth()/DOM.innerWidth()

非常实用的更新，严重推荐掌握。
DOM.outerWidth()用于获取元素的完整盒容器宽度（可以理解为width+padding+border（+margin））；
而DOM.innerWidth()用于获取元素盒容器内部空间宽度（可以理解为width+padding），请留意二者的区别。
在1.1.6中没有这二个方法的时获取真实盒模型宽度或者盒模型高度，需要手动通过DOM.css(XXX,”paddingLeft”)等，非常的繁琐，而且DOM.width()还存在display:none的元素获取的宽度为负数的bug，1.2后已经不存在这个问题。

来看demo代码：

下面是一个测试层

在这个demo中明河测试所有可以获取宽度（但获取的值并不相同）的方法，留意DOM.style()，这也是KISSY1.2新增方法，用于获取元素style属性中name的值。
也许你会有如下疑惑，既然有了DOM.css()方法了，为什么还需要DOM.style()呢？二者的用途不是差不多吗？
二者的差异在于DOM.css()获取的永远是计算后值，典型的特征是元素的宽度设置是width:50%，使用DOM.css(XXX,”width”)返回的值是真实的宽度，比如200px，如果你使用DOM.style(XXX,”width”)，那么获取的将是width:50%。
demo中还有一个地方需要特别留意下：

DOM.outerWidth()的第二个参数为true，表明宽度加上外边距即margin的值，demo中左右外边距分别都为20，所以加上后是262。

3.DOM.hasAttr()

判断元素是否含有特定属性，非常简单的方法，文档讲解的很详细，明河不在累述。

4.DOM.prop()/DOM.hasProp()

DOM.prop()和DOM.attr()的功能极其相似，都是用于获取/设置元素的特定属性，区别在哪呢？

来看下面的demo代码：

特别留意的是使用DOM.attr()获取disabled属性时返回的是undefined，而通过DOM.prop()可以成功获取。
使用DOM.prop()可以获取DOM节点的任意属性，如下图的DOM的属性内容：

而DOM.attr()却只能获取html标签有指定的属性，所以从通用性来讲DOM.prop()更好，特别在获取checked或disabled属性时。

DOM.hasProp()

这个方法相对简单，用于判断元素是否含有特定 property 属性，不再累述，可以看文档。

1.主题模板说明

        /**
         * 队列使用的模板
         * @type String
         * @default ""
         */
        fileTpl:{value:
            '
' +
                '
' +
                    '' +
                '

' +
                '


' +
                '
' +
                    '

等待上传，请稍候


' +
                    '
' +
                        '
上传中...

' +
                    '

' +
                    '
' +
                      '上传成功！' +
                    '

' +
                    '
' +
                        '
上传失败，请重试！


' +
                '

' +
                '删除' +
            '

'
        }

一般为li元素，当向队列添加一个文件数据后，会往queueTarget队列目标容器添加DOM，显示文件信息。
（ps：如果你不希望添加数据后添加dom，可以不设置queueTarget属性。—V1.1.2新增）

状态模板

状态部分的模板最后输出会类似：

等待上传，请稍候


上传中...

上传成功！

上传失败，请重试！

J_FileStatus为状态层容器的钩子，建议加上。

指定状态层容器

        /**
         * 获取状态容器
         * @param {KISSY.NodeList} target 文件的对应的dom（一般是li元素）
         * @return {KISSY.NodeList}
         */
        _getStatusWrapper:function (target) {
            return target.children('.J_FileStatus');
        }

target会指向li元素。

在状态监听器中处理状态层

_errorHandler:function (ev) {
            var self = this,file = ev.file,
                 $statusWrapper = file.statusWrapper ;
            $statusWrapper.hide();
}

statusWrapper就是我们之前指定的状态层容器，存储在file数据集合中。
之后就可以控制状态层的显隐了。

模板中id的妙用

模板中，有时我们需要给按钮绑定事件，比如“删除”、“取消”等，这时候需要指定个钩子，方便查找对应的元素，最快速的方式就是给该元素增加文件id，文件id是唯一的，永不会重复。

        /**
         * 将服务器返回的图片路径写到预览图片区域，部分浏览器不支持图片预览
         * @param {String} id  文件id
         * @param {Object} result  服务器端返回的结果集
          */
        _changeImageSrc:function(id,result){
            var data = result.data,url,
                $img = $('.J_Pic_' + id);
            if(!S.isObject(data)) return false;
            url = data.url;
            //不存在预览图片，IE8使用滤镜处理图片预览有问题
            if($img.attr('src') == EMPTY || S.UA.ie == 8){
                $img.attr('src',url);
            }
        }

（上面这个函数的用途是：不支持图片预览的浏览器，使用服务器端图片替换）

2.主题内与Auth（验证类）的交互

如何获取验证实例？

组件会把验证类Auth的实例写入到主题类属性，可以通过this.get(‘auth’)直接获取到。
来看个控制上传个数的例子：

/**
         * 显示“你还可以上传几张图片”
         */
        _setCount:function(){
            var self = this,
                //用于显示上传数的容器
                elCount = $(self.get('elCount')),
                len = self.getFilesLen(),
                auth = self.get('auth');
            if(!elCount.length || !auth) return false;
            var rules = auth.get('rules'),
                //max的值类似[5, '最多上传{max}个文件！']
                max = rules.max;
            if(!max) return false;
            elCount.text(max[0]-len);
        },

需要知道还可以上传几张图片，需要知道验证类中的规则：max，即最大上传数。

            var auth = self.get('auth')，
                  rules = auth.get('rules'),
                //max的值类似[5, '最多上传{max}个文件！']
                max = rules.max;

获取的max是数组，第一个值才是真正的上传数，第二个值是错误消息。

监听验证的error事件，达到最大上传数，隐藏上传按钮

/**
         * 达到最大允许上传数隐藏按钮
         * @param {Uploader} uploader
         */
        _maxHideBtn:function(uploader){
            //监听上传验证的error事件
            var self = this,auth = self.get('auth');
            auth.on('error',function(ev){
                var rule = ev.rule,button = uploader.get('button'),$btn = button.get('target');
                //图片达到最大允许上传数，隐藏按钮
                if(rule == 'max'){
                    button.hide();
                    //隐藏按钮之上的li容器
                    $btn.parent('li').hide();
                }
            })
        }

3.主题内引入插件

v1.1.2做了改变，插件不再需要用户手动写requires，引用插件模块路劲。只要增加个plugins属性即可：

        /**
         * 需要加载的插件，需要手动实例化
         * @type Array
         * @default ['preview','progressBar','filedrop'] 图片预览、进度条、文件拖拽
         */
        plugins:{
          value:['preview','progressBar','filedrop']
        }

plugins值为数组，数组值为插件名（插件目录名）。组件会自动加载相应的插件类，然后保存在oPlugin属性内。（并不实例化，用户自行控制实例化时机。）

如何在主题内使用插件

以图片预览插件为例：
在uploader实例化结束后，实例化Preview。

afterUploaderRender:function (uploader) {
            var self = this,
                Preview = self.get('oPlugin').preview,
                preview = new Preview();
            //图片预览
            self.set('preview',preview);
}

this.get(‘oPlugin’)获取到插件类集合，然后取到preview，就是插件类了。
_waitingHandler在等待上传状态监听中，调用图片预览：

 /**
         * 文件处于等待上传状态时触发
         */
        _waitingHandler:function (ev) {
            var self = this,preview = self.get('preview'),
                file = ev.file,input = file.input,
                $imageWrapper = $('.J_Pic_'+file.id);
            if(preview && input && $imageWrapper.length){
                preview.preview(ev.file.input, $imageWrapper);
            }
        }

preview.preview()接受2个参数，第一个为文件上传域（一般是input），第二个为图片容器。
_waitingHandler的事件对象ev包含file文件数据，通过file.input可以获取到文件上传域元素
$imageWrapper为图片容器，可以看下fileTpl文件的模板。
其他插件的处理与之类似。

1、那么首先为什么要做函数参数的检测呢？

让js代码更健壮！

2、函数参数的检测是必须的吗？

严格的来讲是建议任何只要有参数的地方就需要检测，理由：任何的输入操作都是不可靠的，尤其是对javascript这种弱类型的语言来说。
简单来做呢，供外部调用的接口参数进行检测很必要，因为不能确保外部怎么用；内部的方法参数可以按约定，省略检测，可以提高一些性能。

3、然后，该怎么做呢？从哪方面着手呢？

对参数的存在性和类型检测的检测是基础。参数个数的检测根据代码逻辑来判断是否加以检测，与代码设计相关，不是必须要做的。
存在性和类型的检测可以通过，如下：

if(param && typeof param == 'xxx'){

}

一些js框架提供一些api来检测，如：KISSY 的 isObject()、isArray()等，jQuery的isFunction()、isPlainObject()等。
参数个数，通过函数的arguments.lenght来获得实际传入函数的参数个数。函数的形参个数可以通过函数的length属性获得（arguments.callee.length）。例如：

	function check(args) {
		var actual = args.length,			//the actual number of arguments
			expected = args.callee.length;	//the expected number of arguments
		if(actual != expected) {	//throw an exception if they do not match
			thow new Error('wrong number of arguments: expected: ' + expected + '; actually passed ' + actual);
		}
	}

	function f(x, y, z) {
		//check that the actual # of args matches the expected # of args
		//thow an exception if they do not match
		check(arguments);
		//now do the reset of the function normally
		return x + y + z;
	}

4、接下来处理检测结果，此处阐述检测出错的处理。

出错后一般会return false，但建议在返回前多做一步，打log。log帮助调用函数的使用者，知道哪里出错，帮助快速定位问题。KISSY的debug模式在开启的情况下输出日志，这种处理也不错。

大家有什么观点、想法，欢迎评论~!

这篇教程明河将以ImageUploader的拷贝主题为例讲解如何使用制作属于自己的uploader主题。
我们将这个本地主题命名为newImageUploader。
猛击点此下载下载demo。
（PS:1.1.2后组件有做了部分修改，文章页修改了部分内容。）
假设目录结构如下图：

每个主题都必须有个index.js，而style.css主题样式，可以自行通过index.js中的配置更换（满足换肤的需求）。

主题js模板

（可以打开demo包中的theme-tpl.js文件）

1.你需要定义下主题模块路径，和模块依赖

KISSY.add('make-theme-demo/newImageUploader/index', function (S, Node, Theme, ProgressBar) {

}, {requires:['node', 'gallery/form/1.1/uploader/theme', 'gallery/form/1.1/uploader/plugins/progressBar/progressBar']});

主题模块路径非常重要，要根据你本地的实际情况自行配置。比如示例包中的‘make-theme-demo/newImageUploader/index’。
requires定义模块依赖， ‘gallery/form/1.1/uploader/theme’是主题基类，必不可少，定制的主题必须继承这个基类。
‘gallery/form/1.1/uploader/plugins/progressBar/progressBar’是进度条插件路径，留意模块路径起始为gallery，内置主题使用的是’../../’相对路径。
V1.1.2更新：无需在requires中引用插件模块，做了简化处理，只要配置下主题的plugins属性，比如：

        /**
         * 需要加载的插件，需要手动实例化
         * @type Array
         * @default ['preview','progressBar','filedrop'] 图片预览、进度条、文件拖拽
         */
        plugins:{
          value:['preview','progressBar','filedrop']
        }

2.主题构造函数

    /**
     * @name NewImageUploader
     * @class 图片上传本地主题demo
     * @constructor
     * @extends Theme
     * @requires Theme
     * @requires  ProgressBar
     * @author 明河
     */
    function NewImageUploader(config) {
        var self = this;
        //调用父类构造函数
        NewImageUploader.superclass.constructor.call(self, config);
    }

    S.extend(NewImageUploader, Theme, /** @lends NewImageUploader.prototype*/{

    }, {ATTRS:/** @lends NewImageUploader.prototype*/{

    }});
    return NewImageUploader;

构造函数必须继承Theme类，Theme继承于KISSY的Base，所以使用ATTRS来定义属性。如果你要获取主题属性，就必须使用get()。

3.主题必备方法

S.extend(NewImageUploader, Theme, /** @lends NewImageUploader.prototype*/{
        /**
         * 在上传组件运行完毕后执行的方法（对上传组件所有的控制都应该在这个函数内）
         * @param {Uploader} uploader
         */
        afterUploaderRender:function (uploader) {

        },
        /**
         * 获取状态容器
         * @param {KISSY.NodeList} target 文件的对应的dom（一般是li元素）
         * @return {KISSY.NodeList}
         */
        _getStatusWrapper:function (target) {

        },
        /**
         * 文件处于等待上传状态时触发
         */
        _waitingHandler:function (ev) {

        },
        /**
         * 文件处于开始上传状态时触发
         */
        _startHandler:function (ev) {

        },
        /**
         * 文件处于正在上传状态时触发
         */
        _progressHandler:function (ev) {

        },
        /**
         * 文件处于上传成功状态时触发
         */
        _successHandler:function (ev) {

        },
         /**
         * 文件处于上传错误状态时触发
         */
        _errorHandler:function (ev) {

        }
    })

afterUploaderRender()非常重要，由于主题是异步载入的，Uploader实例化时机是有延迟的，当主题加载结束，Uploader实例成功后，组件会自动调用主题的afterUploaderRender方法。
所以对Uploader和Queue的事件监听，都必须在这个函数。
比如：
监听queue的添加事件

afterUploaderRender:function (uploader) {
            var self = this,
                queue = self.get('queue');
            queue.on('add',self._queueAddHandler,self);
        }

_getStatusWrapper()是主题用于获取状态容器的定义，所谓状态容器，指的是主题html模板中的状态提示的容器，比如

等待上传，请稍候






上传成功！

上传失败，请重试！

class=”J_FileStatus”对应的div就是状态容器。
waitingHandler/startHandler等一系列的状态监听器，会在文件改变状态后触发，可以在每个监听器内打个S.log，体会下整个过程。状态监听器的作用在于主题开发者，无需手动监听uploader的各个事件，主题拥有自动触发对应监听器的能力。

主题属性配置

 {ATTRS:/** @lends NewImageUploader.prototype*/{
        /**
         *  主题名（文件名），此名称跟样式息息相关
         * @type String
         * @default "newImageUploader-queue"
         */
        name:{value:'newImageUploader'},
        /**
         * 是否引用css文件
         * @type Boolean
         * @default true
         */
        isUseCss:{value:true},
        /**
         * css模块路径
         * @type String
         * @default "gallery/form/1.1/uploader/themes/imageUploader/style.css"
         */
        cssUrl:{value:'make-theme-demo/newImageUploader/style.css'},
        /**
         * 队列使用的模板
         * @type String
         * @default ""
         */
        fileTpl:{value:
            '
' +
                '
' +
                    '' +
                '

' +
                '


' +
                '
' +
                    '

等待上传，请稍候


' +
                    '
' +
                        '
上传中...

' +
                    '

' +
                    '
' +
                      '上传成功！' +
                    '

' +
                    '
' +
                        '
上传失败，请重试！


' +
                '

' +
                '删除' +
            '

'
        }，
        /**
         * 需要加载的插件，需要手动实例化
         * @type Array
         * @default ['preview','progressBar','filedrop'] 图片预览、进度条、文件拖拽
         */
        plugins:{
            value:['preview','progressBar','filedrop']
        }
    }

• name：主题名，务必设置，组件会自动将此名拼给队列，比如queue会是newImageUploader-queue
• isUseCss：是否自动加载css样式，为了减少请求数，可以设置为false，然后在项目css中加上上传样式
• cssUrl：非常重要，css的路径名，留意不需要完整路径
• fileTpl：主题模板，留意这里{id}的用法，用于取指定节点非常有用
• plugins：1.1.2版新增属性，配置要加载的插件，用户无需手动在requires中引用插件路径

主题调用

配置包路径：

        var S = KISSY;
        S.config({
            packages:[
                {
                    name:"gallery",
                    path:"http://a.tbcdn.cn/s/kissy/",
                    charset:"utf-8"
                }
            ]
        });
        S.config({
            packages:[
                {
                    name:"make-theme-demo",
                    path:"http://localhost/",
                    charset:"utf-8"
                }
            ]
        });

初始化组件

        S.use('gallery/form/1.1/uploader/index', function (S, RenderUploader) {
            new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
        })

配置伪属性：

                
                     还可以上传5图片！ 
                    
                
            

留意“theme” : “make-theme-demo/newImageUploader”。
下一篇教程，明河将深入主题的逻辑，讲解主题和uploader个API的交互。

RenderUploader是Uploader的门面类，由于Uploader本身的调用比较复杂，明河就设计了这个类，来简化用户操作。
参数buttonTarget（按钮目标元素）和queueTarget（队列目标元素）是必须的。
RenderUploader自动会从按钮目标元素上的data-config抓取Uploader配置，你还可以配置第三个参数config来覆盖data-config的配置。

KISSY.use('gallery/form/1.1/uploader/index', function (S, RenderUploader) {
     var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
     ru.on("init", function (ev) {
        var uploader = ev.uploader;
     })
})

RenderUploader有个非常核心的事件init,在Uploader初始化结束后触发，如果你需要监听uploader的事件，或操作uploader的API，务必是在init事件监听器内。
init会有个uploader数据（Uploader的实例）。
通过uploader，你可以获取queue和button二个核心子类实例。

     ru.on("init", function (ev) {
        var uploader = ev.uploader,
              button = uploader.get("button"),
              queue = uploader.get("queue");
     })

Uploader (config)

Uploader 是组件的核心类，有如下主要方法：

1.upload (index) 上传指定队列索引的文件

有三种情况upload()是不执行的（症状为不报错，但没有任何post请求）：

• curUploadIndex属性不为空（说明有文件正在上传，予以阻止）
• 指定index的file（文件数据）内的status值为”error”，表明验证失败，予以阻止
• isAllowUpload属性为false，表明不允许上传

实际应用中，如果你希望阻止文件上传，推荐设置isAllowUpload。比如下面的代码：

     ru.on("init", function (ev) {
        var uploader = ev.uploader,
              button = uploader.get("button"),
              queue = uploader.get("queue");
       uploader.set('isAllowUpload',false);
     })

2.cancel (index)和stop ()

cancel 用于取消上传，stop用于停止上传，二者的区别是，在批量上传时，cancel只取消指定index文件，不会阻止后续文件的上传。
cancel()没有参数时，默认上传curUploadIndex属性中的索引文件。

3.uploadFiles (status) 批量上传队列中的指定状态下的文件

常用的场景是，批量上传等待中的文件，比如使用常用配置的示例。

ru.on("init",function(ev){
    var $ = S.Node.all,
            //上传组件实例
            uploader = ev.uploader,
            //上传按钮实例
            button = uploader.get('button'),
            //上传队列实例
            queue = uploader.get('queue');
            //点击上传，开始上传等待中的文件
    $('#J_UploadAll').on('click', function(ev) {
            uploader.uploadFiles();
    })
})

不传参的情况，默认status为”waiting”（等待状态）。

4.事件列表

详细事件说明看文档，明河不再累述，来看下事件执行顺序和文件状态变更：

每次文件状态变更，都会触发主题的对应监听器，比如

queue.fileStatus(0,"waiting");

那么就会触发主题的

        /**
         * 文件处于等待上传状态时触发
         */
       _waitingHandler:function(ev){

        }

当你使用upload()方法时状态的变更监听器会先于事件执行。

4.核心属性

最重要的是二个属性：button和queue二个子类，特别是queue，主题内部有常对queue的API进行操作，而button主要常用于控制禁用按钮。
restoreHook这个属性是V1.1新增的，看名字比较费解，在讲解主题时，明河会予以说明，可以先看imageUploader主题demo，这个demo有用到这个参数。
curUploadIndex属性，为只读，组件内部使用，你可以监听这个属性的AftercurUploadIndexChange事件，根据这个值的改变，来判定有没有文件正在上传。

jsdoc模板

kissy有一份jsdoc的模板，明河做了修改，写成KF模板，如果你需要使用，请自行修改static目录下文件。
点此下载
（明河：解压缩到你的jsdoc-toolkit/templates/目录下）
关于如何使用ant来输出jsdoc，明河就不再累述，可以看《ant结合jsdoc构建js文档—ant入门指南8》。
build.xml类似下面的代码：

规范的注释

什么样的注释才是规范的？
明河曾帮不少朋友review过代码，发现注释五花八门，随心所欲，如果你的注释只是为了给自己或维护者看，没任何问题。但如果是想要输出成jsdoc文档，那么你的注释必须符合jsdoc的规范。

1.注释一个构造函数

随性的方式：

    //异步文件上传组件，支持ajax、flash、iframe三种方案
    function Uploader(config) {

    }

或者：

    /*
     * 异步文件上传组件，支持ajax、flash、iframe三种方案
     */
    function Uploader(config) {

    }

jsdoc的标准形式：

    /**
     * @name Uploader
     * @class 异步文件上传组件，支持ajax、flash、iframe三种方案
     * @constructor
     * @extends Base
     * @requires UrlsInput
     * @requires IframeType
     * @requires  AjaxType
     * @param {Object} config 组件配置（下面的参数为配置项，配置会写入属性，详细的配置说明请看属性部分）
     * @param {Button} config.button *，Button按钮的实例
     * @param {Queue} config.queue *，Queue队列的实例
     * @param {String|Array} config.type *，采用的上传方案
     * @param {Object} config.serverConfig *，服务器端配置
     * @param {String} config.urlsInputName *，存储文件路径的隐藏域的name名
     * @param {Boolean} config.isAllowUpload 是否允许上传文件
     * @param {Boolean} config.autoUpload 是否自动上传
     * @example
     * var uploader = new Uploader({button:button,queue:queue,serverConfig:{action:'test.php'}})
     */
    function Uploader(config) {

    }

哇哦，注释顿时多了很多…接下来，明河来解释下这些标签的含义：

• @name ：类名
• @class ：类描述
• @constructor ：表明这是一个构造函数，非常重要
• @extends ：类继承的父类
• @requires ： 依赖的类
• @param ：参数
• @example : 示例代码

输出的文档如下：

2.注释组件事件

由于事件一般不是一个函数，所以我采用额外向页面添加事件注释，位置随意。

    /**
     * @name Uploader#success
     * @desc  上传成功后触发
     * @event
     * @param {Number} ev.index 上传中的文件在队列中的索引值
     * @param {Object} ev.file 文件数据
     * @param {Object} ev.result 服务器端返回的数据
     */

标签的含义如下：

• @name ： 事件名，留意“#”前是归属类名，“#”后是事件名
• @desc ： 事件描述
• @event ： 表明这段注释目标为事件。非常重要

jsdoc输出的结构如图：

3.注释属性

需要注释的属性有二种类型：类属性和静态属性。
注释类属性的方法如下：

 /** @lends Uploader.prototype*/{
        /**
         * Button按钮的实例
         * @type Button
         * @default {}
         */
        button:{value:{}},
        /**
         * Queue队列的实例
         * @type Queue
         * @default {}
         */
        queue:{value:{}},
        /**
         * 采用的上传方案，当值是数组时，比如“type” : ["flash","ajax","iframe"]，按顺序获取浏览器支持的方式，该配置会优先使用flash上传方式，如果浏览器不支持flash，会降级为ajax，如果还不支持ajax，会降级为iframe；当值是字符串时，比如“type” : “ajax”，表示只使用ajax上传方式。这种方式比较极端，在不支持ajax上传方式的浏览器会不可用；当“type” : “auto”，auto是一种特例，等价于["ajax","iframe"]。
         * @type String|Array
         * @default "auto"
         */
        type:{value:Uploader.type.AUTO},
        /**
         * 服务器端配置。action：服务器处理上传的路径；data： post给服务器的参数，通常需要传递用户名、token等信息
         * @type Object
         * @default  {action:EMPTY, data:{}, dataType:'json'}
         */
        serverConfig:{value:{action:EMPTY, data:{}, dataType:'json'}}
}

属性写在哪里跟输出没有什么关系，比如kissy1.2的组件属性一般归属于ATTRS。
关键的是，必须加上@lends Uploader.prototype标签，表示下面的属性归属于Uploader。

• @type ： 数据类型
• @default ： 默认值

jsdoc输出的结构如下图：

如果要注释静态属性，只要@lends Uploader即可。

4.注释方法

/** @lends Uploader.prototype*/{
        /**
         * 运行组件，实例化类后必须调用render()才真正运行组件逻辑
         * @return {Uploader}
         */
        render:function () {
        }

跟注释属性类似，必须定义/** @lends Uploader.prototype*/。
jsdoc输出的结构如下图：

5.文件描述注释

/**
 * @fileoverview 异步文件上传组件
 * @author 剑平（明河）,紫英
 **/

注释完整范例

/**
 * @fileoverview 异步文件上传组件
 * @author 剑平（明河）,紫英
 **/
KISSY.add('gallery/form/1.0/uploader/base', function (S, Base, Node, UrlsInput, IframeType, AjaxType, FlashType) {
    var EMPTY = '', $ = Node.all, LOG_PREFIX = '[uploader]:';
    /**
     * @name Uploader
     * @class 异步文件上传组件，支持ajax、flash、iframe三种方案
     * @constructor
     * @extends Base
     * @requires UrlsInput
     * @requires IframeType
     * @requires  AjaxType
     * @param {Object} config 组件配置（下面的参数为配置项，配置会写入属性，详细的配置说明请看属性部分）
     * @param {Button} config.button *，Button按钮的实例
     * @param {Queue} config.queue *，Queue队列的实例
     * @param {String|Array} config.type *，采用的上传方案
     * @param {Object} config.serverConfig *，服务器端配置
     * @param {String} config.urlsInputName *，存储文件路径的隐藏域的name名
     * @param {Boolean} config.isAllowUpload 是否允许上传文件
     * @param {Boolean} config.autoUpload 是否自动上传
     * @example
     * var uploader = new Uploader({button:button,queue:queue,serverConfig:{action:'test.php'}})
     */
    function Uploader(config) {
        var self = this;
        //调用父类构造函数
        Uploader.superclass.constructor.call(self, config);
    }

    S.mix(Uploader, /** @lends Uploader*/{
        /**
         * 上传方式，{AUTO:'auto', IFRAME:'iframe', AJAX:'ajax', FLASH:'flash'}
         */
        type:{AUTO:'auto', IFRAME:'iframe', AJAX:'ajax', FLASH:'flash'},
        /**
         * 组件支持的事件列表，{ RENDER:'render', SELECT:'select', START:'start', PROGRESS : 'progress', COMPLETE:'complete', SUCCESS:'success', UPLOAD_FILES:'uploadFiles', CANCEL:'cancel', ERROR:'error' }
         *
         */
        event:{
            //运行
            RENDER:'render',
            //选择完文件后触发
            SELECT:'select',
            //开始上传后触发
            START:'start',
            //正在上传中时触发
            PROGRESS : 'progress',
            //上传完成（在上传成功或上传失败后都会触发）
            COMPLETE:'complete',
            //上传成功后触发
            SUCCESS:'success',
            //批量上传结束后触发
            UPLOAD_FILES:'uploadFiles',
            //取消上传后触发
            CANCEL:'cancel',
            //上传失败后触发
            ERROR:'error'
        },
        /**
         * 文件上传所有的状态，{ WAITING : 'waiting', START : 'start', PROGRESS : 'progress', SUCCESS : 'success', CANCEL : 'cancel', ERROR : 'error', RESTORE: 'restore' }
         */
        status:{
            WAITING : 'waiting',
            START : 'start',
            PROGRESS : 'progress',
            SUCCESS : 'success',
            CANCEL : 'cancel',
            ERROR : 'error',
            RESTORE: 'restore'
        }
    });
    /**
     * @name Uploader#select
     * @desc  选择完文件后触发
     * @event
     * @param {Array} ev.files 文件完文件后返回的文件数据
     */

    /**
     * @name Uploader#start
     * @desc  开始上传后触发
     * @event
     * @param {Number} ev.index 要上传的文件在队列中的索引值
     * @param {Object} ev.file 文件数据
     */

    /**
     * @name Uploader#progress
     * @desc  正在上传中时触发，这个事件在iframe上传方式中不存在
     * @event
     * @param {Object} ev.file 文件数据
     * @param {Number} ev.loaded  已经加载完成的字节数
     * @param {Number} ev.total  文件总字节数
     */

    /**
     * @name Uploader#complete
     * @desc  上传完成（在上传成功或上传失败后都会触发）
     * @event
     * @param {Number} ev.index 上传中的文件在队列中的索引值
     * @param {Object} ev.file 文件数据
     * @param {Object} ev.result 服务器端返回的数据
     */

    /**
     * @name Uploader#success
     * @desc  上传成功后触发
     * @event
     * @param {Number} ev.index 上传中的文件在队列中的索引值
     * @param {Object} ev.file 文件数据
     * @param {Object} ev.result 服务器端返回的数据
     */

    /**
     * @name Uploader#error
     * @desc  上传失败后触发
     * @event
     * @param {Number} ev.index 上传中的文件在队列中的索引值
     * @param {Object} ev.file 文件数据
     * @param {Object} ev.result 服务器端返回的数据
     */

    /**
     * @name Uploader#cancel
     * @desc  取消上传后触发
     * @event
     * @param {Number} ev.index 上传中的文件在队列中的索引值
     */

    /**
     * @name Uploader#uploadFiles
     * @desc  批量上传结束后触发
     * @event
     */
    //继承于Base，属性getter和setter委托于Base处理
    S.extend(Uploader, Base, /** @lends Uploader.prototype*/{
        /**
         * 运行组件，实例化类后必须调用render()才真正运行组件逻辑
         * @return {Uploader}
         */
        render:function () {
                       return self;
        },
        /**
         * 上传指定队列索引的文件
         * @param {Number} index 文件对应的在上传队列数组内的索引值
         * @example
         * //上传队列中的第一个文件，uploader为Uploader的实例
         * uploader.upload(0)
         */
        upload:function (index) {

        },
        /**
         * 取消文件上传，当index参数不存在时取消当前正在上传的文件的上传。cancel并不会停止其他文件的上传（对应方法是stop）
         * @param {Number} index 队列数组索引
         * @return {Uploader}
         */
        cancel:function (index) {

            return self;
        },
        /**
         * 停止上传动作
         * @return {Uploader}
         */
        stop : function(){

            return self;
        },
        /**
         * 批量上传队列中的指定状态下的文件
         * @param {String} status 文件上传状态名
         * @return {Uploader}
         * @example
         * //上传队列中所有等待的文件
         * uploader.uploadFiles("waiting")
         */
        uploadFiles:function (status) {

            return self;
        },
        /**
         * 上传队列中的指定状态下的文件
         * @param {String} status 文件上传状态名
         * @return {Uploader}
         */
        _uploaderStatusFile:function (status) {

            return self;
        },
        /**
         * 是否支持ajax方案上传
         * @return {Boolean}
         */
        isSupportAjax:function () {

            return isSupport;
        },
        /**
         * 是否支持flash方案上传
         * @return {Boolean}
         */
        isSupportFlash:function () {

            return S.isArray(fpv) && fpv.length > 0;
        },
        /**
         * 获取上传方式类（共有iframe、ajax、flash三种方式）
         * @type {String} type 上传方式
         * @return {IframeType|AjaxType|FlashType}
         */
        getUploadType:function (type) {

            return UploadType;
        },
        /**
         * 获取上传方式
         * @param {String} type 上传方式（根据type返回对应的上传类，比如iframe返回IframeType）
         */
        _getType:function (type) {

            return UploadType;
        },
        /**
         * 运行Button上传按钮组件
         * @return {Button}
         */
        _renderButton:function () {

            return button;
        },
        /**
         * 运行Queue队列组件
         * @return {Queue} 队列实例
         */
        _renderQueue:function () {

            return queue;
        },
        /**
         * 选择完文件后
         * @param {Object} ev 事件对象
         */
        _select:function (ev) {

        },
        /**
         * 向上传按钮容器内增加用于存储文件路径的input
         */
        _renderUrlsInput:function () {

        },
        /**
         * 当上传完毕后返回结果集的处理
         */
        _uploadCompleteHanlder:function (ev) {

        },
        /**
         * 取消上传后调用的方法
         */
        _uploadStopHanlder:function () {

        },
        /**
         * 如果存在批量上传，则继续上传
         */
        _continueUpload : function(){

        },
        /**
         * 上传进度监听器
         */
        _uploadProgressHandler:function (ev) {

        },
        /**
         * 上传成功后执行的回调函数
         * @param {Object} data 服务器端返回的数据
         */
        _success:function (data) {

        },
        /**
         * 检查是否有已经存在的图片恢复到队列中
         */
        _restore: function(){

            }
        }
    }, {ATTRS:/** @lends Uploader.prototype*/{
        /**
         * Button按钮的实例
         * @type Button
         * @default {}
         */
        button:{value:{}},
        /**
         * Queue队列的实例
         * @type Queue
         * @default {}
         */
        queue:{value:{}},
        /**
         * 采用的上传方案，当值是数组时，比如“type” : ["flash","ajax","iframe"]，按顺序获取浏览器支持的方式，该配置会优先使用flash上传方式，如果浏览器不支持flash，会降级为ajax，如果还不支持ajax，会降级为iframe；当值是字符串时，比如“type” : “ajax”，表示只使用ajax上传方式。这种方式比较极端，在不支持ajax上传方式的浏览器会不可用；当“type” : “auto”，auto是一种特例，等价于["ajax","iframe"]。
         * @type String|Array
         * @default "auto"
         */
        type:{value:Uploader.type.AUTO},
        /**
         * 服务器端配置。action：服务器处理上传的路径；data： post给服务器的参数，通常需要传递用户名、token等信息
         * @type Object
         * @default  {action:EMPTY, data:{}, dataType:'json'}
         */
        serverConfig:{value:{action:EMPTY, data:{}, dataType:'json'}},
        /**
         * 是否允许上传文件
         * @type Boolean
         * @default true
         */
        isAllowUpload:{value:true},
        /**
         * 是否自动上传
         * @type Boolean
         * @default true
         */
        autoUpload:{value:true},
        /**
         * 存储文件路径的隐藏域的name名
         * @type String
         * @default ""
         */
        urlsInputName:{value:EMPTY},
        /**
         *  当前上传的文件对应的在数组内的索引值，如果没有文件正在上传，值为空
         *  @type Number
         *  @default ""
         */
        curUploadIndex:{value:EMPTY},
        /**
         * 上传方式实例
         * @type UploaderType
         * @default {}
         */
        uploadType:{value:{}},
        /**
         * UrlsInput实例
         * @type UrlsInput
         * @default ""
         */
        urlsInput:{value:EMPTY},
        /**
         * 存在批量上传文件时，指定的文件状态
         * @type String
         * @default ""
         */
        uploadFilesStatus:{value:EMPTY}
    }});

    return Uploader;
}, {requires:['base', 'node', './urlsInput', './type/iframe', './type/ajax', './type/flash', 'flash']});

扩展阅读

• use JSDoc：非常好的入门教程
• ant-task
• wiki

点此查看demo

    
    
        选择要上传的文件
    
    

配置写在data-config属性内，为一个json字符串，要特别小心json格式必须符合规范，不然解析时会报错。

留意：键名不能使用单引号，比如'name':"Filedata"，解析会失败！

• type：上传方式，当为auto时，组件会根据浏览器选择使用ajax还是iframe
• serverConfig：服务器端配置，包括最重要的action（路径）配置和data（post到服务器的数据）
• name：文件上传域name名
• urlsInputName：用于存放服务器端返回的文件路径的input

不再推荐手动配置type参数！

接下来初始化组件即可

KISSY.config({
           packages:[ {
               name:"gallery",
               path:"http://a.tbcdn.cn/s/kissy/",
               charset:"utf-8"
           } ]
    });
KISSY.use('gallery/form/1.1/uploader/index', function (S, RenderUploader) {
    new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
})

js传参配置

点此查看demo
推荐使用js传参方式！

     选择要上传的文件 
    

    KISSY.use('gallery/form/1.2/uploader/index', function (S, RenderUploader) {
        new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue',{
            //服务器端配置
            serverConfig:{
                //处理上传的服务器端脚本路径
                action:"upload.php"
            },
            // 文件域
            name:"Filedata",
            //用于放服务器端返回的url的隐藏域
            urlsInputName:"fileUrls"
        });
    })

常用配置说明

先来看个使用常用配置的demo
点此查看demo

1.”type” : “auto”

不再推荐配置type！
type参数设置上传方式，它的值有如下三种情况：

• string，比如"type" : "auto"，auto是一种特例，等价于["ajax","flash","iframe"]，这是默认方式
• array，比如"type" : ["flash","ajax","iframe"]，按顺序获取浏览器支持的方式，该配置会优先使用flash上传方式，如果浏览器不支持flash，会降级为ajax，如果还不支持ajax，会降级为iframe…（明河：没有比iframe更低的了-_-!）；
• string，比如"type" : "ajax"，表示只使用ajax上传方式。这种方式比较极端，在不支持ajax上传方式的浏览器会不可用；

2.”name”:”Filedata”

name参数为文件域的name值，非常重要，这个参数将通过RenderUploader传递给Button（即button/base.js或button/swfButton.js）。组件会创建如下的html结构：


如果是flash上传，结构有差异：

服务器通过获取这个文件域来上传图片：

$fileInput = 'Filedata';
$files_name_arr = array($fileInput);
foreach($files_name_arr as $k=>$v){
	$pic = $_FILES[$v];
	$result = move_uploaded_file($pic['tmp_name'], $dir.$pic['name']);
}

详细服务器端脚本，请看这里。

3.”theme” : “default”

theme用于指定使用的主题引用路劲，非常重要，默认是引用default主题。如果引用成功的话，会看到如下请求：

http://a.tbcdn.cn/s/kissy/gallery/form/1.2/uploader/themes/default/index.js

http://a.tbcdn.cn/s/kissy/gallery/form/1.2/uploader/themes/default/style.css

发布的版本，可能是default/index-min.js和default/style-min.css。
如果使用内置主题，可以只传主题名就好，比如”default”或”imageUploader”。

“serverConfig”:{“action”:”upload.php”}

非常关键的参数，是和服务器端交互的核心。

• "action":"upload.php" ： 服务器处理上传的路径；
• "data":{"dir":"files/"} ： post给服务器的参数，通常需要传递用户名、token等信息

特别留意如果是flash上传方式，action必须是绝对路径！！！）
action最好是绝对路径，这是flash上传的要求，v1.2组件会自动将相对路径转成绝对路径，可能会出问题，留意！

4.”urlsInputName”:”fileUrls”

urlsInputName用于设置存放服务器端返回的路径隐藏域。Uploader创建UrlsInput（uploader/urlsInput.js）实例时如果不存在name为“fileUrls”的隐藏域，会自动创建一个，如果存在就使用已有的。

多个url会以“,”号隔开。
推荐用户手动在页面中加个urls隐藏域。

模块说明

uploader的核心为base.js，而index.js为组件入口，会根据html中的伪属性配置实例化Uploader（即base.js的类），Button（上传按钮button/base.js或button/swfButton.js），Auth（上传验证auth.js），Theme（模板）等。
来看当执行下面的js代码后都发生了什么。

        //加载上传组件入口文件
        KISSY.use('gallery/form/1.0/uploader/index', function (S, RenderUploader) {
            //第一个参数：按钮元素钩子，第二个参数：队列元素钩子
            new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
        })

哇喔，变态的复杂（uploader的另外二位作者紫英和飞绿心里一定骂过这设计太变态了-_-!）。

为什么设计得这么复杂

明河之前试过过不少异步文件上传组件，得出一个结论，组件的扩展性一般，扩展后组件无法很好的通用。
所以在设计之初，明河喜欢KF内的uploader可以拥有强大的扩展性，最好第三方开发者可以自由定制属于自己的主题，并能够快速分享他的主题供其他开发者使用。
（PS：uploader的主题跟其他组件的主题最大不同之初在于，不只是定制个css皮肤那么简单，你需要根据场景监听事件，操作DOM，并操作uploader的属性和方法，所以主题的设计更为复杂。）
关于如何自定制一套uploader主题，紫英同学会发一篇教程。
除了主题外，uploader还需要各种插件，比如图片预览、拖拽上传、进度条等一系列的类供第三方方便调用。
更细的模块粒度，的确带来了设计复杂度，也给大家阅读源码和使用造成困难，但同时可维护性和可扩展性大增，明河权衡利弊，采用了现在的设计方式。
我相信通过一系列的uploader的教程讲解，可以缓解大家对KF的uploader的困惑，欢迎大家向明河、紫英、飞绿提问，留言就好。

关于上传方式

目前支持三种上传方式：ajax、iframe、flash，通过type参数快速切换。
（PS：如果type:”auto”，那么上传方式为ajax和iframe组合，组件自动根据浏览器选择上传方式。）
这里明河简单提下三者的一些差异。

ajax上传方案

ajax上传目前有个蛋疼的bug，上传中文文件，文件名会乱码，目前明河正在想办法解决。

• 支持进度条
• 支持文件大小控制
• 拥有完整的上传过程事件
• 支持拖拽上传

第一选择方案！！！

iframe

各种蛋疼问题…明河就不一一罗列了，不得已的选择。应用于IE。-_-！

flash

需要额外引用swf文件，拥有一致的用户体验，除了不支持拖拽上传，拥有ajax上传方式的所有功能。

关于主题

目前会有五套主题：

• default：最简单的上传主题，不带图片预览，目前应用于淘宝退款系统
• lineQueue：带图片预览和主图设置的上传主题，目前应用于淘宝闲置系统和淘宝拍卖系统
• grayQueue：仿uploadify的主题
• drag：带文件拖拽的主题，目前应用于淘宝内部上传图片系统
• love：带图片预览的上传主题，应用于淘宝爱逛街

其他主题不一一截图，（drag和love目前还在制作中）。

组件档案

• 名称：Uploader，属于kissy-form（KF）子组件
• 版本：V1.2（请勿使用v1.0和v1.1）
• 用途：异步文件上传，支持ajax/iframe/flash三种方案的切换
• 基于：KISSY1.2.0，不支持KISSY1.1.6！
• 作者：明河（剑平）、紫英、飞绿
• 源码地址：Gallery的form目录
• demo地址：V1.2demo
• 文档：V1.2文档

教程列表

• 组件配置方式和关键配置
• 关键点说明
• 组件设计
• 核心类API调用（未完）
• 如何制作属于自己的主题（上）
• 如何制作属于自己的主题（下）
• KF/Uploader使用和设计PPT
• KF/Uploader v1.2更新说明

关于KF（kissy-form）

KF是kissy的form相关的系列组件包，目前完成uploader、日后会更多的form组件发布，比如select、suggest、radio、checkbox、auth等。
团队成员：明河（剑平）、紫英、张挺、牧云、易敛、飞绿、伯方。
代码托管于KISSY Gallery，代码会定期发布到淘宝的CDN上面，方便用户快速加载form模块。

关于Uploader

网上已经有很多异步文件上传方案了，swfUpload，uploadify等都是非常优秀的方案，为什么我们还需要花大力气写一个呢？

• flash方案太重了，希望有个全兼容多方案的异步上传组件；
• 不少上传组件非开源，有授权问题；
• 业务需求，这也是写uploader的初衷，这个组件的雏形来源于明河在退款系统中的上传凭证；
• KISSY缺少好的uploader组件；
• 写一个能够快速切换主题的上传组件。（上传组件的定制性要求非常高）

Uploader的特性

• 支持ajax、flash、iframe三方案，兼容所有浏览器。
• 配置简单，支持伪属性配置（data-config=’{}’）和配置属性来配置
• ajax和flash上传方式，带有上传进度显示
• 队列上传，批量上传等待中的文件
• 支持中途取消上传
• 支持上传验证，整合kissy的validation组件
• 不错的扩展性，自由定制按钮和队列模板样式

Uploader快速使用

先来看个最简单的demo：
点此查看demo
务必从服务器端启动demo，处理上传的服务器端脚本为upload.php（php的代码请看这里）。

1、页面中引用kissy文件

（实际应用，请引用kissy-min.js）

2、创建一个上传按钮，写上Uploader组件配置

配置写在data-config属性内，为一个json字符串，要特别小心json格式必须符合规范，不然解析时会报错。

    选择要上传的文件

• type：上传方式，当为auto时，组件会根据浏览器选择使用ajax还是iframe
• serverConfig：服务器端配置，包括最重要的action（路径）配置
• name：文件上传域name名
• urlsInputName：用于存放服务器端返回的文件路径的input

V1.2起不再推荐手动配置type属性，IE降级处理优先使用flash方式（v1.2前IE使用iframe，存在各种蛋疼的兼容性问题。）。

如果你希望兼容旧的处理方式（IE下使用iframe），请配置“type” : ["ajax","iframe"]。

3、创建一个队列容器

（ps：队列容器主要用于主题中显示文件信息，不是必须的，有些uploader就不需要文件信息队列显示方式。）

4、配置下组件包引用路径

KISSY.config({
           packages:[ {
               name:"gallery",
               path:"http://a.tbcdn.cn/s/kissy/",
               charset:"utf-8"
           } ]
    });

对上述配置不清楚的朋友，可以看loader模块。

特别留意：cdn上的文件是打包后的，如果你想要看源码状态的，请配置包到本地路径，比如：

KISSY.config({
           packages:[ {
               name:"gallery",
               path:"../../../../../../",
               charset:"utf-8"
           } ]
    });

charset（编码）必须是utf-8。

5、初始化组件

       //加载上传组件入口文件
        KISSY.use('gallery/form/1.2/uploader/index', function (S, RenderUploader) {
            //第一个参数：按钮元素钩子，第二个参数：队列元素钩子
            new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
        })

gallery/form/1.2/uploader/index是组件的入口js，上传组件的核心模块为gallery/form/1.0/uploader/base。

现在打开浏览器看看！

下面是去年的一个项目部分使用lesscss的例子，lesscss我只做了部分尝试，就lesscss本身来说，它比较适合重用性比较高的代码（个人理解），如果是换肤的功能，我想lesscss再合适不过了。当然也有很多工程师喜欢lesscss的这种代码风格，如果它能够少了编译的这层环节，那么我认为不管是它的可维护性和可扩展性，易读性都会是大家选择它的原因。

上面是我的项目目录，之所以选择base作为试点是一来是因为base包含皮肤样式，字体样式，它是个重用性很高的地方，而其他模块则可以采取import的方式来引用base库，二来是因为base库不管是对现在的项目或者是以后的类似的拓展项目都有很高的重用性和扩展性。

首先是libs.less，大致介绍下的代码组成部分

常量

通常常量是定义的网页的基本全局的变量，比如字体颜色、背景颜色、超链接颜色等等，为了保证各个模块的一致性，我们定义常量来统一管理一张网页的基本设定，试想，如果有其他市场需要使用我们的样式，它们希望的只是皮肤的更改，那么我们只需要修改libs里面的常量就能达到牵一发动全身的效果了。

混合

在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性，这里我们用yui3的布局方式尝试

函数

我们定义一些公用的函数，然后在其他需要调用的地方使用这些函数，这里定义的函数比较多，具体说明可以直接看代码

接下来是关于libs.less的引用，具体体现在base.less

base.less主要是base库的主要部分，它负责生成一些公用的样式供其他业务模块使用，通过引用libs.less来生成自己希望得到的样式

以上介绍两个模块作为lesscss的初步尝试，至于其他的业务模块的尝试也同base差不多，所以不多做介绍。

结束语

我觉得有必要补充一点，就是关于lesscss的服务器环境配置，随着现在node在windows平台的完善，个人觉得lesscss的使用简单了许多，笔者曾经采用的是.NET的编译环境，现在也将环境随之迁移至node。当然，题外话，如果将less编译的工作放在部署机器，而客户端只需要引入less.js来验证效果，部署机器做filter工作过滤lesscss.js然后做替换，这样的方案会比较完美些。

现在IDEA11已经有了less的插件支持，这个非常赞，相信在node环境下做个多模块一键编译的工具不会太难，这样一来，less的很多瓶颈得到了解决，相信less在不久的将来会有越来越大的用户群。

项目简介

项目名：KF(KISSY-FORM)
用途：kissy的form组件包
源码地址：https://github.com/minghe/kissy-form
KF目前还在开发阶段，完成的组件只有Uploader（异步文件上传），日后会发布更多的form组件，有兴趣的朋友可以关注下。
Uploader场景足够复杂，足以覆盖ant的大部分常用用法，请先下载KF源码到本地，找到Uploader的build.xml文件（form/src/uploader/build.xml）。

build目标

build（构建后的打包发布文件）必须和src（源码目录）目录结构保持一致。

• 合并src下的所有js为render-pkg.js（排除themes、demo、auth、tests目录下的文件）
• 将render-pkg.js移动到build目录下，并改名为render.js
• copy一份themes目录到build/form/uploader
• 遍历themes下的每个目录，将子目录下的所有js合并成index-pkg.js
• 删除除了index-pkg.js外的所有js文件
• 将index-pkg.js改名为index.js
• 压缩build目录下的所有js文件
• copy一份uploader.swf文件到build目录下

任务是不是很多,也许你会觉得明河搞得这么复杂很蛋疼，实际上这些任务跟明河实际要实现的构建目标有关，不是本文重点，这里不讨论。
接下来来看明河是如何实现这些目标的。
由于需要用到第三方类库ant-contrib-1.0b3.jar，请先下载该文件到你的ant/lib目录下。
点此下载

ant实战

合并src下的所有js为render-pkg.js（排除themes、demo、auth、tests目录下的文件）

1. <target name="concat">
2.         <concat destfile="render-pkg.js" encoding="${charset}" outputencoding="${charset}">
3.             <fileset dir="${src.dir}" includes="**/*.js" excludes="tests/*.js,demo/**/*.js,auth/*.js,themes/**/*.js"/>
4.             <filterchain>
5.                 <deletecharacters chars="&#xFEFF;"/>
6.             </filterchain>
7.         </concat>
8.     </target>

关于concat的用法可以看《认识基础任务标签（上）—ant入门指南（3）》。

将render-pkg.js移动到build目录下，并改名为render.js

改名操作不一定要用rename标签，使用move标签也可以间接实现。

copy一份themes目录到build/form/uploader，并删除目录下的html文件

这部分的目标也非常简单，使用copy和delete即可实现。

遍历themes下的每个目录，将子目录下的所有js合并成index-pkg.js。删除除了index-pkg.js外的所有js文件。>将index-pkg.js改名为index.js

好，进入本文的重点内容，这个任务目标有个难点，就是如何在ant中处理循环？

如上图所示，build和src下的themes目录必须保持一致，而且必须遍历每个子目录合并该目录的js，所以需要用到循环。这时候你也许会想到编程语言中常用的for，ant有for标签吗？很影响ant并不是编程语言，没有直接的for标签，但通过第三方类库可以实现for循环，我们来看代码。
请确保你的本机上的ant下的lib目录下有ant-contrib-1.0b3.jar文件。

增加新的命名空间

给你的project增加ac命名空间：mlns:ac=”antlib:net.sf.antcontrib”。

遍历themes下的每个目录

使用ac:for开启循环，param为参数名，供后面循环时更换文件路径时使用。

定义文件路径。取每个子目录下的index.js。

sequential标签，与for标签配合使用，标志循环开始。
ac:var定义var.dir变量（即子目录路径）可更改，留意ant定义的property是无法更改的。
dirname获取文件对应的子目录路径。
接下来具体执行任务：

压缩build目录下的所有js文件

关于如何使用ant压缩脚本可以看《ant结合yui-compressor和closure-compiler—ant入门指南》。
其他简单的部分不再累述。

完整代码如下：

在一些设计中给img设置max-width: 100%，以便图片能完整呈现，而不是被截掉部分。这样设置在其他浏览器下都表现完美，但唯独IE8下却出了问题。
IE8下，图片竟然不见了！

bug重现：

大家所知的一般常见的IE bug中没见过这样情况的，所以花费了一些时间来重现这个问题，max-width的设置只是导致这个现象的部分条件。
在做了一系列试验后得出了问题重现的条件。
首先给img设置max-width，但却没有明确给出width数值，并且给img标签设置width属性（不是通过css设置的width），并且img的父容器设置了浮动，IE8下查看img的width为0！表现为IE8（标准模式下）下图片消失了！

如何修复这个bug？

有三种方法：

• 删除img标签的width属性
• 通过css，给浮动元素明确的width值
• 通过css，给出问题的img明确声明width:auto或max-width:none

最好的办法第三方案：通过设置CSS，给浮动元素中的没有明确设置width的img设置width:auto;或max-width: none;。
来看个demo：

• 点此查看demo

其中有三个logo。在IE8下，第一个logo将消失；第二个通过CSS给img设置了width:auto；第三个在img标签上没有设置width属性。
一个神奇的bug！！！！

文章翻译自Using max-width on images can make them disappear in IE8

• 点此查看demo
• 点此下载

如何使用？

引入jquery库和脚本

选择框html片段

初始化组件

就这么简单。

Chosen使用技巧

如何设置模拟选择框的默认文本？
设置data-placeholder=”"，即可。
如果不存在data-placeholder，组件会自动设置默认文本为“Select Some Option”或“”Select Some Options”。
如何设置没有搜索结果时显示的文本？

如何给选项分组？
在html中增加optgroup标签。

如何开启多选支持？
增加个多选属性multiple

遇到这样的视觉稿的话，什么双飞翼布局yui3布局的大家还是别指望了，因为邮件客户端不支持某些看起来很基础的html和css。目前为大家所知的邮件客户端有微软的microsoft office outlook、苹果的apple mail、mozilla的mozilla Thunderbird等等，其中用户数量占据霸主地位的当然非outlook莫属，以下是全球的邮件客户端的市场占有率统计图，在特殊国情的我国outlook的占有率应该更高了。

下面以常用的microsoft office outlook 2007客户端为例，看看html和css的兼容性问题。根据微软官方outlook 2007文档指出，outlook 2007采用和word 2007一样的引擎解析渲染含html/css的内容。outlook 2007部分支持HTML 4.0.1，同时部分支持css1。

outlook 2007不支持html 4.0.1的标签有：

• applet/bdo
• button/form/input/select/option  不支持form、button、input、select等表单元素，所以在邮件中直接提问让用户填写的方式不可行，所以一般都是给出超链接，让用户去新的链接地址进行进一步操作。
• noframes/iframe   不支持iframe，所以邮件中无法嵌入网页
• isindex/menu
• object 所以邮件中flash什么的不建议用
• optgroup/param/q
• noscript/script  不支持script，所以不支持js

outlook 2007不支持html 4.0.1的标签属性有：

• accept-charset/accept/accesskey/archive/
• background/checked/classid/code/codecore/
• codetype/compact/data/declare/defer/disabled/
• enctype/longdesc/marginheight/marginwidth/
• media ( screen | print | projection | braille | speech | all )/method/multiple/noresize/object/
• onblur/onchange/onclick/ondblclick/onfocus/onkeydown/onkeypress/
• onkeyup/onload/onmousedown/onmousemove/onmouseout
• /onmouseover/onmouseup/onreset/onselect/onsubmit/onunload/
• readonly/scrolling/selected/standby/tabindex/title/valuetype

上面的这些onblur/onfocus/onsubmit/onclick事件属性的不支持，加上也不支持script标签，所以outlook完全不支持javascript。

某些标签的某些属性值，outlook 2007也表示不支持，如下：

outlook 2007不支持css1的样式有：

• background-position/background-repeat/background-image/background-attachment   所以别用css背景图，需要用图片的地方请直接用img元素
• display  不支持display，yui3布局pass
• float/clear 不支持浮动，双飞翼布局pass，故table布局是首选。
• list-style-image/list-style-position
• text-transform/word-spacing

结合其他邮件客户端，邮件html的编写还需要注意：

1.<link rel=”stylesheet” ……虽然outlook2007支持css外链，但是其他如yahoo、gmail的客户端等客户端邮箱不支持，而实现样式还有其他方式可替代，所以建议选择直接在内联的style属性上面。

2.css背景图片不建议加，可用img标签代替，但是一方面img图片本身的大小比文本型肯定要大很多，图片过大导致整个邮件过大会被容易视为垃圾邮件；另外一方面图片在outlook2007等大部分邮件客户端基于安全考虑不会下载图片，而是要右键一下手动允许下载才行，所以图片最初是显示不出来的，为了不打乱布局，最好的方法是给图片加上width、height和alt属性，alt描述了未下载图片的内容。

3.因web邮箱的流行，所以一般html邮件不包含html和head标签，body里面的内容可直接作为web邮箱页面的一部分，在客户端邮箱显示也正常。

4.因邮件客户端的自身宽度原因，html邮件页面宽度一般为550-650px。

5.关于EMD电子邮件营销的更多问题，如：如何让你的html邮件防止被过滤，如何提高电子邮件营销的效果等，可以参考《87 ways to improve your email marketing》、《guide to Email Marketing success》。

参考资料：

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)

The complete guide for creating html emails: technical and design best practices

http://www.hanlinweb.com/edm-mail-for-the-full-version.html

• .快速加载html片段。jsTestDriver使用jasmine-jstd-adapter(jasmine对jsTestDriver的适配器)，由于有自己的测试运行页面，无法向运行页面插入测试用html片段，所以在你的spec脚本中需要插入html片段。
• 增加用于KISSY的machers，目前只作用于KISSY的Node模块。

代码下载和说明文档：https://github.com/minghe/jasmine-kissy

明河为什么写jasmine-kissy？

明河是使用jsTestDriver测试工具来运行jasmine的单元测试代码，遇到一个问题：
jsTestDriver没有使用jasmine的跑单元测试的html页面，它只有本地的服务器路径，比如：http://localhost:9876/capture。很多情况我们需要在页面中插入测试用的html片段，比如明河想要测试分享组件，我需要向页面插入个容器

，在jsTestDriver中只能使用js向body插入dom结构。如果你的dom结构很简单，那没什么问题，但是如果你的html片段非常长，在测试js中用脚本插入html片段就非常蛋疼，极度不利于维护。
如何解决这个问题呢？

使用ajax加载html片段

利用ajax的确可以解决问题，但又引入了一个新的问题：如何处理异步的测试呢？难道每次都加waits()和run()，那更蛋疼…
大多人觉得ajax=异步，其实这是不对的，ajax也可以是阻塞式加载。在kissy的ajax方法加个参数async:false，关闭异步加载方式。正是使用阻塞式加载，可以避免使用waits()+run()的异步繁琐方式。

jasmine-kissy的用法

1.全局变量

为了方便测试用例页面直接使用，定义了几个全局变量:

• JF：JamineFixture的实例，使用JF的load()读取html片段
• S：KISSY的缩写变量
• $：KISSY.Node.all的缩写变量

2.加载html片段

在jsTestDriver.conf中需要加载静态html片段文件，比如：

必须先配置html片段所放的目录路径，JF.path = ‘spec/fixtures’。
特别留意在jsTestDriver中起始路径应该是http://localhost:9876/test/
假设在你的spec/fixtures目录有个html片段文件jasmine-kissy_fixture.html。

加载spec/fixtures/目录下的所有html文件。
这是必须配置的！不然使用ajax加载时会报找不到文件的错误！
文件的内容如下：
my name is minghe.
使用如下语法加载这个文件：

你可以测试下#test这个div是否存在：

(ps:toExist()是jasmine-kissy新增的macher，用于测试节点是否存在)

加载的片段会放入缓存，避免重复加载。

需要加载多个文件，语法如下：

加载的html片段会放在页面的测试容器内，容器id为#J_JF。

清理html片段，（jasmine-kissy会自动清理），使用JF.clean()。

清理缓存，使用JF.cleanCache()。

3.KISSY matchers

留意这些matcher目前只适用于KISSY的Node方式。

• toExist() 测试节点的存在性
• toHasClass() 测试节点是否拥有指定的class名
• toHasAttr() 测试节点是否拥有指定的属性值
• toHasProp() 测试节点是否拥有指定的property值
• toHasData() 测试节点是否拥有指定扩展属性值
• toContain() 测试节点是否有子节点
• toEqualValue() 测试节点的的value值
• toEqualText() 测试节点的text

示例代码：

• 点此查看demo

特征：

• 导航控制
• 支持键盘导航
• 带进度条
• 内置代码语法高亮（highlight.js）
• 支持幻灯片预览
• 多层次、嵌套式幻灯片
• 独特的网址书签和内部链接
• 各种主题和各种变形效果（立方体、翻页、陷下……）
• 支持触屏设备

截图：

文章翻译自Use Reveal.js to Create CSS 3D Slideshow

什么是JsTestDriver

JsTestDriver官网：http://code.google.com/p/js-test-driver/，经常被墙上不了-_-!
首先，JsTestDriver是一个TDD式js单元测试框架，作用类似明河和苏河之前介绍过的jasmine；
其次，JsTestDriver是一个单元测试自动化工具，它并不是非得使用自家的测试框架，使用第三方的测试框架也是可以的，比如jasmine、qunit、junit的等。本文主要使用jasmine（淘宝前端基本上都是使用这个单元测试框架，很易用，也有JsTestDriver的适配器）。
阅读推荐：

• 高效JavaScript单元测试
• Test-Driven JavaScript Development in Practice
• Automated Javascript unit testing with JsTestDriver
• Unit Testing 101: Are You Testing Your JavaScript?

安装JsTestDriver插件

进入idea的“setter”界面，找到“plugins”：

这是常规手段，插件服务器不给力，经常连不上，这时候请到idea的插件页下载，传送门在此。
下载下来后，解压到你的idea配置目录下的plugins目录下，明河机子上是“c:\Users\Administrator\.IntelliJIdea11\config\plugins”。重启下idea，不出意外的话将会多出
jsTestDriver的界面，比如下图：

运行个jsTestDriver的示例工程

下载greeter-sample.zip。解压出来后，使用idea打开这个工程。
如果第一次打开GreeterTest.js，TestCase方法的错误提示，移动焦点到代码上，使用Alt+Enter/Option+Enter，选择“Add JsTestDriver assertion framework support”。在js类库中会增加JsTestDriver语法提示等。

运行JsTestDriver服务器

复制url到你想要运行单元测试的浏览器上。

开始run测试集

选择“greeter.jstd”，会有个run选项。

更详细的教程可以看：http://blog.jetbrains.com/webide/2011/10/javascript-unit-testing-support/。
接下来明河关键要讲下如何适配jasmine。

使用JsTestDriver运行jasmine的测试代码

通过jasmine-jstd-adapter来适配JsTestDriver

请先到jasmine-jstd-adapter首页下载个JasmineAdapter.js。

在工程根目录创建jstestdriver.conf文件

文件的内容类似如下：

jstestdriver的配置文件，采用YAML的格式，

• server：服务器路径
• load：依赖脚本
• test：测试脚本

load依赖脚本，假设你的工程目录结构跟明河类似：

导入JsTestDriver配置

右击工程顶点目录，可以找到“creat XX”的选项（选项图标是JsTestDriver的logo），弹出一个配置确认页，直接确定就好，然后在idea的上方会出现如下图界面：

点击绿色图标就开始跑jasmine测试！！！

解决JsTestDriver测试ajax异步过程问题

假设你的ajax请求的路径指向fixtures下的文件：

直接运行测试代码会报文件找不到的错误。
这并不是JsTestDriver的bug，而是你需要在jstestdriver.conf中配置加载静态文件。
比如增加下面的配置：

留意这个参数是serve不是配置服务器的server。
上面的配置，会加载spec/fixtures/下的所有html文件，留意是对应的路劲是在test目录下，也就是说路径应该是“http://localhost:9876/test/spec/fixtures/upload-success.html”。

解决缺少运行页面不方便插入html片段问题

如果你是kissy的使用者，那么可以使用明河写的jasmine-kissy，首页有详细的使用说明，下一篇教程也会说明。
如果你是jquery的使用者，请使用jasmine-jquery。

1.准备

假设你已经下载了jsdoc-toolkit-ant-task，且保证你的js代码风格符合jsdoc要求，比如下面的代码：

详尽的jsdoc语法说明，请看jsdoc的wiki。

2.定义property

请根据你本机的情况自行修改目录。

3.调用jsdoc

target目标下有二个任务：taskdef定义jsdockit的程序路径，jsdoctoolkit执行真正的构建任务。
接下来明河简单说明下其关键属性。

完成的构建代码如下：

下面是明河构建成功后目录情况：

有机会再给大家讲解常用的jsdoc语法。

1.在github上创建一个新的版本库

github首页，找到下图界面，点击“new repository”按钮：

填下项目名称、描述、url等信息，然后提交。

图中标红的一项的意思是只有付费用户才有私有库托管服务，在github上开源（public）项目托管是免费的。
这样一个新的版本库就创建完毕了。
接下来我们需要本地版本库和远程版本库（github上的）进行通信，还需要一些配置。

2.ssh配置

想要让本地版本库与远程版本库通信，需要配置下SSH key。

2.1检查计算机上是否已经有SSH key