javascript - 避免 jquery 函数的重复代码

Question

我有这个脚本(我的第一个脚本)，我在开发中得到了一些帮助: http://jsfiddle.net/spadez/AYUmk/2/

var addButton =$("#add"),
    newResp = $("#resp_input"),
    respTextArea = $("#responsibilities"),
    respList = $("#resp");

//
function Responsibility(text){
    this.text=text;
}
var responsibilities = []; 

function render(){
    respList.html("");
    $.each(responsibilities,function(i,responsibility){
        var el = renderResponsibility(responsibilities[i],function(){
            responsibilities.splice(i,1);//remove the element
            render();//re-render
        });
        respList.append(el);
    });
    respTextArea.text(responsibilities.map(function(elem){
       return elem.text;//get the text. 
    }).join("\n"));
}

addButton.click(function(e){
    var resp = new Responsibility(newResp.val());
    responsibilities.push(resp);
    render();
    newResp.val("");
});

function renderResponsibility(rep,deleteClick){
    var el = $("<li>");
    var rem = $("<a>Remove</a>").click(deleteClick);
    var cont = $("<span>").text(rep.text+" ");
    return el.append(cont).append(rem);
}

使用顶部框，您可以通过在输入框中输入职责并单击“添加”来将职责添加到文本区域中。这非常适合我的第一个盒子，但我需要它适用于三个不同的盒子，现在我有点困惑如何将此函数应用于所有三个实例“responsibility、test、test2”，而无需简单地复制代码三时间和改变变量。

我确信这种事情一定会经常发生，但我不确定是否可以避免。希望有更多 javascript 经验的人能够对此有所了解。

Answer 1

您可以例如为此使用 javascript 的范围:

function Responsibility(text){
    /* .... */
}

function setUp(addButton, newResp, respTextArea, respList) {


    var responsibilities = []; 

    function render(){
        /* ..... */
    }

    addButton.click(function(e){
        /* ..... */
    });

    function renderResponsibility(rep,deleteClick){
        /* ..... */
    }
}

然后对于每个组，您可以调用:

setUp($("#add"), $("#resp_input"), $("#responsibilities"), $("#resp") );

您肯定需要有不同的 id对于每个字段，如 #add1 , #add2 ...或者您也可以将其中的每一个分组为例如一个div像 .group1 这样的类并使用class而不是id喜欢 .add , .resp_input那么您甚至可以将需要传递给设置的参数数量减少为一个参数(仅传递容器)