这是我的代码。现在它是中等大小,但是如果我要提出其他想法...它会扩展太多。
query.forEach(place => {
$('#placesFiltered')
.append(`<div class="col-sm-6 col-lg-12 col-xl-6 featured-responsive">
<div class="featured-place-wrap">
<a asp-action="ById" asp-route-id="place.Id">
<img src="${place.mainImage}" class="img-fluid" alt="#" style="height:300px;width:auto;object-fit:fill">
<span class="featured-rating-orange ">${place.rating}</span>
<div class="featured-title-box">
<h6>${place.name}</h6>
<p>${place.category}</p> <span>• </span>
<p>${place.reviewCount} Reviews</p> <span> • </span>
<p>${dollarString.repeat(place.priceRange)}<span>${dollarString.repeat(3-place.priceRange)}</span></p>
<ul>
<li>
<span class="icon-location-pin"></span>
<p style="font-weight:bold">${place.city}</p>
</li>
<li>
<span class="icon-location-pin"></span>
<p>${place.address}</p>
</li>
<li>
<span class="icon-screen-smartphone"></span>
<p>+${place.telephoneNumber}</p>
</li>
</ul>
</div>
</a>
</div>
</div>`);
});
我该如何重构它,使其看起来没有那么硬编码?