Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
YUI介绍和使用YUI构建web应用
Search
Adam Lu
March 29, 2013
Technology
2
3.7k
YUI介绍和使用YUI构建web应用
Adam Lu
March 29, 2013
Tweet
Share
More Decks by Adam Lu
See All by Adam Lu
YUI Rocks!
adamlu
3
3.1k
一步一步开发HTML5 Mobile Apps
adamlu
14
650
HTML5概览
adamlu
13
3.7k
Other Decks in Technology
See All in Technology
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
320
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1.2k
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
140
アジャイル開発とスクラム
araihara
0
170
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
500
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
370
君も受託系GISエンジニアにならないか
sudataka
2
410
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
1
480
プロセス改善による品質向上事例
tomasagi
2
2.2k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
290
Platform Engineeringは自由のめまい
nwiizo
4
2k
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.7k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Faster Mobile Websites
deanohume
306
31k
Building Adaptive Systems
keathley
40
2.4k
For a Future-Friendly Web
brad_frost
176
9.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Transcript
YUI 介绍和使用 YUI 构建 Web 用 鲁超伍 http://adamlu.com @adamlu
YUI 是什 ? http://yuilibrary.com/
YUI 项目 • JavaScript (YUI) • CSS 础 (Grid) •
文档工具 (yuidoc) • 构建工具 (shifter) • 测试工具 (yuitest) • 性能优化工具 (yui compressor) • 开发者 训 (Theater/Blog)
https://github.com/yui/yui3
模块 载 • 种子文件 – <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 vs. jQuery http://www.jsrosettastone.com/
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
THANKS! @adamlu