Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Yui rocks

0 views

Published on

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

Published in: Technology, Art & Photos
  • Be the first to comment

Yui rocks

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

×