我目前正在写一个小页面，它将收集假期（我将从 AJAX 查询中获得的对象）。我通过它编写 jQuery 代码以“渲染”HTML代码是一个很好的机会，因为在过去，我只从 PHP 生成实体。我的想法是首先从数据库获取假期并为每个创建 Bootstrap面板，然后不断搜索其他假期自上次数据库检索以来就已经插入了。我正在编写 jQuery 代码来“渲染”我将从数据库获得的对象。
我现在正在研究的问题，因为我从jQuery开始，是如何很好地组织我的代码 - 如何正确生成这些面板 - 并避免编写太多（和丑陋）代码。正如您所看到的，我在jQuery部分重复了很多。
你应该知道的是，我用一个 jQuery对象来测试这段代码，这个假期是（目前），由下式表示：
var $holiday = {
'title': 'Foobar',
'date': '2016-12-26',
};
将来，我会得到一个像上面$holiday的对象列表，并将列表循环到“渲染” Bootstrap面板。
这是我的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Holidays</title>
<link href="/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container" id="content"></div>
</main>
<script src="/js/jquery.min.js"></script>
<script>
// jQuery code below
</script>
</body>
</html>
这是我想要最小化的jQuery代码：
$(document).ready(function() {
appendHolidays();
});
function appendHolidays()
{
var $title = renderTitle('Holidays');
var $holidays = renderHolidays();
var $contentContainer = $('#content');
$contentContainer.append($title);
$contentContainer.append($holidays);
}
function renderTitle($title)
{
var $titleTag = $('<h1 />')
.text($title);
var $titleContainer = $('<div />')
.addClass('page-header')
.append($titleTag);
return $titleContainer;
}
function renderHolidayId($id)
{
var $holidayId = $('<span />')
.attr('hidden', 'hidden')
.addClass('holiday-id')
.text($id)
return $holidayId;
}
function renderHolidayTitle($title)
{
var $holidayTitle = $('<span />')
.addClass('holiday-title')
.text($title)
return $holidayTitle;
}
function renderHolidayDate($date)
{
var $holidayDate = $('<span />')
.addClass('holiday-date')
.text($date);
return $holidayDate;
}
function renderHolidayPanelBody($holiday)
{
var $holidayId = renderHolidayId($holiday.id);
var $holidayTitle = renderHolidayTitle($holiday.title);
var $holidayDate = renderHolidayDate($holiday.date);
var $panelBody = $('<div />')
.addClass('panel-body');
$panelBody.append($holidayId);
$panelBody.append($holidayTitle);
$panelBody.append($holidayDate);
return $panelBody;
}
function renderHolidayPanel($holiday)
{
var $panelBody = renderHolidayPanelBody($holiday);
var $panel = $('<div />')
.addClass('panel')
.addClass('panel-default')
.append($panelBody);
return $panel;
}
function renderHolidayCol($holiday)
{
var $panel = renderHolidayPanel($holiday);
var $col = $('<div />')
.addClass('col-md-3 col-sm-4 col-xs-6')
.append($panel);
return $col;
}
function renderHolidays()
{
var $holiday = {
'title': 'Foobar',
'date': '2016-12-26',
};
var $row = $('<div />')
.addClass('row')
var $col = renderHolidayCol($holiday);
$row.append($col.clone(true));
$row.append($col.clone(true));
$row.append($col.clone(true));
$row.append($col.clone(true));
$row.append($col.clone(true));
$row.append($col.clone(true));
$row.append($col.clone(true));
return ($row);
}
我认为有一种更好的方式来渲染每个HTML小部分而不是这个，但我无法想出开箱即用，也许我错过了那些重要的东西。您将如何以最小的方式编写此代码？
我希望这个问题也能帮助其他用户保持一定的组织并提高代码质量 - 可读性
答案 0 :(得分：1)
至少不要像所有这样强制执行所有假期。
循环给定假期，而不是在renderHolidays中为每个假日添加一行。
另请参阅Angular，HandleBars，Moustache，Dust等。
$(document).ready(function() {
appendHolidays();
});
function appendHolidays() {
var $title = renderTitle('Holidays');
var holidays = [{
'title': 'Foobar1',
'date': '2016-12-26',
}, {
'title': 'Foobar2',
'date': '2016-12-26',
}, {
'title': 'Foobar3',
'date': '2016-12-26',
}];
var $holidays = renderHolidays(holidays);
var $contentContainer = $('#content');
$contentContainer.append($title);
$contentContainer.append($holidays);
}
function renderTitle($title) {
var $titleTag = $('<h1 />')
.text($title);
var $titleContainer = $('<div />')
.addClass('page-header')
.append($titleTag);
return $titleContainer;
}
function renderHolidayId($id) {
var $holidayId = $('<span />')
.attr('hidden', 'hidden')
.addClass('holiday-id')
.text($id)
return $holidayId;
}
function renderHolidayTitle($title) {
var $holidayTitle = $('<span />')
.addClass('holiday-title')
.text($title)
return $holidayTitle;
}
function renderHolidayDate($date) {
var $holidayDate = $('<span />')
.addClass('holiday-date')
.text($date);
return $holidayDate;
}
function renderHolidayPanelBody($holiday) {
var $holidayId = renderHolidayId($holiday.id);
var $holidayTitle = renderHolidayTitle($holiday.title);
var $holidayDate = renderHolidayDate($holiday.date);
var $panelBody = $('<div />')
.addClass('panel-body');
$panelBody.append($holidayId);
$panelBody.append($holidayTitle);
$panelBody.append($holidayDate);
return $panelBody;
}
function renderHolidayPanel($holiday) {
var $panelBody = renderHolidayPanelBody($holiday);
var $panel = $('<div />')
.addClass('panel')
.addClass('panel-default')
.append($panelBody);
return $panel;
}
function renderHolidayCol($holiday) {
var $panel = renderHolidayPanel($holiday);
var $col = $('<div />')
.addClass('col-md-3 col-sm-4 col-xs-6')
.append($panel);
return $col;
}
function renderHolidays(holidays) {
var $row = $('<div />')
.addClass('row');
for (var i = 0; i < holidays.length; i++) {
$row.append(renderHolidayCol(holidays[i]));
}
return ($row);
}.holiday-title {
font-weight:bold;
}
.holiday-date{
float:right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<main>
<div class="container" id="content"></div>
</main>