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
Agile PBL at New Grads Trainings
kawaguti
PRO
1
340
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
350
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
970
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
360
Kubernetes における cgroup driver のしくみ: runwasi の bugfix より
z63d
2
250
人工衛星のファームウェアをRustで書く理由
koba789
5
2.2k
Flutterでキャッチしないエラーはどこに行く
taiju59
0
220
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
170
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
3
230
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
150
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
0
130
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
1
140
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
A better future with KSS
kneath
239
17k
How GitHub (no longer) Works
holman
315
140k
Docker and Python
trallard
45
3.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
BBQ
matthewcrist
89
9.8k
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