博客园_Tony Qu

.net 2.0下的OOXML神器：NPOI.OpenXml4Net

2012-01-11T22:34:00Z

作者：Tony Qu

NPOI官方博客：http://tonyqus.sinaapp.com | 官方QQ群：189925337

可能很多人已经习惯了使用.Net 3.0下的System.IO.Packaging（WindowsBase.dll）来操作Office 2007/2010的文件格式，以至于大家都默许了.net 2.0下无法操作OOXML文件的观点，尽管也有人使用第三方zip类库来操作OOXML文件，但是遇到关系维护之类的问题，就开始纠结了，你必须自己去不断地维护.rels文件（OOXML中用于维护文件内关系的文件，这里不是后缀名，这个文件就叫这个名字。），而且文件的内容越复杂，关系维护就越痛苦。尽管微软出了OpenXml SDK 2.0，但是很遗憾，这套库也是基于.net 3.0的。当然，我倒不是.net 3.0的坚决反对者，只是出于部署方面的考虑，要知道目前基于.net 2.0的应用还是占据相当一部分份额的，尽管.net 3.0/3.5出来也3年了，但是相对于.net 2.0而言，只能算刚刚起步，这也是NPOI始终坚持.net 2.0版本为主线版本的原因。

有人可能要说，.net 3.0/3.5不也是基于.net 2.0的吗？话是这么说，但是部署起来，还是要单独部署.net 3.0包，不是吗？相当于额外增加一套库，就拿我目前的公司来说，我们仍然在用vs2005开发，服务器上也只部署了.net 2.0 framework。

poi中有一个库叫OpenXml4j，由Julien Chable于2008年捐赠给POI项目，主要负责OOXML基础操作，如创建、读取、修改、关系维护等。最近NPOI团队完成了OpenXml4j的移植工作，于是就有了NPOI.OpenXml4Net，该组件将包括在NPOI下一个版本中，目前你可以通过googlecode的svn获得完整代码，自行在本地编译。OpenXml4Net使用SharpZip作为底层zip操作库，而非Ionic.Zip，主要原因是SharpZip的设计与java中的zip库更接近，移植相对简单，所以我们选择了这条捷径。不过有一点要向大家说明，OpenXml4Net仅负责底层操作，比如创建部件、创建关系等，但不包括Office上层的功能，如创建xlsx文件、添加单元格等，这只是一个底层操作库，NPOI将在后续版本中陆续增加，Excel 2007, Word 2007, PowerPoint 2007对应的命名空间分别是NPOI.XSSF, NPOI.XWPF, NPOI.XLSF，NPOI.XSSF按计划将在半年内完成（预计在2012年6月或7月发布），这次随本文发布的算是社区预览版，你可以基于这个版本给我们提建议和bug。

从头创建OOXML文件

任何一个OOXML都是一个zip文件，在本例中为了方便打开，我们直接使用.zip作为新建文件的扩展名。

//create ooxml file in memory
Package p = Package.Create();

//create package parts
PackagePartName pn1=new PackagePartName(new Uri("/a/abcd/e",UriKind.Relative),true);
if (!p.ContainPart(pn1))
    p.CreatePart(pn1, MediaTypeNames.Text.Plain);

PackagePartName pn2 = new PackagePartName(new Uri("/b/test.xml", UriKind.Relative), true);
if (!p.ContainPart(pn2))
    p.CreatePart(pn2, MediaTypeNames.Text.Xml);

//save file 
p.Save("test.zip");

//don't forget to close it
p.Close();

这里我们创建了2个部件，分别是位于/a/abcd目录下的e，和位于/b目录下的test.xml。这里有几点值得注意：

a. Package.Create有好几种调用方式，其中一种是上面这种Package.Create()，这样最直接的好处就是可以在内存中创建文件；而Package.Create(path)，即事先传入文件名，直接在文件系统上创建文件，不用MemoryStream。当然啦，对于大文件（超过100M）以上的文件，使用Packakge.Create()做会占用较多的内存，所以如果并发量很高的话，建议慎用。

b. 用了p.ContainPart来判断节点是否已经存在，尽管对于新创建的文件这么做意义不大，但是这是个好习惯。

c. 创建PackagePartName的时候，Uri必须是Relative类型的，所以要传UriKind.Relative。这一点.Net做的比较挫，默认Uri都是Absolute的，而且一旦Uri为Relative类型的，基本上调用任何Uri的属性全部会抛异常，这实现够坑爹的。

修改已存在的OOXML文件，并保存为新文件

修改已存在的文件也很简单，Package.Open就可以了，但由于最后要保存，务必传入PackageAccess.READ_WRITE，否则会抛异常。

//create ooxml file in memory
Package p = Package.Open("test.zip",PackageAccess.READ_WRITE);
//create package parts
PackagePartName pn3 = new PackagePartName(new Uri("/c.xml", UriKind.Relative), true);
if (!p.ContainPart(pn3))
    p.CreatePart(pn3, MediaTypeNames.Text.Xml);

//save file 
p.Save("test1.zip");

//don't forget to close it
p.Close();

对于已存在的文件，目前仍然有个bug，那就是不能直接保存为当前文件名，存在文件被占用的问题，我们将尝试在正式版中解决这个问题。

目前我们仍然在对OpenXml4Net接口进行调整，以提高组件的易用性和稳定性。如果大家发现啥bug或者问题，请直接通过邮件联系我。

下载NPOI.OpenXML4Net请到这里：http://code.google.com/p/npoi/downloads/list

OpenXML4Net的源代码请通过googlecode svn获取

今年NPOI计划出一本入门级指导书，名字未定，主要面向NPOI初学者，也可以作为NPOI功能速查手册，帮助更多的人上手。有兴趣的出版社可以通过联系我。

本文链接

实战 CruiseControl.NET+NAnt（三）- NAnt及NAntContrib常用任务

2011-09-15T15:31:00Z

作者：Tony Qu

NAnt的脚本引擎非常强大，bat能干的事，它都能干，绝对是有过之而无不及。本文中将列出一些常用任务，其他的我就不一一例举了，大家可以通过http://nant.sourceforge.net/release/0.85/help/tasks/index.html自学。

NAnt常用任务

a. 声明变量

参考：http://nant.sourceforge.net/release/0.85/help/tasks/property.html

当我们声明完一个变量之后需要引用它的时候，我们可以用${propertyname}来获得它的值，这与php中的变量引用$a是类似的。

b. 创建目录

参考：http://nant.sourceforge.net/release/0.85/help/tasks/mkdir.html

c. 删除文件

参考：http://nant.sourceforge.net/release/0.85/help/tasks/delete.html

c. 执行第三方程序

参考：http://nant.sourceforge.net/release/0.85/help/tasks/exec.html

d. 拷贝文件

参考：http://nant.sourceforge.net/release/0.85/help/tasks/copy.html

拷贝是非常平凡的build动作，通常我们会对拷贝的内容作一定得筛选，比如所有的dll文件，这时我们可以用下面的语句：

这里的意思是将c:\npoi\bin目录下的所有dll拷贝到c:\release目录下。

e. zip打包

参考：http://nant.sourceforge.net/release/0.85/help/tasks/zip.html

f. if语法

参考：http://nant.sourceforge.net/release/0.85/help/tasks/if.html

值得注意的是，很多语句支持if属性，也就是说如果条件满足才执行该任务。例如

这个声明的意思是只有当变量a等于1时，才会pint nant.sourceforge.net，这与下面的语句是等同的：

g. foreach语法

参考：http://nant.sourceforge.net/release/0.85/help/tasks/foreach.html

如何使用NAntContrib的任务

NAntContrib最新版本是0.85，其中增加了很多额外的task，但NAnt自己无法自动找到这些task，所以必须在build文件的开头增加一句声明，如下

<loadtasks assembly="<nantcontrib path>/bin/NAnt.Contrib.Tasks.dll" />

黄色部分需要替换成你本地的NAntContrib路径。

NAnt.Contrib常用任务

a. cd - 切换当前工作目录

b. msbuild - 调用MSBuild进行编译，但必须安装MSBuild

详见http://nantcontrib.sourceforge.net/release/latest/help/tasks/msbuild.html

c. vb6 - 编译vb6的项目，但必须安装VB6

详见http://nantcontrib.sourceforge.net/release/latest/help/tasks/vb6.html

svn-checkout：http://nantcontrib.sourceforge.net/release/latest/help/tasks/svn-checkout.html

svn-update：http://nantcontrib.sourceforge.net/release/latest/help/tasks/svn-update.html

e. sql - 执行sql脚本

详见http://nantcontrib.sourceforge.net/release/latest/help/tasks/sql.html

f. nunitreport - 生成NUnit报表

详见http://nantcontrib.sourceforge.net/release/latest/help/tasks/nunitreport.html

其他task请见http://nantcontrib.sourceforge.net/release/latest/help/tasks/

本文链接

给招行专业版提点意见：自动购汇VS现汇还款，哪个更优先？

2011-05-02T16:49:00Z

此文是在与客服沟通后发出，不存在误解，我是实在没找到合适的渠道提这个bug，所以才想借助下技术圈的力量，看看有没有在招行干活的兄弟，给你们相关部门提点建议。

我用招行专业版5年了，一直觉得招行的专业版很不错，又是国内唯一一个用.NET做前端的银行系统，所以一直是铁杆粉丝，但是最近用外汇功能有点不爽，想帮助系统尽快改进，所以才有了此文。

事情大致经过

最近用信用卡在国外网站刷了点美元，大概$500左右，本想拿一卡通里的美金还，大概有$700，肯定是够还的，为保证现汇还款成功还特地用专业版开通了现汇还美金功能，如下图所示。

下面是点修改后的设置界面，这个界面正常人看了都能明白 已经开通了美元自动还款功能，而且是现汇还款

我这里大概解释下，现汇和现钞的区别，现汇就是直接用你账户里的美金还，现钞就是用你账户里的RMB按照当天汇率购买等值美金，然后还款。到目前为止，我自然觉得我的操作完成了，但事实并非如此。

上个月25日，我正好想查一下帐，突然发觉账户里的RMB被扣了很多，我就纳闷了，怎么还是用现钞还，难道我设置错误了，跑进去一看设置是对的，非常非常奇怪，于是打电话给招行客服，得到的答复是他们还有一个设置尽然是和这个界面相关的：

这里便是客服所说的自动购汇设置，从界面上看，我基本没有看出自动购汇和现汇还款有任何关系，除了界面最下面有一段小字：

其中第六条说的意思大致是，如果同时设置了现汇还款和自动购汇，是先按照自动购汇做的，即使美元账号里有足够的美元，我的妈呀，这是什么乱七八糟的规定啊，谁会去看这行小字，而且这个是默认设置，开通专业版的时候就开着的功能，要不是客服说这个是相关的，我估计这辈子我也不会去看这个设置。最恶心的是刚才设置现汇还款的界面压根就没有提到自动购汇是相关的，设置的时候也没有任何的警告窗口，这是最诡异的地方，因为现汇还款按常理说如果金额足够的话，不存在兑换问题。

在网上搜了下，原来不止我一个人有这样的遭遇：

http://life.forex.com.cn/wbyhk/2010-03/1149479.htm

http://www.xiaojb.com/archives/personal/cmbchina_crea.shtml

接下来我们来分析下这个功能到底应该怎么整，这样才能让我们更好的理解哪个更优先的问题。

客户需求：用账户中的美元现汇还信用卡中的美元，如果不够则用RMB还

系统相关模块：自动还款、自动购汇、多币种管理、一卡通与信用卡转账功能

大致逻辑：

IF 开通美元现汇还款 THEN

IF 一卡通中的美元 >= 信用卡美元借款 THEN

用美元还美元

ELSE

用人民币购汇，然后还款（这时需要自动购汇）

ELSE （开通美元现钞还款）

计算需要多少RMB才能够完成购汇还款

IF 一卡通中的RMB >= 信用卡还款所需的RMB THEN

用RMB购汇还美元

ELSE

金额不足，无法还款

当然啦，这里只是一个大致逻辑，和实际系统可能还是有差距的，但有一点是明确的，自动购汇设置理应在美元现汇不够还或者现钞还款时才有效，但是这个条件根本不成立，这也是为什么像我这样的用户会纳闷为什么现汇还款设置没效果，因为用户觉得现汇还款始终是美元和美元在打交道，而不是美元和RMB在打交道，所以在金额足够的情况下不存在购汇问题，但是客服人员却一直在强调自动购汇优先级最高，这个优先级的结论其实根本不成立，因为这两件事根本没关系，何来的优先级，如果是现钞还款，她和我说优先级我倒还觉得有点道理。

综上所述，现汇还款在美元足够还的情况下，根本没必要和自动购汇去比优先级，因为这时是现汇还款，不涉及购汇，所以也没必要考虑自动购汇开不开，始终都应该先用账户中的美元还信用卡中的美元。

本文链接

实战 CruiseControl.NET+NAnt (二) - CC.NET中的触发器

2011-02-10T16:49:00Z

作者：Tony Qu

CC.NET的配置文件位于安装目录的server目录下，有个叫做ccnet.config的文件，只有配置了这个文件，CC.NET才能正常运行。

通过CCNetConfig我们可以学到很多关于ccnet.config的配置内容，首先来看一个非常重要的概念——触发器。

值得注意的是，这里的触发器都仅针对当前项目有效，这也是为什么这些trigger基本没有target，比如说IntervalTrigger，所有的属性都没有提到触发的对象，。

CC.NET提供了6种触发器：

IntervalTrigger，顾名思义，就是每隔一定时间触发任务的触发器。

FilterTrigger不能单独工作，而必须与其他Trigger一起使用，之所以叫FilterTrigger是因为它是用来过滤触发条件，例如我们原本设置了一个IntervalTrigger，每5分钟触发一次，但我只希望这个IntervalTrigger只在工作时间触发，那么我们就可以用FilterTrigger来限制IntervalTrigger的触发时间为9:00 ~ 18:00。

MultiTrigger类似于WPF中的MultiTrigger，可同时执行多个触发器，并对触发器结果做And或Or操作。

ScheduleTrigger和Windows自带的计划任务的功能非常类似，可以在特定时间触发任务。

ProjectTrigger是仅当指定的CC.NET项目build完成后才会触发任务的触发器。

UrlTrigger是仅当某个特定的Url页面的内容发生变化时才会触发任务的触发器。

下面来举个例子：

场景1：我希望设置一个daily build的触发器，每天凌晨1:00触发一次，仅工作日做，双休日不做（不考虑节假日）。

由于是特定时间循环触发，我们可以用ScheduleTrigger来实现，代码如下：

<scheduleTrigger time="1:00" buildCondition="ForceBuild" name="ScheduledTask1">
  <weekDays>
    <weekDay>Monday</weekDay>
    <weekDay>Tuesday</weekDay>
    <weekDay>Wednesday</weekDay>
    <weekDay>Thursday</weekDay>
    <weekDay>Friday</weekDay>
  </weekDays>
</scheduleTrigger>

在CCNetConfig里面设置则如下图所示：

场景2: 持续集成需要每隔一定时间触发一次build，已确定之前的checkin都是可运行的，所以我们需要设定一个每周一到周五的工作时间（9:00 ~ 18:00）触发，并且每隔15分钟触发一次的触发器（不考虑时区、时差问题）。

这里我们需要使用IntervalTrigger+FilterTrigger，FilterTrigger是用于过滤时间的，即9:00 ~ 18:00。

<filterTrigger startTime="09:00" endTime="18:00">
    <trigger type="intervalTrigger" seconds="600" />
    <weekDays>
        <weekDay>Monday</weekDay>
        <weekDay>Tuesday</weekDay>
        <weekDay>Wednesday</weekDay>
        <weekDay>Thursday</weekDay>
        <weekDay>Friday</weekDay>
    </weekDays>
</filterTrigger>

在CCNetConfig里面设置则如下图所示：

场景3: 当项目A的build成功之后才触发当前项目build（通常项目A是某个核心代码库，当前项目对其具有依赖性），由于是仅当成功才触发，所以triggerStatus=Success

<triggers>
  <projectTrigger project="task2">
    <triggerStatus>Success</triggerStatus>
    <innerTrigger type="intervalTrigger" seconds="1800" buildCondition="ForceBuild" />
  </projectTrigger>
</triggers>

在CCNetConfig里面设置则如下图所示：

Starcite上海招聘Java工程师/QA，具体要求请见http://job.cnblogs.com/Offer/EnterpriseInfo.aspx?key=3743

本文链接

实战 CruiseControl.NET+NAnt（一）- 简介

2011-01-24T00:00:00Z

作者：Tony Qu

首先，我们先回顾下过去我们是怎么构建build server的。

大部分人最先想到的肯定是bat还有Windows系统的计划任务，确实，这两个东西在过去谁也离不开谁，bat充当脚本引擎，计划任务充当触发器。但在实际操作中我们发觉bat的能力是有限的，需要很多辅助的工具，因为它没办法像高级语言一样直接访问系统组件，比如需要用vbscript来访问adsi、访问com对象、控制IIS、访问注册表、访问wmi等。通常我们的做法是借助一些辅助命令或工具，比如iis我们可以用系统自带的iisweb.vbs, 操作ADSI也有相应的vbs脚本或者可以自己写一个，但这样以为着你要不停在各种语言中间切换，再加上vbscript和bat的调试并不容易（相对于.NET集成Visual Studio而言），这无形中增加了维护的成本和出错的可能。另外，bat本身没有任何倒退机制，我们必须花大力气构建错误处理机制，接着就是出错了如何退回到原来的状态，这些是非常费时间的。另外有个很大的问题就是bat只适合单机执行，如何及时的获取执行的结果（比如编译是否成功、编译后的版本号），目前比较通行的做法是通过脚本发邮件出来，当然这确实是可行的，但要完全搭建出来确实要费不少人力物力，这也是为什么现在很多公司设立了release engineer/manager职位。

如今越来越多的公司开始上敏捷开发，其中非常重要的一个环节就是持续集成，但事实上很多公司依然使用传统的编译模式，让release engineer专门负责编译的执行，虽然每天会有daily build，但如果是按需编译，都需要专人来完成，而不是由dev自己触发编译动作。传统的编译由于采用了bat，我们不得不登上某台dev, qa, stage server去执行编译和部署脚本，这样在有些时候会带来一些问题，比如允许登录该机器的人数不够，登不进去（通常IT只给2-3个人的上限，因为虚拟机处理能力有限）；谁执行了上次编译，带来了哪些问题，没有任何log可查等一系列问题。

接下来我们要请出今天的主角：CuriseControl.NET和NAnt。

CuriseControl.NET，简称CC.NET，由ThoughtWorks公司出品，免费开源软件，主要用于分布式版本发布，这款软件的最大特点是部署方便，可以轻易搭建轻量级Daily Build Server，是中小企业做Build的首选，并且支持各种不同的第三方版本控制和build软件，如svn, vss, nant, msbuild等。同时CC.NET提供了CCTray客户端，可以在远程开发机器上触发Build，也可以实时查看Build的状态，是成功还是失败，这样就解决了Build Server上的权限分配问题，我们不需要给所有的开发Build Server的登录权限，只需要给CC.NET的访问权限就可以了，由于它提供了Windows Service的运行方式，部署就更加方便了（在调试时可以使用控制台方式）。另外，当然CC.NET还有很多细致的功能来协助你完成Build，比如你可以在Build成功或失败时发邮件，可以把build直接部署到codeplex这样的开源技术社区等。总的来说，CC.NET不仅提供了整套的Build部署方案，更多的是Build的管理。

CC.NET不仅提供了服务器端，也提供了客户端，客户端分为web和桌面两种，web版就是CC.NET自带的web dashboard，桌面版则是之前提到过的CCTray，从它的名字不难看出，它就是一个任务栏托盘程序，但有任何的编译会及时通知所有人编译的进展情况，目前最新的版本号等，对于希望部署持续集成的团队来说，绝对是首选，更何况它是免费的。CC.NET还提供了日志机制，能够方便的记录每次编译的细节，并可作为邮件附件发出来，而你要做的不是编写大段大段的脚本，只需要配置一个xml文件就可以了（ccnet.config），稍后我们来学习如何配置这个文件。

以上就是CC.NET的web界面，看起来比较清爽，其中列出了所有编译项目，当然现在我只做了NPOI一个编译项目，如果团队中有多个项目，只需要多建几个Project就行了。web dashboard默认部署在IIS默认网站的ccnet目录下面，在CC.NET安装的时候会自动创建，当然前提是IIS已经安装并能正常工作。

上面这个就是CCTray的界面，这两个界面的区别在于，web dashboard只会列出当前服务器的任务，但CCTray通过配置是可以列出多个CC.NET服务器的任务的，你可以在File->Settings->Build Projects中选择需要监控的编译/部署任务。另外CCTray还有些比较花哨的功能，比如更换不同状态的图标（successful, failed, broken）、用语音触发任务、根据不同状态执行命令、输出x10硬件信号（可接外部设备，如红绿灯）、根据状态播放音频等。

在使用CCNet时最让人头疼的莫过于配置ccnet.config文件，它位于server目录（ccnet子目录之一）下，所有的关于build项目的配置信息都是从这里面读出来的，由于是xml文件，所以首先要保证不能写错标签，其次是不能写当前版本不支持的东西。CCNet发展到现在已经有了1.1, 1.2, 1.3, 1.4, 1.5，每个版本的配置文件都会有所不同，支持的东西也不同，出于这一点有人写了个辅助的工具叫做CCNetConfig，这是一个简单的Winform程序，但是它非常有用，因为它解决了这个最棘手的问题——写ccnet.config。下面就是CCNetConfig的界面，让繁琐的xml配置工作转变成了窗口操作，非常方便，说实话，如果没有这东西让我直接写ccnet.config，这简直就是噩梦。

以上各软件的下载地址如下：

CC.Net下载地址：http://sourceforge.net/projects/ccnet/

CCTray下载地址：http://ccnetlive.thoughtworks.com/ccnet/CCTrayDownload.aspx

CCNetConfig下载地址：http://ccnetconfig.codeplex.com/

接着说NAnt，相对于CC.NET，NAnt则更注重于Build的运行，而非Build的管理。不得不提的是，NAnt是一个半移植半借鉴项目，来源于Java的Ant工具，但是NAnt的很多插件是为微软编程平台特地设计的，比如regasm，所以不能说它是一个完全移植的项目。NAnt虽然只提供了nant.exe一个可执行文件，但是它内部有很多插件，如copy, exec, cvs, zip, tar, unzip, mail, regasm等，这些都是编译时常用的，另外它的脚本引擎系统可以基于xml写执行和编译脚本，功能绝对不亚于我们平时常用的bat或powershell，还有大量的分支逻辑语句，如if, ifnot, foreach, call等，这些绝对是CC.NET目前望尘莫及的。由于使用日渐频繁，开源社区又为Nant提供了一个重要的增加组件——NAnt.Contrib，这个东西说白了其实就是一些自定义的NAnt Task的集合，但确实提供了不少有用的东西，比如支持vb6, msbuild, adsi, depends, ini, sql, svn, vss, registry等任务，在实际应用中这些任务的执行也是不可或缺的，所以在接下来的文章中我会连带介绍Nant.Contrib的使用。

NAnt下载地址：http://nant.sourceforge.net/

NAnt-contrib下载地址：http://nantcontrib.sourceforge.net/

下面是一个最简单Hello World NAnt脚本，我把它取名为helloworld.build。

<?xml version="1.0"?>
<project name="NPOI">
    <echo message="Hello World!" />
</project>

上面这段代码的意思是显示Hello world!，项目名称叫NPOI。运行结果如下：

C:\Documents and Settings\Administrator>nant -buildfile:c:\scm\buildfiles\hellow
orld.build
NAnt 0.90 (Build 0.90.3780.0; release; 2010-5-8)
Copyright (C) 2001-2010 Gerry Shaw
http://nant.sourceforge.net

Buildfile: file:///c:/scm/buildfiles/helloworld.build
Target framework: Microsoft .NET Framework 2.0

     [echo] Hello World!

BUILD SUCCEEDED

Total time: 0 seconds.

Nant指定build文件时必须使用-buildfile标签，你会看到最后有一句BUILD SUCCESSED，这表示整个build过程中没有任何错误，一旦有错误就会出现BUILD FAILED，整个build会停止，不会继续执行下去。

当然这是最最简单的build文件，复杂的build逻辑可能需要上千行的代码，我们会在接下来的文章中慢慢讲解。

Starcite上海招聘Java工程师/QA，具体要求请见http://job.cnblogs.com/Offer/EnterpriseInfo.aspx?key=3743

本文链接

jQuery的TDD框架 - QUnit

2010-10-31T02:37:00Z

作者：Tony Qu

我今天只讨论基于JavaScript的TDD，可能有些公司是用C#做js单元测试的，但我不认为这是个好主意，很多js运行时的东西让js来返回会更直观，且易于维护。

在讨论jQuery TDD之前，我们先来了解下什么才是一个标准的TDD框架。作为标准的TDD框架，必须满足这么几个要求：

1. 即使测试脚本出错了也要能继续运行接下来的脚本

2. 能够不依赖被测试代码写测试用例，即使代码没有实现也可以先写测试用例

3. 能够显示详细的错误信息和位置

4. 能够统计通过和未通过的用例的数量

5. 有专门的可视化界面用于统计和跟踪测试用例

6. 易于上手，通过一些简单的指导就可以马上开始写测试代码。

以上这些要求QUnit都做到了，这也是我推荐QUnit的原因。

QUnit目前已经可以脱离jQuery独立运行，这也是它成功的另外一个原因，即兼容性好，其实严格意义上它已经不是一个jQuery的测试框架了，而是JavaScript测试框架。有意思的是你会发现QUnit的注释曾经发生过微小的变化，如下

这也说明QUnit的代码是做过专门的调整，使之能脱离JQuery运行。

下载Qunit

下载qunit的代码可以去http://github.com/jquery/qunit，那里的代码是最新的。

如何使用QUnit

使用QUnit很简单，只需要下面这些html代码，初始的设置就完成了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>My Foo Tests</title>    
    <link href="qunit.css" type="text/css" rel="stylesheet"/>    
    <script language="javascript" src="jquery-1.4.2.js" type="text/javascript" />
    <script language="javascript" src="qunit.js" type="text/javascript"/>
</head>
<body>
      <h1 id="qunit-header">QUnit Test Suite</h1>  
    <h2 id="qunit-banner"></h2>  
    <div id="qunit-testrunner-toolbar"></div>  
    <h2 id="qunit-userAgent"></h2>  
    <ol id="qunit-tests"></ol>  
</body>
</html>

QUnit不仅仅为你提供了测试脚本函数，还为你的单元测试提供了一个标准化的测试界面，如下图所示，红色的表示这个测试用例没有通过，绿色的表示通过。每一个框比表示一个测试函数，里面可能有多个断言语句的结果，标题中（x,y,z）表示总共有z个断言，y个是正确的，x个是错误的。

刚才只是初步看了下界面，现在我们来学习如何使用，我从http://github.com/jquery/jquery/raw/master/test/unit/core.js下载了一个core.js的范例测试代码，这个是jQuery用来测试它的核心模块的代码。

在<head></head>中加入<script language="javascript" src="core.js" type="text/javascript"></script>，注意一定要在qunit.js声明后面，因为core.js中用到了qunit.js定义的函数。

这时你再运行刚才我们创建的html文件，你就会看到类似上图的结果，这就是core.js的测试结果，是不是一清二楚？如果是测试你自己的函数，你就可以根据红色的错误提示跟踪问题所在，直到把所有的测试结果都变成绿色。

测试脚本怎么写

测试脚本的写法，我建议你参考http://docs.jquery.com/Qunit#Reference_Test_Suites，这里面有提到一些测试用例的文件，你可以通过它们来研究怎么写测试用例，尽管有些测试用例已经跑不通了。

比较常用的函数有：

expect(amount) - 指定某个函数中会有多少个断言，通常写在测试函数开头。

module(name) - 模块是测试函数的集合，使用该函数可以在UI中将测试函数按模块归类。

ok(state, message) – 布尔型断言，message是专门显示在QUnit界面上，用来区分不同的断言的

equals(actual, expected, message) - 相等断言，actual和expected的值相等时才能通过。

same(actual, expected, message) - 完全相等断言，和equals的区别在于它会比较子元素，对于数组和一些自定义对象的比较十分有用。

这些是最常用的，其他的大家可以自己参考Qunit官方文档。

第一个QUnit测试用例

假设我们写个这样的函数，计算a+b的结果，如下

function CalculateAPlusB(a,b)
{
    return a+b;
}

在页面中加入一个单独的js引用专门用来写单元测试的function，比如叫test.js

<script language="javascript" src="test.js" type="text/javascript"/>

具体的测试代码如下

test("basic calculation", function() {
        equals(CalculateAPlusB(1,5),6,"1+5=6");
        equals(CalculateAPlusB(1.2,5.5),6.7,"1.2+5.5=6.7");
        equals(CalculateAPlusB(-1,10),9,"-1+10=9");
    });

test("pass null test", function() {
        ok(isNaN(CalculateAPlusB(null,5)),"pass null as the first argument");
        ok(isNaN(CalculateAPlusB(5,null)),"pass null as the second argument");
        ok(isNaN(CalculateAPlusB(null,null)),"no argument pass in");
    });

其中test方法是qunit用来定义测试方法的语句，其第一个参数表示这个测试用例的名称，第二个参数就是具体的实现。equals是用来比较期望值和实际值是否一致，ok是用来判断结果是否为真。

如果一切顺利，你将看到类似下面的结果。

这时应该恭喜自己，因为所有的测试结果都是绿颜色的，这表示这些测试都通过了。当然这里只是举2个例子，你可以写更多的测试用例来测试这个方法，比如测测值溢出的情况。

参考资料

http://www.lostechies.com/blogs/chad_myers/archive/2008/08/28/getting-started-with-jquery-qunit-for-client-side-javascript-testing.aspx

http://docs.jquery.com/Qunit

http://www.swift-lizard.com/2009/11/24/test-driven-development-with-jquery-qunit/

http://www.agiledata.org/essays/tdd.html

http://www.oncoding.cn/2010/javascript-unit-testing-qunit/

广告：长期招聘.NET职位，上海、北京、大连均有职位，有兴趣请发简历到

本文链接

WCSF vs ASP.NET MVC

2010-09-15T15:23:00Z

前段时间有个兄弟问我wcsf的问题，说实话，第一次听到这玩意，我一开始还以为他说wcf呢，寒。网上一搜，哦~~原来这是practice and pattern team的大作，于是用了两周的时间研究了一把，发觉这套东西的确很强，由于那个兄弟是要为自己的公司选架构，所以我就趁此机会分析了下他们的异同和优缺点。

WCSF是啥？

WCSF全称Web Client Software Factory, 貌似08年就已经很成熟了，最近还出了vs2010版，可惜我机器上vs2010死活装不上去，老报2908和1935（已在microsoft connect上提交bug，希望vs team会瞧一眼），所以只能看基于vs2008的wcsf，其实vs2005 wcsf也是支持的。尽管这套框架很成熟，但似乎国内很少有人讨论，即使是国外的blog也只有少数几个作者在写教程，不知道是推广没做好还是啥原因。

详见http://msdn.microsoft.com/en-us/library/ff648752.aspx

ASP.NET MVC是啥？

ASP.NET MVC是微软最新推出的web编程框架，从名字就可以看出MVC模式是这个框架的重点。这是微软重点推的开发框架，目前已经出了2.0版。

详见http://www.asp.net/mvc

以下是功能对照表（如有不全或欠妥的请在回复中补充，谢谢）

	WCSF	ASP.NET MVC
开发模式	MVP	MVC
开发指导文档 (官方)	有	有
开发指导文档 (民间)	少	多
测试指导文档（官方）	有	有
测试指导文档（民间）	少	多
开发平台支持	vs2005, vs2008, vs2010	vs2008 sp1, vs2010
使用ASP.NET web controls	能	不能
模块化加载	支持	无
Web视图引擎	无	好多
模板引擎	有	有
页面流程控制	有	无
内嵌MockObject	有	无
支持master page	支持	支持
安全认证支持	EnterpriseLibrary.Security	ASP.NET安全机制
内嵌EnterpriseLibrary	是	否
页面响应机制	ASP.NET postback	url routing
代码与UI分离	强	较强
业务层单元测试	支持，并有详细指导文档	支持
UI层（Controller, Presenter）单元测试	支持	支持，有详细文档
前台(javascript)单元测试	无，需自己开发	无，需自己开发
javascript库	无自带库，但可根据需要嵌入	jquery, asp.net ajax framework

下面有些stackoverflow的讨论帖，大家可以参考

http://stackoverflow.com/questions/53479/asp-net-mvc-vs-web-client-software-factory-wcsf

http://stackoverflow.com/questions/170799/is-net-wcsf-the-way-to-go

http://stackoverflow.com/questions/1729810/wcsf-reading-materials

说到架构选择，我们就不得不提几个必须考虑的问题：

1. 雇佣成本

这个是做任何事必须要考虑的问题，对于公司来说降低成本是非常重要的（虽然大公司有很多钱可以烧，也有闲人可以养），HR和老板应该会对这个很感兴趣。从目前来看，WCSF由于国内使用的人较少，其雇佣成本会略高于ASP.NET MVC，并且使用WCSF的人对于架构的理解可能要比ASP.NET MVC更加深入些，毕竟ASP.NET MVC的架构远比WCSF简单，当然这也间接说明ASP.NET MVC架构的透明度做得比WCSF要好，能够让一些初级程序员不需要知道具体实现就可以使用它。

2. 培训成本

从目前的文档情况来看，wcsf的文档（包括民间blog）远少于ASP.NET mvc，再加上WCSF把很多东西都包括了进去，所以其培训成本将远高于ASP.NET MVC。另外，由于微软重点推广ASP.NET MVC，似乎只要是用ASP.NET的人基本都知道ASP.NET MVC，或多或少会有些概念。另外由于ASP.NET MVC支持多种web视图引擎，从一定意义上讲，这会降低一定的培训成本，因为不排除有些程序员曾经使用过其他平台上的视图引擎，转过来会很方便。

3. 性能

但从这两个架构来说，并不存在很明显的性能差别，这主要还是取决于使用的人。在使用WCSF的时候，必须注意ViewState的使用，一旦ViewState泛滥，将直接导致页面过大，而引起性能下降。另外，wcsf使用了Object Builder，所以必须考虑其构建对象的性能，并对一些对象做适当的缓存处理，以减少反射带来的性能影响（据说WCSF新版本使用了DynamicMethod，这东西的性能我测过，确实能比反射快很多）。ASP.NET MVC由于架构相对简单，也没有ViewState，就目前来看不会有性能问题，当然最终的性能还是取决于开发的代码质量。

4. 可扩展性

WCSF在可扩展性方面更胜一筹，因为它为你提供了很多选择，比如说模块化加载、页面流程控制、Guidance Automation，以及Enterprise Library本身提供的各种扩展功能，并且这些功能在WCSF的文档中已经有了很明确的指示，谁该用哪些功能，例如架构师应该用Guidance Automation Tookit和Guidance Automation Extension，而开发人员应该使用Automation Package，并且这些东西能与VS完美融合，这样也可以在无形中限制初中级开发人员的行为，而不是让他们“为所欲为”。ASP.NET MVC尽管也提供了例如Area、模板引擎，但其文档并没有明确指出架构师应该负责哪些部分，并且也没有和VS融合，只能通过文档来约束开发人员的行为和代码。

5. 可测试性

从白盒测试角度看，这两个东西的可测试性基本相当。ASP.NET MVC由于MVC模式本身的优势，基于Controller、Model和HtmlHelper的单元测试很容易写，基本没有什么限制，只是View的测试就相对比较困难。而WCSF由于采用了MVP模式，尽管提升了UI和代码分离的程度，但是做Presenter的事件测试稍微麻烦一点，但总体不影响单元测试的进行。

6. 后期维护成本

（这个就目前我对这两样东西的了解，还很难做出比较合理的分析，也没有具体实践的项目，如果有兄弟有较好的分析方法可以写在回复中。）

7. 移植成本

如果公司以前采用的是ASP进行编码，转换成WCSF和ASP.NET MVC的成本基本相当，说白了都是重新写。如果公司以前有过分层设计，且假设有服务层、业务逻辑层、数据层三层，那么业务逻辑层和数据层基本可以不动，但是服务层会有所变化，主要要适应新的调用方式，以及实现接口。相对而言，由于ASP.NET MVC没有实现太多的东西，相对WCSF而言，从以前的代码移植到ASP.NET MVC反而相对容易些，这和之前提到的培训成本也是有关系的，尽管我们要自己搭一些架构，比如身份认证、权限控制、流程控制等。当然有人会指责这有“重新发明轮子”的嫌疑。

以上有说的不对的地方还请各位多包涵，并指出，谢谢。

本文链接

中国技术界怪相

2010-08-15T11:47:00Z

声明：本文未经许可不得转载。

看了quitgame写的《Java程序员和.NET程序员》，不是很爽，本来想写驳文，但后来想想没啥意思，因为我觉得没必要、也比较无聊。看完此文，我得出的结论是

a. quitgame应该是java程序员（结果他说自己是.net程序员，我晕）

b. quitgame自我感觉良好，可能是因为有个2-3年经验，看过一些东西（设计模式等），也知道Ioc

c. quitgame打心底里觉得.net程序员不如java程序员

quitgame文中的观点我基本都不认同，因为我作为.net程序员这些我都会，而且我平时不喜欢用Visual Studio，因为比较吃内存，我更喜欢用UltraEdit。总之我觉得quitgame写这篇文章非常无聊，动机不明，当然这只能说明quitgame本人心态有问题，和其他java程序员无关。

我之所以写这篇文章，我的目的很明确，希望中国程序员早日提高素质，少写无聊文章，有时间讨论哪种语言好，哪种语言的程序员优秀，不如自己写点东西来丰富自己支持的社区。我的观点是，语言本无好坏，语言本身只是工具，就好比你说英语好还是中文好，如果你觉得java比.net有前途，那就请去投身java阵营，反之亦然，但要说哪种语言好，我觉得都差不多，java的很多语言特性和.net是很像的，跨平台方面其实微软要做是完全做得出来的（现在也有了mono），只是目前的行业市场份额相对而言是java占优势，特别是金融、银行、保险等领域，.net基本没有份额，但这并不代表.net不如java，只是市场的需求而已。所以有人说java程序员工资比.net高，这和行业是很有关系的，当然也和公司的业绩有关，和语言基本没有关系。

其实，我也觉得这篇文章有些无聊，但是我认为该反省思考的时候还是要反省、要思考，即使这种文章看似和你的技术提高完全没有关系。

中国技术界的一些怪相：

a. 有些人往往比较喜欢宣扬自己会用什么，比如hibernate, structs,nginx,wcf, wpf等，貌似比别人多懂一个名词就很了不起了。但很少有中国程序员想到自己需要创造一些类库，而不仅仅是使用，或者想到应该为开源社区多做点贡献，似乎相当一部分人觉得创造是其他人的事，和我无关，除非老板要求我这么做。

b. 有些人喜欢在社区里说某人或者某团体低俗、怎么怎么差，却从来不以事实为依据，很多时候讨论技术到最后变成人身攻击。

c. 有些人喜欢拿计算机书当圣旨，甚至有走火入魔之嫌，我曾经见过某程序员一边看《架构之美》，一边改公司的系统（他说这叫重构）却完全没有征得主管的同意，并偷偷将代码签入，结果害好几个同事帮他擦屁股。其实技术书永远只是参考，要有选择有目的的去看，不能盲从。

d. 有些人稍微学了点皮毛，就拿着鸡毛当利剑，写了本书，也有了不少粉丝，但国内技术书真正好的有几本？大家自己心里清楚。而且国内的技术书有一个让人哭笑不得的规矩，要看这书你必须知道某某技术、了解某某环境，如果你不知道，看这书恐怕会很累，但知道这些东西的人，基本可以不用看这书。

e. 中国的有些技术书的书名让人看到很激动，但是买完回去阅读之后却发觉完全不是那么回事，比如说《XX宝典》、《xx必备手册》、《xx锦囊》、《xx深入浅出》，很多人到最后发觉国内的书基本没法看或者不用看，还是看原版书比较清楚，比较易懂，当然前提是你英语水平过关。

f. 现在人头外包公司满天飞，也没人来管一管，不知道大家有没有发觉一个现象，这些外包公司接的都是些什么活呢？基本都是非常外围，可有可无的业务，假设这些外资都走了，给我们留下了什么吗？什么都没有，进去干活的人出来后可能水平还没有进去的时候高。但似乎外包公司的高管不在乎这一点，他们只关心能赚多少差价，为了实现利润最大化，一些外包公司甚至不惜牺牲员工的福利，他们似乎腰杆很值：反正我没有违反劳动法！

g. 国内的程序员活得很累，只要是工作无论什么都愿意做，他们经常加班到深夜，相当一部分公司不提供加班补助或换休，他们认为这是应该的。国外的程序员很多人本职工作不是程序员，他们只是把写程序作为一种爱好，我曾经见过F22飞行员去微软做程序员，真的很有趣。

h. 现在很多IT人扎堆去读在职研究生（读软件工程的极多），但我发觉一个很有趣的现象，很多人名义上是读书，但是很少去上课，到了快毕业了天天为毕业论文发愁，难道这2-3年你就一点灵感都没有？然后就出钱去买论文，要么就是报流水账，把自己公司系统的业务需求拷贝上去一大段。但有意思的是，我很少听到有人因为旷课或论文抄袭被取消文凭的，真不知道是拿文凭还是送文凭？现在的研究生论文恐怕连本科生论文都不如，经常看到《xxx系统详细实现》、《xxx技术在xx系统中的应用》，我记得以前有规定说研究生论文必须不能太过于应用化，要有理论深度，不知道啥时候改规则了？要说野鸡大学，我看国内比国外好不了多少。

i. 很多人只要钱多的公司就去，却不去了解一下这些公司是干什么的，有没有对社会造成危害，说白了这是个择业观的问题。比如说我是不去日本公司和做网游业务的公司，不去日本公司是因为我不想为小日本干活（尽管日资企业钱很多），不去网游公司是因为网游对青少年危害太大了，不想自作孽不可活，我也从来不认同“所谓网游无害论”。某高僧说过：尽管网游创造的是虚拟场景，但是打打杀杀死了以后还是要下十八层地狱的。

j. 技术社区/博客不应该出现非技术的文章。这一点在博客园十分突出，也不知道是谁定的规矩，其实有些国外牛人的blog经常会出现他们怎么生活、怎么建造自己的房子的文章，蛮有意思的，人家那叫活得惬意。

希望大家看完此文，对号入座，有则改之，无则保持。如本文得罪了某某人或某某公司，我只能表示歉意，我没有得罪你们的意思，只是想让更多的人醒来。

本文链接

在线Html编辑器粘贴过滤技术详解（二）

2010-06-03T14:35:00Z

作者：Tony Qu

本章我们将来说一说filterPasteData函数的实现。

上篇中提到我们采用的粘贴方式是浏览器自己提供的，只是使用了不少技巧，使得粘贴的东西不直接进入Html编辑器的iframe，所以从某种意义上讲，我们获得的粘贴数据内容都是html。根据我们之前所说的三种需求，文本、html以及Word内容，我们可以把过滤的内容分为两大类：

a. html

b. Word xml

之所以纯文本可以当做html就是因为贴进来就是当html处理了，只不过是不带标签的html。

说到过滤，自然要做匹配和替换，于是我们很自然的想到了正则表达式，先来处理比较简单的html过滤。我定义了以下一些规则：

* 移除html, body, form, doctype, head, script,style, textarea, button,select, option, input,span标签

* 移除id, name, class, language,type属性

* 移除on开头的属性，如onclick

* 移除a, table, tr,td,tbody, thead, th, img,input,iframe, div标签（我们的系统中不支持table）

* 移除换行符（\n, \r）

以上这些标签都是要移除的对象，因为它们并没有给系统带来任何好处，还会降低安全性。当然根据实际需要，你可以适当保留一些标签，比如select, button, input, img, table等

function FilterPasteText(str)
{
    str = str.replace(/\r\n|\n|\r/ig, "");
    //remove html body form
    str = str.replace(/<\/?(html|body|form)(?=[\s\/>])[^>]*>/ig, "");
    //remove doctype
    str = str.replace(/<(!DOCTYPE)(\n|.)*?>/ig, "");
    //remove xml tags
    str = str.replace(/<(\/?(\?xml(:\w+)?|xml|\w+:\w+)(?=[\s\/>]))[^>]*>/gi,"");
    //remove head
    str = str.replace(/<head[^>]*>(\n|.)*?<\/head>/ig, "");
    //remove <xxx /> 
    str = str.replace(/<(script|style|link|title|meta|textarea|option|select|iframe|hr)(\n|.)*?\/>/ig, "");
    //remove empty span
    str = str.replace(/<span[^>]*?><\/span>/ig, "");
    //remove <xxx>...</xxx>
    str = str.replace(/<(head|script|style|textarea|button|select|option|iframe)[^>]*>(\n|.)*?<\/\1>/ig, "");
    //remove table and <a> tag, <img> tag,<input> tag (this can help filter unclosed tag)
    str = str.replace(/<\/?(a|table|tr|td|tbody|thead|th|img|input|iframe|div)[^>]*>/ig, "");
    //remove bad attributes
    do {
        len = str.length;
        str = str.replace(/(<[a-z][^>]*\s)(?:id|name|language|type|class|on\w+|\w+:\w+)=(?:"[^"]*"|\w+)\s?/gi, "$1");
    } while (len != str.length);
    
    return str;
}

这里str.replace(/<(html|body|form)[^>]*>([\s\S]+)<\/\1>/ig, “$2”)的意思是保留<html></html>里面的内容，但是移除<html>标签本身。

这里str.replace(/<input(\n|.)*?>/ig, "");的意思是移除input标签。

以下是一些测试数据

替换前	替换后
<html><body>abc</body></html>	abc
<html> <head> <script type="text/javascript"> ... </script> </head> <body> <script type="text/javascript"> ... </script> <form action="target.html"> abc </form> </body> </html>	abc
<html> <body> <form action="target.html"> <table> <tr> <td>abc</td> <td>cde</td> </tr> </table> </form> </body> </html>	abccde

好了，接下来就来讲word xml的过滤。要想过滤word xml就必须知道当前贴进来的是word的数据，而非普通html，tinymce使用了一个技巧，如下：

function IsWordDocument(strValue)
{
    var re=new RegExp(/(class=\"?Mso|style=\"[^\"]*\bmso\-|w:WordDocument)/ig);
    return re.test(strValue);
}

只要是从Word贴过来的都会有这样的标记：class=”MsoNormal”或<w:WordDocument></w:WordDocument>或style=”mso-font-charset:0”

一旦检测到这样的标签，就可以认为这是从Word粘贴过来的，当然如果有人特别无聊，故意做了这样的标签或样式贴进来也没关系，因为过滤器会把没有用的东西过滤掉，那些不在规则里面的不管你是Word数据还是html数据，都尽量保留。

Word的过滤会比普通的html复杂很多，主要原因还是浏览器自动贴进来的word xml保留了很多东西，通常一段十分简单的文本数据，通过word xml表示可能字符长度要达到上万。

举个例子：这里有一段很简单的Word文本，如下

它对应的粘贴结果却是下面这么一大段，是不是很恐怖？

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="Word.Document"><meta name="Generator" content="Microsoft Word 12"><meta name="Originator" content="Microsoft Word 12"><link rel="File-List" href="file:///C:%5CUsers%5CTony%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_filelist.xml"><link rel="themeData" href="file:///C:%5CUsers%5CTony%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_themedata.thmx"><link rel="colorSchemeMapping" href="file:///C:%5CUsers%5CTony%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_colorschememapping.xml"><!--[if gte mso 9]><xml>
 <w:WordDocument>
  <w:View>Normal</w:View>
  <w:Zoom>0</w:Zoom>
  <w:TrackMoves/>
  <w:TrackFormatting/>
  <w:PunctuationKerning/>
  <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing>
  <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>
  <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery>
  <w:ValidateAgainstSchemas/>
  <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
  <w:IgnoreMixedContent>false</w:IgnoreMixedContent>
  <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
  <w:DoNotPromoteQF/>
  <w:LidThemeOther>EN-US</w:LidThemeOther>
  <w:LidThemeAsian>ZH-CN</w:LidThemeAsian>
  <w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
  <w:Compatibility>
   <w:SpaceForUL/>
   <w:BalanceSingleByteDoubleByteWidth/>
   <w:DoNotLeaveBackslashAlone/>
   <w:ULTrailSpace/>
   <w:DoNotExpandShiftReturn/>
   <w:AdjustLineHeightInTable/>
   <w:BreakWrappedTables/>
   <w:SnapToGridInCell/>
   <w:WrapTextWithPunct/>
   <w:UseAsianBreakRules/>
   <w:DontGrowAutofit/>
   <w:SplitPgBreakAndParaMark/>
   <w:DontVertAlignCellWithSp/>
   <w:DontBreakConstrainedForcedTables/>
   <w:DontVertAlignInTxbx/>
   <w:Word11KerningPairs/>
   <w:CachedColBalance/>
   <w:UseFELayout/>
  </w:Compatibility>
  <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
  <m:mathPr>
   <m:mathFont m:val="Cambria Math"/>
   <m:brkBin m:val="before"/>
   <m:brkBinSub m:val="&#45;-"/>
   <m:smallFrac m:val="off"/>
   <m:dispDef/>
   <m:lMargin m:val="0"/>
   <m:rMargin m:val="0"/>
   <m:defJc m:val="centerGroup"/>
   <m:wrapIndent m:val="1440"/>
   <m:intLim m:val="subSup"/>
   <m:naryLim m:val="undOvr"/>
  </m:mathPr></w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
 <w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="true"
  DefSemiHidden="true" DefQFormat="false" DefPriority="99"
  LatentStyleCount="267">
  <w:LsdException Locked="false" Priority="0" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="Normal"/>
  <w:LsdException Locked="false" Priority="9" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="heading 1"/>
  <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 2"/>
  <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 3"/>
  <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 4"/>
  <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 5"/>
  <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 6"/>
  <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 7"/>
  <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 8"/>
  <w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 9"/>
  <w:LsdException Locked="false" Priority="39" Name="toc 1"/>
  <w:LsdException Locked="false" Priority="39" Name="toc 2"/>
  <w:LsdException Locked="false" Priority="39" Name="toc 3"/>
  <w:LsdException Locked="false" Priority="39" Name="toc 4"/>
  <w:LsdException Locked="false" Priority="39" Name="toc 5"/>
  <w:LsdException Locked="false" Priority="39" Name="toc 6"/>
  <w:LsdException Locked="false" Priority="39" Name="toc 7"/>
  <w:LsdException Locked="false" Priority="39" Name="toc 8"/>
  <w:LsdException Locked="false" Priority="39" Name="toc 9"/>
  <w:LsdException Locked="false" Priority="35" QFormat="true" Name="caption"/>
  <w:LsdException Locked="false" Priority="10" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="Title"/>
  <w:LsdException Locked="false" Priority="1" Name="Default Paragraph Font"/>
  <w:LsdException Locked="false" Priority="11" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="Subtitle"/>
  <w:LsdException Locked="false" Priority="22" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="Strong"/>
  <w:LsdException Locked="false" Priority="20" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="Emphasis"/>
  <w:LsdException Locked="false" Priority="59" SemiHidden="false"
   UnhideWhenUsed="false" Name="Table Grid"/>
  <w:LsdException Locked="false" UnhideWhenUsed="false" Name="Placeholder Text"/>
  <w:LsdException Locked="false" Priority="1" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="No Spacing"/>
  <w:LsdException Locked="false" Priority="60" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Shading"/>
  <w:LsdException Locked="false" Priority="61" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light List"/>
  <w:LsdException Locked="false" Priority="62" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Grid"/>
  <w:LsdException Locked="false" Priority="63" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 1"/>
  <w:LsdException Locked="false" Priority="64" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 2"/>
  <w:LsdException Locked="false" Priority="65" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 1"/>
  <w:LsdException Locked="false" Priority="66" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 2"/>
  <w:LsdException Locked="false" Priority="67" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 1"/>
  <w:LsdException Locked="false" Priority="68" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 2"/>
  <w:LsdException Locked="false" Priority="69" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 3"/>
  <w:LsdException Locked="false" Priority="70" SemiHidden="false"
   UnhideWhenUsed="false" Name="Dark List"/>
  <w:LsdException Locked="false" Priority="71" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Shading"/>
  <w:LsdException Locked="false" Priority="72" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful List"/>
  <w:LsdException Locked="false" Priority="73" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Grid"/>
  <w:LsdException Locked="false" Priority="60" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Shading Accent 1"/>
  <w:LsdException Locked="false" Priority="61" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light List Accent 1"/>
  <w:LsdException Locked="false" Priority="62" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Grid Accent 1"/>
  <w:LsdException Locked="false" Priority="63" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 1 Accent 1"/>
  <w:LsdException Locked="false" Priority="64" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 2 Accent 1"/>
  <w:LsdException Locked="false" Priority="65" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 1 Accent 1"/>
  <w:LsdException Locked="false" UnhideWhenUsed="false" Name="Revision"/>
  <w:LsdException Locked="false" Priority="34" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="List Paragraph"/>
  <w:LsdException Locked="false" Priority="29" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="Quote"/>
  <w:LsdException Locked="false" Priority="30" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="Intense Quote"/>
  <w:LsdException Locked="false" Priority="66" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 2 Accent 1"/>
  <w:LsdException Locked="false" Priority="67" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 1 Accent 1"/>
  <w:LsdException Locked="false" Priority="68" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 2 Accent 1"/>
  <w:LsdException Locked="false" Priority="69" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 3 Accent 1"/>
  <w:LsdException Locked="false" Priority="70" SemiHidden="false"
   UnhideWhenUsed="false" Name="Dark List Accent 1"/>
  <w:LsdException Locked="false" Priority="71" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Shading Accent 1"/>
  <w:LsdException Locked="false" Priority="72" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful List Accent 1"/>
  <w:LsdException Locked="false" Priority="73" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Grid Accent 1"/>
  <w:LsdException Locked="false" Priority="60" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Shading Accent 2"/>
  <w:LsdException Locked="false" Priority="61" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light List Accent 2"/>
  <w:LsdException Locked="false" Priority="62" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Grid Accent 2"/>
  <w:LsdException Locked="false" Priority="63" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2"/>
  <w:LsdException Locked="false" Priority="64" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2"/>
  <w:LsdException Locked="false" Priority="65" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 1 Accent 2"/>
  <w:LsdException Locked="false" Priority="66" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 2 Accent 2"/>
  <w:LsdException Locked="false" Priority="67" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 1 Accent 2"/>
  <w:LsdException Locked="false" Priority="68" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 2 Accent 2"/>
  <w:LsdException Locked="false" Priority="69" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 3 Accent 2"/>
  <w:LsdException Locked="false" Priority="70" SemiHidden="false"
   UnhideWhenUsed="false" Name="Dark List Accent 2"/>
  <w:LsdException Locked="false" Priority="71" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Shading Accent 2"/>
  <w:LsdException Locked="false" Priority="72" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful List Accent 2"/>
  <w:LsdException Locked="false" Priority="73" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Grid Accent 2"/>
  <w:LsdException Locked="false" Priority="60" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Shading Accent 3"/>
  <w:LsdException Locked="false" Priority="61" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light List Accent 3"/>
  <w:LsdException Locked="false" Priority="62" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Grid Accent 3"/>
  <w:LsdException Locked="false" Priority="63" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 1 Accent 3"/>
  <w:LsdException Locked="false" Priority="64" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 2 Accent 3"/>
  <w:LsdException Locked="false" Priority="65" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 1 Accent 3"/>
  <w:LsdException Locked="false" Priority="66" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 2 Accent 3"/>
  <w:LsdException Locked="false" Priority="67" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 1 Accent 3"/>
  <w:LsdException Locked="false" Priority="68" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 2 Accent 3"/>
  <w:LsdException Locked="false" Priority="69" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 3 Accent 3"/>
  <w:LsdException Locked="false" Priority="70" SemiHidden="false"
   UnhideWhenUsed="false" Name="Dark List Accent 3"/>
  <w:LsdException Locked="false" Priority="71" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Shading Accent 3"/>
  <w:LsdException Locked="false" Priority="72" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful List Accent 3"/>
  <w:LsdException Locked="false" Priority="73" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Grid Accent 3"/>
  <w:LsdException Locked="false" Priority="60" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Shading Accent 4"/>
  <w:LsdException Locked="false" Priority="61" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light List Accent 4"/>
  <w:LsdException Locked="false" Priority="62" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Grid Accent 4"/>
  <w:LsdException Locked="false" Priority="63" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 1 Accent 4"/>
  <w:LsdException Locked="false" Priority="64" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 2 Accent 4"/>
  <w:LsdException Locked="false" Priority="65" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 1 Accent 4"/>
  <w:LsdException Locked="false" Priority="66" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 2 Accent 4"/>
  <w:LsdException Locked="false" Priority="67" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 1 Accent 4"/>
  <w:LsdException Locked="false" Priority="68" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 2 Accent 4"/>
  <w:LsdException Locked="false" Priority="69" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 3 Accent 4"/>
  <w:LsdException Locked="false" Priority="70" SemiHidden="false"
   UnhideWhenUsed="false" Name="Dark List Accent 4"/>
  <w:LsdException Locked="false" Priority="71" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Shading Accent 4"/>
  <w:LsdException Locked="false" Priority="72" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful List Accent 4"/>
  <w:LsdException Locked="false" Priority="73" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Grid Accent 4"/>
  <w:LsdException Locked="false" Priority="60" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Shading Accent 5"/>
  <w:LsdException Locked="false" Priority="61" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light List Accent 5"/>
  <w:LsdException Locked="false" Priority="62" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Grid Accent 5"/>
  <w:LsdException Locked="false" Priority="63" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 1 Accent 5"/>
  <w:LsdException Locked="false" Priority="64" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 2 Accent 5"/>
  <w:LsdException Locked="false" Priority="65" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 1 Accent 5"/>
  <w:LsdException Locked="false" Priority="66" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 2 Accent 5"/>
  <w:LsdException Locked="false" Priority="67" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 1 Accent 5"/>
  <w:LsdException Locked="false" Priority="68" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 2 Accent 5"/>
  <w:LsdException Locked="false" Priority="69" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 3 Accent 5"/>
  <w:LsdException Locked="false" Priority="70" SemiHidden="false"
   UnhideWhenUsed="false" Name="Dark List Accent 5"/>
  <w:LsdException Locked="false" Priority="71" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Shading Accent 5"/>
  <w:LsdException Locked="false" Priority="72" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful List Accent 5"/>
  <w:LsdException Locked="false" Priority="73" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Grid Accent 5"/>
  <w:LsdException Locked="false" Priority="60" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Shading Accent 6"/>
  <w:LsdException Locked="false" Priority="61" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light List Accent 6"/>
  <w:LsdException Locked="false" Priority="62" SemiHidden="false"
   UnhideWhenUsed="false" Name="Light Grid Accent 6"/>
  <w:LsdException Locked="false" Priority="63" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 1 Accent 6"/>
  <w:LsdException Locked="false" Priority="64" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Shading 2 Accent 6"/>
  <w:LsdException Locked="false" Priority="65" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 1 Accent 6"/>
  <w:LsdException Locked="false" Priority="66" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium List 2 Accent 6"/>
  <w:LsdException Locked="false" Priority="67" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 1 Accent 6"/>
  <w:LsdException Locked="false" Priority="68" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 2 Accent 6"/>
  <w:LsdException Locked="false" Priority="69" SemiHidden="false"
   UnhideWhenUsed="false" Name="Medium Grid 3 Accent 6"/>
  <w:LsdException Locked="false" Priority="70" SemiHidden="false"
   UnhideWhenUsed="false" Name="Dark List Accent 6"/>
  <w:LsdException Locked="false" Priority="71" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Shading Accent 6"/>
  <w:LsdException Locked="false" Priority="72" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful List Accent 6"/>
  <w:LsdException Locked="false" Priority="73" SemiHidden="false"
   UnhideWhenUsed="false" Name="Colorful Grid Accent 6"/>
  <w:LsdException Locked="false" Priority="19" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="Subtle Emphasis"/>
  <w:LsdException Locked="false" Priority="21" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="Intense Emphasis"/>
  <w:LsdException Locked="false" Priority="31" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="Subtle Reference"/>
  <w:LsdException Locked="false" Priority="32" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="Intense Reference"/>
  <w:LsdException Locked="false" Priority="33" SemiHidden="false"
   UnhideWhenUsed="false" QFormat="true" Name="Book Title"/>
  <w:LsdException Locked="false" Priority="37" Name="Bibliography"/>
  <w:LsdException Locked="false" Priority="39" QFormat="true" Name="TOC Heading"/>
 </w:LatentStyles>
</xml><![endif]--><style>
<!--
 /* Font Definitions */
 @font-face
    {font-family:Wingdings;
    panose-1:5 0 0 0 0 0 0 0 0 0;
    mso-font-charset:2;
    mso-generic-font-family:auto;
    mso-font-pitch:variable;
    mso-font-signature:0 268435456 0 0 -2147483648 0;}
@font-face
    {font-family:宋体;
    panose-1:2 1 6 0 3 1 1 1 1 1;
    mso-font-alt:SimSun;
    mso-font-charset:134;
    mso-generic-font-family:auto;
    mso-font-pitch:variable;
    mso-font-signature:3 680460288 22 0 262145 0;}
@font-face
    {font-family:"Cambria Math";
    panose-1:2 4 5 3 5 4 6 3 2 4;
    mso-font-charset:1;
    mso-generic-font-family:roman;
    mso-font-format:other;
    mso-font-pitch:variable;
    mso-font-signature:0 0 0 0 0 0;}
@font-face
    {font-family:Calibri;
    panose-1:2 15 5 2 2 2 4 3 2 4;
    mso-font-charset:0;
    mso-generic-font-family:swiss;
    mso-font-pitch:variable;
    mso-font-signature:-1610611985 1073750139 0 0 159 0;}
@font-face
    {font-family:"\@宋体";
    panose-1:2 1 6 0 3 1 1 1 1 1;
    mso-font-charset:134;
    mso-generic-font-family:auto;
    mso-font-pitch:variable;
    mso-font-signature:3 680460288 22 0 262145 0;}
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
    {mso-style-unhide:no;
    mso-style-qformat:yes;
    mso-style-parent:"";
    margin:0cm;
    margin-bottom:.0001pt;
    text-align:justify;
    text-justify:inter-ideograph;
    mso-pagination:none;
    font-size:10.5pt;
    mso-bidi-font-size:11.0pt;
    font-family:"Calibri","sans-serif";
    mso-ascii-font-family:Calibri;
    mso-ascii-theme-font:minor-latin;
    mso-fareast-font-family:宋体;
    mso-fareast-theme-font:minor-fareast;
    mso-hansi-font-family:Calibri;
    mso-hansi-theme-font:minor-latin;
    mso-bidi-font-family:"Times New Roman";
    mso-bidi-theme-font:minor-bidi;
    mso-font-kerning:1.0pt;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
    {mso-style-priority:34;
    mso-style-unhide:no;
    mso-style-qformat:yes;
    margin:0cm;
    margin-bottom:.0001pt;
    text-align:justify;
    text-justify:inter-ideograph;
    text-indent:21.0pt;
    mso-char-indent-count:2.0;
    mso-pagination:none;
    font-size:10.5pt;
    mso-bidi-font-size:11.0pt;
    font-family:"Calibri","sans-serif";
    mso-ascii-font-family:Calibri;
    mso-ascii-theme-font:minor-latin;
    mso-fareast-font-family:宋体;
    mso-fareast-theme-font:minor-fareast;
    mso-hansi-font-family:Calibri;
    mso-hansi-theme-font:minor-latin;
    mso-bidi-font-family:"Times New Roman";
    mso-bidi-theme-font:minor-bidi;
    mso-font-kerning:1.0pt;}
.MsoChpDefault
    {mso-style-type:export-only;
    mso-default-props:yes;
    mso-bidi-font-family:"Times New Roman";
    mso-bidi-theme-font:minor-bidi;}
 /* Page Definitions */
 @page
    {mso-page-border-surround-header:no;
    mso-page-border-surround-footer:no;}
@page Section1
    {size:612.0pt 792.0pt;
    margin:72.0pt 90.0pt 72.0pt 90.0pt;
    mso-header-margin:36.0pt;
    mso-footer-margin:36.0pt;
    mso-paper-source:0;}
div.Section1
    {page:Section1;}
 /* List Definitions */
 @list l0
    {mso-list-id:1862015348;
    mso-list-type:hybrid;
    mso-list-template-ids:1873287652 67698689 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}
@list l0:level1
    {mso-level-number-format:bullet;
    mso-level-text:l;
    mso-level-tab-stop:none;
    mso-level-number-position:left;
    margin-left:21.0pt;
    text-indent:-21.0pt;
    font-family:Wingdings;}
ol
    {margin-bottom:0cm;}
ul
    {margin-bottom:0cm;}
-->
</style><!--[if gte mso 10]>
<style>
 /* Style Definitions */
 table.MsoNormalTable
    {mso-style-name:普通表格;
    mso-tstyle-rowband-size:0;
    mso-tstyle-colband-size:0;
    mso-style-noshow:yes;
    mso-style-priority:99;
    mso-style-qformat:yes;
    mso-style-parent:"";
    mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
    mso-para-margin:0cm;
    mso-para-margin-bottom:.0001pt;
    mso-pagination:widow-orphan;
    font-size:10.5pt;
    mso-bidi-font-size:11.0pt;
    font-family:"Calibri","sans-serif";
    mso-ascii-font-family:Calibri;
    mso-ascii-theme-font:minor-latin;
    mso-hansi-font-family:Calibri;
    mso-hansi-theme-font:minor-latin;
    mso-font-kerning:1.0pt;}
</style>
<![endif]-->

<p class="MsoNormal"><span lang="EN-US">Abcde</span></p>

<p class="MsoListParagraph" style="margin-left: 21pt; text-indent: -21pt;"><!--[if !supportLists]--><span style="font-family: Wingdings;" lang="EN-US"><span style="">l<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;">&nbsp; </span></span></span><!--[endif]--><span style="font-family: 宋体;">你好</span></p>

<p class="MsoListParagraph" style="margin-left: 21pt; text-indent: -21pt;"><!--[if !supportLists]--><span style="font-family: Wingdings;" lang="EN-US"><span style="">l<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;">&nbsp; </span></span></span><!--[endif]--><span lang="EN-US">Aaa<span style="color: rgb(192, 0, 0);">aaaaaaa</span>aaaa</span></p>

<p class="MsoListParagraph" style="margin-left: 21pt; text-indent: -21pt;"><!--[if !supportLists]--><span style="font-family: Wingdings;" lang="EN-US"><span style="">l<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;">&nbsp; </span></span></span><!--[endif]--><u><span lang="EN-US">Bbbb<b style="">bbbb</b>bbb<o:p></o:p></span></u></p>

<p class="MsoListParagraph" style="margin-left: 21pt; text-indent: -21pt;"><!--[if !supportLists]--><span style="font-family: Wingdings;" lang="EN-US"><span style="">l<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;">&nbsp; </span></span></span><!--[endif]--><u><span lang="EN-US">Ccccccccccccc<o:p></o:p></span></u></p>

如果你原来只允许用户输入1000个字符，你在数据库里面只给了nvarchar(1000)，这就意味着这东西保存进去必然会被截断，而且可能连正文部分都没保存进去，这肯定是不允许的。这也解释了为什么主流html编辑器提供了专门的Word粘贴功能。

上面那段东西其实真正有用的东西也就是下面这么点：

<p><span>Abcde</span></p>
<p style="margin-left: 21pt; text-indent: -21pt;"><span style="font-family: Wingdings;"><span style="">l<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;">&nbsp; </span></span></span><span style="font-family: 宋体;">你好</span></p>
<p style="margin-left: 21pt; text-indent: -21pt;"><span style="font-family: Wingdings;"><span style="">l<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;">&nbsp; </span></span></span><span>Aaa<span style="color: rgb(192, 0, 0);">aaaaaaa</span>aaaa</span></p>
<p style="margin-left: 21pt; text-indent: -21pt;"><span style="font-family: Wingdings;"><span style="">l<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;">&nbsp; </span></span></span><u><span>Bbbb<b style="">bbbb</b>bbb</span></u></p>
<p style="margin-left: 21pt; text-indent: -21pt;"><span style="font-family: Wingdings;"><span style="">l<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;">&nbsp; </span></span></span><u><span>Ccccccccccccc</span></u></p>

所以这就是我们需要的过滤结果，接下来就看你JavaScript正则表达式有多牛了！

我主要设置了以下这些规则：

1. 去除\r\n, \n, \r

2. 去除文本开头的 和文本结尾的 

3. 去除Word的条件注释（如<!—[if gte mso 9]>）

4. 去除script, xml:*, img, meta,link, style, *:*标签

5. 将Word的抬头转换成<strong>标签

6. 去除lang属性

7. 去除或替换所有没有意义的样式标签，如mso-padding-alt, mso-margin-top-alt,horiz-align, mso-default-width, mso-zero-height等

对应代码如下：

function FilterPasteWord(str)
{
    //remove link break
    str = str.replace(/\r\n|\n|\r/ig, "");
    //remove &nbsp; entities at the start of contents
    str = str.replace(/^\s*(&nbsp;)+/ig,"");
    //remove &nbsp; entities at the end of contents
    str = str.replace(/(&nbsp;|<br[^>]*>)+\s*$/ig,"");
    // Word comments like conditional comments etc
    str = str.replace(/<!--[\s\S]*?-->/ig, "");    
    // Remove comments, scripts (e.g., msoShowComment), XML tag, VML content, MS Office namespaced tags, and a few other tags
    str = str.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|xml|img|meta|link|style|\w:\w+)(?=[\s\/>]))[^>]*>/gi,"");

    //convert word headers to strong
    str = str.replace(/<p [^>]*class="?MsoHeading"?[^>]*>(.*?)<\/p>/gi, "<p><strong>$1</strong></p>");
    //remove lang attribute
    str = str.replace(/(lang)\s*=\s*([\'\"]?)[\w-]+\2/ig, "");
    // Examine all styles: delete junk, transform some, and keep the rest
    str = str.replace(/(<[a-z][^>]*)\sstyle="([^"]*)"/gi,function(str, tag, style) {
                                var n = [],
                                    i = 0,
                                    s = style.trim().replace(/&quot;/gi, "'").split(";");

                                // Examine each style definition within the tag's style attribute
                                for(var i=0;i<s.length;i++)
                                {
                                    v=s[i];
                                    var name, value,
                                    parts = v.split(":");

                                    if (parts.length == 2) {
                                        name = parts[0].toLowerCase();
                                        value = parts[1].toLowerCase();
                                        // Translate certain MS Office styles into their CSS equivalents
                                        switch (name) {
                                            case "mso-padding-alt":
                                            case "mso-padding-top-alt":
                                            case "mso-padding-right-alt":
                                            case "mso-padding-bottom-alt":
                                            case "mso-padding-left-alt":
                                            case "mso-margin-alt":
                                            case "mso-margin-top-alt":
                                            case "mso-margin-right-alt":
                                            case "mso-margin-bottom-alt":
                                            case "mso-margin-left-alt":
                                            case "mso-table-layout-alt":
                                            case "mso-height":
                                            case "mso-width":
                                            case "mso-vertical-align-alt":
                                                n[i++] = name.replace(/^mso-|-alt$/g, "") + ":" + ensureUnits(value);
                                                continue;

                                            case "horiz-align":
                                                n[i++] = "text-align:" + value;
                                                continue;

                                            case "vert-align":
                                                n[i++] = "vertical-align:" + value;
                                                continue;

                                            case "font-color":
                                            case "mso-foreground":
                                                n[i++] = "color:" + value;
                                                continue;

                                            case "mso-background":
                                            case "mso-highlight":
                                                n[i++] = "background:" + value;
                                                continue;

                                            case "mso-default-height":
                                                n[i++] = "min-height:" + ensureUnits(value);
                                                continue;

                                            case "mso-default-width":
                                                n[i++] = "min-width:" + ensureUnits(value);
                                                continue;

                                            case "mso-padding-between-alt":
                                                n[i++] = "border-collapse:separate;border-spacing:" + ensureUnits(value);
                                                continue;

                                            case "text-line-through":
                                                if ((value == "single") || (value == "double")) {
                                                    n[i++] = "text-decoration:line-through";
                                                }
                                                continue;

                                            case "mso-zero-height":
                                                if (value == "yes") {
                                                    n[i++] = "display:none";
                                                }
                                                continue;
                                        }
                                        // Eliminate all MS Office style definitions that have no CSS equivalent by examining the first characters in the name
                                        if (/^(mso|column|font-emph|lang|layout|line-break|list-image|nav|panose|punct|row|ruby|sep|size|src|tab-|table-border|text-(?:align|decor|indent|trans)|top-bar|version|vnd|word-break)/.test(name)) {
                                            continue;
                                        }
                                        // If it reached this point, it must be a valid CSS style
                                        n[i++] = name + ":" + parts[1];        // Lower-case name, but keep value case
                                    }
                                }
                                // If style attribute contained any valid styles the re-write it; otherwise delete style attribute.
                                if (i > 0) {
                                    return tag + ' style="' + n.join(';') + '"';
                                } else {
                                    return tag;
                                }
                            });

    return str;
}

到此，你应该对这项技术有了很详细的了解了。当然具体过滤哪些东西，你还是要多实践多测试，比如前两天客户一不小心把youtube视频贴近系统里面了，于是我又过滤了object, embed, param标签。当然有了这样一个模型之后，规则的维护变得很方便，无形中降低了代码的维护成本。

最后提供一个完整的demo版本给大家下载：htmleditor_paste_filter.zip。

本文链接

在线Html编辑器粘贴过滤技术详解（一）

2010-05-29T04:43:00Z

作者：Tony Qu

最近在解决数据粘贴方面取得了不少进展，作为Html在线编辑器所必须具备的技术，在这里详细给大家介绍并提供实现参考。在研究过程中，我也确实走了不少弯路，尝试了n种方式，由于美国的PM始终觉得有些影响用户体验的东西无法接受，导致好几个提案被否定，不过收获还是很丰富的。

我现在写code喜欢需求驱动，让我们来看看这项技术的主要需求

* 能够过滤用户贴进来的纯文本数据

* 能够过滤用户贴进来的html数据（未经Html编码）

* 能够过滤用户贴进来的Word数据，并能把大部分Word格式保留下来。

* 在这一过程中尽量不要让用户知道我们在做过滤

* 不要去提示用户是否启用某种权限

本例所适用的场景为使用iframe实现的Html编辑器，而不是文本框(textarea或type为text的input）。

在研究过程中，我主要参考了tinymce、ckeditor，但最后我还是选择了tinymce的实现方法，具体原因在你看完下面这段文字后就会明白。

ckeditor的实现方式是在onpaste事件触发时，从剪贴板取出数据，处理取出的文本，然后再把处理好的文本存入剪贴板。有人说，那我能不能在onpaste中直接取消paste动作，然后自己把获得的内容放入iframe当中去，我当时就干过这事，但结果却出人意料，直接从剪贴板拿出的数据是不包括格式信息的文本，特别是从Word粘贴过来的数据，纯文本，颜色、布局等数据都不存在，这样的话，你的用户只能粘贴没有格式的数据过来，然后自己重新在Html编辑器里面编辑。但是如果让浏览器自己去做粘贴，格式信息都会保留，浏览器会自动把Word的粘贴数据转换为xml数据，放入dom中。所以为了保留格式信息，我们恐怕只能通过浏览器的标准粘贴行为的帮助实现这一点。

另外ckeditor的实现在Firefox中有一个致命的弱点，如果你要从剪贴板读写数据，你就必须提示用户自己去设置一个叫signed.applets.codebase_principal_support的权限，javascript脚本是没有权限去设置的，虽然从技术人员来看这是很正常的，但是很多产品经理无法接受这一点，至少我的产品经理是这么认为的。

以下是ckeditor获取和设置剪贴板的代码，供大家参考。

function setClipboard(maintext) {
   if (window.clipboardData) {
      return (window.clipboardData.setData("Text", maintext));
   }
   else if (window.netscape) {
      netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
      var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
      if (!clip) return;
      var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
      if (!trans) return;
      trans.addDataFlavor('text/unicode');
      var str = new Object();
      var len = new Object();
      var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
      var copytext=maintext;
      str.data=copytext;
      trans.setTransferData("text/unicode",str,copytext.length*2);
      var clipid=Components.interfaces.nsIClipboard;
      if (!clip) return false;
      clip.setData(trans,null,clipid.kGlobalClipboard);
      return true;
   }
   return false;
}

function getClipboard() {
   if (window.clipboardData) {
      return(window.clipboardData.getData('Text'));
   }
   else if (window.netscape) {
      netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
      var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
      if (!clip) return;
      var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
      if (!trans) return;
      trans.addDataFlavor('text/unicode');
      clip.getData(trans,clip.kGlobalClipboard);
      var str = new Object();
      var len = new Object();
      try {
         trans.getTransferData('text/unicode',str,len);
      }
      catch(error) {
         return null;
      }
      if (str) {
         if (Components.interfaces.nsISupportsWString) str=str.value.QueryInterface(Components.interfaces.nsISupportsWString);
         else if (Components.interfaces.nsISupportsString) str=str.value.QueryInterface(Components.interfaces.nsISupportsString);
         else str = null;
      }
      if (str) {
         return(str.data.substring(0,len.value / 2));
      }
   }
   return null;
}

以下是提示用户启用权限的代码

if (window.netscape) 
{
    try 
    {   
        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");   
    }
    catch (ex) 
    {   
        alert("If you want to do paste, please input 'about:config' in address bar, then input Enter.\n Set \"signed.applets.codebase_principal_support\" to \"true\"");
    }
}

于是我参考了tinymce的实现方式，我在看它的代码的时候特别留意到它尽然不需要权限就能在Firefox下面搞定粘贴，并且还能保留Word格式，于是就仔细阅读了其中的代码。tinymce的实现步骤在IE和Firefox下面是不同的：

IE实现

1. 在onpaste回调函数中创建一个临时的iframe，用于粘贴内容，这个iframe放在主窗口的body下面即可。

2. 在当前光标位置创建一个Range，用来保存光标位置和选中信息。

3. 让临时iframe获得焦点，执行粘贴命令，即document.execCommand(“paste”)，内容会粘贴在临时的iframe中

4. 通过innerHTML获得临时iframe中的内容并进行过滤

5. 让Html编辑器的iframe获得焦点，用之前创建的Range对象执行pasteHTML方法来粘贴过滤后的内容

6. 最后取消默认的paste动作

（临时iframe可以根据个人喜好从DOM中删除，但由于这个iframe可以在多个htmleditor之间共用，所以我的实现中仅仅改变了iframe的left, top来调整iframe的位置，而不是移除它，调整left和top的目的在于焦点移到临时iframe的时候如果Html编辑器的iframe和临时iframe不在一个视图之内，屏幕会滚动，这样会导致屏幕没有原因的闪烁。）

Firefox实现

1. 在onpaste回调函数中创建一个临时的div，这个div放在Html编辑器的iframe里面，这也是绕过权限问题的关键。

2. 保存当前光标和焦点位置，然后将光标移到临时创建的div中

3. 通过window.setTimeout设置一个回调函数在paste动作瞬间完成之后执行

4. 让paste动作执行（onpaste回调函数执行完毕）

5. 刚才设置的回调函数执行，在里面获得临时div的innerHTML并进行过滤

6. 恢复刚才保存的光标和焦点位置，并移除临时div

7. 通过inserthtml命令（execCommand(“inserthtml”)）把过滤后的内容贴到Html编辑器的iframe中。

详细代码如下：

function getSel(w)
{
    return w.getSelection ? w.getSelection() : w.document.selection;    
}
function setRange(sel,r)
{
        sel.removeAllRanges();
        sel.addRange(r);
}

function filterPasteData(originalText)
{
    var newText=originalText;
    //do something to filter unnecessary data
    return newText;
}
function block(e)
{
    e.preventDefault();    
}
var w,or,divTemp,originText;
var newData;
function pasteClipboardData(editorId,e)
{
     var objEditor = document.getElementById(editorId);    
     var edDoc=objEditor.contentWindow.document;
        
    if(isIE)
    {
        var orRange=objEditor.contentWindow.document.selection.createRange();
        
      var ifmTemp=document.getElementById("ifmTemp");
      if(!ifmTemp)
      {
            ifmTemp=document.createElement("IFRAME");
            ifmTemp.id="ifmTemp";
            ifmTemp.style.width="1px";
            ifmTemp.style.height="1px";
            ifmTemp.style.position="absolute";
            ifmTemp.style.border="none";
            ifmTemp.style.left="-10000px";
            ifmTemp.src="iframeblankpage.html";
            document.body.appendChild(ifmTemp);
            ifmTemp.contentWindow.document.designMode = "On";
            ifmTemp.contentWindow.document.open();
            ifmTemp.contentWindow.document.write("<body></body>");
            ifmTemp.contentWindow.document.close();
        }else
        {
            ifmTemp.contentWindow.document.body.innerHTML="";    
        }

        originText=objEditor.contentWindow.document.body.innerText;

        ifmTemp.contentWindow.focus();
        ifmTemp.contentWindow.document.execCommand("Paste",false,null);
        objEditor.contentWindow.focus();
                
        newData=ifmTemp.contentWindow.document.body.innerHTML;
        //filter the pasted data
        newData=filterPasteData(newData);        
        ifmTemp.contentWindow.document.body.innerHTML=newData;
        //paste the data into the editor
     orRange.pasteHTML(newData);
     //block default paste
    if(e)
        {
            e.returnValue = false;
            if(e.preventDefault)
                e.preventDefault();
        }
        return false;
    }else
    {
        enableKeyDown=false;
          //create the temporary html editor
        var divTemp=edDoc.createElement("DIV");
        divTemp.id='htmleditor_tempdiv';
        divTemp.innerHTML='\uFEFF';
        divTemp.style.left="-10000px";    //hide the div
        divTemp.style.height="1px";
        divTemp.style.width="1px";
        divTemp.style.position="absolute";
        divTemp.style.overflow="hidden";
        edDoc.body.appendChild(divTemp);
        //disable keyup,keypress, mousedown and keydown
            objEditor.contentWindow.document.addEventListener("mousedown",block,false);
            objEditor.contentWindow.document.addEventListener("keydown",block,false);
            enableKeyDown=false;
            //get current selection;
            w=objEditor.contentWindow;
            or=getSel(w).getRangeAt(0);
            
            //move the cursor to into the div
            var docBody=divTemp.firstChild;
            rng = edDoc.createRange();
            rng.setStart(docBody, 0);
            rng.setEnd(docBody, 1);
            setRange(getSel(w),rng);
            
            originText=objEditor.contentWindow.document.body.textContent;
            if(originText==='\uFEFF')
            {
                    originText="";
            }

            window.setTimeout(function()
                {
                    //get and filter the data after onpaste is done
                    if(divTemp.innerHTML==='\uFEFF')
                    {
                        newData="";
                        edDoc.body.removeChild(divTemp);
                        return;
                    }

                        newData=divTemp.innerHTML;

                         // Restore the old selection
                        if (or)
                        {
                            setRange(getSel(w),or);
                        }
                        
                        newData=filterPasteData(newData);
                        divTemp.innerHTML=newData;
                        //paste the new data to the editor
                        objEditor.contentWindow.document.execCommand('inserthtml', false, newData );                            
                        edDoc.body.removeChild(divTemp);    
                },0);
            //enable keydown,keyup,keypress, mousedown;
            enableKeyDown=true;
            objEditor.contentWindow.document.removeEventListener("mousedown",block,false);
            objEditor.contentWindow.document.removeEventListener("keydown",block,false);
            return true;
    }
}

这里的pasteClipboardData是用做onpaste回调函数的，要使用它的话，可以通过下面的代码把它加到Html编辑器的iframe的onpaste事件上。

var ifrm=document.getElementById("editor")
if(isIE)
{
    ifrm.contentWindow.document.documentElement.attachEvent("onpaste", function(e){return pasteClipboardData(ifrm.id,e);});
}
else
{
    ifrm.contentWindow.document.addEventListener("paste", function(e){return pasteClipboardData(ifrm.id,e);},false);
}

这里的filterPasteData函数就是我们专门用来做过滤的函数，具体要怎么去过滤纯文本、html及Word数据将在下一篇讲解。

本文链接