听蛙居 – 帅青蛙的工作与生活

日志首发这里，这里仅做备份。

目前网上有很多JS的框架，有美观的，有易用的，有灵活的，这些无非是让用户使用JS时更加的顺手。因此，对于没有自己写JS习惯的人来说，可能接触最多的就是目前比较常用且简单的几个框架，如：ExtJS（前身为YUI），JQuery。
对于经常自己写JS的人说，可能有时会接触这些框架，但高深的运用，用得比较多的我想应当是prototype框架，相对来说较成熟的底层，扩展性也不错。

但我们今天推荐的不是以上这几个，而是另外一个灵活且强大的底层JS框架，主要是针对有能力自己开发JS扩展的人员。

Mootools，当仁不让！ 当然，相信应当有不少人听过这个框架的名称。

在推荐这个框架之前先说说前面几种框架的大多使用场合，这样才有一个比较好的对比。

ExtJS，前身为YUI，由Yahoo开发的一套UI JS框架，或者叫组件更合适。对界面元素，特别是表单元素的细节及样式处理得十分炫丽。在多数的场合里，该框架担当着界面美化师的角色，为平淡无奇的HTML表单元素提供了华丽的外衣。因此，它的主要用途应当是用在WEB Apps的美化工作，对于WEB页面使用较少。如果真要说优缺点的话，那这个框架的优点就是美观；缺点就是使用范围太小，从而限制了它的用途。

JQuery，应当是目前网络中使用得最多的框架。由于本身就是为了易用为出发点而设计，因此大多数的方法都是可以即时实现需要的效果。因此，不管是JS的初学者还是高手，只要知道使用方法如何调用及设置，就可以很方便地实现很多很酷很炫的效果。该框架目前已具备较完善的方法集合，如TAB标签，SlideBar及目前炒得火热的Ajax。但该框架有相对较完善的效果注定了这个框架的庞大，易于使用就注定了方法的定形，另外可扩展性不高；虽然有着种种不如人意的地方，但确实给在JS方面云里雾里的用户提供了强大的技术支持。

Prototype，曾经一时的火热，目前不知道情况如何。它的出现，为开发人员提供了一个良好的协作环境，可以基于共同的底层实现方法的扩展，自由度及灵活性得到不小的提高。但底层方法较死板，相对限制较多，但总体来说，它解决了上两种框架的无法自定义扩展的问题。缺点就是对JS技能有要求，想实现一些效果需要自己码代码。

现在重点讲讲这个Mootools的框架，就青蛙个人而言，就目前为止还没碰过这么灵活的框架。

Mootools为mad4milk团队开发的JS框架，力求以最少的代码实现最灵活的底层，很明显，他们的目标就是这个。从参考文档来看，核心的方法就只有几个，包括Core类包，Class类包及Element类包，但已包括多个应用场合，如浏览器的Browser，本地的Natives，必须的Utlities及请求的Request等，另外还附带了一些简单的动画效果，如Fx的Tween，Transtions，CSS等，可见框架的涉及面广。

除了框架核心代码量少外，Mootools还有一个对有OOP代码的用户来说很容易上手的功能，事实上，使用Mootools的要求就是用户也要有OOP能力。在Mootools里有着OOP的继承，实现接口等，甚至引入了命名空间的概念；与传统的OOP比起来，它的写法有些不一样，但又十分相似，比如接口的一种写法：

1
2

var newClass = new Class({initialize : function(){ //todo } });   //创建类
newClass. implement (//接口实现的方法);  //对象实现接口

与Java或者C#之类的public class newClass implements IFace{}写法比起来，是不是很像？

如果没接触过传统的OOP写法也没关系，依靠JS本身的写法写继承及实现接口也可以，如：

1
2

var iface = new Class({ //接口实现 });
var newClass = new Class({  implements:iface, initialize:function(){ //todo...} });

一样也很方便，可见在编码习惯这方面，Mootools处理得还是不错的，让不同的使用者能保持自己的编码风格。

当然，这些仅是刚开始，利用这个框架开始编码的开始，具体的有哪些扩展及写法，不同的组合自然有不同的效果，篇幅有限这里不多做说明。

说了它这么多的优点，对于缺点我想大家也应当自己总结出来了，就是对使用者技能要求较高，最起码得了解JS的OOP写法。如果只是普通的运用，这个框架有点像”杀鸡用牛刀”的感觉了。不过，仁者见仁，智者见智吧。

如果你会自己写JS，如果你想用框架写JS的高级扩展，如果你想让自己的JS水平更上一层楼，建议你试试这个Mootools，应当不会让你失望的。

官网地址：http://www.mootools.net/

Mad4milk官网：http://mad4milk.net/

帅青蛙
2009年11月04日

关键字：javascript, mootools, 框架