作为开发者，大家应该都知道浏览器中有一些内置的控件：Alert、Confirm等，但是这些控件通常会根据不同的浏览器厂商有不同的形状、视觉效果效果往往达不到UI设计师的要求。更重要的是，这种内置控件的风格很难与风格各异的各种互联网产品的设计风格统一。因此，优秀的前端开发者各自开发自己的个性化控件来替代浏览器内置的这些控件。当然，这种优秀的组件在网上已经数不胜数。写这篇文章的目的不是为了展示我开发的组件有多好，也不是为了炫耀。众多开发者相互交流，相互学习，共同进步。好了，废话少说，言归正传。功能介绍替换浏览器自带的Alert和Confirm控件。自定义界面风格与内置控件基本一致。效果预览1、Alert控件2、Confirm控件3、完整代码、在线预览（见底部，提供压缩包下载）#p#开发过程一、组件结构设计首先我们来看一下内置组件的基本用法：alert("内置Alert控件");if(confirm("关闭内置Confirm控件？")){alert("True");}else{alert("False");}为了确保我们的组件使用与内置控件一致，我们必须考虑覆盖内置控件。考虑到组件开发风格统一、易用、易维护、面向对象的特点，我打算将自定义的alert和confirm方法作为一个类（Winpop）的实例方法，最后用实例方法覆盖系统的内置控件。方法。为了达到目的，我的基本做法是：varobj=newWinpop();//创建一个Winpop的实例对象//覆盖alert控件window.alert=function(str){obj.alert.call(obj,str);};//覆盖确认控件window.confirm=function(str,cb){obj.confirm.call(obj,str,cb);};需要注意的是，因为浏览器内置的控件可以阻止浏览器的其他行为，而我们自定义的组件是没有这个能力的，为了尽可能的统一，预览中可以看到，我们使用了一个自定义组件弹出时的全屏半透明遮罩层。也正是因为以上原因，confirm组件的使用也略有调整，从内置的返回布尔值的方法改为使用回调函数的方法来保证“OK”和“Cancel”"可以正确添加逻辑。因此，自定义组件的使用就变成了下面的形式：alert("CustomAlertcomponent");confirm("关闭自定义确认组件？",function(flag){if(flag){alert("True");}else{alert("False");}});2.组件代码设计在正式介绍Winpop组件的代码之前，我们先看一下一个Javascript组件的基本结构：function(window,undefined){functionJsClassName(cfg){varconfig=cfg||{};this。get=function(n){returnconfig[n];}this.set=function(n,v){config[n]=v;}this.init();}JsClassName.prototype={init:function(){},otherMethod:function(){}};window.JsClassName=window.JsClassName||JsClassName;})(窗口);使用一个自执行的匿名函数包装我们的组件代码以尽可能地减少全局污染，最后将我们的类附加到全局窗口对象上。这是推荐的方法。构造函数中的get和set方法不是必须的，只是作者个人习惯而已。感觉这样写可以统一缓存和读取配置参数和其他组件内部全局变量的调用方法，看起来更面向对象。欢迎读者谈谈自己的想法，谈谈这样写好不好。接下来我们看一下Winpop组件的完整代码：+'
