javascript 脚本控件(二)
DESCRIPTION
TRANSCRIPT
![Page 1: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/1.jpg)
脚本组件 聊一聊脚本组件的设计和编码Rank work@youa WED Team, BaiduBlog: www.never-online.net
![Page 2: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/2.jpg)
什么是脚本组件?
对象管理小组( Object Management Group, OMG) 的“建模语言规范”中将组件定义为:“系统中一种物理的、可代替的部件、它封装了实现并提供了一系列可用的接口。一个组件代表一个系统中实现的物理部分,包括软件代码(源代码,二进制代码,可执行代码)或者一些类似内容,如脚本或者命令文件。”
![Page 3: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/3.jpg)
• 浮层提示需求
![Page 4: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/4.jpg)
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');
![Page 5: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/5.jpg)
Reuse&Encapsulation
设计 重用 & 封装 的组件
![Page 6: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/6.jpg)
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 方法,那么就不好复用父类的代码了。
![Page 7: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/7.jpg)
建议如果你想重用的代码,请放在 prototype 原型上。
![Page 8: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/8.jpg)
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();
![Page 9: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/9.jpg)
人无远虑,必有近忧我们能否考虑得长远些呢 —— 设计灵活的组件。
![Page 10: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/10.jpg)
如果我要做一个登录浮层呢?如果要做一个 confirm 浮层呢?
![Page 11: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/11.jpg)
跳出来再想想,你现在使用的组件里还有哪些象 Alert 组件?
![Page 12: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/12.jpg)
Overlay / Panel — 可浮动的容器。
Dialog
LayerPopupLayerPopup
Alert
Confirm
![Page 13: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/13.jpg)
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.
![Page 14: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/14.jpg)
—— 组件 以 人 为本。组件接口的设计及重载
![Page 15: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/15.jpg)
一、构造函数
二、 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
![Page 16: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/16.jpg)
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,
});
![Page 17: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/17.jpg)
—— 组件 以 人 为本。接口统一
![Page 18: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/18.jpg)
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();
![Page 19: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/19.jpg)
大统一 —— overlaylize Behavior demo
$(‘overlay-box’).overlaylize({type : ‘popup’,delayTime: 2000
});
$(‘overlay-box’).overlaylize({type : ‘dialog’,modal: true,width: 300,useIframe: true
});
![Page 20: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/20.jpg)
—— 组件不接业务活事件的设计
![Page 21: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/21.jpg)
一、考虑 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.
![Page 22: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/22.jpg)
我想要 Drag 功能…我想要 Resize 功能…我想要 自适应 功能…
我想要遮罩层要使用尽量小的内存我想要按 ESC 键关闭浮层…我想要多浮层时能够一个个关闭…
![Page 23: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/23.jpg)
Windows System crash…If problems continue, Remove any demand or disable any one.
![Page 24: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/24.jpg)
Windows Restart
![Page 25: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/25.jpg)
总结
• 需求 — 需求决定粒度• 复用 — 复用是根本• 封装 — 隐藏对象的属性和实现细节• 灵活 — 灵活才能胜任相似的工作• 接口 — 接口是组件的眼睛• 事件 — 事件是解决业务的方法• 易用 — 如果难用,代码再优雅也等于零
![Page 26: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/26.jpg)
从哪里获得学习的资源
![Page 27: JavaScript 脚本控件(二)](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b79a634a795969608b464a/html5/thumbnails/27.jpg)
Thanks!