javascript 脚本控件（二）
DESCRIPTION
TRANSCRIPT
脚本组件 聊一聊脚本组件的设计和编码Rank work@youa WED Team, BaiduBlog: www.never-online.net
什么是脚本组件？
对象管理小组（ Object Management Group, OMG) 的“建模语言规范”中将组件定义为：“系统中一种物理的、可代替的部件、它封装了实现并提供了一系列可用的接口。一个组件代表一个系统中实现的物理部分，包括软件代码（源代码，二进制代码，可执行代码）或者一些类似内容，如脚本或者命令文件。”
• 浮层提示需求
function Alert(title, msg) {
var mask = document.createElement('div');var alertBox = document.createElement(...);var title = document.createElement(...);var content = document.createElement(...);var close = document.createElement(...);
mask.className = 'mask';alertBox.className = 'alertbox';title.className = 'title';content.className = 'content';
mask.style.display = 'block';alertbox.style.display = 'block';
}
Alert('rank', 'test');
Reuse&Encapsulation
设计 重用 & 封装 的组件
function Alert(title, msg) {
this.title = title;this.msg = msg;
var mask = document.createElement('div');var alertBox = document.createElement('div');var content = document.createElement('div');var title = document.createElement('div');
this.setTitle = function(title) {return this.title = title;
};this.setMsg = function(msg) { {
return this.msg = msg;};this.show = function() {
};return this;
};
var instanceAlert = new Alert('rank','test');instanceAlert.show();
假设有一个类继承了 Alert 类，子类也有一个 setTitle 方法，那么就不好复用父类的代码了。
建议如果你想重用的代码，请放在 prototype 原型上。
function Alert(title, msg) {this.init.apply(this, arguments);
};
Object.mix(Alert.prototype, (function(){return {
init : function(title, msg){},setTitle : function(title) {},setMsg : function(msg) {},show : function() {}
}})());
var instanceAlert = new Alert(‘rank’,’test’);instanceAlert.show();
人无远虑，必有近忧我们能否考虑得长远些呢 —— 设计灵活的组件。
如果我要做一个登录浮层呢？如果要做一个 confirm 浮层呢？
跳出来再想想，你现在使用的组件里还有哪些象 Alert 组件？
Overlay / Panel — 可浮动的容器。
Dialog
LayerPopupLayerPopup
Alert
Confirm
If Panel is a base class.
Dialog has a Mask.Dialog has a Popup.
LayerPopup is a BasePopup.LayerPopup has delayShow, delayHide().
BaseLayer is a Panel.BaseLayer has a close button.BaseLayer has a header.BaseLayer has a footer.BaseLayer has a shadow.BaseLayer has a corner.……
Alert is a Dialog.Confirm is a Dialog.
—— 组件 以 人 为本。组件接口的设计及重载
一、构造函数
二、 show() 方法layer.show();layer.show(x);layer.show(x,y);layer.show(x,y,w);layer.show(x,y,w,h);layer.show(x,y,w,h,HTMLElement);
var layer = new LayerPopup(HTMLElement);var layer = new LayerPopup(HTMLElement, config);var layer = new LayerPopup(config);
Example
render
Example
layer = new LayerPopup({close : true,shadow : true,cue : true,corner : true,width : 500,height : 300,useESCKey : true,useIframe : true,caption : ‘title’,content : ‘<div>test</div>’,className : ‘panel pupop-t1’,autoPosition: true,delayTime : 500,
});
—— 组件 以 人 为本。接口统一
layer = new LayerPopup({close : true,shadow : true,cue : true,corner : true,width : 500,height : 300,useESCKey : true,caption : ‘title’,content : ‘<div>test</div>’,className : ‘panel pupop-t1’,autoPosition: true,delayTime : 500
});layer.show();dialog.hide();
dialog = new Dialog();dialog.show();dialog.hide();
MessageBox.alert({ icon:MB_ICON.SUCCESS, caption:' 这是个示例的 messagebox',content:' 如果您的浏览器 3 秒内没有自动跳转，请点击这里 '
}).show();
MessageBox.confirm({ caption:' 这是个示例的 messagebox', content:' 如果您的浏览器 3 秒内没有自动跳转，请点击这里 '
}).show();
大统一 —— overlaylize Behavior demo
$(‘overlay-box’).overlaylize({type : ‘popup’,delayTime: 2000
});
$(‘overlay-box’).overlaylize({type : ‘dialog’,modal: true,width: 300,useIframe: true
});
—— 组件不接业务活事件的设计
一、考虑 show() 接口，我要在显示的时候更改一下浮层里的内容。
二、我要在隐藏的时候，加入动画效果。
三、或者…在浮层里的表单未填完，不允许关闭浮层。dlg = new Dialog(HTMLElement);dlg.onafterhide = function(){ dlg.show(); }
dlg = new Dialog(HTMLElement);dlg.onbeforehide = function(evt){
evt.preventDefault(evt);//animation code here.dlg.fireEvent(‘hide’);
}
dlg = new Dialog(HTMLElement);dlg.onbeforshow = function(evt){
//bussiness code here}
AOP Events ---- Before, after or more.
我想要 Drag 功能…我想要 Resize 功能…我想要 自适应 功能…
我想要遮罩层要使用尽量小的内存我想要按 ESC 键关闭浮层…我想要多浮层时能够一个个关闭…
Windows System crash…If problems continue, Remove any demand or disable any one.
Windows Restart
总结
• 需求 — 需求决定粒度• 复用 — 复用是根本• 封装 — 隐藏对象的属性和实现细节• 灵活 — 灵活才能胜任相似的工作• 接口 — 接口是组件的眼睛• 事件 — 事件是解决业务的方法• 易用 — 如果难用，代码再优雅也等于零
从哪里获得学习的资源
Thanks!