Javascript 我的jQuery代码可以正常工作，但是程序员的jQuery代码是否非常糟糕；你的观点是什么？_Javascript_Jquery_Vertical Rhythm

Javascript 我的jQuery代码可以正常工作，但是程序员的jQuery代码是否非常糟糕；你的观点是什么？

javascript jquery

Javascript 我的jQuery代码可以正常工作，但是程序员的jQuery代码是否非常糟糕；你的观点是什么？,javascript,jquery,vertical-rhythm,Javascript,Jquery,Vertical Rhythm,我拼凑了这个jQuery函数。其目的是计算div.article内所有img元素的边距，以平衡图像的高度与文档的基线网格，即20px。为了匹配我的基线网格，每个图像高度应该是20的倍数。如果情况并非如此，例如，一幅图像的高度为154 px，则该函数会向img添加6 px的边距，以便恢复与基线网格的平衡函数正常运行，因此我的实际问题是：因为我不是程序员，我想知道我的代码是否非常糟糕，尽管它在工作，如果是，代码如何改进 jQuery代码： $('div.article img').each(fun

我拼凑了这个jQuery函数。其目的是计算

div.article

内所有img元素的边距，以平衡图像的高度与文档的基线网格，即20px。为了匹配我的基线网格，每个图像高度应该是20的倍数。如果情况并非如此，例如，一幅图像的高度为154 px，则该函数会向img添加6 px的边距，以便恢复与基线网格的平衡

函数正常运行，因此我的实际问题是：因为我不是程序员，我想知道我的代码是否非常糟糕，尽管它在工作，如果是，代码如何改进

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

<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>

<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>

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

$（'div.article img'）。每个（函数（）{
//定义CSS基线网格的线高度：
var line_高度=20；
//捕获img的高度：
var img_height=$（this.attr（'height'）；
//将img高度除以线高度，然后四舍五入得到下一个整数：
var img\u multiply=Math.ceil（img\u高度/线条高度）；
//计算用基线网格平衡高度所需的img裕度：
var img_margin=（img_乘*行高）-img_高；
//如果计算的裕度<5 px：
如果（img_裕度<5）{
//然后再添加20像素以避免空白太小：
img_保证金=img_保证金+20；
}
//如果img有标题：
if（$（$（this））.next（）.length）{
//然后将边距应用于标题，而不是img：
$（$（this））.next（）.attr（'style'，“margin bottom:“+img_margin+“px；”）；
}否则{
//将保证金应用于img：
$（this.attr（'style'，“margin bottom:”+img_margin+“px；”）；
}
});

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

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

<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>

<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>

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



图片标题在这里

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

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

<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>

<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>

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

编辑：根据Russ Cam的建议优化代码：

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

<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>

<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>

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

var行高度=20；
var min_保证金=5；
$（'div.article img'）。每个（函数（）{
var$this=$（this）；//在变量名前面加上$以提醒它是jQuery对象
var img_height=$this.height（）；
var img_边距=（（数学单元（img_高度/线高度））*线高度-线高度；
img_边距=（img_边距<最小边距）？img_边距+线条高度：img_边距；
如果（$this.next（）.length）{
$this.next（）.css（{'margin-bottom'：img_margin+'px'}）；
}否则{
$this.css（{'margin-bottom'：img_margin+'px'}）；
}
});

我可以推荐一些改进

1.在局部变量中的

each（）

中缓存

$（此）

$('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'）

3.没有必要这样做

$($(this))

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

4.使用或在浏览器中获取元素的高度

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

//如果计算的裕度<5 px：
如果（img_裕度<5）{
//然后再添加20像素以避免空白太小：
img_保证金=img_保证金+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;

//如果计算的裕度<5 px，则再添加20 px
//避免空白太小
img_保证金=（img_保证金<5）？img_保证金+20：img_保证金；

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

代码很好。您可以做一些小的改进：

不要到处使用
```
$（这个）
```
。尽早将其分配给某个对象并使用它，这样就不会反复扩展元素

$（this.attr（'style'，“margin bottom:”+img_margin+“px；”）

可以重写为

someEl.css（'margin-bottom'，img_margin+'px'）


我想你可以放弃
$($(this))

赞成
$(this)

图像的高度不应从元素中获取，而是使用$（this）.Height，因为这是浏览器中的真实高度
无论如何，它可以改写得更短，比如
$('div.article').each(function() {
    var img_margin = 20 - $(this).children('img:first').height() % 20;
    if(img_margin < 5) img_margin += 20;
    if($(this).children('small').length > 0)
         $(this).children('small').attr('style', "margin-bottom: " + img_margin + "px;");
    else
         $(this).children('img').attr('style', "margin-bottom: " + img_margin + "px;");
}

$（'div.article'）。每个（函数（）{
var img_margin=20-$（this）.children（'img:first'）。height（）%20；
如果（img_裕度<5）img_裕度+=20；
if（$（this）.children（'small'）。长度>0）
$（this）.children（'small'）.attr（'style'，'marginbottom:“+img_margin+“px；”）；
其他的
$（this）.children（'img'）.attr（'style'，'marginbottom:“+img_margin+”px；”）；
}
下面是我要做的，在评论中解释
$(function(){

// put this variable out of the loop since it is never modified
    var line_height = 20;

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

    // cache $(this) so you don't have to re-access the DOM each time
    var $this = $(this);


    // capture the height of the img - use built-in height()
    var img_height = $this.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:
    //use ternary operator for concision
        img_margin += 20;  
    }

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

        // then apply margin to caption instead of img: - use built-in css() function
        $this.next().css("margin-bottom", img_margin);
    } else {

        // apply margin to img:  - use built-in css() function
        $this.css("margin-bottom", img_margin);
    }
});
});

$（函数（）{
//将此变量从循环中移出，因为它从未被修改过
var line_高度=20；
$（'div.article img'）。每个（函数（）{
//缓存$（这个），这样您就不必每次都重新访问DOM
var$this=$（this）；
//捕获img的高度-使用内置高度（）
var img_height=$this.height（）；
//将img高度除以线高度，然后四舍五入得到下一个整数：
var img\u multiply=Math.ceil（img\u高度/线条高度）；
//计算用基线网格平衡高度所需的img裕度：
var img_margin=（img_乘*行高）-img_高；
//如果计算的裕度<5 px：
如果（img_裕度<5）{
//然后再添加20像素以避免空白太小：
//使用三元运算符进行精简
img_裕度+=20；
}
//如果img有标题：
if（$this.next（）.length）{
//然后将边距应用于标题而不是img:-使用内置css（）函数