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() {})();是匿名函数表达式，可立即调用。它被称为立即调用函数表达式（IIFE）。因此无需调用它！

Answer 4

您使用的是显示模块模式。实际上，此模式应包括 init，render和事件绑定函数。完成后，init函数将启动您的模块。此外，您应该使用 this 来存储和引用所有变量到模块..

示例：

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

})();

希望这有帮助

Answer 5

你已经拥有了。这样：

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

如何调用变量内的函数？

5 个答案: