Wysyłanie stanu z formantów do architektury ramowej

Question

Posiadam formanty interfejsu użytkownika, które są dziedziczone z abstrakcyjnej kontroli, w formancie abstrakcji Mam metodę, którą każda kontrola powinna rozszerzyć, która jest nazywana wartością isValid, która zwraca wartość true/false i jest mi potrzebna (jako struktura) wiedzieć, czy oznaczyć go na czerwono (nieważny przypadek), istnieje wzorzec projektowy, który powinienem użyć w tym przypadku, aby pomóc mi w tym lub w jakim podejściu powinienem użyć?

Answer 1

Jeśli pracujesz w czystym Javascript (tj. Bez React lub Angular lub jQuery), używałbym istniejącego Observer Pattern dostępnego w elementach DOM do aktualizacji zmian.

Abstrakt:

// 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(); 
    } 
} 

i przykład beton klasy kontrola:

// 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.") 
} 

Finał Wykorzystanie:

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

I byłoby alert na każdej zmianie w zależności od zawartości pola . Możesz zmienić alert, aby zamiast tego pokolorować elementy (jak pokazano w nazwie funkcji) lub wyświetlić ikonę lub etykietkę narzędzia.

JSFiddle: https://jsfiddle.net/surj64vy/ (używając więcej wydarzeń do przechwytywania zmian w czasie rzeczywistym, a dosłownie malowanie boiska zamiast ostrzegania)