javascript - 在 Javascript 中实现多态性——这看起来怎么样？

Question

我正在尝试跳转到更 OOP 风格的 javascript 方法，但我在 javascript 中还没有得到正确的结果。

以下函数为例。

function positionalCSS(array, cs, lcs){
/* Define css for circle based on number of circles */
//Count array
var arrCount = array.length;
var T = [];
var L = [];
if(arrCount == 3){
    T[0] ='15px';
    L[0] = '240px';
    T[1] = '345px';
    L[1] = '440px';
    T[2] = '345px';
    L[2] = '40px';
}
if(arrCount == 4){
    T[0] ='-135px';
    L[0] = '90px';
    T[1] = '-10px';
    L[1] = '290px';
    T[2] = '220px';
    L[2] = '270px';
    T[3] = '315px';
    L[3] = '90px';
}
if(arrCount == 6){
    T[0] ='-135px';
    L[0] = '90px';
    T[1] = '-10px';
    L[1] = '290px';
    T[2] = '220px';
    L[2] = '270px';
    T[3] = '315px';
    L[3] = '90px';
    T[4] = '210px';
    L[4] = '-100px';
    T[5] = '-10px';
    L[5] = '-110px';
}
$.each(array, function(i) {
    var num = parseInt(i);
    //  console.log('$("' + lcs + ' ' + cs + '.handle-' + num + '").first().children("div");'); 
        $(lcs + ' ' + cs + '.handle-' + num).first().children('div').css({
        'position': 'absolute',
        'top': T[num],
        'left': L[num]
    });
});

}

这太可怕了，我想传入一个数组，并根据有多少个，根据这个组织项目的位置。所以我想根据它的大小我会给它一些属性？每个 TL 代表对象的顶部和左侧位置？

Answer 1

我会创建一个对象，您可以在其中查找保存 T/L 值的预制对象数组。

var counts = {
  3: [
    {t:'15px', l:'240px'},
    {t:'345px', l:'440px'},
    {t:'345px', l:'40px'}
  ],
  4: {
    // as above
  },
  5: {
    // as above
  }
};

然后在您的函数中使用它:

function positionalCSS(array, cs, lcs){
    $.each(counts[array.length], function(i, obj) {
        //  console.log('$("' + lcs + ' ' + cs + '.handle-' + i + '").first().children("div");'); 
        $(lcs + ' ' + cs + '.handle-' + i).first().children('div').css({
            'position': 'absolute',
            'top': obj.t,
            'left': obj.l
        });
    });
}