Kissy学习教程

初识kissy初识kissy 一、什么是kissy? 首先,kissy 是一个由国人开发并开源的js 框架; 其次,kissy 是一个非常容易上手的js 框架; 再次,kissy 是一个巧灵活、简洁实用的js 框架; 最后,kissy 是一个融合了YUI3 先进编程思想和jquery 巧妙API 设计思想的js 框架。 kissy 由淘宝UED 开发和维护,代码质量和更新速度都有保证,可以大胆的在项目中使用。 kissy 很容易上手,同时可以大大提高你的前端开发效率! kissy 虽然有API 文档,但是没有一个完整的上手指南,单纯对着索然无味的API 文档,学习 兴致自然大减,这就是为什么明河写此系列教程的原因,明河不会对所有API 进行讲解,只 是通过更友好的说明和更形象的实例,引领朋友进入kissy 的世界。 在明河发布此系列教程前,正好kissy 更新到1.15(最新的稳定版,建议使用),教程的讲解 也是针对1.15 版展开。 二、kissy 适合的人群 1、厌倦在一堆英文文档上找答案; 2、向往敏捷开发前端之道; 3、有js 基础,至少了解js 面向对象的写法; 4、最好有用过类似jquery、YUI 或ext 等类库,上手会更快; 三、学习kissy 前的准备 1、猛击此处进入并收藏kissy 的API 文档; 2、猛击此处进入淘宝UED 博客(kissy 的最新资讯可以在UED 博客上看的到); 3、kissy 的代码托管在Git 上,猛击此处进入下载最新版本的kissy; 4、进入并收藏乔花主笔的Getting Started KISSY5、明河将不断发布kissy 的教程和心得,给力的朋友可以收藏下RIA 之家,明河拜谢^_^。 四、关于kissy 的介绍视频 1、玉伯大大的Into KISSY2、Thinking KISSY3、拔赤大大的kissy 简介 五、kissy 源代码包目录说明 1、kissy 的下载: 进入http://github.com/kissyteam/kissy,然后点击左上角的下载按钮: (git 默认语言为英文,你可以点击头部的切换语言按钮,转成中文。) 2、完整的kissy 代码包结构: build: 构建好的发布文件 docs: API 文档 src: 源码、测试等开发资源 third-party: 第三方库 tools: 打包压缩等自动化工具 六、kissy 的代码结构 1、kissy 的项目总览: 上图来自拔赤大大的kissy 简介。 2、kissy 核心代码结构: 上图来自玉伯大大的Into KISSY七、明河结语 以上内容也颇为丰富,不必一一细看,通览即可,关键是对kissy 有个总体的印象。 直到现在明河还未写一行kissy 代码,别急,好戏,接下来才开始! “Hello World”,多么经典的一句话,作为所有编程语言的起始阶段,明 河也以“Hello World”作为kissy 正式教程的开篇。 一、新建个kissy 测试项目 明河使用的IDE 为dreamweaver cs5,调试使用firefox 及其firebug。 1、新建个名为”ks”的站点 2、将kissy 的源码包(如何下载,请点此进入第一篇查看)复制到站点 3、将源码包的名字改成“kissy”4、新建个“day-2.html”作为测试页面 在实际的项目应用中并不需要 kissy 的源码包下的所有文件,只留下 “build”文件夹,甚至只留下核心的“kissy-min.js”即可。 二、在页面中引入kissy 1.1.5后引入kissy 库有二种方案: 、直接引入”build”文件夹下的完整的”kissy.js” 压缩版的 为”kissy-min.js”,压缩后的大小为42KB 左右,比jquery(压缩版 71KB)还要精巧。 2、引入“seed-min.js”(只包含kissy 核心),大小为9.5 KB,通过新的“loader”功能按需加载模块 seed 模块是1.1.5 后从core 分离出来的,loader 功能的实现,使用户不必为了简单的交互任 务,而引入全部的kissy 库,异步加载脚本,用户根据自己的需求加载所需要的kissy 组件, loader 提供的是一种便利的颗粒化加载控制,这无疑是一种非常优雅的代码组织方式(借鉴 于YUI3)。想要了解kissy 的loader 设计,请猛击这里。 明河推荐严重推荐使用第二种方案。教程中也是使用第二种方案。 三、在页面中引入kissy 的base.css kissy 的base.css 包含CSS Reset(重置标签的默认样式)、Common(通用样式)、Grids(布局 样式) 1、为什么引入base.css? 1)kissy 的base.css 提供一套普适通用的基础样式 2)减少由于标签的默认样式引起的各种问题 3)基于最新主流浏览器 4)适应中文 5)语义化,通俗易懂 2、如何引入base.css?
这是一个用于测试的层

Event.add('#demo3','mouseover mouseout',function(ev){ if(ev.type 'mouseover'){//鼠标划过,添加划过样式 S.DOM.addClass('#demo3','demo3-over'); }else if(ev.type 'mouseout'){//鼠标移开,移除划过样式 S.DOM.removeClass('#demo3','demo3-over'); //是不是觉得上述写法很烦琐?之后的教程明河会说道将上述代码用1行代码搞定! 利用ev.type的值来判定当前是什么事件,从而确定是添加样式还是删除样式。 target 与currentTarget 有什么区别呢? 这是一个很经典的问题,target 与currentTarget 的指向大部分是一样的,但有一些情况二者 指向是不同的,还是用一个例子(参见实例6)说明:
  • 测试1
  • 测试2
  • 测试3
  • 测试4
Event.add('#demo6','click',function(ev){ alert(S.DOM.text(ev.currentTarget)); alert(S.DOM.text(ev.target)); 请留意二个弹出的对话框内容是不一样的!再进行下比较,我们可以很容易的得出一个结论:currentTarget 永远指向监听事件的目标对象,实例中指向id 为demo6 的对象,而target 是指向触发事件的对象,实例中是id 为demo6 的ul 下的li。原因在于javascript 事件的冒 泡机制(具体的明河就不展开讲,与本教程关系不大)。 (几个方法留待高级篇再讲解) 三、取消事件监听 取消事件监听比较简单,来看实例2:

先放出demo,再上教程。 点此下载 KISSY DOM模块子模板和方法众多,但又很重要,最好的情况是全部熟练掌握,当然一 开始学是不可能全部记住DOM 的方法,这里按明河的理解分为三个优先级。 以下三个是必须掌握的: selector: CSS 选择器,关键方法:get、query dom-class: class 属性相关操作,关键方法:addClass、removeClass、hasClass dom-attr:通用属性操作,关键方法:attr、removeAttr、val 、text 以下三个子模块是次掌握的: dom-style:样式操作,关键方法:css、width、height、show、hide dom-traversal:遍历操作,关键方法:parent、children 、next、prev dom-create:创建操作,关键方法:create、html 以下二个模块可最后掌握: dom-offset:位置操作,关键方法:offset dom-insertion:插入操作 dom-data:扩展属性操作 其中明河提到的关键方法是在日常操作中非常常见的,推荐熟记。 (明河不会讲解所有的方法,只讲解关键方法和难理解的方法) 1、从KISSY.get 说起 DOM.get 极其常用,用于获取符合选择器的第一个元素,如果不存在所选择的元素,返回空。 看示例中的step 1:获取id 为“menu”的拆合菜单元素 var menu KISSY,这点明河在日后的教程中不再重复说明。)KISSY 除了get,还有名为one(隶属于node 模块)的方法也是用于获取合选择器的元素, 也非常常用,关于二者的区别将在讲解node 模块时说明。 2、KISSY.query 与KISSY.get 的区别 KISSY.query 用于获取符合选择器的所有元素,不管所选取的元素是几个,返回的都是一个数 组,KISSY.query 与KISSY.get 的区别是KISSY.query 用于选取多个元素,而KISSY.get 只能选取一 个元素。 看示例中的step 2:获取class 为“menu-item”的li var menuItem S.query("#menu.menu-item"); 既然是数组,自然带有length 属性,所以可以获取选取的个数,比如: alert(menuItem.length); 留意get、query 方法不是隶属于DOM 命名空间,而是直接隶属于KISSY 命名空间,比如: KISSY.get(“#menu”)而不是KISSY.DOM.get(“#menu”)。 3、KISSY.query KISSY.get第一个参数 css 选择器的说明 默认情况下,KISSY 支持的css 选择器是非常有限的(为了保持核心库的小巧),仅支持 #id tag.class 常用形式,无法使用after、not 等高级的选择器。 kissy 的强大在于其优良的扩展性,kissy 有个“sizzle”模块,当加载了 sizzle 模块时,KISSY jQuery支持的所有 CSS 选择器,具体请参考:Sizzle Documents,英文的,先凑合着看, 明河讲到sizzle 的时候会讲解一个关键好用的选择器。 4、DOM.addClass 和DOM.removeClass 这是一组非常常用的方法,顾名思义用于添加样式和删除样式。 还记得上一篇教程中的第三个例子吗? 目标对象同时监听多个事件: Event.add('#demo3','mouseover mouseout',function(ev){ if(ev.type 'mouseover'){//鼠标划过,添加划过样式 S.DOM.addClass('#demo3','demo3-over'); }else if(ev.type 'mouseout'){//鼠标移开,移除划过样式 S.DOM.removeClass('#demo3','demo3-over'); 明河曾经说过,用一行代码搞定颜色切换,来看代码:Event.add('#demo3','mouseover mouseout',function(ev){ S.DOM[ev.type 纯属技巧,可读性不高,不推荐使用。5、DOM.attr 与DOM.removeAttr 很好理解的一组方法:添加属性和删除属性。 关于这部分,文档过于清晰,明河不再累述。 要留意的是属性不存在时,返回的是undefined 而不是null。 6、DOM.val 和DOM.text 这组方法也非常容易理解:是对元素value 属性和text 文本值的处理。 无值时,返回“”。 7、DOM.show 和DOM.hide 一个是显示符合选择器的所有元素,另外一个是隐藏符合选择器的所有元素,也是非常常用。 var nextMenu DOM.next(ev.target);DOM.show(nextMenu); DOM.hide(nextMenu); 8、DOM.css 获取和设置符合选择器的元素的样式值。 var nextMenu DOM.next(ev.target);var display DOM.css(nextMenu,'display');这里补充说明一点 val、text、css、width、height 等类似的一批获取和设置一起的方法,获 取时只获取第一个元素的相应的值,尽管你的选择器是包含多个元素。 9、DOM.width 和DOM.height DOM.width 获取/设置元素宽度;DOM.height 获取/设置元素高度。 10、明河结语 至此,DOM 基础篇结束,DOM 中最常用的几个方法都介绍过了,DOM 基础+Event 事件基 础已经足以完成类似拆合菜单、多级导航等简单的交互任务。 建议朋友们演练下不看明河的示例代码,自己动手能否做出一个拆合菜单。 有没有发现DOM 的API 风格和jquery 极其相似?如果你接触过jquery,那么上述方法看到 名字其实就会明白其含义。API 的语义还是非常清晰的。 下一篇教程继续讲解DOM,加深点难度。 在上一篇的教程中,明河使用 KISSY.DOM 的常用方法制作了一个拆合 菜单,同时也演练到了几个常用方法,比如 addClass/removeClass、 attr/removeAttr、show/hide 拆合菜单还远远不够完美,比如缺少动画,代码不够优雅,通用性太差等,再以后的教程中还会继续完善拆合菜单,今天先继续讲解 kissy 的dom方法。起始代码 (function(S){ S.use('core',function(){ var Event })(KISSY);还是以拆合菜单为例,来演练dom剩下的方法(去掉了拆合实现代码)。 拆合菜单 jquery jquery 插件 jquery 教程 jquery 与ajax flex flex 实例 flex 教程 javascript javascript 资源 javascript 教程 浏览器 拆合菜单的html 代码如下(做了简化处理): 由于将接下来的demo 中将经常用到拆合菜单节点,所以先获取赋值给menu 变量: //拆合菜单节点var menu S.get("#menu");demo1:dom-traversal 模块中的 parent children、prev、next四个方法演练 弹出的是”content”,可以使用firebug 查看下其父节点的id 印证下。 //获取拆合菜单的父节点的idEvent.on('#demo1-1','click',function(evt){ var menuParent DOM.parent(menu);alert(menuParent.id);}) children 方法返回的结果集可以是多个节点(存在length 属性),而parent、prev、next 就只 有一个(不存在length 属性) //获取拆合菜单的子节点li 的个数Event.on('#demo1-2','click',function(evt){ var menuChildrens DOM.children(menu);alert(menuChildrens.length);}) 这个 demo 会稍微复杂下,因为不只要去到前后节点,还要取到前后节点的子节点 div,然 后才是文本值,来看代码: Event.on('#demo1-3','click',function(evt){var menuChildrens DOM.children(menu);//上一个节点 var preItem DOM.prev(menuChildrens[1]);//上一个节点的标题节点 var preItemTitle DOM.children(preItem,'div');//下一个节点 var nextItem DOM.next(menuChildrens[1]);//下一个节点的标题节点 var nextItemTitle DOM.children(nextItem,'div');alert(' 上一个菜单项的标题为:'+DOM.text(preItemTitle)+',下一个菜单项的标题为: '+DOM.text(nextItemTitle)); 有没有发现代码中children方法多了一个参数? var nextItemTitle DOM.children(nextItem,'div');其实不只是 children,像 next、prev、parent、siblings 都有第二个参数,第二个参数是一个 过滤器,比如示例中下一个节点的子节点有二个 div、ul,但是我们只需用到 div 就可以了, 这时候设置第二个参数为’div’,那么就只取div 节点了。 关于第二个参数,文档中的描述还是很详细(看parent 方法说明),请猛击这里 demo2:dom-traversal 模块中的siblings 方法 演练 siblings 是一个非常好用的方法 先来看上一篇教程中的一段代码 //隐藏所有子菜单 DOM.hide(childrenMenus);//根据子菜单的显示情况来判断是否显示子菜单,同时改变箭头方 向if(display 'none'){DOM.show(nextMenu); DOM.addClass(children,'arrow-down');}else{ DOM.hide(nextMenu); DOM.removeClass(children,'arrow-down');} 这段代码的用途是当你单击一个菜单项后,先隐藏所有子菜单,然后再显示当前菜单项下的 子菜单,实际上这里的逻辑有个不对的地方,理论上来讲不该隐藏包括当前菜单项下的子菜 单,应该是先隐藏除了当前菜单项下的子菜单下其他子菜单,然后再处理当前菜单项下的子 菜单。 …..有点绕,明河在讲到动画的时候会继续说明(原来的处理方式在使用动画的情况下就会 有一个bug)。 //隐藏除了第二个子菜单外的子菜单Event.on('#demo2-1','click',function(evt){ var menuChildrens DOM.children(menu);var sibItems DOM.siblings(menuChildrens[1]);//遍历同级节点并隐藏其子菜单 S.each(sibItems,function(v){ DOM.hide(DOM.children(v,'ul')); 代码中用到新的方法KISSY.each(),这是很常用的方法,明河日后会详解。demo3: dom-create模块中的create、remove 方法演练 //向第二个子菜单添加新的菜单项Event.on('#demo3-1','click',function(evt){ var menuChildrens DOM.children(menu);var secondUl DOM.children(menuChildrens[1],'ul');//创建一个新的li 节点 var newLi DOM.create('明河共影'); //留意是secondUl[0],而不是secondUl secondUl[0].appendChild(newLi);}) 文档中关于create 的用法说明很详细,猛击这里进入。 //删除新加入的菜单项Event.on('#demo3-2','click',function(evt){ var menuChildrens DOM.children(menu);var secondUl DOM.children(menuChildrens[1],'ul');var newLi DOM.children(secondUl,'.new');//删除样式名为new 的菜单项 DOM.remove(newLi);}) demo4: dom-create 模块中的html 方法演练 这个方法非常常用,相当于原生js 中的innerHTML //替换第二个子菜单的菜单项Event.on('#demo4-1','click',function(evt){ var menuChildrens DOM.children(menu);var secondUl DOM.children(menuChildrens[1],'ul');DOM.html(secondUl,'
  • 明河共影
  • '); alert(DOM.html(secondUl));}) 当html()无第二个参数时,为获取节点下的html 代码 点此下载 明河结语 至此DOM的大部分方法,明河基本上都介绍到了,掌握的这些方法,实际上已经可以应用 于实战,实现不少常见的交互效果,当然还有个高级篇,更高级的DOM应用,日后详解, 下一篇教程将讲解node 模块,接触过jquery 的朋友将会对node 倍感亲切。 在前二篇的教程中明河讲解了 KISSY.DOM 下常用的方法,其实处理 dom不只可以借助kissy 的dom模块,kissy 还有node 模块一样用于 dom 的处理,只是二者的代码风格不同,dom 模块偏向 YUI,node 块偏向jquery,而API方法名借鉴于jquery。 今天明河将详解node 模块,还是以拆合菜单为例(没法子,拆合菜单 的结构非常经典)。 起始代码 (function(S){ S.use('core',function(){ var Event })(KISSY);拆合菜单 jquery jquery 插件 jquery 教程 jquery 与ajax flex flex 实例 flex 教程 javascript javascript 资源 javascript 教程 浏览器 拆合菜单的html 代码如下(做了简化处理):