…или «О создании генератора Lorem Ipsum с помощью JavaScript»

В пятницу я писал о создании моего генератора текста-филлера «Настоящий детектив». Учитывая, что я изучаю JavaScript всего неделю, заставить его работать было определенным процессом обучения, и я решил поделиться тем, что я сделал, с Интернетом.

  • Шаг первый заключался в том, чтобы создать массив моих любимых уничтожающих надежду линий Растина Коула и рандомизировать его. Для этого я воспользовался Интернетом и нашел удобный фрагмент кода, который сделает это за меня:
for (var i = array.length — 1; i > 0; i — ) {
 var j = Math.floor(Math.random() * (i + 1));
 var temp = array[i];
 array[i] = array[j];
 array[j] = temp;
}
  • Затем я зациклил перетасованный массив и переместил строки в новый массив. Чтобы абзацы оставались управляемыми, они перестают заполняться после 300 символов или 3 кавычек.
var output = ""
var newArray = []
 //loops through the shuffled quote bank, breaking paragraphs after 3 quotes, or exceeding 300 characters
for (var k = 0; k < 3; k++) {
 if (newArray.length < 300) {
  //inserts bumper text at a 50/50 rate, and sets the dramatic    environment
  if (Math.floor(Math.random() * 10) > 4) {
   newArray = newArray + array.shift([k]) + “ Sip Lone Star. “
  } else {
   newArray = newArray + array.shift([k]) + “ Drag on Camel. “
  }
 }
}
output = output + newArray + “\n\n”
  • Чтобы разделить абзацы, я помещаю вышеуказанную петлю внутрь другой петли. Это захватывает сгенерированное пользователем значение из раскрывающегося селектора и выдает столько же абзацев. «\n\n» в приведенном выше коде служит разрывом абзаца:
var paragraphs = document.getElementById(“number”).value
for (var l = 0; l < paragraphs; l++ ) {
 //quote selector loop
}
  • В ранних сборках у меня были повторяющиеся абзацы. Если пользователь введет «5», все пять абзацев будут одинаковыми (плоский кружок?). Вместо сдвига я устанавливал newArray = newArray + array[k]. Каждый раз, когда цикл абзаца выполнялся, он начинался сначала — путем смещения я удалял элементы из начала массива var и менял абзацы.
  • Это создало новую проблему: опустошение банка слов. Каждый раз, когда использовалась цитата, она навсегда удалялась из массива переменных. Как сказал бы старый Rust, это было похоже на чью-то память о массиве. Простое решение: еще один цикл для клонирования банка слов в массив var.
//checks if the user wants cusses and populates var array with the contents of wordBank or cleanBank
if(document.getElementById(“dirty”).checked) {
  for (var i=0; i<wordArr.length; i++) {
  array[i] = wordArr[i]
 }
} else {
 for (var i=0; i<cleanArr.length; i++) {
 array[i] = cleanArr[i]
 }
}
  • Помимо того, что у меня появилась возможность включить «чистую» функцию для фанатов HBO, желающих выглядеть профессионалами, это исправление позаботилось о другой ошибке. Первоначально я повторно заполнил банк слов, разделив вывод обратно на массив. Проблема? Я уже добавил бамперы «Sip Lonestar» и «Drag on Camel», и они постепенно добавлялись в банк слов. Через какое-то время конец каждого абзаца до 300 символов забивался бамперами (видимо, у меня тоже сломался один шлейф). Клонируя банк слов вместо его повторного заполнения, я решил сразу несколько проблем.

И мой процесс. Сразу после этого мой класс перешел на jQuery и Underscore, которые могли бы сделать большую часть (все?) этого намного проще, но теперь я знаю о базовом JS намного больше, чем мог бы. В настоящее время я использовал jQuery только для рандомизации фонового изображения.

Я ожидал, что будет «стандартный способ» создания генератора Ipsum, из-за которого мой код будет выглядеть загроможденным и примитивным. Но после поиска некоторых руководств, с которых можно было бы начать, я ничего там не нашел. Я уверен, что через две недели я оглянусь назад и увижу дюжину вещей, которые я мог бы сделать лучше, но сейчас я очень доволен тем, что у меня есть полнофункциональный инструмент для создания текста-наполнителя. И начинающие кодеры интернета: вот как это сделал один человек.