第1章 Hello Kissy

最新推荐文章于 2021-12-12 20:53:26 发布

黑哒哒的盟友

最新推荐文章于 2021-12-12 20:53:26 发布

阅读量706

点赞数

分类专栏：淘宝前端javascript框架 Kissy 基础使用文章标签：终端前端开发解决方案 kissy前端框架

淘宝前端javascript框架 Kissy 基础使用专栏收录该内容

14 篇文章

订阅专栏

什么是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的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就可理解。