Your SlideShare is downloading. ×
0
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

408

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
408
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. YUI介绍和使用YUI构建Web应 用 鲁超伍 http://adamlu.com @adamlu
  • 2. YUI是什么?http://yuilibrary.com/
  • 3. YUI项目• JavaScript库(YUI)• CSS基础(Grid)• 文档工具(yuidoc)• 构建工具(shifter)• 测试工具(yuitest)• 性能优化工具(yui compressor)• 开发者培训(Theater/Blog)
  • 4. https://github.com/yui/yui3
  • 5. 模块加载• 种子文件 – <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui- min.js"></script>• 种子小,作用大 – 模块注册系统 – 核心YUI工具方法 – Lang, Object, Array类 – Loader(动态模块加载)
  • 6. 模块注册YUI.add(hello, function (Y) { Y.namespace(Hello); Y.Hello.sayHello = function () { return GREETINGS PROGRAMS; };});
  • 7. 模块使用YUI().use(node-base, hello, function (Y) { Y.one(#demo).setHTML(Y.Hello.sayHello());});
  • 8. 有用的工具函数• Y.merge• Y.mix• Y.later• Y.log• Y.Lang• Y.Array• Y.Object• Y.UA http://jsfiddle.net/adamlu/LEEdc/
  • 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. YUI vs. jQueryhttp://www.jsrosettastone.com/
  • 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. 使用组件• YUI本身已经自带很多丰富组件如 AutoComplete, Calendar, DataTable等 YUI基础结构
  • 13. 基于Base创建组件• Base是底层的基础类,同时具备Attribute和 Event特性• 提供了创建基于属性对象的标准模板• 提供了一致的init()和destroy()方法 http://jsfiddle.net/adamlu/7hXCV/
  • 14. Attribute类• 对一些状态值和自定义逻辑功能相关配置 的封装• 提供监听状态改变的机会• Gettters• Settters• 默认值• Change事件
  • 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. Attribute设置流程
  • 17. YUI提供的事件• DOM事件,让你的程序响应用户操作。• 特别的DOM事件,当页面加载或渲染时可 以让你订阅有趣的瞬间。• 合成事件,让你定义全新的DOM事件,扩 大了用户和你的程序沟通的渠道。• 自定义事件,通过发出和订阅程序指定的 消息让组件之间互相通信。
  • 18. 事件支持• 控制事件传播和冒泡• 阻止默认行为• 委托事件• EventTarget – publish() – on()/detach() – fire() – addTarget()/removeTarget() http://jsfiddle.net/adamlu/5C5CC/
  • 19. 组件• 组件(widget)是一个通用的可视元件设计在 不同网站被重用,如表格、日历、菜单或 图表。
  • 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. 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. YUI App Framework• 由App, Model, Model List, Router和View组成 的包• 写单页面JavaScript应用程序的MVC风格的 框架• 基于URL的路由• 类似BackboneJs框架
  • 23. 使用App Framework的例子 http://adamlu.com/fe/ContactApp/ https://github.com/adamlu/YUIAppDemo
  • 24. HTML页面
  • 25. main.js
  • 26. Y.App
  • 27. ContactModel
  • 28. ContactListModel
  • 29. ContactView
  • 30. ContactListView
  • 31. YUI Cookbook
  • 32. @adamluTHANKS!

×