KISSY for starter
Upcoming SlideShare
Loading in...5
×
 

KISSY for starter

on

  • 1,221 views

 

Statistics

Views

Total Views
1,221
Views on SlideShare
1,221
Embed Views
0

Actions

Likes
1
Downloads
25
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

KISSY for starter KISSY for starter Presentation Transcript

  • 常胤 & 承玉
  • 目的&目标一.全面认识KISSY二.KISSY的特点和优势三.学会使用KISSY
  • 大纲一.为什么使用KISSY二.KISSY概况以及架构三.KISSY快速上手
  • Part1.为什么使用KISSY
  • 我们需要什么样的框架? 初级用户 中级用户 高级用户 表单验证 语言增强 扩展控件 自定义控 异步请求 DOM操作 件 UI组件 代码组织 ...
  • 我们需要什么样的框架?1. 解决兼容性2. 语言增强3. 简单好记容易调用的API4. Widget/component5. 文档6. 方便调试7. 能帮我组织好代码8. 不必为打包,部署烦劳
  • 现状1. 都具备写前端代码的能力,但是会被兼 容性、合理性、性能等问题烦恼2. 总感觉写的代码不是很好看 1. 过程式 2. 到处都是全局对象难维护 3. 代码到处散落 4. 复用性差
  • YUI的问题1. 高端2. 上手慢3. 维护难
  • jquery的问题1. 过于灵活2. 缺少模块化方案3. 团队规范结合难4. 缺少统一全面的组件
  • 为什么使用KISSY
  • 为什么使用KISSY• 入门简单 • API设计简单实用 • 组件贴近用户 • 支持 yui 和 jquery 两种语法,无缝切换• 适合淘宝的JS类库 • 充分与基础设施融合 • 强大的“社区”支持 • 问题快速响应
  • YUI-Like• var DOM = KISSY.DOM;• var el = DOM.get(“#xx”);• DOM.css(el,”width”,100);
  • Jquery-Like• var el = KISSY.all(“#xx”);• el.css(”width”,100). parent(“.x”). end(). css(“height”,200);
  • Part2.KISSY概况及架构
  • Sub project• Kissy-tools: 工具集合• Kissy-util: 代码片段• Kissy-dpl: 设计模式规范库• Kissy-ajbridge: aj-js 桥梁• Kissy-nodejs: kissy on nodejs
  • Kissy tools http://docs.kissyui.com/other/third.html#
  • Kissy util http://docs.kissyui.com/other/third.html#
  • Kissy gallery
  • Kissy dpl
  • Kissy AJBridge
  • Part3.KISSY快速上手
  • <script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js"></script><script> KISSY.ready(function(S){ var $ = S.all; $("<p>hello world!</p>") .css({ color:"red" }) .appendTo(document.body); })</script>
  • 常用功能介绍• seed• dom• event• anim• node• ajax
  • seed
  • 语言增强• isArray/isDate/isFunction/isObject/isNumb er/isPlainObject• each/map/reduce/filter• inArray/indexOf/lastIndexOf/unique• substitute/trim/formUnicode• escapeHTML/unEscapeHTML/parseXML• Later/buffer/throttle
  • 前提准备• mix:将一个对象的成员复制到另一个对象上• merge:将多个对象的成员合并到新对象上.• augment:复制prototype对象• extend:函数继承• namespace:创建命名空间• log:调试信息• error:异常错误• guid:返回全局唯一 id.
  • web• ready• globalEval/• available
  • seed中的方法都是挂靠在KISSY命名空间下的,都可以直接使用.
  • demo seed
  • 模块机制
  • AMD
  • 模块注册 KISSY.add(function(S,DOM){ var d = DOM.get(“#id”); return { XX : YY }; },{ requires:[“dom”] });
  • 使用已有模块KISSY.use(“switchable”,function(S, Switchable){ var t = new Switchable({….});});
  • 包管理KISSY.config({ packages:[ { // 包名 name:"tc", // 自动加上 ?t=20110323, 用于文件更新 tag:"20130323", // 包对应路径, 相对路径指相对于当前页面路径 path:"../", // 包里模块文件编码格式 charset:"gbk" } ]});
  • demoloader
  • DOM
  • 什么是DOM文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。通俗的讲:要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。KISSY对DOM进行了进行了封装和扩展。
  • selectorKISSY 选择器内置仅支持 #id tag.class 常用形式, 考虑2/8 原则, 支持以下选择器:• #id• tag• .cls• #id tag• #id .cls• tag.cls• #id tag.cls
  • selector // 获取符合选择器的所有元素. KISSY.ready(function(S){ var els= S.DOM.query(“div"); }) // 获取符合选择器的第一个元素 KISSY.ready(function(S){ var el= S.DOM.get(“div"); })
  • sizzle KISSY.use(“sizzle”, function(S){ var $ = S.all; $([class^=“test"]).hide(); }) http://www.codylindley.com/jquerysel ectors/
  • class • hasClass • addClass • removeClass • replaceClass • toggleClass
  • 常用操作• val:获取value 值.• text:获取元素所包含的文本值.相当于innerText• html:获取符合选择器的第一个元素的 innerHTML.• show:显示符合选择器的所有元素.• hide:隐藏符合选择器的所有元素.• toggle :显示隐藏
  • DOM 节点遍历• parent:父节点.• next:下一个同级节点• prev:上一个同级节点• siblings:所有同级节点.• children:所有子节点.
  • DOM 尺寸相关• width/height:高/宽.• innerWidth/innerHeight:包含padding• outerWidth/outerHeight:包含padding,margin,border 的宽/高• scrollTop/scrollLeft:获取窗口或元素的 scrollTop/scrollLeft值.• docHeight/docWidth:获取document的高宽• viewportHeight/viewportWidth :获取可视区的高宽
  • DOM 节点修改• insertBefore• insertAfter• append• prepend
  • DOM 属性/数据• attr:attributes• hasAttr• Prop:properties• hasProp• data:扩展属性• removeData• hasData http://javascript.info/tutorial/attribute s-and-custom-properties
  • Style & css• addStyleSheet:将 cssText 字符串作为内 联样式添加到文档中.• style• css
  • DOM中的方法在KISSY.DOM这个命名空间下
  • demoDOM
  • Event
  • 自定义事件 function MyClass(){ } KISSY.augment(MyClass,KISSY.EventTarget); var myObj = new MyClass(); myObj.on(“xx”,function(){ }); myObj.fire(“xx”);
  • 普通对象和 dom 节点一样也能触发, 添加和删除事件.
  • 统一的注册方式• 原生节点 – S.one(domNode).on(“click”,fn,context)• 自定义事件 – obj.on(“customEvent”,fn,context)
  • 统一的触发方式• Native event – S.one(domNode).fire(“click”)• Custom event – obj.fire(“customEvent”)
  • 事件兼容• submit/change @ie bubble, realtime fire• focusin/out @non-ie• mouseenter/leave @non-ie• hashchange @ie• mousewheel @firefox• valuechange @all
  • Event中的方法在KISSY.Event这个命名空间下
  • Eventdemo
  • Anim
  • var anim = new KISSY.Anim( #test, { width: 100px, left: 900px, opacity: .5, font-size: 48px, color: #FF3333 }, 5,//持续时间 bounceOut,//动画平滑函数 function(){ alert(demo 结束); });anim.run();
  • Animdemo
  • • Node 包括 dom , event , anim 模块的所 有功能, 推荐采用 Node 模块.• 只需要把 KISSY.all 看做 jquery 中的 $ //推荐用法 var $ = KISSY.all; $("#test").show();
  • 链式操作 KISSY.all(".cls") .all("a") .css({"color":"red"}) .end() .all("p") .hide();
  • 创建节点KISSY.all(<p class=“cls">test</p>) .text(“test”) .appendTo(document.body);
  • Dom 操作 node.height(300) .css({"color":"red"}) .addClass("cls") .attr("data-value","test");
  • 事件注册 node.on("click",fn); node.delegate("click","a",fn); node.detach("click"); node.fire("click");
  • 动画node.animate({left:"100px",top:"100px"});node.stop();node.stop(true);node.isRunning();node.stop(true,true,queueName);node.slideToggle();node.fadeToggle();
  • Kissy IO
  • XMLHttpRequest KISSY.io({ url : "getJson.htm", cache : false, type : "get",// "post" data : { x: 1}, dataType : "json", // "text/html/xml" success : function(d){ }, error : function(_,reason){ }, complete : function(){ } });
  • 快捷方式KISSY.io.get("test.php",function(d){ alert(d);});KISSY.io.post("test.php",{ x : 3},function(d){ alert(d);},"json");
  • form 异步提交KISSY.io({ <form id="formEl> url : "getJson.htm", <input name="f" type="file" /> type : "post", </form> data : {x: 1}, dataType : "json", form: "#formEl", success : function(d){ }, error : function(_,reason){ }, complete : function(){ }});
  • 跨域处理跨域请求– 跨子域– 完全不同域 • 客户端透明 • 服务器端设置 CORS
  • 可中断请求 xhr.abort();
  • 组件库
  • 使用KISSY组件非常简单,与开发的习惯也很接近。不需要再去head中显示插入script标签。
  • overlayDemo
  • 在自己定义的模块中引入组件也非常简单。
  • Drag&Drop
  • switchable
  • resizeable
  • validation
  • mvc
  • Editor
  • 一致的调用方式
  • gallery
  • KISSY Biz mod modBiz mod KISSY mod Page logic KISSY
  •  Gtalk/email:yiminghe@gmail.com 官方文档: http://docs.kissyui.com