YUI介绍和使用YUI构建web应用
32
YUI 介介介介介 YUI 介介 Web 介介 介介介 http://adamlu.com @ adamlu
Transcript of YUI介绍和使用YUI构建web应用
YUI介绍和使用 YUI构建Web应用鲁超伍
http://adamlu.com @adamlu
YUI项目• JavaScript库 (YUI)• CSS基础 (Grid)• 文档工具 (yuidoc)• 构建工具 (shifter)• 测试工具 (yuitest)• 性能优化工具 (yui compressor)• 开发者培训 (Theater/Blog)
模块加载• 种子文件
– <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
• 种子小，作用大– 模块注册系统– 核心 YUI工具方法– Lang, Object, Array类– Loader(动态模块加载 )
模块注册
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());
});
有用的工具函数• Y.merge• Y.mix• Y.later• Y.log• Y.Lang• Y.Array• Y.Object• Y.UA
http://jsfiddle.net/adamlu/LEEdc/
一个简单的 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/
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)
$(':radio') Y.all('input[type=radio]')
还有强大的面向对象编程支持
使用组件• YUI本身已经自带很多丰富组件如
AutoComplete, Calendar, DataTable等
YUI基础结构
基于 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);});
Attribute设置流程
YUI提供的事件• DOM事件，让你的程序响应用户操作。• 特别的 DOM事件，当页面加载或渲染时可以让你订阅有趣的瞬间。
• 合成事件，让你定义全新的 DOM事件，扩大了用户和你的程序沟通的渠道。
• 自定义事件，通过发出和订阅程序指定的消息让组件之间互相通信。
事件支持• 控制事件传播和冒泡• 阻止默认行为• 委托事件• EventTarget
– publish()– on()/detach()– fire()– addTarget()/removeTarget()
http://jsfiddle.net/adamlu/5C5CC/
组件• 组件 (widget)是一个通用的可视元件设计在不同网站被重用，如表格、日历、菜单或图表。
扩展组件• 生命周期方法： initializer(), destructor(),
renderUI(), bindUI(), syncUI() 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/
YUI on Mobile
• Touch事件支持• Guesture• History• Transition• ScrollView
–水平 /垂直 /拖动刷新 /分页 /滚动条
YUI().use('scrollview', function (Y) { var scrollView = new Y.ScrollView({ srcNode:
'#someContainer' }); scrollView.render(); });
http://yuilibrary.com/yui/docs/scrollview/scrollview-base-example.html
YUI App Framework
• 由 App, Model, Model List, Router和 View组成的包
• 写单页面 JavaScript应用程序的MVC风格的框架
• 基于 URL的路由• 类似 BackboneJs框架
使用 App Framework的例子
http://adamlu.com/fe/ContactApp/
https://github.com/adamlu/YUIAppDemo
HTML页面
main.js
Y.App
ContactModel
ContactListModel
ContactView
ContactListView
YUI Cookbook
