最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

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

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

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

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

雖然保持函數(shù)接受的參數(shù)的順序很重要,但是當(dāng)函數(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)某個屬性,那么就是用默認(rè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中介紹的方法當(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(抖音搜索懂视),直接咨询即可。

文檔

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

EffectiveJavaScriptItem55接受配置對象作為函數(shù)參數(shù):雖然保持函數(shù)接受的參數(shù)的順序很重要,但是當(dāng)函數(shù)能夠接受的參數(shù)達到一定數(shù)量時,也會讓用戶很頭疼:var alert = new Alert(100, 75, 300, 200, "Error", message, "blue", "white", &qu
推薦度:
標(biāo)簽: 接受 參數(shù) 函數(shù)
  • 熱門焦點
專題
Top
fffffffffffff

抖音扫码关注

手机端二维码

每天分享百科知识!