重构代码 - 变量范围答案

【问题标题】：Refactoring code - variable scope重构代码 - 变量范围
【发布时间】：2015-06-20 15:49:18
【问题描述】：

我有 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);

 });

我想避免一遍又一遍地重复以下内容：

  $('#result1').html("ctx.keywords MATCHES (" + trimmedStr + ")");
     $('#Strlength').html('Total string length: ' + trimmedStr.length);

但是trimmedStr 依赖于endString，如果不以var undefined 结尾，我就无法重构

Jsfiddle here

非常感谢

【问题讨论】：

为什么不简单地为这两行创建一个单独的函数？
如果这是您想要改进建议的工作代码，这就是 codereview.stackexchange.com 的用途。
function name(){ /* 该代码 */ } 和在 .click() 中调用 name() 不起作用 -> var undefined。如果我做错了什么，请编辑我的小提琴:)
谢谢，从来不知道它存在（虽然我看到它很新）。
我正在修改您的代码，但遇到了我不理解的不一致。您创建了一个名为 lines 的全局变量，您的两个单击处理程序使用该全局变量，但其他单击处理程序使用相同的名称创建它自己的局部变量。这真的是您的意图还是其中一个错误？

标签： javascript jquery refactoring code-duplication

【解决方案1】：

看起来更大的重构可能是有益的。类似的东西？

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));

http://jsfiddle.net/g8rsxmy3/5/

【讨论】：

谢谢，正是这种代码审查帮助我在编码方面变得更好。