如何开发一个完整的JavaScript组件

作为一名开发者，大家应该都知道在浏览器中存在一些内置的控件：Alert，Confirm等，但是这些控件通常根据浏览器产商的不同而形态各异，视觉效果往往达不到UI设计师的要求。更重要的是，这类内置控件的风格很难与形形色色的各种风格迥异的互联网产品的设计风格统一。因此，优秀的前端开发者们各自开发自己的个性化控件来替代浏览器内置的这些控件。当然，这类组件在网络上已经有不计其数相当优秀的，写这篇文章的目的不是为了说明我开发的这个组件有多优秀，也不是为了炫耀什么，只是希望通过这种方式，与更多的开发者互相交流，互相学习，共同进步。好，废话不多说，言归正传。

成都服务器托管，创新互联公司提供包括服务器租用、西部信息服务器租用、带宽租用、云主机、机柜租用、主机租用托管、CDN网站加速、申请域名等业务的一体化完整服务。电话咨询：028-86922220

功能介绍

  • 取代浏览器自带的Alert、Confirm控件
  • 自定义界面样式
  • 使用方式与内置控件基本保持一致

效果预览

1、Alert控件

2、Confirm控件

3、完整代码，在线预览(见底部，提供压缩包下载)

#p#

开发过程

1. 组件结构设计

首先，我们来看下内置组件的基本使用方法：

 
 
    
  
  
  1. alert("内置Alert控件"); 
    2.   
  
  2. if (confirm("关闭内置Confirm控件？")) { 
    3.   
  
  3.     alert("True"); 
    4.   
  
  4. } else { 
    5.   
  
  5.     alert("False"); 
    6.   
  
  6. } 
    7.

为了保证我们的组件使用方式和内置控件保持一致，所以我们必须考虑覆盖内置控件。考虑到组件开发的风格统一，易用，易维护，以及面向对象等特性，我计划将自定义的alert和confirm方法作为一个类(Winpop)的实例方法，最后用实例方法去覆盖系统内置控件的方法。为了达到目的，我的基本做法如下：

 
 
    
  
  
  1. var obj = new Winpop(); // 创建一个Winpop的实例对象 
    2.   
  
  2. // 覆盖alert控件 
    3.   
  
  3. window.alert = function(str) { 
    4.   
  
  4.     obj.alert.call(obj, str); 
    5.   
  
  5. }; 
    6.   
  
  6. // 覆盖confirm控件 
    7.   
  
  7. window.confirm = function(str, cb) { 
    8.   
  
  8.     obj.confirm.call(obj, str, cb); 
    9.   
  
  9. }; 
    10.

需要注意的是，由于浏览器内置的控件可以阻止浏览器的其他行为，而我们自定义的组件并不能具备这种能力，为了尽可能的做到统一，正如预览图上看到的，我们在弹出自定义组件的时候使用了一个全屏半透明遮罩层。也正是由于上述原因，confirm组件的使用方式也做了一些细微的调整，由内置返回布尔值的方式，改为使用回调函数的方式，以确保可以正确的添加“确定”和“取消”的逻辑。因此，自定义组件的使用方式就变成了下面这种形式：

 
 
    
  
  
  1. alert("自定义Alert组件"); 
    2.   
  
  2. confirm("关闭自定义Confirm组件？", function(flag){ 
    3.   
  
  3.     if (flag) { 
    4.   
  
  4.         alert("True"); 
    5.   
  
  5.     } else { 
    6.   
  
  6.         alert("False"); 
    7.   
  
  7.     } 
    8.   
  
  8. }); 
    9.

2. 组件代码设计

在正式介绍Winpop组件的代码之前，我们先来看一下一个Javascript组件的基本结构：

 
 
    
  
  
  1. function(window, undefined) { 
    2.   
  
  2.     function JsClassName(cfg) { 
    3.   
  
  3.         var config = cfg || {}; 
    4.   
  
  4.         this.get = function(n) { 
    5.   
  
  5.             return config[n]; 
    6.   
  
  6.         } 
    7.   
  
  7.         this.set = function(n, v) { 
    8.   
  
  8.             config[n] = v; 
    9.   
  
  9.         } 
    10.   
  
  10.         this.init(); 
    11.   
  
  11.     } 
    12.   
  
  12.     JsClassName.prototype = { 
    13.   
  
  13.         init: function(){}, 
    14.   
  
  14.         otherMethod: function(){} 
    15.   
  
  15.     }; 
    16.   
  
  16.     window.JsClassName = window.JsClassName || JsClassName; 
    17.   
  
  17. })(window); 
    18.

使用一个自执行的匿名函数将我们的组件代码包裹起来，尽可能的减少全局污染，最后再将我们的类附到全局window对象上，这是一种比较推荐的做法。

构造函数中的get、set方法不是必须的，只是笔者的个人习惯而已，觉得这样写可以将配置参数和其他组件内部全局变量缓存和读取的调用方式统一，似乎也更具有面向对象的型。欢迎读者们说说各自的想法，说说这样写到底好不好。

接下来我们一起看下Winpop组件的完整代码：

 
 
    
  
  
  1. (function(window, jQuery, undefined) { 
    2.   
  
  2.   
    3.   
  
  3.     var HTMLS = { 
    4.   
  
  4.         ovl: '
' + '' + '
' + '
' + '', 
  •         alert: '', 
  •         confirm: '' + '' 
  •     } 
  •   
  •     function Winpop() { 
  •         var config = {}; 
  •         this.get = function(n) { 
  •             return config[n]; 
  •         } 
  •   
  •         this.set = function(n, v) { 
  •             config[n] = v; 
  •         } 
  •         this.init(); 
  •     } 
  •   
  •     Winpop.prototype = { 
  •         init: function() { 
  •             this.createDom(); 
  •             this.bindEvent(); 
  •         }, 
  •         createDom: function() { 
  •             var body = jQuery("body"), 
  •                 ovl = jQuery("#J_WinpopBox"); 
  •   
  •             if (ovl.length === 0) { 
  •                 body.append(HTMLS.ovl); 
  •             } 
  •   
  •             this.set("ovl", jQuery("#J_WinpopBox")); 
  •             this.set("mask", jQuery("#J_WinpopMask")); 
  •         }, 
  •         bindEvent: function() { 
  •             var _this = this, 
  •                 ovl = _this.get("ovl"), 
  •                 mask = _this.get("mask"); 
  •             ovl.on("click", ".J_AltBtn", function(e) { 
  •                 _this.hide(); 
  •             }); 
  •             ovl.on("click", ".J_CfmTrue", function(e) { 
  •                 var cb = _this.get("confirmBack"); 
  •                 _this.hide(); 
  •                 cb && cb(true); 
  •             }); 
  •             ovl.on("click", ".J_CfmFalse", function(e) { 
  •                 var cb = _this.get("confirmBack"); 
  •                 _this.hide(); 
  •                 cb && cb(false); 
  •             }); 
  •             mask.on("click", function(e) { 
  •                 _this.hide(); 
  •             }); 
  •             jQuery(document).on("keyup", function(e) { 
  •                 var kc = e.keyCode, 
  •                     cb = _this.get("confirmBack");; 
  •                 if (kc === 27) { 
  •                     _this.hide(); 
  •                 } else if (kc === 13) { 
  •                     _this.hide(); 
  •                     if (_this.get("type") === "confirm") { 
  •                         cb && cb(true); 
  •                     } 
  •                 } 
  •             }); 
  •         }, 
  •         alert: function(str, btnstr) { 
  •             var str = typeof str === 'string' ? str : str.toString(), 
  •                 ovl = this.get("ovl"); 
  •             this.set("type", "alert"); 
  •             ovl.find(".J_WinpopMain").html(str); 
  •             if (typeof btnstr == "undefined") { 
  •                 ovl.find(".J_WinpopBtns").html(HTMLS.alert); 
  •             } else { 
  •                 ovl.find(".J_WinpopBtns").html(btnstr); 
  •             } 
  •             this.show(); 
  •         }, 
  •         confirm: function(str, callback) { 
  •             var str = typeof str === 'string' ? str : str.toString(), 
  •                 ovl = this.get("ovl"); 
  •             this.set("type", "confirm"); 
  •             ovl.find(".J_WinpopMain").html(str); 
  •             ovl.find(".J_WinpopBtns").html(HTMLS.confirm); 
  •             this.set("confirmBack", (callback || function() {})); 
  •             this.show(); 
  •         }, 
  •         show: function() { 
  •             this.get("ovl").show(); 
  •             this.get("mask").show(); 
  •         }, 
  •         hide: function() { 
  •             var ovl = this.get("ovl"); 
  •             ovl.find(".J_WinpopMain").html(""); 
  •             ovl.find(".J_WinpopBtns").html(""); 
  •             ovl.hide(); 
  •             this.get("mask").hide(); 
  •         }, 
  •         destory: function() { 
  •             this.get("ovl").remove(); 
  •             this.get("mask").remove(); 
  •             delete window.alert; 
  •             delete window.confirm; 
  •         } 
  •     }; 
  •   
  •     var obj = new Winpop(); 
  •     window.alert = function(str) { 
  •         obj.alert.call(obj, str); 
  •     }; 
  •     window.confirm = function(str, cb) { 
  •         obj.confirm.call(obj, str, cb); 
  •     }; 
  • })(window, jQuery); 

    • 代码略多，关键做以下几点说明：

    最后

    作为一个前端开发工程师，个人觉得Javascript组件开发是一件很有意思的事情，其中乐趣只有自己亲自动手尝试了才会体会得到。前端组件开发往往需要Javascript、CSS和html相互配合，才能事半功倍，上面提到的Winpop也不例外，这里给大家提供一个完整的demo压缩包，有兴趣的读者朋友，欢迎传播。

    分享标题：如何开发一个完整的JavaScript组件
    分享网址：http://www.hantingmc.com/qtweb/news15/107215.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    用户体验知识

    同城分类信息

    成都seo优化　　 　葆金莱自动门　　 　微信公众号开发　　 　成都网络推广　　 　香港云服务器租用　　 　香港四川國際商會　　 　成都模版网站建设　　 　成都400电话　　 　普能电气　　 　成都办公窗帘　　 　成都企业网站建设　　 　成都网站设计　　 　成都棕树机房　　 　宜宾网站营销推广　　 　成都电信光华数据中心　　 　成都网站设计制作公司　　 　网站制作　　 　服务器租用　　 　商城系统开发　　 　成都钢筋机械设备