JavaScript デザインパターン -- 戦略パターン入力検証_JavaScript スキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript デザインパターン -- 戦略パターン入力検証_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:29 PM

戦略パターンはアルゴリズムのファミリーを定義し、それらを個別にカプセル化して、計算を使用する顧客に関係なくアルゴリズムを変更できるようにします。

まず簡単な入力フォームを定義します:

<!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>

一般に、ページ上の情報を編集した後の送信アクションでは、入力された情報を検証する必要があります。送信関数または独立したチェック関数に、チェックを担当する多くのコードが記述されていることがわかります。

例えば以下のような感じです。

 $(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;
        }
      }

この記述方法は機能要件を確実に満たすことができますが、いくつかの問題があります。

1. 他のページで使用したい場合は、コードをコピーする必要があり、いわゆる再利用はコードの重複が多くなります。より良いものはチェックコードを分類してパッケージ化しますが、重複が多くなります。

2. 入力認証を追加したい場合は、送信機能を直接変更する必要があり、この機能は肥大化し、「開閉」の原則が崩れてしまいます。

3. 送信関数を変更する場合は、いつ誤った変更や未知の状況が発生するかわからないため、関数設計のすべてのテストをカバーする必要があります。

変換手順:

1. 各検証ロジックを検証戦略として扱い、各検証戦略関数をカプセル化します。関数パラメーターは一貫性があり、DOM 要素、検証された値、エラーメッセージ、カスタマイズされたパラメーターを受け入れることができます。

2. バリデーターを定義します。検証戦略関数をインポートまたは追加できます。

3. バリデーターは検証中に呼び出すための検証メソッドを提供し、内部的に特定の検証戦略関数を呼び出します。

4. 通話を確認します。

ステップ 1.

各 if を検証ビジネスルールとして考慮し、各ビジネスルールを個別の戦略関数として扱い、すべての戦略関数を 1 つの戦略オブジェクトにカプセル化します。

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

すべての関数の最初の 3 つのパラメーターは一貫していて必須であり、検証された DOM 要素、エラーメッセージ、および検証された値を示します。4 番目のパラメーターは、カスタマイズされたパラメーターを決定するための関数独自の検証ルールで始まります。

「buildInvalidObj」メソッドは、最初の 3 つのパラメーターをエラーオブジェクトに変換して返します。このエラーオブジェクトは、検証が失敗する限り返されます。

依存関係逆転の原則によれば、高レベルのモジュールは低レベルのモジュールに依存すべきではないため、検証の呼び出し元がそれらを直接使用することはできません。

バリデーターによるカプセル化と抽象化。

ステップ 2:

バリデーターを定義します。バリデーターにすべての検証戦略をインポートすることも、検証戦略関数を個別に追加することもできます。

//输入验证器
      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;
      };

ステップ 3:

外部呼び出しを受け入れるための検証方法を追加します。

最初のパラメータールールは、「minLength:6」などの検証ルールに設定されます。次のコードは、特定のストラテジ関数への呼び出しを生成し、キャッシュにプッシュされ、一緒に呼び出されるのを待ちます。

「:6」は、ストラテジ関数が独自のルールに従ってカスタマイズしたパラメータを示します。

  //添加验证方法
      //参数:
      // 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);
        });
      };

チェック関数を通じてすべての検証を呼び出します。そして間違った結果を返します。

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

ステップ 4:

検証が必要な場合は、まず新しいバリデーターオブジェクトを作成します。

var validators = new InputValidators();

検証戦略関数を含むオブジェクトをインポートするか、検証戦略関数を別途追加します。

さまざまな検証戦略を戦略オブジェクトに事前にカプセル化したり、実際の状況に応じてすぐに追加したりできることがわかります。

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

次に、検証メソッドを追加して、検証する必要があるストラテジ、検証された DOM 要素、エラーメッセージ、および検証された値をバリデーターに追加します。これにより、ストラテジオブジェクトの直接呼び出しが回避され、結合が軽減されます。

バリデーターのチェックを呼び出して、すべての検証を実行します。

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 はエラーオブジェクトを返します。このオブジェクトを使用すると、チェック後に DOM 要素に対してプロンプト操作 (フォーカスの設定、コンテンツの選択、入力ボックスの外側の赤いスタイルのレイヤーのラップなど) を均一に実行できます。

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

この時点で、戦略モードの変更により、入力検証時にどの検証ルールを使用するか、どのような種類のプロンプト情報を使用するかだけを考慮する必要があることがわかります。実装の詳細は公開されなくなりました。これは、呼び出しとその後のフォローアップに便利です。

すべてのコード:

以上が編集者が紹介するJavaScriptデザインパターン - 戦略パターン入力検証の全内容です。気に入っていただければ幸いです。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

JavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。

JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AM

はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか

node.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AM

node.jsは、主にストリームのおかげで、効率的なI/Oで優れています。ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます

Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。