唯独这么些控件平常依据浏览器产商的不及而形态各异

用作一名开采者,大家应该都领会在浏览器中存在有的置于的控件:Alert,Confirm等,可是那一个控件平时遵照浏览器产商的两样而形态各异,视觉效果往往达不到UI设计员的渴求。更要紧的是,那类内置控件的品格很难与五颜六色的各类风格迥然差别的互连网产物的希图风格统风姿洒脱。由此,优秀的前端开垦者们分别开拓和睦的天性化控件来代替浏览器内置的那些控件。当然,那类组件在网络上曾经有意气风发体系出色特出的,写那篇小说的目标不是为了验证自身付出的这一个组件有多优良,亦不是为了炫目什么,只是希望经过这种办法,与更加多的开荒者互相交换,相互学习,协同升高。好,废话十分的少说,言归正传。

功效介绍

  • 代替浏览器自带的Alert、Confirm控件
  • 自定义分界面样式
  • 应用办法与内置控件基本保持风流洒脱致

意义预览

1、Alert控件

图片 1

2、Confirm控件

图片 2

3、完整代码,在线预览(见尾巴部分,提供压缩包下载)

支付进程

1. 组件布局设计

先是,大家来看下内置组件的大旨使用办法:

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

为了保证大家的零器件使用方法和放手控件保持生机勃勃致,所以大家必须思索覆盖内置控件。思索到零器件开拓的风骨统大器晚成,易用,易维护,以致面向对象等特点,笔者安顿将自定义的alert和confirm方法作为叁个类(Winpop)的实例方法,最终用实例方法去蒙蔽种类内置控件的不二秘籍。为了到达指标,作者的着力做法如下:

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

亟需注意的是,由于浏览器内置的控件能够阻挡浏览器的别的行为,而小编辈自定义的机件并不能够抱有这种技能,为了尽大概的完成统朝气蓬勃,正如预览图上看看的,大家在弹出自定义组件的时候使用了三个全屏半透明遮罩层。也多亏由于上述原因,confirm组件的应用办法也做了一些分寸的调节,由松开再次来到布尔值的点子,改为利用回调函数的章程,以保障能够正确的增加“明确”和“撤销”的逻辑。由此,自定义组件的利用方法就改为了上边这种样式:

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

2. 组件代码设计

在专门的学问介绍Winpop组件的代码之前,我们先来看一下二个Javascript组件的主导布局:

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

利用一个自实施的佚名函数将大家的组件代码包裹起来,尽恐怕的回退全局污染,最终再将我们的类附到全局window对象上,那是豆蔻梢头种相比推荐的做法。

结构函数中的get、set方法不是必需的,只是作者的个体习于旧贯而已,认为这么写能够将安顿参数和其他零器件内部全局变量缓存和读取的调用格局统风姿洒脱,如同也更享有面向对象的型。招待读者们说说个其他主见,说说这么写到底好不好。

接下去大家联合看下Winpop组件的后生可畏体化代码:

  1 (function(window, jQuery, undefined) {
  2 
  3     var HTMLS = {
  4         ovl: '<div id="J_WinpopMask"></div>' + '<div id="J_WinpopBox">' + '<div></div>' + '<div></div>' + '</div>',
  5         alert: '<input type="button" value="确定">',
  6         confirm: '<input type="button" value="取消">' + '<input type="button" value="确定">'
  7     }
  8 
  9     function Winpop() {
 10         var config = {};
 11         this.get = function(n) {
 12             return config[n];
 13         }
 14 
 15         this.set = function(n, v) {
 16             config[n] = v;
 17         }
 18         this.init();
 19     }
 20 
 21     Winpop.prototype = {
 22         init: function() {
 23             this.createDom();
 24             this.bindEvent();
 25         },
 26         createDom: function() {
 27             var body = jQuery("body"),
 28                 ovl = jQuery("#J_WinpopBox");
 29 
 30             if (ovl.length === 0) {
 31                 body.append(HTMLS.ovl);
 32             }
 33 
 34             this.set("ovl", jQuery("#J_WinpopBox"));
 35             this.set("mask", jQuery("#J_WinpopMask"));
 36         },
 37         bindEvent: function() {
 38             var _this = this,
 39                 ovl = _this.get("ovl"),
 40                 mask = _this.get("mask");
 41             ovl.on("click", ".J_AltBtn", function(e) {
 42                 _this.hide();
 43             });
 44             ovl.on("click", ".J_CfmTrue", function(e) {
 45                 var cb = _this.get("confirmBack");
 46                 _this.hide();
 47                 cb && cb(true);
 48             });
 49             ovl.on("click", ".J_CfmFalse", function(e) {
 50                 var cb = _this.get("confirmBack");
 51                 _this.hide();
 52                 cb && cb(false);
 53             });
 54             mask.on("click", function(e) {
 55                 _this.hide();
 56             });
 57             jQuery(document).on("keyup", function(e) {
 58                 var kc = e.keyCode,
 59                     cb = _this.get("confirmBack");;
 60                 if (kc === 27) {
 61                     _this.hide();
 62                 } else if (kc === 13) {
 63                     _this.hide();
 64                     if (_this.get("type") === "confirm") {
 65                         cb && cb(true);
 66                     }
 67                 }
 68             });
 69         },
 70         alert: function(str, btnstr) {
 71             var str = typeof str === 'string' ? str : str.toString(),
 72                 ovl = this.get("ovl");
 73             this.set("type", "alert");
 74             ovl.find(".J_WinpopMain").html(str);
 75             if (typeof btnstr == "undefined") {
 76                 ovl.find(".J_WinpopBtns").html(HTMLS.alert);
 77             } else {
 78                 ovl.find(".J_WinpopBtns").html(btnstr);
 79             }
 80             this.show();
 81         },
 82         confirm: function(str, callback) {
 83             var str = typeof str === 'string' ? str : str.toString(),
 84                 ovl = this.get("ovl");
 85             this.set("type", "confirm");
 86             ovl.find(".J_WinpopMain").html(str);
 87             ovl.find(".J_WinpopBtns").html(HTMLS.confirm);
 88             this.set("confirmBack", (callback || function() {}));
 89             this.show();
 90         },
 91         show: function() {
 92             this.get("ovl").show();
 93             this.get("mask").show();
 94         },
 95         hide: function() {
 96             var ovl = this.get("ovl");
 97             ovl.find(".J_WinpopMain").html("");
 98             ovl.find(".J_WinpopBtns").html("");
 99             ovl.hide();
100             this.get("mask").hide();
101         },
102         destory: function() {
103             this.get("ovl").remove();
104             this.get("mask").remove();
105             delete window.alert;
106             delete window.confirm;
107         }
108     };
109 
110     var obj = new Winpop();
111     window.alert = function(str) {
112         obj.alert.call(obj, str);
113     };
114     window.confirm = function(str, cb) {
115         obj.confirm.call(obj, str, cb);
116     };
117 })(window, jQuery);

代码略多,关键做以下几点表明:

  • 作者偷了懒,使用了jQuery,使用以前请先有限支撑已经引入了jQuery
  • 自定义组件布局最后是充实到body中的,所以在引进以上js以前,请先确认保障文书档案已经加载成功
  • 组件加多了按ESC、点遮罩层隐敝组件成效
  • 注意:虽说本例中未用到 destory 方法,但读者朋友能够小心一下该情势中的 delete window.alert 和 delete window.confirm ,那样写的指标是承保在自定义组件销毁后,将Alert、Confirm控件恢复到浏览器内置效果
  • 构件最后只要加上 window.Winpop =
    Winpop ,就能够将对象全局化供其余类调用了

最后

用作贰个前端开拓程序猿,个人以为Javascript组件开荒是大器晚成件很有趣的政工,当中国音乐趣唯有团结亲自入手尝试了才会心得获得。前端组件开辟往往需求Javascript、CSS和html互相协作,技艺一本万利,下面提到的Winpop也不例外,这里给大家提供一个完整的demo压缩包,有意思味的读者朋友,款待传播。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website