Kissy笔记 一、前言

缘由

最近想要物色一套前端开发组件。jQuery确实很好用，基于jQuery的插件倒也不少，但是大多比较散，不成统一体系。有做成一套体系的组件，要不就还不成熟，真正用在项目中恐怕维护起来有无穷无尽的麻烦；要不就是稍微成熟一些的就要收钱了，毕竟写一套这东西费时费力，人家要些回报也是合情合理的。

眼光放开阔一些的话，可供选择的还有dojo、YUI、Extjs。不过dojo这个庞然大物太复杂了，掌握起来也非一朝一夕之事；YUI文档太少，啃官方的英文文档也不轻松；Extjs，东西倒挺好，唯一的问题还是在许可协议上，要收钱的。找来找去发现了淘宝前端团队做的Kissy项目，初步的印象是小巧精致但功能强大。据说设计思想参考了YUI，不过优势在于提供中文文档且前端组件比较符合中国国情。

一个js框架应该有什么

正式开始之前想先来谈谈我对js框架的理解。一个js框架，主要包含以下一些功能：

1. JavaScript语言增强

因为JavaScript语言设计上的问题，缺少了一些本应该内置的常用特性，比如trim方法。另外，JavaScript在面向对象编程方面和主流的面向对象编程语言不大一样，有些js框架还提供了一些机制，使开发者可以很容易地使用js进行面向对象的程序开发。

2. 屏蔽浏览器差异

因为各浏览器内核在实现上的差异，为了保证程序在不同的浏览器上行为一致，经常需要为不同的浏览器写一些处理逻辑。js框架提供了这样一个中间层，使得开发者可以用统一的方式写出能运行在不同浏览器上的程序。各浏览器的事件模型在实现上是有些差异的（尤其是IE系列），js框架就需要对事件模型做一些相应的修正。

3. 实用的工具方法

从这一层意思上来看就是js框架提供了一些扩展的函数库，对于常用的操作，开发者不用自己动手写代码去实现了。ajax就是一个典型的例子，浏览器对xhr的实现有差异，另外，使用浏览器原生的xhr开发ajax程序还是比较繁琐的，一般的js框架都提供了简化ajax调用的机制，根据不同的需要只需调用一个函数就可以了。

4. dom节点的选取和操作

这个应该是jQuery的招牌功能了吧，jQuery的名字或许正是源自于此。jQuery提供了非常丰富的选择符，合理组合使用的话很容易就能选取想要的dom节点。选取到dom节点之后，对节点dom树的操作以及对dom节点各种属性的读写也是js框架的必备功能。

5. 动画特效

这个就不用多说了吧，借助js框架，实现动画效果已经是很简单的事情了，以前看起来很炫的js动画，现在感觉已经弱爆了。另外提一句，拖放操作还是一门跟高深的学问啊。

6. 各种UI组件

个人认为这是各种功能中最复杂，最耗精力的一个。各种各样的UI组件，不但要求有各种行为，而且要有外观，有样式。这是一个HTML、CSS和JavaScript紧密结合的东西。要实现一个通用的UI组件不但要考虑到各种各样的使用场景，并且还有一大堆浏览器兼容性问题需要解决。另外，大量UI组件需要有机整合在一起，对js框架的模块化依赖性管理和加载也有更高的要求。是否提供了模块化机制也是应用级js框架区别于工具级js框架最明显的特性。

jQuery的优雅之处

最先接触的jQuery，至今仍是最常用的js框架。jQuery之所以如此流行，在于它在功能和简单易用间做了很好的权衡。要使用jQuery，需要掌握的概念是很少的。一切的中心就是一个全局变量"jQuery”，还有它的简化别名”$“。
jQuery是一个选择器，用来选择dom节点；
jQuery是一个包装器，用来把dom节点，甚至是字符串包装成jQuery对象
jQuery是一个命名空间，jQuery提供的实用工具函数都以静态方法的形式存在于这个命名空间下。
另外一个需要掌握的概念就是jQuery对象。这是一个类数组对象，提供了非常丰富的API方法，几乎可以对一个dom节点进行你能想得到的任何操作。jQuery没有提供完备的面向对象机制，因为使用jQuery基本上只需围绕jQuery对象展开操作就可以了。
最典型的jQuery使用场景就是在选择一个dom节点并借助包装它的jQuery对象进行操作，另外jQuery的链式操作风格也可以相当程度地减少编码。
jQuery的插件机制也非常统一，基本上会用一个插件，就会用其他插件了。