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
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
All you need to know about InnoDB Primary Keys
lefred
0
120
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
現場で役立つAPIデザイン
nagix
29
10k
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
Featured
See All Featured
Music & Morning Musume
bryan
46
6.3k
Done Done
chrislema
182
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Bash Introduction
62gerente
610
210k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How GitHub (no longer) Works
holman
313
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Rails Girls Zürich Keynote
gr2m
94
13k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
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