jQuery - 如何简化执行相似但功能略有不同的代码？答案

【问题标题】：jQuery - How do I simplify code that performs similar, but slightly different functions?jQuery - 如何简化执行相似但功能略有不同的代码？
【发布时间】：2017-08-26 02:11:21
【问题描述】：

我有几行代码执行类似的功能（它们从输入中获取值并附加一行代码）。有没有办法可以简化这些？

    //======Name
        var name = $('input[name=Name]').val();
        if (name){
        $('.results').append('<div class="item">' + '<p>Your name is ' + name + '.</p>' + '</div>');}
//======Age
        var age = $('input[name=YourAge]:checked').val();
        if (age){
        $('.results').append('<div class="item">' + '<p>Your age is ' + age + '.</p>' + '</div>');}
//======Occupation
        var occupation = $('input[name=Occupation]').val();
        if(occupation){
        $('.results').append('<div class="item">' + '<p>Your occupation is ' + occupation + '.</p>' + '</div>');}

【问题讨论】：

标签： jquery html simplify

【解决方案1】：

看看每件作品的相同点和不同点。把相似的部分变成函数体，不同的部分作为函数的参数：

function appendResult(selector, label) {
    var result = $(selector).val();
    if (result){
        $('.results').append('<div class="item">' + '<p>Your ' label ' is ' + result + '.</p>' + '</div>');
    } 
}

然后，像这样使用它：

appendResult('input[name=Name]', 'name');

appendResult('input[name=YourAge]:checked', 'age');

appendResult('input[name=Occupation]', 'occupation');

请注意，每段代码仅因使用的选择器不同而不同，并且打印的“标签”用于描述该项目。这两个部分成为参数，在重命名一些变量后，您将拥有一个可以使用的通用函数。

【讨论】：

迄今为止最好的解决方案。+1。但是您不能将数组作为参数发送，以便仅在一次调用中就可以完成所有操作而不是三个函数调用？
@AlivetoDie 你可以。您还可以将此函数映射到(selector, label) 的列表元组上。这里的想法是展示如何提取模式。具体如何操作和使用它取决于场景。

【解决方案2】：

你可以只创建一个函数。

function checkExists(field) {
            if(field) {
                $('.results').append('<div class="item">' + '<p>Your ' + field.attr('name').toLowerCase() + ' is ' + field + '.</p>' + '</div>');
            }
        }

我添加了.toLowerCase，所以它在语法上是有意义的。当然，您需要调用函数并将字段作为参数传递。

checkExists($('input[name=Name]'));

【讨论】：