作為一名開發者，大家應該都知道在浏覽器中存在一些内置的控件：alert，confirm等，但是這些控件通常根據浏覽器産商的不同而形态各異，視覺效果往往達不到ui設計師的要求。更重要的是，這類内置控件的風格很難與形形色色的各種風格迥異的網際網路産品的設計風格統一。是以，優秀的前端開發者們各自開發自己的個性化控件來替代浏覽器内置的這些控件。當然，這類元件在網絡上已經有不計其數相當優秀的，寫這篇文章的目的不是為了說明我開發的這個元件有多優秀，也不是為了炫耀什麼，隻是希望通過這種方式，與更多的開發者互相交流，互相學習，共同進步。好，廢話不多說，言歸正傳。
功能介紹
取代浏覽器自帶的alert、confirm控件
自定義界面樣式
使用方式與内置控件基本保持一緻
效果預覽
1、alert控件
2、confirm控件
開發過程
1. 元件結構設計
首先，我們來看下内置元件的基本使用方法：
alert("内置alert控件");
if (confirm("關閉内置confirm控件？")) {
alert("true");
} else {
alert("false");
}
為了保證我們的元件使用方式和内置控件保持一緻，是以我們必須考慮覆寫内置控件。考慮到元件開發的風格統一，易用，易維護，以及面向對象等特性，我計劃将自定義的alert和confirm方法作為一個類(winpop)的執行個體方法，最後用執行個體方法去覆寫系統内置控件的方法。為了達到目的，我的基本做法如下：
var obj = new winpop(); // 建立一個winpop的執行個體對象
// 覆寫alert控件
window.alert = function(str) {
obj.alert.call(obj, str);
};
// 覆寫confirm控件
window.confirm = function(str, cb) {
obj.confirm.call(obj, str, cb);
需要注意的是，由于浏覽器内置的控件可以阻止浏覽器的其他行為，而我們自定義的元件并不能具備這種能力，為了盡可能的做到統一，正如預覽圖上看到的，我們在彈出自定義元件的時候使用了一個全屏半透明遮罩層。也正是由于上述原因，confirm元件的使用方式也做了一些細微的調整，由内置傳回布爾值的方式，改為使用回調函數的方式，以確定可以正确的添加“确定”和“取消”的邏輯。是以，自定義元件的使用方式就變成了下面這種形式：
alert("自定義alert元件");
confirm("關閉自定義confirm元件？", function(flag){
if (flag) {
alert("true");
} else {
alert("false");
}
});
2. 元件代碼設計
在正式介紹winpop元件的代碼之前，我們先來看一下一個javascript元件的基本結構：
function(window, undefined) {
function jsclassname(cfg) {
var config = cfg || {};
this.get = function(n) {
return config[n];
}
this.set = function(n, v) {
config[n] = v;
this.init();
jsclassname.prototype = {
init: function(){},
othermethod: function(){}
};
window.jsclassname = window.jsclassname || jsclassname;
})(window);
使用一個自執行的匿名函數将我們的元件代碼包裹起來，盡可能的減少全局污染，最後再将我們的類附到全局window對象上，這是一種比較推薦的做法。
構造函數中的get、set方法不是必須的，隻是筆者的個人習慣而已，覺得這樣寫可以将配置參數和其他元件内部全局變量緩存和讀取的調用方式統一，似乎也更具有面向對象的型。歡迎讀者們說說各自的想法，說說這樣寫到底好不好。
接下來我們一起看下winpop元件的完整代碼：
(function(window, jquery, undefined) {
var htmls = {
ovl: '<div class="j_winpopmask winpop-mask" id="j_winpopmask"></div>' + '<div class="j_winpopbox winpop-box" id="j_winpopbox">' + '<div class="j_winpopmain winpop-main"></div>' + '<div class="j_winpopbtns winpop-btns"></div>' + '</div>',
alert: '<input type="button" class="j_altbtn pop-btn alert-button" value="确定">',
confirm: '<input type="button" class="j_cfmfalse pop-btn confirm-false" value="取消">' + '<input type="button" class="j_cfmtrue pop-btn confirm-true" value="确定">'
function winpop() {
var config = {};
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");
cb && cb(true);
ovl.on("click", ".j_cfmfalse", function(e) {
cb && cb(false);
mask.on("click", function(e) {
jquery(document).on("keyup", function(e) {
var kc = e.keycode,
cb = _this.get("confirmback");;
if (kc === 27) {
_this.hide();
} else if (kc === 13) {
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) {
this.set("type", "confirm");
ovl.find(".j_winpopbtns").html(htmls.confirm);
this.set("confirmback", (callback || function() {}));
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);
代碼略多，關鍵做以下幾點說明：
筆者偷了懶，使用了jquery，使用之前請先保證已經引入了jquery
自定義元件結構最終是追加到body中的，是以在引入以上js之前，請先確定文檔已經加載完成
元件添加了按esc、點遮罩層隐藏元件功能
注意：雖然本例中未用到 destory 方法，但讀者朋友可以注意一下該方法中的 delete window.alert 和
delete window.confirm ，這樣寫的目的是保證在自定義元件銷毀後，将alert、confirm控件恢複到浏覽器内置效果
元件最後如果加上 window.winpop = winpop ，就可以将對象全局化供其他類調用了
最後
來源：51cto