如何使用构造函数来编写此代码？

Question

这是关于响应式设计中多个文本中的省略。

我使用jQuery来做这件事，但我认为写这段代码会更容易，但我不知道该怎么做。我需要一些建议。

       if(responsive>1200 && responsive<1919){
            $(".ellipsis-2").each(function(){
                var maxwidth=15;
                if($(this).text().length > maxwidth){
                    $(this).text($(this).text().substring(0,maxwidth));
                    $(this).html($(this).html()+'...');
                }
                console.log($(this).text().length);
            });
            $(".ellipsis-3").each(function(){
                var maxwidth=40;
                if($(this).text().length > maxwidth){
                    $(this).text($(this).text().substring(0,maxwidth));
                    $(this).html($(this).html()+'...');
                }
                console.log($(this).text().length);
            });
        }else{
            $(".ellipsis-2").each(function(){
                var maxwidth=23;
                if($(this).text().length > maxwidth){
                    $(this).text($(this).text().substring(0,maxwidth));
                    $(this).html($(this).html()+'...');
                }
                console.log($(this).text().length);
            });
            $(".ellipsis-3").each(function(){
                var maxwidth=53;
                if($(this).text().length > maxwidth){
                    $(this).text($(this).text().substring(0,maxwidth));
                    $(this).html($(this).html()+'...');
                }
                console.log($(this).text().length);
            });
        }

Answer 1

你只需要一个函数来简化你的代码，而不是一个真正的构造函数。为接收要应用的元素的选择器以及最大宽度的省略号逻辑创建一个：

function applyEllipsis(selector, maxWidth){
    $(selector).each(function(){
        if($(this).text().length > maxWidth){
            $(this).text($(this).text().substring(0,maxWidth));
            $(this).html($(this).html()+'...');
        }
        console.log($(this).text().length);
    });
}

现在，您可以在if语句中调用它，传递每种情况所需的选择器和最大宽度：

if(responsive>1200 && responsive<1919){
    applyEllipsis(".ellipsis-2",15);
    applyEllipsis(".ellipsis-3",40);
}else{
    applyEllipsis(".ellipsis-2",23);
    applyEllipsis(".ellipsis-3",53);
}

Answer 2

根据这段代码之后的其他内容，您可能会发现在object数组中存储类/宽度值有一些用处：

var ellipsisData = [
    {
        className: 'ellipses-2',
        smallWidth: 15,
        bigWidth: 23
    },{
        className: 'ellipses-3',
        smallWidth: 23,
        bigWidth: 53
    }
]

然后像其他答案一样声明你的函数：

var truncateText = function(className, maxWidth) {
    $("." + className).each(function() {
        if($(this).text().length > maxWidth) {
            $(this).text($(this).text().substring(0,maxWidth));
            $(this).html($(this).html()+'...');
        }
        console.log($(this).text().length);
    });
};

现在决定您要使用的宽度：

var widthKey = (responsive > 1200 && responsive < 1919) ? 'smallWidth' : 'bigWidth';

最后遍历您的数据元素，并对每个元素执行函数：

ellipsisData.forEach(function(ellipsis) {
    truncateText(ellipsis.className, ellipsis[widthKey]);
});

可能没有必要，但我已经把它写出来了，所以我想我应该把它贴出来。