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 --><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)

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 模块化

文件依赖、并发下载、维护性

YUI

RequireJs

模块化

• 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 'GREETINGS PROGRAMS'; };});

模块使用

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.Escape http://jsfiddle.net/adamlu/LEEdc/

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')

YUI vs. jQuery

http://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/YUIAppDemo

ContactListView 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 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 …’);

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/

拥抱开源世界

拥抱开源世界

• YUI App Framework

• Y.Handlebars

• YUI Loader

• cssnormalize

• Y.Promise

• ScrollView

• YUI on Node

• https://github.com/yui/yui3

YUI Gallery

AlloyUI

http://alloyui.com/

总结：使用 YUI 的好处

• 协作开发

• 功能齐全

• 稳定

• 提高编写 JavaScript水平

• 有益于前端工程师自身成长

什么情况可以不用 YUI呢？

• 如果是原生 JavaScript 可以处理的话

• 如果是临时项目不太考虑维护的话

• 除了不是以上这些情况

不要为工具所限定，只要能满足您需求的忠于用户的就好。

赶快加入到使用 YUI 的行列吧！

YUI Really Rocks!

YUI 3 Cookbook 中文版

@adamlu

Q&A