一篇文章教你開發一個完整的JavaScript組件

作爲一名開發者，大家應該都知道在瀏覽器中存在一些內置的控件：Alert，Confirm等，但是這些控件通常根據瀏覽器產商的不同而形態各異，視覺效果往往達不到UI設計師的要求。更重要的是，這類內置控件的風格很難與形形色色的各種風格迥異的互聯網產品的設計風格統一。因此，優秀的前端開發者們各自開發自己的個性化控件來替代瀏覽器內置的這些控件。當然，這類組件在網絡上已經有不計其數相當優秀的，寫這篇文章的目的不是爲了說明我開發的這個組件有多優秀，也不是爲了炫耀什麼，只是希望通過這種方式，與更多的開發者互相交流，互相學習，共同進步。好，廢話不多說，言歸正傳。

功能介紹

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

效果預覽

1、Alert控件

2、Confirm控件

開發過程

1. 組件結構設計

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

1 alert("內置Alert控件");
2 if (confirm("關閉內置Confirm控件？")) {
3     alert("True");
4 } else {
5     alert("False");
6 }

爲了保證我們的組件使用方式和內置控件保持一致，所以我們必須考慮覆蓋內置控件。考慮到組件開發的風格統一，易用，易維護，以及面向對象等特性，我計劃將自定義的alert和confirm方法作爲一個類（Winpop）的實例方法，最後用實例方法去覆蓋系統內置控件的方法。爲了達到目的，我的基本做法如下：

1 var obj = new Winpop(); // 創建一個Winpop的實例對象
2 // 覆蓋alert控件
3 window.alert = function(str) {
4     obj.alert.call(obj, str);
5 };
6 // 覆蓋confirm控件
7 window.confirm = function(str, cb) {
8     obj.confirm.call(obj, str, cb);
9 };         //在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力

需要注意的是，由於瀏覽器內置的控件可以阻止瀏覽器的其他行爲，而我們自定義的組件並不能具備這種能力，爲了儘可能的做到統一，正如預覽圖上看到的，我們在彈出自定義組件的時候使用了一個全屏半透明遮罩層。也正是由於上述原因，confirm組件的使用方式也做了一些細微的調整，由內置返回布爾值的方式，改爲使用回調函數的方式，以確保可以正確的添加“確定”和“取消”的邏輯。因此，自定義組件的使用方式就變成了下面這種形式：

1 alert("自定義Alert組件");
2 confirm("關閉自定義Confirm組件？", function(flag){
3     if (flag) {
4         alert("True");
5     } else {
6         alert("False");
7     }            //在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
8 });

2. 組件代碼設計

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

1 (function(window, undefined) {
 2     function JsClassName(cfg) {
 3         var config = cfg || {};
 4         this.get = function(n) {
 5             return config[n];
 6         }
 7         this.set = function(n, v) {
 8             config[n] = v;
 9         }
10         this.init();
11     }
12     JsClassName.prototype = {
13         init: function(){},
14         otherMethod: function(){}
15     };             //在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
16     window.JsClassName = window.JsClassName || JsClassName;
17 })(window);

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

構造函數中的get、set方法不是必須的，只是筆者的個人習慣而已，覺得這樣寫可以將配置參數和其他組件內部全局變量緩存和讀取的調用方式統一，似乎也更具有面向對象的型。歡迎讀者們說說各自的想法，說說這樣寫到底好不好。

本次給大家推薦一個免費的學習圈，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。獲取資料👈👈👈
對web開發技術感興趣的同學，歡迎加裙：👉👉👉582735936 👈👈👈，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。

接下來我們一起看下Winpop組件的完整代碼：

  1 (function(window, jQuery, undefined) {
  2 
  3     var HTMLS = {
  4         ovl: '<div id="J_WinpopMask"></div>' + '<div id="J_WinpopBox">' + '<div></div>' + '<div></div>' + '</div>',
  5         alert: '<input type="button" value="確定">',
  6         confirm: '<input type="button" value="取消">' + '<input type="button" value="確定">'
  7     }
  8 
  9     function Winpop() {
 10         var config = {};
 11         this.get = function(n) {
 12             return config[n];
 13         }
 14 
 15         this.set = function(n, v) {
 16             config[n] = v;
 17         }
 18         this.init();
 19     }         //在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
 20 
 21     Winpop.prototype = {
 22         init: function() {
 23             this.createDom();
 24             this.bindEvent();
 25         },
 26         createDom: function() {
 27             var body = jQuery("body"),
 28                 ovl = jQuery("#J_WinpopBox");
 29 
 30             if (ovl.length === 0) {
 31                 body.append(HTMLS.ovl);
 32             }
 33 
 34             this.set("ovl", jQuery("#J_WinpopBox"));
 35             this.set("mask", jQuery("#J_WinpopMask"));
 36         },
 37         bindEvent: function() {
 38             var _this = this,
 39                 ovl = _this.get("ovl"),
 40                 mask = _this.get("mask");
 41             ovl.on("click", ".J_AltBtn", function(e) {
 42                 _this.hide();
 43             });
 44             ovl.on("click", ".J_CfmTrue", function(e) {
 45                 var cb = _this.get("confirmBack");
 46                 _this.hide();
 47                 cb && cb(true);
 48             });
 49             ovl.on("click", ".J_CfmFalse", function(e) {
 50                 var cb = _this.get("confirmBack");
 51                 _this.hide();
 52                 cb && cb(false);
 53             });
 54             mask.on("click", function(e) {
 55                 _this.hide();
 56             });
 57             jQuery(document).on("keyup", function(e) {
 58                 var kc = e.keyCode,
 59                     cb = _this.get("confirmBack");;
 60                 if (kc === 27) {
 61                     _this.hide();
 62                 } else if (kc === 13) {
 63                     _this.hide();
 64                     if (_this.get("type") === "confirm") {
 65                         cb && cb(true);
 66                     }
 67                 }
 68             });
 69         },
 70         alert: function(str, btnstr) {
 71             var str = typeof str === 'string' ? str : str.toString(),
 72                 ovl = this.get("ovl");
 73             this.set("type", "alert");
 74             ovl.find(".J_WinpopMain").html(str);
 75             if (typeof btnstr == "undefined") {
 76                 ovl.find(".J_WinpopBtns").html(HTMLS.alert);
 77             } else {
 78                 ovl.find(".J_WinpopBtns").html(btnstr);
 79             }    //在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
 80             this.show();
 81         },
 82         confirm: function(str, callback) {
 83             var str = typeof str === 'string' ? str : str.toString(),
 84                 ovl = this.get("ovl");
 85             this.set("type", "confirm");
 86             ovl.find(".J_WinpopMain").html(str);
 87             ovl.find(".J_WinpopBtns").html(HTMLS.confirm);
 88             this.set("confirmBack", (callback || function() {}));
 89             this.show();
 90         },
 91         show: function() {
 92             this.get("ovl").show();
 93             this.get("mask").show();
 94         },
 95         hide: function() {
 96             var ovl = this.get("ovl");
 97             ovl.find(".J_WinpopMain").html("");
 98             ovl.find(".J_WinpopBtns").html("");
 99             ovl.hide();
100             this.get("mask").hide();
101         },
102         destory: function() {
103             this.get("ovl").remove();
104             this.get("mask").remove();
105             delete window.alert;
106             delete window.confirm;
107         }
108     };
109 
110     var obj = new Winpop();
111     window.alert = function(str) {
112         obj.alert.call(obj, str);
113     };
114     window.confirm = function(str, cb) {
115         obj.confirm.call(obj, str, cb);
116     };
117 })(window, jQuery);

代碼略多，關鍵做以下幾點說明：

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

最後

作爲一個前端開發工程師，個人覺得Javascript組件開發是一件很有意思的事情，其中樂趣只有自己親自動手嘗試了纔會體會得到。前端組件開發往往需要Javascript、CSS和html相互配合，才能事半功倍，上面提到的Winpop也不例外。

本次給大家推薦一個免費的學習圈，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。獲取資料👈👈👈
對web開發技術感興趣的同學，：👉👉👉加入 👈👈👈，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。