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
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
180
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
780
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
310
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
240
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
120
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
130
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
640
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
2
500
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
210
TypeScript、上達の瞬間
sadnessojisan
48
14k
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
29
13k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Ruby is Unlike a Banana
tanoku
97
11k
Writing Fast Ruby
sferik
627
61k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Making Projects Easy
brettharned
115
5.9k
Practical Orchestrator
shlominoach
186
10k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Why Our Code Smells
bkeepers
PRO
334
57k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
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