함수가 허용하는 매개변수의 순서를 유지하는 것이 중요하지만, 함수가 허용할 수 있는 매개변수의 수가 특정 수에 도달하면 사용자에게도 골치 아픈 일이 됩니다.
var alert = new Alert(100, 75, 300, 200, "Error", message, "blue", "white", "black", "error", true);
함수가 계속해서 재구성되고 발전함에 따라 수용할 수 있는 매개변수가 점점 더 많아질 수 있으며 결국 위의 예와 같습니다.
이 경우 JavaScript는 구성 개체를 사용하여 위의 모든 매개변수를 대체할 수 있습니다.
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});
이렇게 하면 코드가 좀 더 장황해지기는 하지만, 이점은 분명합니다. 구성 개체의 각 속성 이름은 사용자에게 이 속성의 용도를 알려주는 문서와 같습니다. 특히 부울 값의 경우 참과 거짓만을 전달하여 진정한 의도를 판단하기가 어렵습니다.
이 접근 방식을 사용할 때의 또 다른 이점은 모든 속성이 선택 사항이라는 것입니다. 구성 개체에 속성이 나타나지 않으면 기본값이 대신 사용됩니다.
var alert = new Alert(); // use all default parameter values
함수가 필수 매개변수를 허용해야 하는 경우 다음과 같이 구성 개체 외부에 배치하는 것이 가장 좋습니다.
var alert = new Alert(app, message, { width: 150, height: 100, title: "Error", titleColor: "blue", bgColor: "white", textColor: "black", icon: "error", modal: true});
구성 개체의 모든 속성은 다음과 같습니다. 함수가 허용할 수 있는 모든 선택적 매개변수인 반면, 앱과 메시지는 전달되어야 하는 매개변수입니다.
구성 개체를 처리하려면 다음과 같이 할 수 있습니다.
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; }
선택적 구성 개체의 경우 진리값에서 false를 반환하는 경우 먼저 항목 54에 소개된 방법을 사용합니다. 판단, 빈 객체로 교체하세요.
위 코드에는 개체 확장이나 병합 기능을 사용하여 추가로 최적화할 여지가 있습니다. 많은 JavaScript 라이브러리 및 프레임워크에는 대상 개체와 소스 개체를 허용한 다음 소스 개체의 속성을 대상 개체에 복사하는 확장 기능이 있습니다.
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; }
확장 기능을 통해, 더 이상 각 속성을 지속적으로 판단할 필요가 없습니다. 위 코드의 첫 번째 확장 함수는 너비와 높이 속성이 설정되지 않은 경우 기본값을 설정하는 데 사용됩니다. 두 번째 확장 함수에서는 이를 기반으로 계산되기 때문입니다.
결국 모든 속성이 이 개체에 할당되면 위 코드는 다음과 같이 단순화될 수 있습니다.
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); }
확장 함수의 구현은 일반적으로 소스 개체의 속성을 순회합니다. , 속성 값이 정의되지 않은 경우 대상 개체에 복사됩니다.
function extend(target, source) { if (source) { for (var key in source) { var val = source[key]; if (typeof val !== "undefined") { target[key] = val; } } } return target; }
요약
API를 더 쉽게 읽을 수 있도록 하려면 선택적 구성 개체를 사용하세요.
구성 매개변수의 속성은 함수의 선택적 매개변수여야 합니다.
확장 유틸리티 기능을 사용하면 구성 개체를 사용하는 코드를 단순화할 수 있습니다.