YUI Rocks!

主要介绍一下YUI的基础结构和使用YUI如何构建可扩展的Web应用，同时会有一些YUI和其它类库的对比以及其自身特点，并阐述为什么学习使用YUI对前端工程师来说可以在一定程度上提高编写代码的质量。

Transcript

1. YUI Rocks! 鲁超伍 @adamlu
2. YUI是什么？
3. 我们今天 说的当然 不是她 ~~~
4. YUI ~ Yahoo! User Interface • YUI2发布于2006年并广泛被使用 • YUI3发布于2009年，YUI3被重新设计用来 构建快速、强大和高效的工具箱
5. YUI2感觉体积好大啊！ 有人说： 其实这种思想在早前很多使用YUI的人心里都扎下了根
6. <!-- Dependencies --> <script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom- event/yahoo-dom-event.js" type="text/javascript"></script> <!-- Source file --> <script src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation- min.js" type="text/javascript"></script> var element = document.getElementById('test'); var myAnim = new YAHOO.util.Scroll(element, { scroll: { to: [ 500, test.scrollTop ] } }); myAnim.animate(); 我们印象中的YUI(2)
7. YUI3和YUI2是完全不一样的！ 我要说： 我想让大家重新认识一下YUI
8. http://developer.yahoo.com/yui2/ YUI2网站快照
9. http://yuilibrary.com/ YUI3官网
10. YUI项目 • JavaScript库(YUI) • CSS基础(Grid) • 文档工具(yuidoc) • 构建工具(shifter/yogi/yme) • 测试工具(yuitest) • 浏览器自动化测试工具(yeti) • 性能优化工具(yui compressor) • 开发者培训(Theater/Blog/YUIConf)
12. 前端工程师面对的两个问题 • 开发 • 维护
13. 基本的JS模块化 文件依赖、并发下载、维护性 YUI RequireJs
14. 模块化 • DRY • 代码抽象 • 前端性能
15. 模块/代码加载器 • RequireJs • LabJs • SeaJs • HeadJs • YUI Loader
16. 模块加载 • 种子文件 • 种子小，作用大 – 模块注册系统 – 核心YUI工具方法 – Lang, Object, Array类 – Loader(动态模块加载) <script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script>
17. 模块注册 YUI.add('hello', function (Y) { Y.namespace('Hello'); Y.Hello.sayHello = function () { return 'GREETINGS PROGRAMS'; }; });
18. 模块使用 YUI().use('node-base', 'hello', function (Y) { Y.one('#demo').setHTML(Y.Hello.sayHel lo()); }); 使用YUI模块前你需要知道模块名！
19. 一个简单的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/show/
20. YUI Loader 合并加载
21. 有用的工具函数 • Y.merge • Y.mix • Y.later • Y.log • Y.Lang • Y.Array • Y.Object • Y.UA • Y.Escape http://jsfiddle.net/adamlu/LEEdc/
22. YUI vs. jQuery Y.one('div.foo') Y.all('div.foo') Y.one('#foo').on('click', fn) Y.io(url, { data: data, on: {success: successFn} }); .setHTML('foo') $('div.foo:first') $('div.foo') $('#foo').click(fn) $.ajax({ url: url, success: successFn }); .html('foo')
23. YUI vs. jQuery http://www.jsrosettastone.com/
24. YUI的node, io, event等某些模块基 本就能把jQuery所做的事情搞定了
25. YUI还有更多你意想不到的
26. YUI改进了JavaScript编码风格 你有没有遇到过这样的情况： 在jQuery代码中: if ($(‘.empty-node’)) {//如果存在这个节点则执行下面这段代码 //没有这个节点也会执行，坑爹啊 } 在YUI中，完全按照你所想的： 在YUI代码中: if (Y.one('.empty-node')) {//如果存在这个节点则执行下面这段代码 //没有这个节点不会执行，Good }
27. 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) 还有强大的面向对象编程支持!
28. YUI中的面向对象 • 伪类/原型继承 • 增强 • 插件 • 类扩展 • MVC
29. 原生的继承实现 function Child() { } Child.prototype = new Parent(); Child.prototype.method = function() {}; 在YUI中： 伪类继承： Y.extend(Child, Parent, { method: function(){} }); 提供了强大的继承关系如superclass，保持instanceof不变
30. 原生的继承实现 原型继承： Y.Object = (function() { function F() {}; return function() (obj) { F.prototype = obj; return new F(); } })(); 避免拷贝过多的属性，相当于Object.create()
31. 增强 Y.ModelList = Y.extend( function() { ModelList.superclass.constructor.apply(this, arguments); }, Y.Base, {/*原型*/}, {/*静态方法*/}); Y.augment(Y.ModelList, Y.ArrayList); var list = new Y.ModelList({..}); list.each(function(item) {..}); 延迟构造函数，只有each执行时才会执行ArrayList的构造 函数，可以合并多个类。
32. 插件 var overlay = new Y.Overlay({..}); overlay.plug(Y.Plugin.Drag); overlay.dd.set('lock', true); overlay.unplug('dd'); Y.Plugin.Host.prototype.plug = function(Plugin, config) { .. if (Plugin && Plugin.NS) { .. config.host = this; this[ns] = new Plugin(config); this._plugins[ns] = Plugin; } } 只要继承了Y.Plugin.Host的类如Y.Base就可以使用插件
33. 类扩展 提高了代码重用率 Y.Base.create = function(name, base, extensions, px, sx) Y.Electron = Y.Base.create('electron', Y.Base, [Y.Relativestic], { getSpeed: function() {} }, { ATTRS: {} }); 类的NAME属性 基类(必须是扩展自Base) 扩展列表 原型和静态对象
34. YUI App Framework • 由App, Model, Model List, Router和View 组成的包 • 写单页面JavaScript应用程序的MVC风格的 框架 • 基于URL的路由 • 类似BackboneJs框架
35. YUI App Framework的一个例子 http://adamlu.com/fe/ContactApp/ https://github.com/adamlu/YUIAppDemo ContactListView ContactView
36. 使用组件 YUI本身已经自带很多丰富组件如 AutoComplete, Calendar, DataTable等
37. YUI组件核心 • Attribute • Base • Custom Event
38. 基于Base创建组件 • Base是底层的基础类，同时具备Attribute 和Event特性 • 提供了创建基于属性对象的标准模板 • 提供了一致的init()和destroy()方法 http://jsfiddle.net/adamlu/7hXCV/
39. Attribute类 • 对一些状态值和自定义逻辑功能相关配置的封装 • 提供监听状态改变的机会 • Gettters • Settters • 默认值 • Change事件
40. //实例化时设置属性的初始 值 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); }); 好的抽象，好的代码组织，一致的API
41. YUI提供的事件 • DOM事件 • 特别的DOM事件 • 合成事件 • 自定义事件
42. 事件支持 • 控制事件传播和冒泡 • 阻止默认行为 • 委托事件 • EventTarget – publish() – on()/detach() – fire() – addTarget()/removeTarget() http://jsfiddle.net/adamlu/5C5CC/
43. 组件 组件(widget)是一个通用的可视元件设计在不同 网站被重用，如表格、日历、菜单或图表等。 set(), get(), value, valueFn, setter, getter... publish(), fire(), on(), after(), before() plug(), unplug()
44. 扩展组件 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/ 生命周期方法：initializer(), destructor(), renderUI(), bindUI(), syncUI()
45. YUI on Mobile • Touch/Guesture • History • Offline Cache • Transition • Autocomplete • ScrollView
46. YUI on Mobile 特性加载： use('transition-native') 手动使用transition原生模块 use('node') 从手机来的请求不会加载IE6相关的 触摸事件： event-touch 原生touch和guesture事件 event-move 处理touch和mouse输入的事件 event-flick 捕捉鼠标或手势的”flick”事件 上面三个合在一起组成了event-guestrues模块 Widget: Scrollview, Slider, Tabview等YUI组件都是mobile可用的
47. YUI on Node npm install yui@stable var YUI = require(‘yui’).YUI; YUI().use(‘yql’, function() { Y.YQL(‘select * from …’); }); var Y = require(‘yui/yql’); Y.YQL(‘select * from …’);
48. YUI目标平台 Internet Explorer 6.0 7.0 8.0 9.0 10.0 Chrome † Latest stable Firefox † Latest stable Safari iOS 5.† iOS 6.† Latest stable (desktop) WebKit Android 2.3.† Android 4.† Node.js* 0.8.† 0.10.† Windows (Native) Windows 8 Apps http://yuilibrary.com/yui/environments/
49. 拥抱开源世界
50. 拥抱开源世界 • YUI App Framework • Y.Handlebars • YUI Loader • cssnormalize • Y.Promise • ScrollView • YUI on Node • https://github.com/yui/yui3
51. YUI Gallery
52. AlloyUI http://alloyui.com/
53. 总结：使用YUI的好处 • 协作开发 • 功能齐全 • 稳定 • 提高编写JavaScript水平 • 有益于前端工程师自身成长
54. 什么情况可以不用YUI呢？ • 如果是原生JavaScript可以处理的话 • 如果是临时项目不太考虑维护的话 • 除了不是以上这些情况
55. 不要为工具所限定，只要能满足您 需求的忠于用户的就好。
56. 赶快加入到使用YUI的行列吧！ YUI Really Rocks!
57. YUI 3 Cookbook 中文版
58. @adamlu
59. Q&A