• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
javascript脚本控件(二)
 

javascript脚本控件(二)

on

  • 3,138 views

 

Statistics

Views

Total Views
3,138
Views on SlideShare
3,138
Embed Views
0

Actions

Likes
4
Downloads
47
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 非常nice的PPT
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    javascript脚本控件(二) javascript脚本控件(二) Presentation Transcript

    • 脚本组件 聊一聊脚本组件的设计和编码 Rank work@youa WED Team, Baidu Blog: 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 LayerPopup LayerPopup 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
      !