个人中心
gpt4 book ai didi

javascript - 如何使用 jQuery 和 Bootstrap 正确表示对象

转载 作者：行者123 更新时间：2023-12-03 05:28:48 25 4
gpt4 key购买 nike

我目前正在编写一个小页面，它将收集假期(我将从 AJAX 查询中获取的对象)。我认为这将是一个编写 jQuery 代码来“渲染”HTML 代码的绝佳机会，因为在过去，我只从 PHP 生成实体。我的想法是首先从数据库获取每个假期，并为每个假期创建引导面板，然后不断搜索其他假期自上次数据库检索以来已插入的内容。我正在编写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 部分，但我无法跳出框框思考，也许我错过了一些重要的东西。您将如何以最简单的方式编写这段代码？

我希望这个问题也能帮助其他用户保持条理性并提高代码质量可读性

最佳答案

至少不要强制所有假期都像这样完全相同。

并循环给定的假期，而不是在 renderHolidays 中为每个假期添加一行。

还要研究 Angular、HandleBars、Mustache、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>

关于javascript - 如何使用 jQuery 和 Bootstrap 正确表示对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41041612/

25 4 0
文章推荐： javascript - ionic 选择框与默认选择下拉列表相同
文章推荐： javascript - JavaScript 中的内存管理
文章推荐： javascript - Javascript对象关闭上下文
文章推荐： javascript - 不可变JS : Merging two Lists by values
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com