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
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
アジャイル開発とスクラム
araihara
0
160
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
FastConnect の冗長性
ocise
1
9.6k
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
Bounded Context: Problem or Solution?
ewolff
1
210
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
It's Worth the Effort
3n
184
28k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Optimizing for Happiness
mojombo
376
70k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Code Reviewing Like a Champion
maltzj
521
39k
Building Your Own Lightsaber
phodgson
104
6.2k
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