var alert = new Alert(100, 75, 300, 200, "Error", message, "blue", "white", "black", "error", true);
隨著函數(shù)的不斷重構(gòu)和進化,它能夠接受的參數(shù)也許會越來越多,最終就像上面的例子那樣。
對于這種情況,JavaScript可以使用一個配置對象來替代以上的所有參數(shù):
var alert = new Alert({ x: 100, y: 75, width: 300, height: 200, title: "Error", message: message, titleColor: "blue", bgColor: "white", textColor: "black", icon: "error", modal: true});
這樣做雖然會讓代碼稍微冗長一些,但是毫無疑問它的好處是很明顯的:配置對象中的每個屬性的名字就好比是一份文檔,來告訴用戶這個屬性是干什么用的。特別是對于布爾值,單獨的傳入true和false是很難判斷它的真實意圖的。
使用這種方式的另外一個好處是,所有的屬性都是可選的。如果配置對象中沒有出現(xiàn)某個屬性,那么就是用默認(rèn)值來代替它。
如果函數(shù)需要接受必須的參數(shù),那么最好還是將它放在配置對象的外面,就像下面這樣:
var alert = new Alert(app, message, { width: 150, height: 100, title: "Error", titleColor: "blue", bgColor: "white", textColor: "black", icon: "error", modal: true});
配置對象中的所有屬性都是函數(shù)能夠接受的可選參數(shù),而app和message則是必須要傳入的參數(shù)。
對于配置對象的處理,可以像下面這樣:
function Alert(parent, message, opts) { opts = opts || {}; // default to an empty options object this.width = opts.width === undefined ? 320 : opts.width; this.height = opts.height === undefined ? 240 : opts.height; this.x = opts.x === undefined ? (parent.width / 2) - (this.width / 2) : opts.x; this.y = opts.y === undefined ? (parent.height / 2) - (this.height / 2) : opts.y; this.title = opts.title || "Alert"; this.titleColor = opts.titleColor || "gray"; this.bgColor = opts.bgColor || "white"; this.textColor = opts.textColor || "black"; this.icon = opts.icon || "info"; this.modal = !!opts.modal; this.message = message; }
對于可選的配置對象,首先使用Item 54中介紹的方法當(dāng)它在真值判斷中返回false時,使用空對象替換它。
上述的代碼還有進一步優(yōu)化的空間:通過使用對象擴展或者合并的函數(shù)。在很多JavaScript的庫和框架中都有一個extend函數(shù),它接受一個目標(biāo)對象和一個源對象,然后將源對象中的屬性拷貝到目標(biāo)對象中:
function Alert(parent, message, opts) { opts = extend({ width: 320, height: 240 }); opts = extend({ x: (parent.width / 2) - (opts.width / 2), y: (parent.height / 2) - (opts.height / 2), title: "Alert", titleColor: "gray", bgColor: "white", textColor: "black", icon: "info", modal: false }, opts); this.width = opts.width; this.height = opts.height; this.x = opts.x; this.y = opts.y; this.title = opts.title; this.titleColor = opts.titleColor; this.bgColor = opts.bgColor; this.textColor = opts.textColor; this.icon = opts.icon; this.modal = opts.modal; }
通過extend函數(shù),不再需要時常對每個屬性進行判斷。上述代碼中的第一個extend函數(shù)用來在width和height屬性沒有被設(shè)置使設(shè)置默認(rèn)值,因為在第二個extend函數(shù)中會根據(jù)它們進行計算。
如果所有的屬性最終會被賦值到this對象上,那么以上代碼可以簡化成下面這樣:
function Alert(parent, message, opts) { opts = extend({ width: 320, height: 240 }); opts = extend({ x: (parent.width / 2) - (opts.width / 2), y: (parent.height / 2) - (opts.height / 2), title: "Alert", titleColor: "gray", bgColor: "white", textColor: "black", icon: "info", modal: false }, opts); extend(this, opts); }
extend函數(shù)的實現(xiàn)通常都會遍歷源對象的屬性,然后如果該屬性的值不是undefined時,會將它拷貝到目標(biāo)對象上:
function extend(target, source) { if (source) { for (var key in source) { var val = source[key]; if (typeof val !== "undefined") { target[key] = val; } } } return target; }
總結(jié)
使用可選的配置對象來讓API更具可讀性。
配置參數(shù)中的屬性都應(yīng)該是函數(shù)的可選參數(shù)。
使用extend工具函數(shù)來簡化使用了配置對象的代碼。
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。