一篇文章教你開發一個完整的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以及面試資源等。**獲取資料