作為一名開發(fā)者，大家應(yīng)該都知道在瀏覽器中存在一些內(nèi)置的控件：Alert，Confirm等，但是這些控件通常根據(jù)瀏覽器產(chǎn)商的不同而形態(tài)各異，視覺效果往往達(dá)不到UI設(shè)計師的要求。更重要的是，這類內(nèi)置控件的風(fēng)格很難與形形色色的各種風(fēng)格迥異的互聯(lián)網(wǎng)產(chǎn)品的設(shè)計風(fēng)格統(tǒng)一。因此，優(yōu)秀的前端開發(fā)者們各自開發(fā)自己的個性化控件來替代瀏覽器內(nèi)置的這些控件。當(dāng)然，這類組件在網(wǎng)絡(luò)上已經(jīng)有不計其數(shù)相當(dāng)優(yōu)秀的，寫這篇文章的目的不是為了說明我開發(fā)的這個組件有多優(yōu)秀，也不是為了炫耀什么，只是希望通過這種方式，與更多的開發(fā)者互相交流，互相學(xué)習(xí)，共同進步。好，廢話不多說，言歸正傳。

功能介紹

• 取代瀏覽器自帶的Alert、Confirm控件
• 自定義界面樣式
• 使用方式與內(nèi)置控件基本保持一致

效果預(yù)覽

1、Alert控件

2、Confirm控件

3、完整代碼，在線預(yù)覽(見底部，提供壓縮包下載)

#p#

開發(fā)過程

1. 組件結(jié)構(gòu)設(shè)計

首先，我們來看下內(nèi)置組件的基本使用方法：

alert("內(nèi)置Alert控件"); 
if (confirm("關(guān)閉內(nèi)置Confirm控件？")) { 
    alert("True"); 
} else { 
    alert("False"); 
} 

為了保證我們的組件使用方式和內(nèi)置控件保持一致，所以我們必須考慮覆蓋內(nèi)置控件?？紤]到組件開發(fā)的風(fēng)格統(tǒng)一，易用，易維護，以及面向?qū)ο蟮忍匦?，我計劃將自定義的alert和confirm方法作為一個類(Winpop)的實例方法，最后用實例方法去覆蓋系統(tǒng)內(nèi)置控件的方法。為了達(dá)到目的，我的基本做法如下：

var obj = new Winpop(); // 創(chuàng)建一個Winpop的實例對象 
// 覆蓋alert控件 
window.alert = function(str) { 
    obj.alert.call(obj, str); 
}; 
// 覆蓋confirm控件 
window.confirm = function(str, cb) { 
    obj.confirm.call(obj, str, cb); 
}; 

需要注意的是，由于瀏覽器內(nèi)置的控件可以阻止瀏覽器的其他行為，而我們自定義的組件并不能具備這種能力，為了盡可能的做到統(tǒng)一，正如預(yù)覽圖上看到的，我們在彈出自定義組件的時候使用了一個全屏半透明遮罩層。也正是由于上述原因，confirm組件的使用方式也做了一些細(xì)微的調(diào)整，由內(nèi)置返回布爾值的方式，改為使用回調(diào)函數(shù)的方式，以確?？梢哉_的添加“確定”和“取消”的邏輯。因此，自定義組件的使用方式就變成了下面這種形式：

alert("自定義Alert組件"); 
confirm("關(guān)閉自定義Confirm組件？", function(flag){ 
    if (flag) { 
        alert("True"); 
    } else { 
        alert("False"); 
    } 
}); 

2. 組件代碼設(shè)計

在正式介紹Winpop組件的代碼之前，我們先來看一下一個Javascript組件的基本結(jié)構(gòu)：

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); 

使用一個自執(zhí)行的匿名函數(shù)將我們的組件代碼包裹起來，盡可能的減少全局污染，最后再將我們的類附到全局window對象上，這是一種比較推薦的做法。

構(gòu)造函數(shù)中的get、set方法不是必須的，只是筆者的個人習(xí)慣而已，覺得這樣寫可以將配置參數(shù)和其他組件內(nèi)部全局變量緩存和讀取的調(diào)用方式統(tǒng)一，似乎也更具有面向?qū)ο蟮男汀g迎讀者們說說各自的想法，說說這樣寫到底好不好。

接下來我們一起看下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 = {}; 
        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); 

代碼略多，關(guān)鍵做以下幾點說明：

• 筆者偷了懶，使用了jQuery，使用之前請先保證已經(jīng)引入了jQuery
• 自定義組件結(jié)構(gòu)最終是追加到body中的，所以在引入以上js之前，請先確保文檔已經(jīng)加載完成
• 組件添加了按ESC、點遮罩層隱藏組件功能
• 注意：雖然本例中未用到 destory 方法，但讀者朋友可以注意一下該方法中的 delete window.alert 和 delete window.confirm ，這樣寫的目的是保證在自定義組件銷毀后，將Alert、Confirm控件恢復(fù)到瀏覽器內(nèi)置效果
• 組件最后如果加上 window.Winpop = Winpop ，就可以將對象全局化供其他類調(diào)用了

最后

作為一個前端開發(fā)工程師，個人覺得Javascript組件開發(fā)是一件很有意思的事情，其中樂趣只有自己親自動手嘗試了才會體會得到。前端組件開發(fā)往往需要Javascript、CSS和html相互配合，才能事半功倍，上面提到的Winpop也不例外，這里給大家提供一個完整的demo壓縮包，有興趣的讀者朋友，歡迎傳播。