Die jQuery-Modulfunktion gibt unerwartet 'Uncaught TypeError' zurück?

Question

Ich versuche, das Modul Muster zu verwenden, um eine Suchfunktion zu bauen:

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

beim Laufen ich diesen Fehler:

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

Ich klicken Sie auf die Schaltfläche #search mit einem blank Feld, erwartet die searchFunc, um den Begriff zu validieren und zeigen Sie dann das #searchErrors div mit meiner Fehlermeldung angehängt. Was verursacht diesen Fehler?

Answer 1

Es gibt nichts in dem obigen Code das würde entweder A) Stellen searchTerm aber undefined alles sein, oder B) Machen Sie es eine validateTerm Eigenschaft auf sie haben, wenn sie waren. Die Funktion, die Sie bei der Zuweisung an searchTerm aufrufen, gibt nichts zurück, und daher ruft sie die Funktion undefined auf. Wenn eine Variable in einer Funktion deklariert wird, wird diese Variable (glücklicherweise) nicht außerhalb der Funktion zugänglich gemacht.

Ich kann nicht verstehen, was Sie versuchen, mit Ihrem Code zu tun, aber das Modul Muster sieht grundsätzlich wie folgt aus (mit ES5 und früher):

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

    function bar() { 
    } 

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

Key Dinge:

1. Wir etwas zurückgeben, in der Regel ein Objekt

2. Wir Eigenschaften zu diesem Objekt zuweisen Dinge außerhalb des „Modul“ (Scoping-Funktion) zu offenbaren.

Andere Formationen:

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

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

Oder

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

    function bar() { 
    } 

    t.foo = function foo() { 
    }; 

    return t; 
})(); 

Oder mit ES2015 (derzeit müssen Sie noch ES2015 transpile in der freien Natur zu verwenden):

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

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

Alle diese Ergebnisse ergeben thing bezieht sich auf ein Objekt (das wir mit dem Objektinitialisierer auf return erstellen) mit einer Eigenschaft foo, die sich auf die foo-Funktion bezieht, und eine vollständig private bar-Funktion, auf die nur foo zugreifen kann.

Answer 2

Sorry mein Kommentar oben war (möglicherweise) falsch.

In Ihrer validateTerm-Funktion definieren Sie "Fehler" innerhalb jedes if-Blocks - es gibt keine Möglichkeit, außerhalb des if-Blocks darauf zuzugreifen.

Wenn Sie einen Fehler außerhalb der if-Anweisungen definieren, wird dieser korrekt zurückgegeben. (Aus Gründen der Übersichtlichkeit habe ich es in returnError umbenannt, damit Sie den Unterschied zwischen dem oben definierten Fehler und dem Fehler in Ihrer Funktion sehen können.)

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

Zusätzlich kann ich sehen, dass Sie ‚Fehler‘ vorher definiert haben - so bin zu raten ich Ihnen die Validate Linie sein, um ammend wollen wie folgt: -

error = searchFunc.validateTerm(term); 

Wie Sie zuweisen möchten der Wert, den Sie von der Funktion an die später zu verwendende Fehlervariable zurückgegeben haben.