コントロールからフレームワークにステータスを送信

Question

抽象的なコントロールから継承するUIコントロールを持っています。抽象的なコントロールで を継承しています。すべてのコントロールがtrue/falseを返すisValidというメソッドを拡張する必要があり、 ） これを赤色（非有効な場合）にするかどうかを知るには、この場合私がこれを助けるために使用すべき設計パターンがありますか、どのアプローチを使用すべきですか？

Answer 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/（リアルタイムで変更を取得するより多くのイベントを使用して、文字通りの代わりに警告のフィールドを塗る）