javascript - 如何使用回调重写以消除对单独变量标签的需要？

Question

我对 JS 回调的成功率有一定的把握(运气)。有时我可以花几周的时间将相当复杂的对象和控件放在一起，然后BHAM一只眼睛会抽搐，我会以我对黑猩猩最好的印象按下按钮。那些有知识的人会指出我从来不知道的明显事实，所以到目前为止我一直是 Dunning–Kruger effect 的完美例子。

通过示例我学得更好，因此在错误方法下的代码中，所有值都采用最后分配的值，并且最终处于抽搐模式。第二个片段Naive Approach分配了不同的标签，以避免第一个片段的问题。

在第一个片段中，前 3x 行获取值并将它们分配给一个元素。

        var x = $(".slider-x").slider("value"),
            y = $(".slider-y").slider("value");
        $('.svg-position').attr("transform", "translate(" + x + "," + y + ")");

如果没有回调，分配的值将被后面的行覆盖。

如何使用回调重写以消除对单独变量标签的需要？

错误的方法

    $('.svg-icon').click(function () {

        var x = $(".slider-x").slider("value"),
            y = $(".slider-y").slider("value");
        $('.svg-position').attr("transform", "translate(" + x + "," + y + ")");
        var scale = $(".slider-svglogo-scale").slider("value");
        $('.svg-size').attr("transform", "scale(" + scale / 100 + ")");                
        var scale = $(".slider-title-text-scale").slider("value");
        $('.svg-business-title').css("font-size", scale1 + "px");            
        var x = $(".slider-title-text-x").slider("value"),
            y = $(".slider-title-text-y").slider("value");
        $('.title-text').attr("x", x);
        $('.title-text').attr("y", y);
        var strap = $('.text-strap').val();
        $('.svg-strap-line').text(strap);
        var x = $(".slider-strapline-text-x").slider("value"),
            y = $(".slider-strapline-text-y").slider("value");
        $('.strapline-text').attr("x", x);
        $('.strapline-text').attr("y", y);
        var scale = $(".slider-strapline-text-scale").slider("value");
        $('.svg-strap-line').css("font-size", scale + "px"); 

        //some code that builds html and sets values
    });

天真的方法

    $('.svg-icon').click(function () {

        var x = $(".slider-x").slider("value"),
            y = $(".slider-y").slider("value");
        $('.svg-position').attr("transform", "translate(" + x + "," + y + ")");
        var scale = $(".slider-svglogo-scale").slider("value");
        $('.svg-size').attr("transform", "scale(" + scale / 100 + ")");                
        var scale1 = $(".slider-title-text-scale").slider("value");
        $('.svg-business-title').css("font-size", scale1 + "px");            
        var x1 = $(".slider-title-text-x").slider("value"),
            y1 = $(".slider-title-text-y").slider("value");
        $('.title-text').attr("x", x1);
        $('.title-text').attr("y", y1);
        var strap = $('.text-strap').val();
        $('.svg-strap-line').text(strap);
        var x2 = $(".slider-strapline-text-x").slider("value"),
            y2 = $(".slider-strapline-text-y").slider("value");
        $('.strapline-text').attr("x", x2);
        $('.strapline-text').attr("y", y2);
        var scale2 = $(".slider-strapline-text-scale").slider("value");
        $('.svg-strap-line').css("font-size", scale2 + "px"); 

        //some code that builds html and sets values
    });

Answer 1

$('.svg-icon').click(function () {
    const getXY = (xid, yid)=> ({x: $(xid).slider("value"), y: $(yid).slider("value")})
    const setXY = (elId,{x, y})=>$(elid).attr("x", x).attr("y" ,y);
    const getScale = (elId) => $(elid).slider("value");

    const {x,y} = getxy('.slider-x','.slider-y')
    $('.svg-position').attr("transform", "translate(" + x + "," + y + ")");


    setXY('.strapline-text', getXY('.slider-strapline-text-x', ".slider-title-text-y"))
    setXY('.title-text', getXY('.slider-title-text-x', '.slider-title-text-y'))


    $('.svg-size').attr("transform", "scale(" + getScale('.slider-svglogo-scale') / 100 + ")");
    $('.svg-business-title').css("font-size", getScale('.slider-title-text-scale') + "px");
    $('.svg-strap-line').css("font-size", getScale("slider-strapline-text-scale") + "px"); 


    var strap = $('.text-strap').val();
    $('.svg-strap-line').text(strap);
    //some code that builds html and sets values
});

您可以利用 Jquery 专业知识使其更加干燥，但在我看来，代码将变得不可读。仍然没有更多标签。