我的jQuery代码正在运行，但从程序员的角度来看它是非常糟糕的吗？ [英] My jQuery code is working, but is it very crappy from a programmer's point of view?

问题描述

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

I cobbled together this jQuery function. It's purpose is to calculate the margins of all img elements inside div.article in order to balance the image's height with the baseline grid of the document, wich is 20 px. In order to match my baseline grid, every image height should be a multiple of 20. If that's not the case, e.g. one image's height is 154 px, the function adds a 6 px margin to the img, so that the balance with the baseline grid is restored.

该功能有效正确，所以我的实际问题是：由于我不是程序员，我想知道我的代码是否非常糟糕，尽管它正在运行，如果是的话，代码怎么可能是改进？

The function works correctly, so my actual question is: Since I'm not a programmer, I'm wondering if my code is very crappy although it's working, and if so, how could the code be improved?

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

推荐答案

我可以推荐的一些改进

1.cache $（this）在本地每个（）内变量

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（） 命令

2.instead of setting attr('style'), use the css() command

3.不需要这样做

$($(this))

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

whilst it won't break jQuery, it's an unneccessary to pass a jQuery object into another jQuery object.

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

4.Use $(this).height() or $(this).outerHeight() to get the height of the element in the browser

5.没有jQuery特定，但可以使用三元条件运算符来分配此值

5.Not jQuery specific, but could use the ternary conditional operator to assign this value

// 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在评论中指出的那样，我还会删除仅仅重复的多余评论代码告诉你什么。即使这是调试脚本，在我看来，它们会降低可读性，而注释应仅用于提供阅读代码时不具备的细节。

6.As Alex has noted in the comments, I'd also remove the superfluous comments that merely repeat what the code tells you. Even if this is the debug script, in my opinion, they reduce readability and comments should serve only to provide detail that is not inherent from reading the code.

这篇关于我的jQuery代码正在运行，但从程序员的角度来看它是非常糟糕的吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！