Mocha UI，Web 2.0时代的用户界面库

 

前些日子回顾了一下这几年做项目的一些技术框架。就用户界面技术而言，一些项目采用了JQuery或Prototype，个别项目根据用户要求使用了Flex，YUI或ExtJS，但多数项目没有用任何JavaScript框架。本来希望定一个范围，以便安排后续培训，结果各个项目组都有自己的喜好，很难达成一致。

支持JQuery或Prototype的主要理由是下载量小，对网页速度影响不大，而且和其他的JS技术不冲突（这个对于维护发包来的维护项目很有用），学习起来也不难。

支持Flex，YUI或ExtJS的理由基本上是功能全面，成熟度较高。页面速度慢了一些，做起来也比较繁琐，但界面效果好，很合某些客户的胃口。

还有人对以上这些都不支持，说要研究一下GWT（GoogleWeb Toolkit），据说可以用Java写Web界面，编译成JS，这样就不用学JS了。现在用Struts或JSF，偶尔需要某个效果到网上找一下，也过得去。等HTML5出来后，说不准就重新洗牌了。

会开到最后勉强决定把标准技术暂定为JQuery。培训和使用负担不大，但至少可以结束使用山寨JS了。这个结果对公司而言是必要的。尽管软件技术进步很快，但时刻要有手头的标准，这样才能避免浪费资源，提高团队的沟通和工作效率。然而对我自己而言，需要一个更好的答案。

事有凑巧，我正在做一个开源项目。本打算用JQuery，可惜一直没找到合适的UI套件（JqueryUI似乎可以，不过不太成熟，我把几个布局组件套起来用，在IE8和Firefox3里尺寸和位置不一致，外观也不如ExtJS漂亮）。于是我随手搜索“betterthan jquery”，结果找到了MooTools，之后找到了基于MooTools的Mocha UI。

MooTools压缩之后只有20K多一点，功能堪比JQuery，而且是面向对象的设计，给我的印象不错。缺点是：基本不能和其他JS库共用。因为它把基本的JS对象都给包装了，好处是提高了抽象级别，以及跨浏览器的通用性，坏处是别人的JS代码不知道自己调用的已经不是原始的JS对象了，可能有潜在问题。不过对我来说这不是问题，我的项目我说了算。

Mocha UI给我的第一印象不太好，在IE 8里弹出窗口的上下边框不见了。后来下载了SVN里的最新未打包代码，发现IE8也支持了，但属于临时解决方案，在例子中有针对IE8的HACK代码，据说后续会整合到库文件中。

在之后的使用中，逐渐发现这个框架非常容易上手。通过修改例子，很快对框架的功能有了基本了解。例子程序的功能很全，绝大部分时候只要修改HTML，对应CSS里面特定的类，就可以把它变成另外一个应用程序界面。对于我等懒人，实在太好了。

我觉得界面的缺省效果和ExtJS在伯仲之间，不过比ExtJS快多了。当然了，你最好还是自己尝试一下（http://mochaui.com/demo/），才知道味道如何。