YUI介绍和使用YUI构建web应用

905 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
905
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

YUI介绍和使用YUI构建web应用

  1. 1. YUI介绍和使用YUI构建Web应 用 鲁超伍 http://adamlu.com @adamlu
  2. 2. YUI是什么?http://yuilibrary.com/
  3. 3. YUI项目• JavaScript库(YUI)• CSS基础(Grid)• 文档工具(yuidoc)• 构建工具(shifter)• 测试工具(yuitest)• 性能优化工具(yui compressor)• 开发者培训(Theater/Blog)
  4. 4. https://github.com/yui/yui3
  5. 5. 模块加载• 种子文件 – <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui- min.js"></script>• 种子小,作用大 – 模块注册系统 – 核心YUI工具方法 – Lang, Object, Array类 – Loader(动态模块加载)
  6. 6. 模块注册YUI.add(hello, function (Y) { Y.namespace(Hello); Y.Hello.sayHello = function () { return GREETINGS PROGRAMS; };});
  7. 7. 模块使用YUI().use(node-base, hello, function (Y) { Y.one(#demo).setHTML(Y.Hello.sayHello());});
  8. 8. 有用的工具函数• Y.merge• Y.mix• Y.later• Y.log• Y.Lang• Y.Array• Y.Object• Y.UA http://jsfiddle.net/adamlu/LEEdc/
  9. 9. 一个简单的YUI程序<script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script><div id="test"></div><button id="button">Turn Red</button>#test { height: 30px; background: gray;}#test.red { background: red; http://jsfiddle.net/adamlu/YdBbL/}YUI().use(node, function(Y){ Y.one(#button).on(click, function() { Y.one(#test).addClass(red); });});
  10. 10. YUI vs. jQueryhttp://www.jsrosettastone.com/
  11. 11. YUI让你把JavaScript写得更好$.each([1, 2, 3], fn(index, value))$.each({ key: value }, fn(key, value))Y.Array.each([1, 2, 3], fn(value, index))Y.Object.each({ key: value }, fn(value, key))$.isPlainObject(obj)Y.Lang.isObject(obj)$(:radio)Y.all(input[type=radio])还有强大的面向对象编程支持
  12. 12. 使用组件• YUI本身已经自带很多丰富组件如 AutoComplete, Calendar, DataTable等 YUI基础结构
  13. 13. 基于Base创建组件• Base是底层的基础类,同时具备Attribute和 Event特性• 提供了创建基于属性对象的标准模板• 提供了一致的init()和destroy()方法 http://jsfiddle.net/adamlu/7hXCV/
  14. 14. Attribute类• 对一些状态值和自定义逻辑功能相关配置 的封装• 提供监听状态改变的机会• Gettters• Settters• 默认值• Change事件
  15. 15. YUI().use("attribute", function(Y) { //实例化时设置属性的初始值 obj = new MyClass({name: value}); function MyClass() { obj.addAttr(name, value); } obj.set(name, value); MyClass.ATTRS = {}; obj.get(name); Y.augment(MyClass, Y.Attribute); obj.on(nameChanged, callback);}); obj.after(nameChanged, callback);
  16. 16. Attribute设置流程
  17. 17. YUI提供的事件• DOM事件,让你的程序响应用户操作。• 特别的DOM事件,当页面加载或渲染时可 以让你订阅有趣的瞬间。• 合成事件,让你定义全新的DOM事件,扩 大了用户和你的程序沟通的渠道。• 自定义事件,通过发出和订阅程序指定的 消息让组件之间互相通信。
  18. 18. 事件支持• 控制事件传播和冒泡• 阻止默认行为• 委托事件• EventTarget – publish() – on()/detach() – fire() – addTarget()/removeTarget() http://jsfiddle.net/adamlu/5C5CC/
  19. 19. 组件• 组件(widget)是一个通用的可视元件设计在 不同网站被重用,如表格、日历、菜单或 图表。
  20. 20. 扩展组件• 生命周期方法:initializer(), destructor(), renderUI(), bindUI(), syncUI() Y.Electron = Y.Base.create(electron, Y.Widget, [], { destructor: function () { }, renderUI: function () {}, bindUI: function () {}, syncUI: function () {} }, { ATTRS: {} }); }, 1.1, {requires: [base-build, widget]}); http://jsfiddle.net/adamlu/AQ8mg/
  21. 21. YUI on Mobile• Touch事件支持• Guesture• History• Transition• ScrollView – 水平/垂直/拖动刷新/分页/滚动条 YUI().use(scrollview, function (Y) { var scrollView = new Y.ScrollView({ srcNode: #someContainer }); scrollView.render(); }); http://yuilibrary.com/yui/docs/scrollview/scrollview-base-example.html
  22. 22. YUI App Framework• 由App, Model, Model List, Router和View组成 的包• 写单页面JavaScript应用程序的MVC风格的 框架• 基于URL的路由• 类似BackboneJs框架
  23. 23. 使用App Framework的例子 http://adamlu.com/fe/ContactApp/ https://github.com/adamlu/YUIAppDemo
  24. 24. HTML页面
  25. 25. main.js
  26. 26. Y.App
  27. 27. ContactModel
  28. 28. ContactListModel
  29. 29. ContactView
  30. 30. ContactListView
  31. 31. YUI Cookbook
  32. 32. @adamluTHANKS!

×