javascript - 我的 jQuery 代码可以运行，但是从程序员的 Angular 来看它是不是很糟糕？

Question

我拼凑了这个 jQuery 函数。它的目的是计算 div.article 中所有 img 元素的边距，以平衡图像的高度与文档的基线网格，即 20 像素。为了匹配我的基线网格，每个图像高度都应该是 20 的倍数。如果不是这样，例如一张图片的高度为154px，该函数为img增加了6px的边距，以恢复与基线网格的平衡。

函数正常运行，所以我的实际问题是:因为我不是程序员，所以我想知道我的代码是否非常糟糕，尽管它可以运行，如果可以，如何改进代码？

jQuery 代码:

$('div.article img').each(function() {

    // define line height of CSS baseline grid:
    var line_height = 20;

    // capture the height of the img:
    var img_height = $(this).attr('height');

    // divide img height by line height and round up to get the next integer:
    var img_multiply = Math.ceil(img_height / line_height);

    // calculate the img margin needed to balance the height with the baseline grid:
    var img_margin = (img_multiply * line_height) - img_height;

    // if calculated margin < 5 px:
    if (img_margin < 5) {

        // then add another 20 px to avoid too small whitespace:
        img_margin = img_margin + 20;  
    }

    // if img has caption:
    if ($($(this)).next().length) {

        // then apply margin to caption instead of img:
        $($(this)).next().attr('style', "margin-bottom: " + img_margin + "px;");
    } else {

        // apply margin to img:
        $(this).attr('style', "margin-bottom: " + img_margin + "px;");
    }
});

HTML 代码示例，带有标题的 img:

<div class="article">
   <!-- [...] -->
    <p class="image">
        <img src="http://example.com/images/123.jpg" width="230" height="154" alt="Image alt text goes here" />
        <small>Image Caption Goes Here</small>
    </p>
   <!-- [...] -->
</div>

HTML 代码示例，没有标题的 img:

<div class="article">
    <!-- [...] -->
    <p class="image">
        <img src="http://example.com/images/123.jpg" width="230" height="154" alt="Image alt text goes here" />
    </p>
   <!-- [...] -->
</div>

编辑:根据 Russ Cam 的建议改进代码:

var line_height = 20;
var min_margin = 5;
$('div.article img').each(function() {
    var $this = $(this); // prefixed variable name with $ to remind it's a jQuery object
    var img_height = $this.height();
    var img_margin = ((Math.ceil(img_height / line_height)) * line_height) - img_height;
    img_margin = (img_margin < min_margin)? img_margin + line_height : img_margin;
    if ($this.next().length) {      
        $this.next().css({'margin-bottom' : img_margin + 'px'});
    } else {
        $this.css({'margin-bottom' : img_margin + 'px'});
    }
});

Answer 1

我可以推荐一些改进

1.cache $(this) inside the each() in a local variable

$('div.article img').each(function() {

    var $this = $(this); // prefixed variable name with $ 
                         // to remind it's a jQuery object

    // ....

   if ($this.next().length) {

   // ....

   }

});

2.不是设置attr('style')，而是使用css()命令

3.不需要这样做

$($(this))

虽然它不会破坏 jQuery，但不必将 jQuery 对象传递给另一个 jQuery 对象。

4.使用$(this).height()或 $(this).outerHeight()获取浏览器中元素的高度

5.不是 jQuery 特定的，但可以使用三元条件运算符来分配这个值

// if calculated margin < 5 px:
if (img_margin < 5) {

    // then add another 20 px to avoid too small whitespace:
    img_margin = img_margin + 20;  
}

成为

// if calculated margin < 5 px then add another 20 px 
// to avoid too small whitespace
img_margin = (img_margin < 5)? img_margin + 20 : img_margin;  

6. 正如 Alex 在评论中指出的那样，我还会删除那些只是重复代码告诉您的内容的多余评论。即使这是调试脚本，在我看来，它们也会降低可读性，并且注释应仅用于提供并非阅读代码所固有的细节。