第1章 Hello Kissy

什么是KISSY

KISSY是由阿里前端团队发起并维护的国产javascript框架，在阿里网站比如淘宝网、天猫、聚划算中大量使用，经过近五年的发展（KISSY诞生于2009年10月26日），已经是比较成熟的解决方案，也是为数不多的国产javascript框架。

为什么推荐使用KISSY

说到javascript框架，jquery是绕不开强大的存在，很多同学都说jquery多好啊，干嘛折腾kissy？

jquery与kissy不是一个层面的javascript框架，jquery更像是工具集，包装了前端开发常用的DOM、Event、Io等，三四年前使用jquery进行网页开发，那叫得心应手，但现在有点捉襟见肘，因为web应用交互逻辑复杂度急剧膨胀，比如手机淘宝内的web页面渲染和交互完全依赖js，很容易写出几千乃至上万行的js代码，维护是巨大的挑战。

有同学就说了，我可以使用requirejs组织我的jquery代码，可以网上找需要的jquery插件，没有的话我还可以抽离出jquery的插件，我可以使用yoeman建立前端工作流...

假如有一个框架包含了完整的工作流和解决方案呢？这就是kissy！使用kissy，你只要专注于业务代码的编写即可。

kissy标榜的模块化、跨终端、简单易用、丰富UI，在本系列教程中一一呈现。

kissy的适用场景

首先，kissy非常适合web页面开发，特别是电子商务网站。

淘宝网、天猫数以千计的业务页面和活动页面，足以证明这一点，其中不乏像淘宝首页、淘宝详情页、淘宝搜索页等轻松过亿PV的网页。

其次，kissy也适合pad端、手机端页面的开发。

kissy包含了常用的触控事件和手势，也有常用的滚动组件等，唯一的问题，1.4.X的kissy的seed体积有些大（相对于业界的无线框架，这个问题即将在kissy5.0中解决）。

为什么明河写这个系列的教程

kissy一直让人诟病的问题是文档写的不好，其实kissy的api文档是很详细的，问题是没有系统的kissy知识点讲解。

所以明河在写了这个系列教程，希望通过系统完整的讲解，能够帮助开始使用或打算使用kissy的同学玩转kissy。

kissy的学习资源

• 官网
• kissy小组项目

任务

系列教程中出现 Kissy表示是框架名称，KISSY表示全局变量KISSY，kissy表示kissy的github仓库。

动手玩Kissy

引用kissy种子文件截止目前，kissy的最新版本是1.4.7，推荐使用该版本。

<script src="//g.alicdn.com/kissy/k/1.4.7/seed-min.js" charset="utf-8"></script>

seed.js，kissy的种子文件,包含了最关键的模块加载器,会引入全局对象KISSY（这是kissy唯一注入的全局变量，不推荐添加额外的全局变量，万不得已可以挂载在KISSY对象下）。

PS：之所以不加入 http://，是为了保证对https页面的支持。

Hello Kissy

目标：向一个DOM容器打印一行 Hello Kissy！文字。

假设有如下容器：

<p class="J_Wrapper">我是调皮的容器</p>

PS：Js有DOM操作逻辑，我们需要在DOM上加个hook-钩子，标识该节点有Js逻辑存在，J_Xx的形式，这是良好的编码习惯。

Jquery版实现：

$('.J_Wrapper').html('Hello Kissy！');

Kissy版本的实现：

//使用node模块操作DOM
KISSY.use('node',function(S,Node){
    //使用all方法可以获取指定选择器节点
    //可以理解为Jquery的$方法
    var $ = Node.all;
    $('.J_Wrapper').html('Hello Kissy！');
})

Kissy版本的代码相对于Jquery版本的代码，多了个KISSY.use() 的包裹。

KISSY.use() 到一下章讲模块加载器时，会重点讲解，现在只要知道是使用指定功能模块的意思。

我们想要操作DOM，就要使用Kissy的Node模块，Node模块可以理解为简化版的Jquery（在DOM操作的api上基本接近）。

Kissy的第一个核心思想：按需加载 ,也是前端性能优化的重要原则。

在我们的demo中只有DOM的操作，但Jquery默认会有ajax方法等，这些功能在本demo中并不需要，有所浪费,而Kissy的版本不存在该问题。       

任务

1.Jquery有个经典常用方法：$.ready()。请寻找Kissy中相似功能的方法。

2.推荐阅读一个很好地kissy入门教程：http://demo.kissyui.com/tutorial/ 。

KISSY 整体架构

Kissy是由三个部分组成的：Seed、Core、Components。

Seed

Seed是种子，即上一节的seed-min.js，Seed的核心是Loader（即模块加载器），所有的功能模块或Ui组件都是在Seed上开花结果，早期的Loader遵循的是自创的KMD规范，现在遵循的是CMD规范 ，但在API上又有些差异，比如Kissy模块定义方法不叫 define ，模块定义方法包裹是比较讨厌的地方，看着不爽，后面明河会介绍写出来的代码如何近似于 NodeJs 模块代码风格。

Loader会是系列教程讲解的核心，掌握了Loader，相当于已经推开了Kissy的门，后面处处是风景。

Seed还包含lang（工具模块，比如判断变量是否是数组等）、ua（终端判断，写hack和移动终端判断逻辑会用到），这二个部分非常简单，翻翻API就可理解。

Core

Core包含Kissy的核心功能模块，比如非常常用的node（DOM操作）、io（ajax请求）、event（事件操作）、base（基类）等，很多功能模块的api非常像Jquery，熟悉Jquery的同学，上手毫无压力。

比较难且重要的模块是base与promise，base作为基类，在抽象出组件或通用方法时，非常有用，也是Kissy组件风格的本源，必须掌握。

promise是promise规范的实现，异步编程优化的优秀工具，已经融入到io操作中，所以也非常重要。

Components

Kissy坐拥非常丰富的组件，当然跟Jquery数以万计的插件数量上市没的比，但日常开发常用的组件基本上都有，比如选项卡、日期选择、异步上传、图表、表单校验、弹出层、编辑器等。