失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > KISSY基础篇乄KISSY简介

KISSY基础篇乄KISSY简介

时间:2021-10-20 13:44:43

相关推荐

KISSY基础篇乄KISSY简介

KISSY简介

今日任务:了解学习有关Kissy的一些知识,以便于后续的学习

一、相约KISSY,必先了解

KISSY是一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。除了完备的工具集合如 DOM、Event、Ajax、Anim 等,它还提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的JavaScript框架,KISSY为移动终端做了大量适配和优化,让程序在全终端均能流畅运行。

一言以蔽之:KISSY是淘宝的一个开源的JavaScript库,它小巧灵活,简洁实用,使用起来让人感觉愉悦。

它支持的浏览器包括:IE 6+,Firefox 3.5+, Safari 4+, Chrome 2+, Opera 10+。

二、相约KISSY,必有其因

KISSY作为国内一个完全自底向上开发起来的框架,经历过淘系各种复杂项目的考验,在以下方面具有优势:

(1)跨终端

作为生长于淘宝/天猫的前端JavaScript类库,在全网数以万计全终端的硬件设备中运行测试,KISSY在我国互联网环境下各个终端、浏览器、移动设备中具备一流的健壮性和兼容性。

(2)模块化

KISSY采用高度的模块化设计,通过加载器按需加载。模块高度解耦,并具有极强的扩展性。核心组件完整齐全,接口一致。适合多种应用场景,尤其适用团队协作的大型项目开发。

(3)高性能

库的实现的基本要求就是兼容性和性能,KISSY在核心模块比如Node、Event、Base 上做了极致的性能优化,特别是选择器性的读写效率,在各种终端里都达到很高的性能体验。KISSY在面向对象的设计上秉承一贯的轻量级,保持轻巧高速的性能。

(4)使用简单

KISSY核心功能的设计遵循二八原则,保持最常用API的精简子集,自动探测终端主动适配,可以非常方便开始你的项目。清晰的面向对象功能以及轻松的架构性,更增强了KISSY 的易用性。

三、相约KISSY,必知架构

从模块作用和外观上划分:

Seed:KISSY 种子文件,包含基础的面向对象支持、模块加载器、Lang增强、UA,所有 KISSY应用必须载入种子文件。种子不包含DOM、Node等常用功能,需要开发者按需引入。

Components:颗粒化的功能单元,是比较常用的模块,二八原则中的20%,这些是官方提供的可靠的模块。

Widgets:组件,分为官方提供和非官方提供。非官方组件由第三方开发,存储于Gallery 内,官方组件和 Components 组件一样,直接KISSY.use('modName')来载入。

从模块功能上划分:

Seed:种子所包含的最小集合

Core:核心模块

Infrastructure:代码基础设施

Components:其他模块单元

从 KISSY 1.4.0开始,将不再提供kissy.js,只提供seed.js,目的是强制用户按需加载,避免无用组件的载入,尽可能的减少请求的体积。因此,开发者需要熟练掌握核心组件的使用。其中,Seed中的模块无须手动引入。

开发者是否需要关心子模块?

不需要!除非你非常非常了解KISSY所有模块间的依赖关系,否则不推荐直接调用子模块。

原因:从开发的角度,模块被拆的粒度更小,比如dom和event,其实是由这些子模块构成:

根据硬件环境的不同,KISSY会选择性加载所需模块,比如dom/ie模块,显然不是为了Mobile准备的,再比如event/shake模块,显然在Mobile设备中也不会载入,再比如IE<9下会补充加载event/hashchange。也就是说,dom和event模块是和环境强相关的,作为开发者,不必去关心这些模块什么情况下怎么载入,只需了解KISSY已经为你处理好了硬件探测,一定会加载正确的最小模块集合。

四、相约KISSY,必知其史

KISSY诞生于10月26日,当初只是一个结构精巧的编辑器组件。但随着淘宝网业务的增长,开始出现越来越多这种组件,包括Switchable、Overlay、Calendar、Slide、Waterfall。自然地,游离于功能代码之外,基础的DOM、Event、Anim和Ajax被抽象出来,形成了KISSY 首批宝贵的基础代码,此时KISSY为1.1.0版本。并且切合当时淘宝网的日常需求,制定当年的KISSY RoadMap。至此,KISSY项目正式步入正轨,并形成了首届开发团队。

有了团队的护航,KISSY代码量激增,并很快发布了1.1.5版本。最大的改进在于从core中独立出了seed模块,并增加了loader。至此,KISSY确立了其基本的模块化原则和方向。在当年,还不存在AMD和CMD规范,YUI3的模块规范也步履蹒跚,在淘宝网业务激增的情况下,KISSY开始探索实践适用于电商网站类高速迭代、快速变化、团队协作的模块规范。同时,KISSY 还与时俱进,发布了node版本(nodejs-kissy)。

经历了底双十二的疯狂,KISSY启动了1.2分支,模块化实践更进一步,组件数量和质量都在迅速提升。1.2版本提供了健壮的core部分,并且开始尝试社区化运作,至此,KISSY作为一个完备的Web前端框架,已经具备“类库”的基本形态:

底层基础:语言层面的特性和核心的工具集

上层建筑:第三方组件代码库

社区互动:参与共建的机制

同时,KISSY在淘宝网各个角落的运行测试和不断修正,为淘宝网各个产品提供了统一的、完备的性能优化和团队协作最佳实践,带领淘宝网在用户体验、效率、性能上不断追求卓越。

在之后,KISSY 1.3.x已在酝酿之中。并且1.3rc版很早就参与到了卖家店铺装修、搜索系统和商品详情的重构改造,经过这些复杂业务场景的锤炼,1.3.0发布,至此基础架构已经稳定,并且在第三方安全、构建工具上有了不少新的产品。

由于业务和KISSY源码增长过快,KISSY文档的更新很难追平代码的更新,一定程度影响KISSY传播的精度。KISSY核心小组在1.4.0版本发布之时重构了文档。

同时,随着移动终端的兴起,KISSY1.4.0也在面向多终端兼容和性能上做了大量的优化,尤其是CSS3选择器速度超越zeptojs。在跨终端特性上主动探测,保持最简单的使用方法,同时兼顾性能最优。所以,KISSY没有专门的Mobile版本,KISSY本身就能高效的适配Mobile。至此,KISSY在跨终端、模块化和易用性方面都在努力做到极致。这就是你现在看到的KISSY:Keep it Simple & Stupid! Yeah!

如果觉得《KISSY基础篇乄KISSY简介》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。