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

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 程序 <div id="test"></div> <button id="button">Turn Red</button> YUI().use('node', function(Y){ Y.one('#button').on('click', function() { Y.one('#test').addClass('red'); }); }); #test { height: 30px; background: gray; } #test.red { background: red; } <script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script> http://jsfiddle.net/adamlu/YdBbL/
10. YUI vs. jQuery http://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. // 实例化时设置属性的初始值 obj = new MyClass({name: value}); obj.addAttr(name, value); obj.set(name, value); obj.get(name); obj.on(nameChanged, callback); obj.after(nameChanged, callback); YUI().use("attribute", function(Y) { function MyClass() { } MyClass.ATTRS = {}; Y.augment(MyClass, Y.Attribute); });
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. THANKS! @adamlu