基于YUI3的组件开发
31
-
Upload
jay-li -
Category
Technology
-
view
2.694 -
download
4
Transcript of 基于YUI3的组件开发
组件化的web开发
组件化的web开发
•项目中我们关注的是如何组装这些颗粒化的组件，而不用花费精力去考究每个组件黑盒内的实现。从而使得项目开发更加高效。
组件化的web 开发 续
YUI2.x的组件
YUI2.x 的组件 续
YUI3.x的组件？
YUI3.x 的组件？ 续
• YUI3来势汹汹，但 YUI3还未有太多widget可用，我们需要手动开发组件。
组件的模样
组件的模样
•高内聚，低耦合• 组件 -> 不依赖环境
• 插件 -> 需要宿主环境
进一步看组件的模样
• 只对外暴露接口，供外界调用http://www.uedmagazine.com/test/call/Noname2.html
进一步看组件的模样 续
• 组件需要初始化 (构造器 ) why？• 依赖的子组件、库、皮肤• http://www.uedmagazine.com/test/tbrr.html
• 组件实例可被修改（重新初始化？）• http://www.uedmagazine.com/test/tbrr.html
再进一步看组件的模样
再进一步看组件的模样 续• 开发者需要关注的三部分
http://www.uedmagazine.com/test/tbrr.html http://www.uedmagazine.com/test/pagination-2.html http://www.uedmagazine.com/test/call/Noname2.html http://www.uedmagazine.com/test/box/msg.html
再进一步看组件的模样 续
• Module（ data） -> 数据 不确定• View -> UI 皮肤 半确定• Controller -> 交互和组件逻辑 确定
设计 &开发一个组件
组件的设计原则
• 组件源于项目而高于项目 -> 有意义的组件
• 不对使用环境进行假设 -> 可重用的组件• 容易理解的接口、参数 -> 易用的组件• 完善的黑盒中的交互 -> 优质健壮的组件
组件的开发原则
• 配置项的优先级• 尽可能少的类• 源码可扩展
配置项的优先级
• 基础配置• 缺省配置• 必填的配置
配置项的优先级 续
• 基础配置，项目中确定下来即不可修改
YAHOO.CN.msg = {isShowMod:true,isHiddenScroll:true,isOpenDrag:false,//…
};
Example:YAHOO关系弹出框组件
配置项的优先级 续• 缺省配置，参数为空的默认值T.tbwidget.calendar.prototype = {
buildParam:function(o){var that = this;var o = o || {};that.date = o.date || new Date();that.selectedate = o.selectedate || that.date;that.duration = o.duration || 0.9;that.easing = o.easing || Y.Easing.elasticOut;that.closeable= o.closeable || true;return this;
},//…
};
Example:日历组件 http://www.uedmagazine.com/test/call/t-calendar.js
配置项的优先级 续
• 必填的配置：缺少必要的参数会报错
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);
正确的参数
错误的参数
尽可能少的类•使用单体，&，原型单体是最佳选择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
组件源码的可扩展
• 组件状态相关数据的保存 ,为了再次渲染组件• 区分初始化 (init)和重新初始化 (render)
• init：生成对象new Widget()时调用
• render：根据运行时数据和当前状态渲染出ui随时调用
Example:分页组件 http://www.uedmagazine.com/test/pagination-2.html
组件开发进阶
组件开发进阶
• 属性属于对象，方法属于原型• 基于原型的 (显式 )构造器• 组件的自定义
基于原型的构造器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库在代码继承方面的设计
组件的自定义• YUI3
• T.box
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()
组件的生命周期
• 组件来源于一个特定的项目和业务场景• 开发者将通用的功能抽取出来，形成组件原型
• 更多项目和业务场景使用这个组件• 组件越来越完善和强壮• 组件使用更加广泛，生命周期远超过某个产品的生命周期
Would u like to know more…
• YUI3的自定义事件• YUI3的 augment和 extend• YUI3的 plugin
产品恒久远 组件永流传
Thank u~
