• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Yui rocks
 

Yui rocks

on

  • 680 views

主要介绍一下YUI的基础结构和使用YUI如何构建可扩展的Web应用,同时会有一些YUI和其它类库的对比以及其自身特点,并阐述为什么学习使用YUI对前端工程...

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

Statistics

Views

Total Views
680
Views on SlideShare
680
Embed Views
0

Actions

Likes
1
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Yui rocks Yui rocks Presentation Transcript

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