将状态从控件发送到框架答案

【问题标题】：Send status from controls to framework将状态从控件发送到框架
【发布时间】：2015-10-25 07:09:38
【问题描述】：

我有继承自抽象控件的 UI 控件，在抽象控件中，我有每个控件都应该扩展的方法，该方法称为 isValid 返回真/假，我需要（作为框架）要知道是否将其标记为红色（无效案例），在这种情况下我应该使用一种设计模式来帮助我解决这个问题，或者我应该使用哪种方法？

【问题讨论】：

对我来说听起来很可靠。您可能想在Code Review 上发布您的代码以获得可靠的评价。
@MadaraUchiha - 谢谢，但我想在实施之前找到正确的方法:) 有什么建议吗？
这里没有必要插入设计模式——这是简单的多态性。
@dbugger - 你能提供 Javascript 的例子吗？
@Mark 因为这是 javascript 问题，您使用的是纯 javascript 还是某些框架？因为与 OOP 语言不同，JS 继承是基于原型的，而不是基于类的，但是很多框架都在一定程度上规避了这一点。

标签： javascript oop design-patterns

【解决方案1】：

如果您使用纯 Javascript（即没有 React、Angular 或 jQuery）进行开发，我会使用 DOM 元素中现有的Observer Pattern 来更新更改。

抽象部分：

// Create the basic AbstractControl class.
var AbstractControl = function() {

}

// Virtual methods.
AbstractControl.prototype.isValid = function() {
    throw new Error('Not implemented.')
}

AbstractControl.prototype.paintGreen = function() {
    // Valid case.
    throw new Error('Not implemented.')
}

AbstractControl.prototype.paintRed = function() {
    // Invalid case.
    throw new Error('Not implemented.')
}

// Function Update verifies the validity of the control and calls
// the valid or invalid case accordingly.
AbstractControl.prototype.update = function() {
    if (this.isValid()) {
        this.paintGreen();
    } else {
        this.paintRed();
    }
}

还有一个具体的控制类示例：

// Class for an email input text field, receives a DOM element.
var EmailField = function(element) {
    AbstractControl.call(this, AbstractControl);
    this.element = element;
    // Listens for change events on the element and updates
    // the valid/invalid status.
    this.element.addEventListener("change", this.update.bind(this));
}

// Setup inheritance.
EmailField.prototype = Object.create(AbstractControl.prototype);
EmailField.prototype.constructor = EmailField;

// Implement virtual methods.

EmailField.prototype.isValid = function() {
    return this.element.value.indexOf("@") >= 0;
}

EmailField.prototype.paintGreen = function() {
    alert("Email correct. Proceed.")
}

EmailField.prototype.paintRed = function() {
    alert("Email Incorrect! May not proceed.")
}

最终用法：

new EmailField(document.getElementById("emailfield"));

根据字段内容，每次更改都会alert。您可以更改 alert 来为元素着色（如函数名称所示），或显示一些图标或工具提示。

JSFiddle：https://jsfiddle.net/surj64vy/（使用更多事件来实时捕捉变化，并从字面上绘制字段而不是警报）

【讨论】：

我不确定我是否 100% 理解了这个问题。这个答案有帮助吗？
1+ 谢谢我猜这或多或少。2 个问题 1.如何从电子邮件无效的具体类中抛出事件？ 2. 我尝试在 jsFiddlle 中使用它，但它对我不起作用，您可以将它作为 jsBIn/fiddle... 发送吗？我想测试一下谢谢！
1.每次更改都已调用 update 方法，您可以在其中响应事件。 2. 当然，这里是：jsfiddle.net/surj64vy
非常感谢，假设我不使用 Dom（我没有），有办法使用它吗？我不使用 angular 或 React 等...