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 Rocks!
Search
Adam Lu
May 26, 2013
Technology
3
3.1k
YUI Rocks!
主要介绍一下YUI的基础结构和使用YUI如何构建可扩展的Web应用,同时会有一些YUI和其它类库的对比以及其自身特点,并阐述为什么学习使用YUI对前端工程师来说可以在一定程度上提高编写代码的质量。
Adam Lu
May 26, 2013
Tweet
Share
More Decks by Adam Lu
See All by Adam Lu
YUI介绍和使用YUI构建web应用
adamlu
2
3.7k
一步一步开发HTML5 Mobile Apps
adamlu
14
650
HTML5概览
adamlu
13
3.7k
Other Decks in Technology
See All in Technology
Larkご案内資料
customercloud
PRO
0
600
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
RSNA2024振り返り
nanachi
0
500
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
2.5Dモデルのすべて
yu4u
2
610
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Practical Orchestrator
shlominoach
186
10k
The Cult of Friendly URLs
andyhume
78
6.2k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
KATA
mclloyd
29
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Transcript
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)
None
前端工程师面对的两个问题 • 开发 • 维护
基本的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.sayHel lo()); }); 使用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