Отображение случайных кавычек из массива

Есть ли что-нибудь, что я мог бы сделать лучше в этом коде?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Quotes</title>
<style>
body { color: #333; font: 20px georgia; }
em { color: #555; font-size: 90%; }
</style>
</head>
<body>
<article id="quotes"></article>
<script>
(function() {
  "use strict";

  var quotes = [
    ["Stay Hungry. Stay Foolish.", "Steve Jobs"],
    ["Good Artists Copy, Great Artists Steal.", "Pablo Picasso"],
    ["Argue with idiots, and you become an idiot.", "Paul Graham"],
    ["Be yourself; everyone else is already taken.", "Oscar Wilde"],
    ["Simplicity is the ultimate sophistication.", "Leonardo Da Vinci"]
  ].sort(function() {
    return 0.5 - Math.random();
  }),
    quotesHTML = "";

  for (var i = 0; i < quotes.length; i++) {
    quotesHTML += "<p>&ldquo;" + quotes[i][0] + "&rdquo; &mdash; <em>" + quotes[i][1] + "</em></p>";
  }
  document.getElementById("quotes").innerHTML = quotesHTML;

}());

</script>
</body>
</html>
11 голосов | спросил udb 9 FebruaryEurope/MoscowbSun, 09 Feb 2014 09:05:35 +0400000000amSun, 09 Feb 2014 09:05:35 +040014 2014, 09:05:35

3 ответа


8

Я думаю, что ваш код выглядит уже неплохо. Это следует за условностями, а ваши имена в виде отступов и переменных точны. Существует не так много, чтобы рассмотреть.

Но если вы ориентируетесь на современные браузеры (IE9 +), я бы предложил другой подход, используя map и разделил бы случайную логику на функция. Я также объявляю элемент наверху, поэтому на первый взгляд знаю, что код работает с DOM. Сначала это может показаться большим количеством кода, но это хорошо для повторного использования кода, плюс я думаю, что он читает лучше; цель более ясна:

(function() {
  "use strict";

  var el = document.getElementById("quotes");

  var quotes = [
    ["Stay Hungry. Stay Foolish.", "Steve Jobs"],
    ["Good Artists Copy, Great Artists Steal.", "Pablo Picasso"],
    ["Argue with idiots, and you become an idiot.", "Paul Graham"],
    ["Be yourself; everyone else is already taken.", "Oscar Wilde"],
    ["Simplicity is the ultimate sophistication.", "Leonardo Da Vinci"]
  ];

  function rand(xs) {
    return xs.slice(0).sort(function(){
      return .5 - Math.random();
    });
  }

  function quote(q) {
    return "<p>&ldquo;"+ q[0] +"&rdquo; &mdash; <em>"+ q[1] +"</em></p>";
  }

  el.innerHTML = rand(quotes).map(quote).join('');

}());
ответил elclanrs 9 FebruaryEurope/MoscowbSun, 09 Feb 2014 09:24:25 +0400000000amSun, 09 Feb 2014 09:24:25 +040014 2014, 09:24:25
8

Основываясь на ответе Дживинга и его разметке, я бы предложил переместить знаки quote в CSS. Для этого я добавил теги p внутри blockquote. Я также изменил класс author на source .

"<blockquote class="random-quotes"><p>"+ q.quote +"</p><footer class="source"> &mdash;"+ q.author +"</footer></blockquote>"

(/! \ Примечание: поскольку теги p жестко закодированы в моем примере, это будет работать только с одним я не знаю, достаточно ли этого. Если нет, вам нужно передать теги p с кавычками. )

CSS

blockquote p:first-of-type:before {
    content: "\201C";
}

/* Selecting only the last paragraph for when there are multiple paragraphs */
blockquote p:last-of-type:after {
    content: "\201D";
}

blockquote p:last-of-type {
    margin-bottom: 0;
}

.source {
    display: block;
}
ответил kleinfreund 9 FebruaryEurope/MoscowbSun, 09 Feb 2014 20:49:11 +0400000000pmSun, 09 Feb 2014 20:49:11 +040014 2014, 20:49:11
7

Единственное, что я изменил, это ваша структура данных. Я думаю, что это будет работать лучше, чем массив объектов, тогда вы можете получить доступ к цитате и автору без индексации массива.

var quotes = [
  { 
    quote: "Stay Hungry. Stay Foolish.", 
    author: "Steve Jobs"
  },
  [...]
];

[...]

"<blockquote>&ldquo;"+ q.quote +"&rdquo; <footer class="author"> &mdash;" 
   + q.author +"</footer></blockquote>"

Кроме того, возможно использовать элемент <blockquote> вместо <p> для правильной семантики.

ответил Jivings 9 FebruaryEurope/MoscowbSun, 09 Feb 2014 18:37:47 +0400000000pmSun, 09 Feb 2014 18:37:47 +040014 2014, 18:37:47

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132