javascript - 如何提取匿名 JavaScript 函数

Question

我在一个单独的文件中定义了我的 javascript jquery 函数:

function setupSlider($, url) {
    genImgUrl = url + '/gensvg/';
    $("#slider").slider({
        min : -2000,
        max : 2000,
        value : 0,
        change : function(event, ui) {
            $('#svgImg').hide();
            $.ajax({
                type : "POST",
                url : genImgUrl,
           ...
        },
        slide : function(event, ui) {
            var v = 50;
            ...
            $('#value').text(ui.value).css('left', (v - 0.5) + '%');
        }
    });
    $('#min').text($('#slider').slider('option', 'min'));
    $('#max').text($('#slider').slider('option', 'max'));
};

我想将 change 和 slide 选项的函数分离到定义的函数 changeAction 中，并且slideAction。但我的参数 $、genImgUrl 和 jquery slider 参数 event、ui。你如何合并它们？您需要绑定(bind)功能，对吗？

谢谢!

Answer 1

只需声明它们是嵌套的，这样您仍然可以访问 $ 和 genImgUrl 的范围。

function setupSlider($, url) {
    var genImgUrl = url + '/gensvg/';
//  ^^^ this was supposed to be local I guess
    function onchange(event, ui) {
        $('#svgImg').hide();
        $.ajax({
            type : "POST",
            url : genImgUrl,
        …
    }
    function onslide(event, ui) {
        var v = 50;
        …
        $('#value').text(ui.value).css('left', (v - 0.5) + '%');
    }
    $("#slider").slider({
        min: -2000,
        max: 2000,
        value: 0,
        change: onchange,
        slide: onslide 
    });
    $('#min').text($('#slider').slider('option', 'min'));
    $('#max').text($('#slider').slider('option', 'max'));
}

除了函数名称之外，这与您的代码的功能完全相同。