如何開發一個完整的JavaScript組件
作為一名開發者，大家應該都知道在瀏覽器中存在一些內置的控件：Alert，Confirm等，但是這些控件通常根據瀏覽器產商的不同而形態各異，視覺效果往往達不到UI設計師的要求。更重要的是，這類內置控件的風格很難與形形色色的各種風格迥異的互聯網產品的設計風格統一。因此，優秀的前端開發者們各自開發自己的個性化控件來替代瀏覽器內置的這些控件。當然，這類組件在網絡上已經有不計其數相當優秀的，寫這篇文章的目的不是為了說明我開發的這個組件有多優秀，也不是為了炫耀什么，只是希望通過這種方式，與更多的開發者互相交流，互相學習，共同進步。好，廢話不多說，言歸正傳。
功能介紹
- 取代瀏覽器自帶的Alert、Confirm控件
- 自定義界面樣式
- 使用方式與內置控件基本保持一致
效果預覽
1、Alert控件
2、Confirm控件
3、完整代碼，在線預覽(見底部，提供壓縮包下載)
#p#
開發過程
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 = {};
- 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);
代碼略多，關鍵做以下幾點說明：
- 筆者偷了懶，使用了jQuery，使用之前請先保證已經引入了jQuery
- 自定義組件結構最終是追加到body中的，所以在引入以上js之前，請先確保文檔已經加載完成
- 組件添加了按ESC、點遮罩層隱藏組件功能
- 注意：雖然本例中未用到 destory 方法，但讀者朋友可以注意一下該方法中的 delete window.alert 和 delete window.confirm ，這樣寫的目的是保證在自定義組件銷毀后，將Alert、Confirm控件恢復到瀏覽器內置效果
- 組件最后如果加上 window.Winpop = Winpop ，就可以將對象全局化供其他類調用了
最后
作為一個前端開發工程師，個人覺得Javascript組件開發是一件很有意思的事情，其中樂趣只有自己親自動手嘗試了才會體會得到。前端組件開發往往需要Javascript、CSS和html相互配合，才能事半功倍，上面提到的Winpop也不例外，這里給大家提供一個完整的demo壓縮包，有興趣的讀者朋友，歡迎傳播。
