用字体替换图像真棒

Question

我正在尝试更改用于显示评论图像的代码。前面的代码有5张星星图片。第一张图片有一颗星，接下来有两颗，依此类推。每个图像的宽度相同，因此对齐始终是正确的。使用的代码是

    $p_stars = '<img src="images/stars_' . $rating . '.png">';

以上结果会根据评级产生一串明星，例如

 ****
 *****
 *
 ***

我的想法是用字体超棒的图标替换图像，以便更容易控制颜色，如果星星的颜色或数量需要改变，这需要较少的维护。我这样做了，它工作正常，但它所需的代码量远远超过图像。所以我的问题是：

• 我应该坚持使用这些图片吗？
• 有没有更好的方法来编码图标方法？

这是icon方法的代码：

    <style>
    .stars {color:#FB9802;}
    .stars-hide {color:#fff;}
    </style>

    $p_stars  = '';
    $p = 0;
    while ($p < 5) {
        for ($x = 0; $x < $rating; ++$x) {
            $p_stars .= '<i class="fas fa-star stars"></i>';
            $p++;
        }
        if ($p == 5) break;

        for ($x = $p; $x < 5; ++$x) {
            $p_stars .= '<i class="fas fa-star stars-hide"></i>';
            $p++;
        }
    }

Answer 1

我应该坚持使用这些图片吗？

没有人会为你回答这个问题。你自己必须决定。坚持适合您，您的团队和您的客户。编程中最重要的是沟通（或者至少是我所相信的）。

我将在评论中包含fyrye所写的内容，这是一个非常好的观点：

从标准化和优化方法来看，使用Font Awesome，如果广泛使用...比一系列不同的图像更有益......但是如果它仅用于星星，那么下载一个单一的资源是非常大的资产使用。

---

有没有更好的方法来编码图标方法？

...所需的代码量远远超过图像......

你应该更聪明地工作，而不是更难:)

如果你研究所有可用的PHP数组函数，你会遇到array_fill。

现在，与array_merge一起，我们可以创建一个非常优雅且易于维护的代码片段，在您的提交中看起来比您已经拥有的代码要好得多:)

看看这个：

$imageShow = '<i class="fas fa-star stars"></i>';
$imageHide = '<i class="fas fa-star stars-hide"></i>';

$rating = 3;

$stars = array_merge(
    array_fill(0, $rating, $imageShow),
    array_fill($rating, 5-$rating, $imageHide)
    );

var_dump($stars);

这就是var_dump的收益率：

array(5) {
  [0]=>
  string(33) "<i class="fas fa-star stars"></i>"
  [1]=>
  string(33) "<i class="fas fa-star stars"></i>"
  [2]=>
  string(33) "<i class="fas fa-star stars"></i>"
  [3]=>
  string(38) "<i class="fas fa-star stars-hide"></i>"
  [4]=>
  string(38) "<i class="fas fa-star stars-hide"></i>"
}

看到？我将$rating设置为3，结果数组有3个星星图像和2个隐藏星星。

现在，你需要的只是一个implode调用将所有元素连接在一起。我相信，你的生产代码最终会是这样的：

$imageShow = '<i class="fas fa-star stars"></i>';
$imageHide = '<i class="fas fa-star stars-hide"></i>';

$stars = array_merge(
    array_fill(0, $rating, $imageShow),
    array_fill($rating, 5-$rating, $imageHide)
    );

$p_stars = implode("", $stars);