EffectiveJavaScriptItem55接受配置對象作為函數(shù)參數(shù)

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 20:31:22

EffectiveJavaScriptItem55接受配置對象作為函數(shù)參數(shù)

EffectiveJavaScriptItem55接受配置對象作為函數(shù)參數(shù):雖然保持函數(shù)接受的參數(shù)的順序很重要，但是當函數(shù)能夠接受的參數(shù)達到一定數(shù)量時，也會讓用戶很頭疼：var alert = new Alert(100, 75, 300, 200, "Error", message, "blue", "white", &qu

推薦度：

點擊下載本文 文檔為doc格式

導讀EffectiveJavaScriptItem55接受配置對象作為函數(shù)參數(shù):雖然保持函數(shù)接受的參數(shù)的順序很重要，但是當函數(shù)能夠接受的參數(shù)達到一定數(shù)量時，也會讓用戶很頭疼：var alert = new Alert(100, 75, 300, 200, "Error", message, "blue", "white", &qu

雖然保持函數(shù)接受的參數(shù)的順序很重要，但是當函數(shù)能夠接受的參數(shù)達到一定數(shù)量時，也會讓用戶很頭疼：

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)某個屬性，那么就是用默認值來代替它。

var alert = new Alert(); // use all default parameter values

如果函數(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中介紹的方法當它在真值判斷中返回false時，使用空對象替換它。

上述的代碼還有進一步優(yōu)化的空間：通過使用對象擴展或者合并的函數(shù)。在很多JavaScript的庫和框架中都有一個extend函數(shù)，它接受一個目標對象和一個源對象，然后將源對象中的屬性拷貝到目標對象中：

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è)置默認值，因為在第二個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時，會將它拷貝到目標對象上：

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ù)中的屬性都應該是函數(shù)的可選參數(shù)。

使用extend工具函數(shù)來簡化使用了配置對象的代碼。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com