jQueryモジュール関数が予期せず 'Uncaught TypeError'を返していますか？

Question

私は検索機能を構築するためにモジュールパターンを使用しようとしている：

https://learn.jquery.com/code-organization/concepts/

$("#search").click(function(){ 
     var searchFunc = (function(){ 
      event.preventDefault();  

      var term = $("#searchInput").val(); 
      var warning = $('#searchErrors'); 
      var regex = /^[a-zA-Z0-9\-\s]+$/; 
      var keyboard = $(':focus'); 
      var error = null; 

      var validateTerm = function(term){ 
       if (term === ''){ 
        var error = 'Please enter a search term'; 
       } 
       else if (!regex.test(term)){ 
        var error = 'Please enter only alphanumeric characters (numbers and letters).'; 
       } 
       return error; 
      }; 

      var displayErrors = function(error){ 
       warning.append(error).show(); 
      }; 

      keyboard.blur(); 
     })(); 

     searchFunc.validateTerm(term); 
     if (error != null){ 
      displayErrors.empty(); 
      searchFunc.displayErrors(error);  
     } 
     else{ 
      return returnResults(term);  
     } 
    }); 

    var returnResults = (function(term) { 
     console.log(term); 
    })(); 

実行しているとき、私はこのエラーを取得：

script.js:28 Uncaught TypeError: Cannot read property 'validateTerm' of undefined

私はAと#searchボタンをクリックしています空白#searchInputフィールド、searchFuncがタームの有効性を確認してから、エラーメッセージが追加された#searchErrors divを表示します。このエラーの原因は何ですか？

Answer 1

上記のコードには、A）undefined以外は何も指定しないでください。または、B）validateTermのプロパティがあればそれにしてください。 searchTermに割り当てるときに呼び出す関数は何も返しません。その結果、undefinedという結果になります。関数内で変数を宣言すると、その変数を関数の外部からアクセスできるようになりません（幸いにも）。

私はあなたのコードで何をしようとして作ることはできませんが、モジュールのパターンは、基本的に（ES5およびそれ以前に）次のようになります。

var thing = (function() { 
    function foo() { 
    } 

    function bar() { 
    } 

    return { 
     foo: foo 
    }; 
})(); 

主なもの：

1. 私たちは、私たちは、「モジュール」（スコープ機能）外の事を明らかにし、そのオブジェクトにプロパティを割り当てる何か、通常のオブジェクト

2. を返します。

その他の地層：

var thing = (function() { 
    function bar() { 
    } 

    return { 
     foo: function foo() { 
     } 
    }; 
})(); 

それとも

var thing = (function() { 
    var t = {}; 

    function bar() { 
    } 

    t.foo = function foo() { 
    }; 

    return t; 
})(); 

またはES2015（現在はまだ野生のES2015を使用するtranspileする必要があります）と：

var thing = (function() { 
    function bar() { 
    } 

    return { 
     foo() { 
     } 
    }; 
})(); 

結果はすべてですfoo関数を参照するプロパティfooと、fooのみがアクセスできる完全にプライベートなbar関数を持つオブジェクト（returnのオブジェクトイニシャライザで作成するオブジェクト）を参照する。

Answer 2

申し訳ありませんが、私の上記のコメントは（おそらく）間違っていました。

validateTerm関数では、ifブロック内で 'エラー'を定義しています。これはifブロックの外側にアクセスする方法がありません。

if文の外でerrorを定義すると、正しく返されます。 （わかりやすくするために、私はreturnErrorに名前を変更して、上で定義したエラーとあなたの関数内のエラーの違いを見ることができます。）

var validateTerm = function(term){ 
      var returnError = ""; 
      if (term === ''){ 
       returnError = 'Please enter a search term'; 
      } 
      else if (!regex.test(term)){ 
       returnError = 'Please enter only alphanumeric characters (numbers and letters).'; 
      } 
      return returnError; 
     }; 

また、私はあなたが以前に「エラー」を定義していることを見ることができます - ので、私はあなたが以下のように検証ラインをammendしたい推測しています： -

error = searchFunc.validateTerm(term); 

割り当てたいと関数からエラー変数に戻ってきた値を後で使用します。