開發一個完整的JavaScript組件
- 黄舟原創
- 2017-02-25 13:27:491505瀏覽
作為一名開發者，大家應該都知道在瀏覽器中存在一些內建的控制：Alert，Confirm等，但是這些控制通常根據瀏覽器產商的不同而形態各異，視覺效果往往達不到UI設計師的要求。更重要的是，這類內建控制的風格很難與形形色色的各種風格迥異的網路產品的設計風格統一。因此，優秀的前端開發者們各自開發自己的個人化控制項來取代瀏覽器內建的這些控制項。當然，這類組件在網路上已經有不計其數相當優秀的，寫這篇文章的目的不是為了說明我開發的這個組件有多優秀，也不是為了炫耀什麼，只是希望透過這種方式，與更多的開發者互相交流，互相學習，共同進步。好，廢話不多說，言歸正傳。
功能介紹
取代瀏覽器自帶的Alert、Confirm控制項
自訂介面樣式
使用方式與內建控制項基本上保持一致
效果預覽
1、Alert控制項
# 2、Confirm控制項
# 3、完整程式碼，線上預覽（請參閱底部，提供壓縮套件下載）
開發過程
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: '<p class="J_WinpopMask winpop-mask" id="J_WinpopMask"></p>' + '<p class="J_WinpopBox winpop-box" id="J_WinpopBox">' +
'<p class="J_WinpopMain winpop-main"></p>' + '<p class="J_WinpopBtns winpop-btns"></p>' + '</p>',
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壓縮包，有興趣的讀者朋友，歡迎傳播。
以上就是開發一個完整的JavaScript元件的內容，更多相關內容請關注PHP中文網（www.php.cn）！