作为开发者，大家应该都知道浏览器中有一些内置的控件：Alert、Confirm等，但是这些控件通常会根据浏览器厂商的不同而有所不同但形状各异，视觉效果往往达不到UI设计师的要求。更重要的是，这种内置控件的风格很难与风格各异的各种互联网产品的设计风格统一。因此，优秀的前端开发者各自开发自己的个性化控件来替代浏览器内置的这些控件。当然，这种优秀的组件在网上已经数不胜数。写这篇文章的目的不是为了展示我开发的组件有多好，也不是为了炫耀。众多开发者相互交流，相互学习，共同进步。好了，废话少说，言归正传。功能介绍替换浏览器自带的Alert和Confirm控件。自定义界面风格与内置控件基本一致。效果预览1、Alert控件2、Confirm控件开发流程1.组件结构设计首先来看内置组件基本用法：1alert("内置Alert控件");2if(confirm("Turnoff内置的Confirm控件？”)){3alert("True");4}else{5alert("False");6}为了保证我们的组件使用与内置控件一致，我们必须考虑覆盖内置控件。考虑到组件开发风格统一、易用易维护、面向对象的特点，我打算将自定义的alert和confirm方法作为一个类（Winpop）的实例方法，最后使用实例方法来覆盖系统的内置控件。方法。为了达到目的，我的基本做法如下：1varobj=newWinpop();//创建Winpop的实例对象2//覆盖警告控件3window.alert=function(str){4obj.alert.call(obj,str);5};6//覆盖确认控件7window.confirm=function(str,cb){8obj.confirm.call(obj,str,cb);9};//这里跟大家推荐一个前端全栈开发交流圈：619586920突破技术瓶颈，提升思维能力。需要注意的是，由于浏览器内置的控件可以阻止浏览器的其他行为，我们的自定义组件是不具备这个能力的。尽可能统一，在预览中可以看到，我们在弹出自定义组件时使用了全屏半透明遮罩层。也正是因为以上原因，confirm组件的使用也略有调整，从内置的返回布尔值的方法改为使用回调函数的方法来保证“OK”和“Cancel”"可以正确添加逻辑。因此，自定义组件的用法变为如下形式：1alert("CustomAlertcomponent");2confirm("ClosethecustomConfirmcomponent?",function(flag){3if(flag){4alert("True");5}else{6alert("False");7}//这里我推荐前端全栈开发交流圈：619586920突破技术瓶颈，提升思维能力8});2.组件代码设计在正式介绍Winpop组件的代码之前，我们先看一下一个Javascript组件的基本结构：1(function(window,undefined){2functionJsClassName(cfg){3varconfig=cfg||{};4this.get=function(n){5returnconfig[n];6}7this.set=function(n,v){8config[n]=v;9}10this.init();11}12JsClassName.prototype={13init:function(){},14otherMethod:function(){}15};//这里推荐一个前端全栈开发交流圈：619586920突破技术瓶颈，提高思维能力16window.JsClassName=window.JsClassName||JsClassName;17})(window);使用一个自执行的匿名函数来包装我们的组件代码，尽可能的减少全局污染，最后我们的类附加到全局的window对象上，这是一个推荐的做法。构造函数中的get和set方法不是必须的，只是作者个人习惯而已。感觉这样写可以统一缓存和读取配置参数和其他组件内部全局变量的调用方法，看起来更面向对象。欢迎读者谈谈自己的想法，谈谈这样写好不好。这次给大家推荐一个免费的学习圈，总结了移动应用网站开发，css，html，webpack，vuenodeangular，面试资源。获取信息？？？对web开发技术感兴趣的同学欢迎加裙子：???582735936???，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效学习路线和教程免费分享给你，视频资料每天更新。接下来我们看一下Winpop组件的完整代码：1(function(window,jQuery,undefined){23varHTMLS={4ovl:'
