Javascript 重构代码-变量范围

我有3个按钮以不同方式连接输入文本：

 var myTxtArea = document.getElementById('KWarea');
 myTxtArea.value = myTxtArea.value.replace(/^\s*|\s*$/g, '');
 var lines = $('#KWarea').val().replace(/\*/g, '').split('\n');
 $('#produce').click(function () {
     var endString = "";

     myTxtArea.value = myTxtArea.value.replace(/^\s*|\s*$/g, '');
     var lines = $('#KWarea').val().replace(/\*/g, '').split('\n');
     for (var i = 0; i < lines.length; ++i) {
         endString += '"*' + $.trim(lines[i]) + '*"' + ',' + '"* ' + lines[i] + ' *"' + ',';
         //   console.log(lines[i]);
     }
     var trimmedStr = endString.slice(0, -1);
     $('#result1').html("ctx.keywords MATCHES (" + trimmedStr + ")");
     $('#Strlength').html('Total string length: ' + trimmedStr.length);

 });

 $('#produce2').click(function () {
     var endString = "";
     for (var i = 0; i < lines.length; ++i) {
         endString += '"*' + $.trim(lines[i]) + '*"' + ',';
     }
     var trimmedStr = endString.slice(0, -1);
     $('#result1').html("ctx.keywords MATCHES (" + trimmedStr + ")");
     $('#Strlength').html('Total string length: ' + trimmedStr.length);

 });

 $('#produce3').click(function () {
     var endString = "";
     for (var i = 0; i < lines.length; ++i) {
         endString += '"' + $.trim(lines[i]) + '"' + ',';
     }
     var trimmedStr = endString.slice(0, -1);
     $('#result1').html("ctx.keywords MATCHES (" + trimmedStr + ")");
     $('#Strlength').html('Total string length: ' + trimmedStr.length);

 });

但是

trimmedStr

依赖于

endString

，我不能重构而不导致一些

var未定义


非常感谢
看起来更大一点的重构可能是有益的。类似这样的东西

function getInput () {
    var lines = $('#KWarea').val().split('\n');
    var plainKeywords = lines.map(function (line) {
        // Match the line for correct input string
        return line.match(/^\s*\**([a-z 0-9]+)\**\s*$/i)[1];  
    }).filter(function (word) {
        // No match -> discard line
        return word !== undefined;
    });
    return plainKeywords;
}

function getKeywords (type, word) {
    if(type == 1) return ['"*' + word + '*"', '"* ' + word + ' *"'];
    if(type == 2) return ['"*' + word + '*"'];
    return ['"' + word + '"'];
}

function showKeywords (type) {
    // Comma seperated list of keywords
    var output = getInput().reduce(function (memo, i) {
        return memo.concat(getKeywords(type, i));
    }, []).join(',');
    $('#result1').html('ctx.keywords MATCHES (' + output + ')');
    $('#Strlength').html('Total string length: ' + output.length);
}

 $('#produce').click(showKeywords.bind(null, 1));
 $('#produce2').click(showKeywords.bind(null, 2));
 $('#produce3').click(showKeywords.bind(null, 3));

为什么不为这两行创建一个单独的函数呢？如果这是工作代码，您需要改进建议，那就是.function name（）{/*该代码*/}和调用其中的name（）。click（）不起作用->var undefined。如果我做错了什么，请编辑我的小提琴：）谢谢，我从来不知道它的存在（虽然我看到它很新）。我正在修改你的代码，但我遇到了一个不一致的地方，我不明白。您创建了一个名为
lines
的全局变量，其中两个单击处理程序使用该全局变量，而另一个单击处理程序使用相同的名称创建它自己的局部变量。这真的是你想要的还是其中的一个错误？谢谢你，正是这种代码审查帮助我在编码方面变得更好。
function getInput () {
    var lines = $('#KWarea').val().split('\n');
    var plainKeywords = lines.map(function (line) {
        // Match the line for correct input string
        return line.match(/^\s*\**([a-z 0-9]+)\**\s*$/i)[1];  
    }).filter(function (word) {
        // No match -> discard line
        return word !== undefined;
    });
    return plainKeywords;
}

function getKeywords (type, word) {
    if(type == 1) return ['"*' + word + '*"', '"* ' + word + ' *"'];
    if(type == 2) return ['"*' + word + '*"'];
    return ['"' + word + '"'];
}

function showKeywords (type) {
    // Comma seperated list of keywords
    var output = getInput().reduce(function (memo, i) {
        return memo.concat(getKeywords(type, i));
    }, []).join(',');
    $('#result1').html('ctx.keywords MATCHES (' + output + ')');
    $('#Strlength').html('Total string length: ' + output.length);
}

 $('#produce').click(showKeywords.bind(null, 1));
 $('#produce2').click(showKeywords.bind(null, 2));
 $('#produce3').click(showKeywords.bind(null, 3));