我可能做错了,但这似乎是使用原型(prototype)的好地方。
我有一份电子邮件表格。将被验证的该表单的每个输入都有一个对象。该对象的原型(prototype)是...
var contactInput = function(placeholder, validateFuntion) {
this.placeholder = placeholder;
this.value = "";
var error = true;
this.setError = function(errorValue) {
if(typeof(errorValue) === "boolean") {
error = errorValue;
} else {
return false;
console.log(".setError argument must be boolean.");
}
};
this.getError = function() {
return error;
}
var errorMessage = "";
this.setErrorMessage = function(errorMessageValue) {
if(typeof(errorMessageValue) === "string") {
errorMessage = errorMessageValue;
} else {
return false;
console.log(".setErrorMessage argument must be string.");
}
};
this.getErrorMessage = function() {
return errorMessage;
}
this.validateFunction = validateFunction;
}
我遇到的问题与 validateFunction
属性有关。这些输入共有三个。它们的每一个验证功能都非常相似。它们仅在验证值的操作以及错误时产生的错误消息方面有所不同。
其中一个看起来像这样......
function(inputValue) {
if (inputValue === "") {
this.error = true;
this.errorMessage = "You did not provide a name.";
return "error.png";
} else if (inputValue.length > 50) {
this.error = true;
this.errorMessage = "Name must be under 50 characters.";
return "error.png";
} else {
this.error = false;
return "tick.png";
}
}
另一个看起来像这样......
function(inputValue) {
if (inputValue === "") {
this.error = true;
this.errorMessage = "You did not provide an email.";
return "error.png";
} else if ( !/(.+)@(.+){2,}\.(.+){2,}/.test(inputValue) ) {
this.error = true;
this.errorMessage = "The email you provided was invalid.";
return "error.png";
} else {
this.error = false;
return "tick.png";
}
}
我想为验证函数创建一个原型(prototype),然后我可以用它创建验证函数的三个实例。然后,我将使用输入的原型(prototype)(我已有的原型(prototype))创建输入的三个实例,使用我创建的验证函数的实例来设置输入实例的 validateFunction
方法。
我无法想象如何完成它,或者是否应该以这种方式完成。即使不应该这样做,我该如何实现呢?
最佳答案
首先,您的术语有点令人困惑,我不会将这里的任何内容称为“函数原型(prototype)”。
原型(prototype)是一个对象,可以用作创建其他对象的原型(prototype)。
在 javascript 中,您恰好使用 function
作为对象的构造函数。
关于您的实现的一些通知:
返回后的代码将永远不会被执行。而
console.log
是通知错误的不好方法(最好抛出一个错误):} else { return false; console.log(".setError argument must be boolean."); }
就 OOP 而言,拥有 getter 和 setter 并不好,这样就可以将对象状态暴露给世界。更好的方法是将对象视为一台微型计算机,一个你可以要求它做一些工作的黑匣子。 所有初始化数据都传递到构造函数中,因此您不需要 setter,并且与对象内部数据相关的工作由对象完成,因此您也不应该需要 getter。
有两种方法可以实现略有不同的行为 - 继承,其中子类实现差异或组合,其中差异被移动到另一个对象。 使用什么取决于具体情况。
实现输入的可能方法之一是使用继承:
function ContactInput(selector, placeholder) {
// properties are prefixed with underscore to notify the programmer that they are
// 'private' (should not be accessed outside of this class or subclasses)
this._element = document.querySelector(selector);
this._placeholder = placeholder;
}
ContactInput.prototype.validate() {
// this should be implemented in child classes
throw 'Not implemented';
}
// Private method (prefixed with underscore), also to be used only by this object
ContactInput.prototype._renderSuccess(message, image) {
message = message || "";
image = image || "tick.png";
// show the success div near the element (actually it is better to use css,
// so it will be not necessary to pass the `tick.png` and `error.png`
// around, you could just change the element's css class here to show the tick)
}
// Private
ContactInput.prototype._renderError(message, image) {
message = message || "Validation error";
image = image || "error.png";
// show the error div near the element
}
// Private
ContactInput.prototype._getValue() {
return this._element.value;
}
function NameInput(placeholder) {
ContactInput.call(this, placeholder);
}
NameInput.prototype = Object.create(ContactInput.prototype);
NameInput.prototype.validate() {
var value = this._getValue();
if (!value) {
return this.renderError("You did not provide a name.", 'error.png');
}
if (value.length > 50) {
return this.renderError("Name must be under 50 characters.", 'error.png');
}
return this.renderSuccess();
}
function EmailInput(placeholder) {
ContactInput.call(this, placeholder);
}
EmailInput.prototype = Object.create(ContactInput.prototype);
EmailInput.prototype.validate() {
var value = this._getValue();
if (!value) {
return this.renderError("You did not provide an email.", 'error.png');
}
if ( !/(.+)@(.+){2,}\.(.+){2,}/.test(value) ) {
return this.renderError("The email you provided was invalid.", 'error.png');
}
return this.renderSuccess();
}
我不确定你如何使用占位符
,所以我只是将它留在基类中。
根据使用情况,它可以仅是 NameInput
的属性(或 EmailInput
)的属性。
现在你可以这样做:
var inputs = [
new NameInput('x'),
new EmailInput('y')
];
inputs.forEach(function(input) {
input.validate();
});
请注意,在某些情况下,您不必执行诸如 input->setError('xxx')
和 input->getError('xxx')
之类的操作其他地方。
您只需创建该对象,为其提供一些数据,然后让它根据这些数据工作。
关于javascript - 在 JavaScript 中创建函数原型(prototype)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35911888/