javascript - jQuery:页面代码和document.ready代码之间的共享功能

Question

我在 jQuery 中定义了一些不错的对话:

<script type="text/javascript">
$(document).ready(function() {

    $( "#someDialog" ).dialog({
        autoOpen: false,
        model: true,
        buttons: {
            "Do Something": function() {
                var cleanInput = sanitizeInput(input);
                // Do something with the clean input
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
        }
    });

    function sanitizeInput(input) {
        // Some magic here
        return input;
    }
});
</script>

在页面的某处，与对话框无关，我有一个元素调用带有参数的函数:

<a href="#" onclick="doSomething('wendy');">Wendy's stats</a>

以及关联的 JavaScript:

<script type="text/javascript">

function doSomething(input) {
    var cleanInput = sanitizeInput(input);
    // Some code here
}

</script>

我也想为这个函数重用 sanitizeInput() 函数。但是，在 document.ready 函数之外，对话框不起作用。将 doSomething() 函数放在 document.ready 函数中同样会破坏它。那么我应该把 sanitizeInput() 函数放在哪里，这样两者都可以使用它呢？

谢谢。

Answer 1

您只需将函数移到 ready() 回调之外。

$(document).ready(function() {

    $( "#someDialog" ).dialog({
        autoOpen: false,
        model: true,
        buttons: {
            "Do Something": function() {
                var cleanInput = sanitizeInput(input);
                // Do something with the clean input
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
        }
    });
});

  /*** Make it global ***/
function sanitizeInput(input) {
    // Some magic here
    return input;
}

现在 sanitizeInput() 是全局可用的，而不是局限于 ready() 回调的变量范围。