本文讨论了脚本组件的设计与编码，包括组件的定义、重用与封装的原则，以及如何设计灵活的组件接口。具体内容包括警告框、确认框等组件的构造方法及示例，以及接口与事件的设计细节。最后强调了需求、复用、封装、灵活性、接口及事件在组件设计中的重要性。

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 浮层呢？

11. 跳出来再想想，你现在使用的组件里还有哪些象 Alert 组件？

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 !