JavaScript-Entwurfsmuster – Strategiemuster-Eingabevalidierung

Heim

Web-Frontend

js-Tutorial

JavaScript-Entwurfsmuster – Strategiemuster-Eingabevalidierung_Javascript-Kenntnisse

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:29 PM

Das Strategiemuster definiert eine Familie von Algorithmen und kapselt sie separat, sodass sie untereinander ersetzt werden können. Dieses Muster macht die Algorithmusänderungen unabhängig von den Kunden, die die Berechnung verwenden.

Definieren Sie zunächst ein einfaches Eingabeformular:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-">
    <style>
      .form{
        width: px;
        height: px;
        #margin: px auto;
      }
      .form-item-label{
        width:px;
        text-align: right;
        float: left;
      }
      .form-item-input{
        float: left;
      }
      .form-item{
        width: % ;
        height: px;
        line-height: px;
      }
    </style>
  </head>
  <body>
    <div class='form'>
      <div class="form-item">
        <div class='form-item-label'><span>用户名：</span></div>
        <div class='form-item-input'><input id='userName' name='用户名' type="text"></div>
      </div>
      <div class="form-item" >
        <div class='form-item-label'><span>密码：</span></div>
        <div class='form-item-input'><input id='password' name='密码' type="text"></div>
      </div>
      <div class="form-item" >
        <div class='form-item-label'><span>确认密码：</span></div>
        <div class='form-item-input'><input id='repassword' name='密码确认' type="text"></div>
      </div>
      <div class="form-item" >
        <div class='form-item-label'><span>邮箱：</span></div>
        <div class='form-item-input'><input id='mail' name='邮箱' type="text" ></div>
      </div>
    </div>
    <br>
    <button id='submit' >提交</button>
    <script type='text/javascript' src="../reference/jquery-...min.js"></script>
  </body>
</html>

Im Allgemeinen müssen bei der Übermittlungsaktion nach dem Bearbeiten der Informationen auf der Seite die Eingabeinformationen überprüft werden. Sie werden feststellen, dass viel Code, der für die Überprüfung verantwortlich ist, in der Übermittlungsfunktion oder in einer unabhängigen Prüffunktion geschrieben ist.

Zum Beispiel wie unten.

 $(document).ready(function(){
        $('#submit').bind('click', doSubmit);
      });
      function doSubmit(){
        var eleUserName = document.getElementById('userName');
        if(eleUserName.value === '') {
          alert('用户名不能为空');
          return;
        }
        if(eleUserName.length < 6) {
          alert('用户名长度不能少于6个字符');
          return;
        }
        if(eleUserName.length > 6) {
          alert('用户名长度不能多于20个字符');
          return;
        }
      }

Diese Schreibmethode kann die funktionalen Anforderungen durchaus erfüllen, es treten jedoch mehrere Probleme auf:

1. Wenn ich es auf anderen Seiten verwenden möchte, muss ich den Code kopieren. Die sogenannte Wiederverwendung wird zum Kopieren, und es wird eine Menge Duplikate des Codes geben. Bessere werden den Prüfcode klassifizieren und verpacken, aber es wird mehr Duplikate geben.

2. Wenn ich eine Eingabeüberprüfung hinzufügen möchte, muss ich die Übermittlungsfunktion direkt ändern. Diese Funktion wird aufgebläht und zerstört das Prinzip „Öffnen und Schließen“.

3. Wenn Sie die Übermittlungsfunktion ändern, müssen Sie alle Tests des Funktionsdesigns abdecken, da Sie nicht wissen, wann fehlerhafte Änderungen oder unbekannte Situationen auftreten.

Transformationsschritte:

1. Behandeln Sie jede Verifizierungslogik als Verifizierungsstrategie und kapseln Sie jede Verifizierungsstrategiefunktion. Die Funktionsparameter sollten konsistent sein und können DOM-Elemente, verifizierte Werte, Fehlermeldungen und benutzerdefinierte Parameter akzeptieren.

2. Definieren Sie den Validator. Sie können die Validierungsstrategiefunktion importieren oder hinzufügen.

3. Der Validator stellt eine Überprüfungsmethode zum Aufrufen während der Überprüfung bereit und ruft intern eine bestimmte Überprüfungsstrategiefunktion auf.

4. Überprüfen Sie den Anruf.

Schritt 1.

Betrachten Sie jedes if als Überprüfungsgeschäftsregel, behandeln Sie jede Geschäftsregel als separate Strategiefunktion und kapseln Sie alle Strategiefunktionen in einem Strategieobjekt.

 var validationStrategies = {
        isNoEmpty: function(element, errMsg, value) {
          if(value === '') {
            return this.buildInvalidObj(element, errMsg, value );
          }
        },
        minLength: function(element, errMsg, value, length) {
          if(value.length < length){
            return this.buildInvalidObj(element, errMsg, value);
          }
        },
        maxLength: function(element, errMsg, value, length) {
          if(value.length > length){
            return this.buildInvalidObj(element, errMsg, value);
          }
        },
        isMail: function(element, errMsg, value, length) {
          var reg = /^(\w-*\.*)+@(\w-&#63;)+(\.\w{2,})+$/;
          if(!reg.test(value)){
            return this.buildInvalidObj(element, errMsg, value);
          }
        }
      };

Die ersten drei Parameter aller Funktionen sind konsistent und erforderlich und geben das überprüfte DOM-Element, die Fehlermeldung und den überprüften Wert an. Der vierte Parameter beginnt mit den eigenen Überprüfungsregeln der Funktion, um die benutzerdefinierten Parameter zu bestimmen.

Die Methode „buildInvalidObj“ wandelt lediglich die ersten drei Parameter in ein Fehlerobjekt um und gibt dieses zurück, solange die Überprüfung fehlschlägt.

Nach dem Prinzip der Abhängigkeitsumkehr sollten High-Level-Module nicht von Low-Level-Modulen abhängen, sodass sie vom Aufrufer der Verifizierung nicht direkt verwendet werden können.

Kapselung und Abstraktion durch Validatoren.

Schritt 2:

Definieren Sie den Validator. Sie können alle Verifizierungsstrategien darin importieren oder die Verifizierungsstrategiefunktionen separat hinzufügen.

//输入验证器
      function InputValidators(){
        this.validators = [];
        this.strategies = {};
      }
      //从策略对象导入验证策略函数
      //参数:
      // strategies: 包含各种策略函数的对象
      InputValidators.prototype.importStrategies = function(strategies) {
        for(var strategyName in strategies) {
          this.addValidationStrategy(strategyName, strategies[strategyName]);
        }
      };
      //添加验证策略函数
      //参数:
      // name: 策略名称
      // strategy: 策略函数
      InputValidators.prototype.addValidationStrategy = function(name, strategy){
        this.strategies[name] = strategy;
      };

Schritt 3:

Verifizierungsmethode hinzufügen, um externe Anrufe anzunehmen.

Die erste Parameterregel ist auf eine Überprüfungsregel festgelegt, z. B. „minLength:6“. Der folgende Code generiert einen Aufruf der spezifischen Strategiefunktion. Der Aufruf wird in den Cache verschoben und wartet darauf, gemeinsam aufgerufen zu werden.

„:6“ gibt die Parameter an, die von der Strategiefunktion gemäß ihren eigenen Regeln angepasst werden.

  //添加验证方法
      //参数:
      // rule: 验证策略字符串
      // element: 被验证的dom元素
      // errMsg: 验证失败时显示的提示信息
      // value: 被验证的值
      InputValidators.prototype.addValidator = function(rule, element, errMsg, value) {
        var that = this;
        var ruleElements = rule.split(":");
        this.validators.push(function() {
          var strategy = ruleElements.shift();
          var params = ruleElements;
          params.unshift(value);
          params.unshift(errMsg);
          params.unshift(element);
          return that.strategies[strategy].apply(that, params);
        });
      };

Alle Verifizierungen über eine Prüffunktion aufrufen. und falsche Ergebnisse zurückgeben.

   //开始验证
      InputValidators.prototype.check = function() {
        for(var i = 0, validator; validator = this.validators[i++];){
          var result = validator();
          if(result) {
            return result;
          }
        }
      };

Schritt 4:

Wenn eine Verifizierung erforderlich ist, erstellen Sie zunächst ein neues Validatorobjekt.

var validators = new InputValidators();

Importieren Sie das Objekt, das die Verifizierungsstrategiefunktion enthält, oder fügen Sie die Verifizierungsstrategiefunktion separat hinzu.

Es ist ersichtlich, dass unterschiedliche Verifizierungsstrategien vorab in das Strategieobjekt eingekapselt oder je nach tatsächlicher Situation sofort hinzugefügt werden können.

  validators.importStrategies(validationStrategies);
        validators.addValidationStrategy('isEqual', function(element, errMsg, value1, value2) {
          if(value1 !== value2) {
            return this.buildInvalidObj(element, errMsg, value1 );
          }
        });

Fügen Sie dann die zu überprüfende Strategie, das überprüfte DOM-Element, die Fehlermeldung und den überprüften Wert in den Validator ein, indem Sie eine Überprüfungsmethode hinzufügen. Dadurch wird der direkte Aufruf des Strategieobjekts vermieden und die Kopplung verringert.

Rufen Sie die Validierungsprüfung an, um alle Überprüfungen durchzuführen.

var eleUserName = document.getElementById('userName');
validators.addValidator('isNoEmpty', eleUserName, '用户名不能为空', eleUserName.value);
validators.addValidator('minLength:6', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value);
validators.addValidator('maxLength:20', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value);
var elePassword = document.getElementById('password');
validators.addValidator('isNoEmpty', elePassword, '密码不能为空', elePassword.value);
validators.addValidator('minLength:6', elePassword, '密码的字符个数必须是6到20个', elePassword.value);
validators.addValidator('maxLength:20', elePassword, '密码的字符个数必须是6到20个', elePassword.value);
var eleRepassword = document.getElementById('repassword');
validators.addValidator('isNoEmpty', eleRepassword, '确认密码不能为空', eleRepassword.value);
validators.addValidator('minLength:6', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value);
validators.addValidator('maxLength:20', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value);
validators.addValidator('isEqual:' + elePassword.value, eleRepassword, '两次密码不一致', eleRepassword.value);
var eleMail = document.getElementById('mail');
validators.addValidator('isNoEmpty', eleMail, '邮箱不能为空', eleMail.value);
validators.addValidator('isMail', eleMail, '邮箱不是一个有效的格式', eleMail.value);

check gibt ein Fehlerobjekt zurück, um nach der Prüfung einheitlich Eingabeaufforderungsvorgänge für DOM-Elemente auszuführen, z. B. das Festlegen des Fokus, das Auswählen von Inhalt oder das Umschließen einer roten Stilebene außerhalb des Eingabefelds.

var result = validators.check();
        if(result){
          alert(result.errMsg);
          result.element.focus();
          result.element.select();
          return false;
        }

An diesem Punkt können wir sehen, dass wir uns durch die Änderung des Strategiemodus bei der Eingabeüberprüfung nur noch darum kümmern müssen, welche Überprüfungsregel verwendet werden soll und welche Art von Eingabeaufforderungsinformationen verwendet werden sollen. Die Implementierungsdetails werden nicht mehr offengelegt , was für den Aufruf und die anschließende Erweiterung und Komponentisierung praktisch ist.

Alle Codes:

Das Obige ist der gesamte Inhalt des vom Herausgeber eingeführten Javascript-Designmusters – Überprüfung der Eingabe von Strategiemustern.

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

JavaScript -Frameworks: Stromversorgung moderner WebentwicklungMay 02, 2025 am 12:04 AM

Die Kraft des JavaScript -Frameworks liegt in der Vereinfachung der Entwicklung, der Verbesserung der Benutzererfahrung und der Anwendungsleistung. Betrachten Sie bei der Auswahl eines Frameworks: 1. Projektgröße und Komplexität, 2. Teamerfahrung, 3. Ökosystem und Community -Unterstützung.

Die Beziehung zwischen JavaScript, C und BrowsernMay 01, 2025 am 12:06 AM

Einführung Ich weiß, dass Sie es vielleicht seltsam finden. Was genau muss JavaScript, C und Browser tun? Sie scheinen nicht miteinander verbunden zu sein, aber tatsächlich spielen sie eine sehr wichtige Rolle in der modernen Webentwicklung. Heute werden wir die enge Verbindung zwischen diesen drei diskutieren. In diesem Artikel erfahren Sie, wie JavaScript im Browser ausgeführt wird, die Rolle von C in der Browser -Engine und wie sie zusammenarbeiten, um das Rendern und die Interaktion von Webseiten voranzutreiben. Wir alle kennen die Beziehung zwischen JavaScript und Browser. JavaScript ist die Kernsprache der Front-End-Entwicklung. Es läuft direkt im Browser und macht Webseiten lebhaft und interessant. Haben Sie sich jemals gefragt, warum Javascr

Node.js Streams mit TypeScriptApr 30, 2025 am 08:22 AM

Node.js zeichnet sich bei effizienten E/A aus, vor allem bei Streams. Streams verarbeiten Daten inkrementell und vermeiden Speicherüberladung-ideal für große Dateien, Netzwerkaufgaben und Echtzeitanwendungen. Die Kombination von Streams mit der TypeScript -Sicherheit erzeugt eine POWE

Python vs. JavaScript: Leistung und EffizienzüberlegungenApr 30, 2025 am 12:08 AM

Die Unterschiede in der Leistung und der Effizienz zwischen Python und JavaScript spiegeln sich hauptsächlich in: 1 wider: 1) Als interpretierter Sprache läuft Python langsam, weist jedoch eine hohe Entwicklungseffizienz auf und ist für eine schnelle Prototypentwicklung geeignet. 2) JavaScript ist auf einen einzelnen Thread im Browser beschränkt, aber Multi-Threading- und Asynchronen-E/A können verwendet werden, um die Leistung in Node.js zu verbessern, und beide haben Vorteile in tatsächlichen Projekten.

Die Ursprünge von JavaScript: Erforschung seiner ImplementierungsspracheApr 29, 2025 am 12:51 AM

JavaScript stammt aus dem Jahr 1995 und wurde von Brandon Ike erstellt und realisierte die Sprache in C. 1.C-Sprache bietet Programmierfunktionen auf hoher Leistung und Systemebene für JavaScript. 2. Die Speicherverwaltung und die Leistungsoptimierung von JavaScript basieren auf C -Sprache. 3. Die plattformübergreifende Funktion der C-Sprache hilft JavaScript, auf verschiedenen Betriebssystemen effizient zu laufen.

Hinter den Kulissen: Welche Sprache macht JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript wird in Browsern und Node.js -Umgebungen ausgeführt und stützt sich auf die JavaScript -Engine, um Code zu analysieren und auszuführen. 1) abstrakter Syntaxbaum (AST) in der Parsenstufe erzeugen; 2) AST in die Kompilierungsphase in Bytecode oder Maschinencode umwandeln; 3) Führen Sie den kompilierten Code in der Ausführungsstufe aus.

Die Zukunft von Python und JavaScript: Trends und VorhersagenApr 27, 2025 am 12:21 AM

Zu den zukünftigen Trends von Python und JavaScript gehören: 1. Python wird seine Position in den Bereichen wissenschaftlicher Computer und KI konsolidieren. JavaScript wird die Entwicklung der Web-Technologie fördern. Beide werden die Anwendungsszenarien in ihren jeweiligen Bereichen weiter erweitern und mehr Durchbrüche in der Leistung erzielen.

Python vs. JavaScript: Entwicklungsumgebungen und ToolsApr 26, 2025 am 12:09 AM

Sowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.

See all articles