基于YUI3的组件开发

基于 YUI3 的组件开发拔赤 [email_address] http://www.uedmagazine.com 2009-11-20

组件化的 web 开发 ,[object Object]

YUI3.x 的组件？续 ,[object Object]

组件的模样 ,[object Object],[object Object],[object Object]

进一步看组件的模样 ,[object Object],[object Object]

进一步看组件的模样续 ,[object Object],[object Object],[object Object],[object Object],[object Object]

再进一步看组件的模样

再进一步看组件的模样续 ,[object Object],[object Object],[object Object],[object Object],[object Object]

再进一步看组件的模样续 ,[object Object],[object Object],[object Object]

组件的设计原则 ,[object Object],[object Object],[object Object],[object Object]

组件的开发原则 ,[object Object],[object Object],[object Object]

配置项的优先级 ,[object Object],[object Object],[object Object]

配置项的优先级续 ,[object Object],YAHOO.CN.msg = { isShowMod: true , isHiddenScroll: true , isOpenDrag: false , //… }; Example:YAHOO 关系弹出框组件

配置项的优先级续 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Example: 日历组件 http://www.uedmagazine.com/test/call/t-calendar.js

配置项的优先级续 ,[object Object],var c = new T.tbwidget.calendar( node , callback ,options); Example: 日历组件 http://www.uedmagazine.com/test/call/Noname2.html var c = new T.tbwidget.calendar( null , null ,options); 正确的参数错误的参数

尽可能少的类 ,[object Object],T.box = function(){ this. init .apply(this,arguments); }; T.box.prototype = { init :function(args){ // 构造器 }, render :function(o){ // 渲染 }, //… }; Example: 弹出框 http:// www.uedmagazine.com/test/box/msg.html

组件源码的可扩展 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Example: 分页组件 http://www.uedmagazine.com/test/pagination-2.html

组件开发进阶 ,[object Object],[object Object],[object Object]

基于原型的构造器 T.box = function(){ this. init .apply(this,arguments); }; T.box.prototype = { init :function(args){ // 构造代码 }, //… }; T.box = function(o){ this.a = o.sth; this.render(); }; 显式构造：隐式构造： Example:dojo 、 mootools 、 prototype 等 js 库在代码继承方面的设计

组件的自定义 ,[object Object],[object Object],Example: http:// www.uedmagazine.com/test/box/msg.html Example: http://adamlu.com/Demo/dialog.html Y.mix() => Y.extend() Y.merge() Y.augment() T.box() => T.box.alert() T.box.confirm() T.box.diy()

组件的生命周期 ,[object Object],[object Object],[object Object],[object Object],[object Object]

Would u like to know more… ,[object Object],[object Object],[object Object]

产品恒久远组件永流传 Thank u~

基于YUI3的组件开发

Recommandé

Recommandé

Contenu connexe

Similaire à 基于YUI3的组件开发

Similaire à 基于YUI3的组件开发 (20)

Plus de jay li

Plus de jay li (20)

基于YUI3的组件开发