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

在Javascript中实现多态性 - 这看起来如何？

1 个答案: