第一个jquery项目-在函数中使用处理程序来模块化它们

first jquery project - using handlers in functions to modularize them

本文关键字:程序 处理 模块化 项目 jquery 函数 第一个      更新时间:2024-01-01

在我的javascript书籍中,我读到创建许多单独的"模块"是一种很好的方法。然而,当我将这一理念应用于我的第一个jQuery项目时,我的函数被多次调用,没有明显的原因。

我的计划是:

有一个功能可以处理网页上的数字输入(点击)。

有第二个功能(也显示在这里)来处理输入验证。

只有当模块2发现号码有效时,才具有第三个功能(未显示)来处理号码处理。

如果函数2或3中的任何一个使号码失败,它们会再次调用enterNumber(),然后等待用户"单击"新号码。

相反,调用enterNumber()似乎是在用户根本不做任何事情的情况下"单击"$('#button)

首先,这是对点击处理程序的合法处理吗?它现在的编写方式产生了太多的循环。

var enterNumber = function () {
        $('#button').click(function(){
            guess = $('#input').val();
            $('#input').val("").focus();
            verifyNumbers(guess);
        });
        $('#input').keyup(function(event){
            if (event.keyCode == 13){
                $('#button').click();
            }
        });
};
var verifyNumbers = function(x) {
    if (isNaN(x))
    {
        $("#display").html("You must type in numbers, not letters or spaces");
        $('#input').val("").focus();
        enterNumber();
    }
    else if (x > 100)
    {
        $("#display").html("You must type in numbers below 100");
        $('#input').val("").focus();
        enterNumber();
    }
    else
    {
        console.log("number is legit");
        //compareNumbers(x);
    }
};
enterNumber();

enterNumber的内容只需要在页面加载时调用。您正在绑定jQuery事件。如果您多次调用enterNumber,那么该事件将有多个处理程序(执行相同的操作,因此会进行多次调用)。解决方案:

$(document).ready(function() {
    enterNumber();
}

它在页面加载时绑定事件。一旦它们被绑定,就不应该再绑定它们。

然后删除其他两个函数中的enterNumber调用,因为处理程序已经在侦听click和keyup事件——一旦事件触发,就会调用verifyNumbers