脚本组件 聊一聊脚本组件的设计和编码 Rank work@youa WED Team, Baidu Blog: www.never-online.net
什么是脚本组件? 对象管理小组( Object Management Group, OMG) 的“建模语言规范”中将组件定义为:“系统中一种物理的、可代替的部件、它封装了实现并提供了一系列可用的接口。一个组件代表一个系统中实现的物理部分,包括软...
<ul><li>浮层提示 </li></ul>需求
function  Alert (title, msg) { var  mask   = document.createElement('div'); var  alertBox  = document.createElement(...); ...
Reuse&Encapsulation 设计  重用 & 封装  的组件
function  Alert (title, msg) { this.title = title; this.msg  = msg; var mask  = document.createElement('div'); var alertBo...
建议 如果你想重用的代码,请放在 prototype 原型 上。
function  Alert (title, msg) { this.init.apply(this, arguments); }; Object.mix( Alert .prototype, (function(){ return { in...
人无远虑,必有近忧 我们能否考虑得长远些呢 ——  设计灵活的组件。
如果我要做一个登录浮层呢? 如果要做一个 confirm 浮层呢?
跳出来再想想,你现在使用的组件里还有哪些象 Alert 组件?
Overlay / Panel —  可浮动的容器。 Dialog LayerPopup LayerPopup Alert Confirm
If  Panel   is  a base  class . Dialog   has  a  Mask . Dialog   has  a  Popup . LayerPopup   is  a  BasePopup . LayerPopu...
——   组件   以  人  为本。 组件接口的设计及重载
一、构造函数 二、 show() 方法 layer. show (); layer. show (x); layer. show (x,y); layer. show (x,y,w); layer. show (x,y,w,h); layer....
Example layer = new  LayerPopup ({ close   : true, shadow   : true, cue   : true, corner   : true, width   : 500, height  ...
——   组件   以  人  为本。 接口统一
layer = new  LayerPopup ({ close   : true, shadow   : true, cue   : true, corner   : true, width   : 500, height   : 300, ...
大统一 ——  overlaylize Behavior demo $(‘overlay-box’). overlaylize ({ type   : ‘popup’, delayTime : 2000 }); $(‘overlay-box’)...
——   组件不接 业务 活 事件的设计
一、考虑 show() 接口,我要在显示的时候更改一下浮层里的内容。 二、我要在隐藏的时候,加入动画效果。 三、或者…在浮层里的表单未填完,不允许关闭浮层。 dlg = new  Dialog (HTMLElement); dlg. onaft...
我想要  Drag   功能… 我想要  Resize   功能… 我想要  自适应  功能… 我想要遮罩层要使用 尽量小 的内存 我想要按 ESC 键关闭浮层… 我想要 多浮层 时能够一个个关闭…
Windows System crash… If problems continue, Remove any demand or disable any one.
Windows  Restart
总结 <ul><li>需求 — 需求决定粒度 </li></ul><ul><li>复用 — 复用是根本 </li></ul><ul><li>封装 — 隐藏对象的属性和实现细节 </li></ul><ul><li>灵活 — 灵活才能胜任相似的工作...
从哪里获得学习的资源
<ul><li>Thanks </li></ul>!
Upcoming SlideShare
Loading in...5
×

JavaScript 脚本控件(二)

3,255

Published on

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,255
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
50
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

JavaScript 脚本控件(二)

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

    Clipping is a handy way to collect important slides you want to go back to later.

×