変数の中で関数を呼び出す方法は？

Question

JavaScriptでモジュールパターンを使用しているので、コード内のグローバル変数の数を減らすため、JavaScriptでの悪い習慣とみなされます。

例えば、私は入力から電​​子メールを検証するために、この単純な機能を持っている：

var checkEmail = (function() { 
    var userEmail = document.getElementById('contactEmail'), 
     emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i; 

    function validateEmail() { 
     if (userEmail.value.search(emailRegEx) === -1) { 
      console.log('Invalid email!'); 
      return false; 
     } else { 
      console.log('Correct!'); 
     } 
    } 
    userEmail.addEventListener('keyup', validateEmail); 
})(); 

どのように私は、この関数を呼び出すことができますか？

Answer 1

var checkMail = function(){ ... } 

だけで使用、多かれ少なかれ同等

function checkMail(){ ... } 

ので、それを呼び出すためにです：

checkMail(); 

編集

私は速すぎたかもしれません。あなたが持っているものはクロージャーとそれの中の別の機能です。最初にvar checkEmail =がなくても機能します。それは自分自身を呼び出して、リスナーをkeyupイベントに追加するためです。あなたは、内側validateEmail機能へのアクセス権を持っていると思った場合は、これを実行する必要があります：

var checkEmail = (function() { 
    var userEmail = document.getElementById('contactEmail'), 
     emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i; 

    function validateEmail() { 
     if (userEmail.value.search(emailRegEx) === -1) { 
      console.log('Invalid email!'); 
      return false; 
     } else { 
      console.log('Correct!'); 
     } 
    } 
    userEmail.addEventListener('keyup', validateEmail); 

    return validateEmail; 
})(); 

あなたは関数自体を返したい、と今、あなたは、内側の関数を呼び出すためにcheckMail()を使用することができます。

Answer 2

あなたは、具体的validateEmail関数を呼び出すことができるようにしたい場合は、あなたがそれを返すことができます：

var checkEmail = (function() { 
    var userEmail = document.getElementById('contatoEmail'), 
     emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i; 

    function validateEmail() { 
     if (userEmail.value.search(emailRegEx) === -1) { 
      console.log('Invalid email!'); 
      return false; 
     } else { 
      console.log('Correct!'); 
     } 
    } 
    userEmail.addEventListener('keyup', validateEmail); 

    return{ 
     validateEmail : validateEmail; 
    } 
})(); 

あなたcheckEmail変数がグローバルスコープにある場合、validateEmailが同様にグローバルスコープで利用できるようになります。

Answer 3

あなたは既にあります。この：

var checkEmail = function() { 
    var userEmail = document.getElementById('contactEmail'), 
     emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i; 

    function validateEmail() { 
     if (userEmail.value.search(emailRegEx) === -1) { 
      console.log('Invalid email!'); 
      return false; 
     } else { 
      console.log('Correct!'); 
     } 
    } 
    userEmail.addEventListener('keyup', validateEmail); 
}; 

checkEmail(); 

はこれと同じです：

(function() { 
    var userEmail = document.getElementById('contactEmail'), 
     emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i; 

    function validateEmail() { 
     if (userEmail.value.search(emailRegEx) === -1) { 
      console.log('Invalid email!'); 
      return false; 
     } else { 
      console.log('Correct!'); 
     } 
    } 
    userEmail.addEventListener('keyup', validateEmail); 
})(); 

Answer 4

var checkEmail = (function() {})();がはすぐ呼び出されます匿名関数式です。すぐに呼び出される関数式（IIFE）と呼ばれます。したがって、呼び出す必要はありません！

Answer 5

モジュールパターンが表示されています。実際には、このパターンには、init、render、およびイベントバインディング関数が含まれている必要があります。正しい場合、init関数がモジュールを起動します。 また、を使用して、すべての変数をモジュールに保存して参照する必要があります。

例：

var checkEmail = (function() { 

function init(){ 

    //Store all variables on module 
    cacheDom(); 

    //Bind all user events click, keyup ect... 
    bindEvents(); 

    //Resets form , clears input fields ect...basically sets app to default state 
    render(); 

} 

function cacheDom(){ 

     this.userEmail = document.getElementById('contactEmail'), 
     this.emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i; 


} 

function bindEvents(){ 
this.userEmail.addEventListener('keyup', validateEmail); 

} 

//Render sets the default state of app 
function render(){ 

userEmail.innerHTML = " "; 

} 



function validateEmail() { 
    console.log('keyed') 
     if (userEmail.value.search(this.emailRegEx) === -1) { 
      console.log('Invalid email!'); 
      return false; 
     } else { 
      console.log('Correct!'); 

     //Resets state after success 
     render() 
     } 

    } 

    //Initializing module...email will be validated on keyup 
    init(); 

})(); 

希望これは