当前位置: 首页 > 工具软件 > kissy > 使用案例 >

第1章 Hello Kissy

潘凯
2023-12-01

什么是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>

PSJs有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数以万计的插件数量上市没的比,但日常开发常用的组件基本上都有,比如选项卡、日期选择、异步上传、图表、表单校验、弹出层、编辑器等。

 类似资料: