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