Upgrade to Pro — share decks privately, control downloads, hide ads and more …

YUI Rocks!

Adam Lu
May 26, 2013

YUI Rocks!

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

Adam Lu

May 26, 2013
Tweet

More Decks by Adam Lu

Other Decks in Technology

Transcript

  1. <!-- 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)
  2. YUI项目 • JavaScript库(YUI) • CSS基础(Grid) • 文档工具(yuidoc) • 构建工具(shifter/yogi/yme) •

    测试工具(yuitest) • 浏览器自动化测试工具(yeti) • 性能优化工具(yui compressor) • 开发者培训(Theater/Blog/YUIConf)
  3. 模块加载 • 种子文件 • 种子小,作用大 – 模块注册系统 – 核心YUI工具方法 –

    Lang, Object, Array类 – Loader(动态模块加载) <script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script>
  4. 一个简单的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/
  5. 有用的工具函数 • Y.merge • Y.mix • Y.later • Y.log •

    Y.Lang • Y.Array • Y.Object • Y.UA • Y.Escape http://jsfiddle.net/adamlu/LEEdc/
  6. 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')
  7. 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) 还有强大的面向对象编程支持!
  8. 原生的继承实现 function Child() { } Child.prototype = new Parent(); Child.prototype.method

    = function() {}; 在YUI中: 伪类继承: Y.extend(Child, Parent, { method: function(){} }); 提供了强大的继承关系如superclass,保持instanceof不变
  9. 原生的继承实现 原型继承: Y.Object = (function() { function F() {}; return

    function() (obj) { F.prototype = obj; return new F(); } })(); 避免拷贝过多的属性,相当于Object.create()
  10. 增强 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的构造 函数,可以合并多个类。
  11. 插件 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就可以使用插件
  12. 类扩展 提高了代码重用率 Y.Base.create = function(name, base, extensions, px, sx) Y.Electron

    = Y.Base.create('electron', Y.Base, [Y.Relativestic], { getSpeed: function() {} }, { ATTRS: {} }); 类的NAME属性 基类(必须是扩展自Base) 扩展列表 原型和静态对象
  13. YUI App Framework • 由App, Model, Model List, Router和View 组成的包

    • 写单页面JavaScript应用程序的MVC风格的 框架 • 基于URL的路由 • 类似BackboneJs框架
  14. //实例化时设置属性的初始 值 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
  15. 事件支持 • 控制事件传播和冒泡 • 阻止默认行为 • 委托事件 • EventTarget –

    publish() – on()/detach() – fire() – addTarget()/removeTarget() http://jsfiddle.net/adamlu/5C5CC/
  16. 扩展组件 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()
  17. YUI on Mobile • Touch/Guesture • History • Offline Cache

    • Transition • Autocomplete • ScrollView
  18. 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可用的
  19. 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 …’);
  20. 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/
  21. 拥抱开源世界 • YUI App Framework • Y.Handlebars • YUI Loader

    • cssnormalize • Y.Promise • ScrollView • YUI on Node • https://github.com/yui/yui3
  22. Q&A