Общее описание
Я ищу способ получить Объект с парой определенных свойств и случайных значений, которые меняются всякий раз, когда я к ним обращаюсь.Также я хочу динамически перезаписать свойства и найти способ получить новый объект.
Контрольный список задач, которые я хочу выполнить
- Объект имеет рандомизированные значения свойств
- «новый экземпляр» или новый объект может быть создан с новыми значениями
- Возможна динамическая замена объекта, и оба вышеуказанных критерия остаются в силе
Кодна основе подробного объяснения
var baseObj = {
border: Math.round(Math.random() * 10 +3),
background: 'hsl('+Math.random() * 360 + 'deg 100% 50%)'
}
Таким образом, I baseObj является ссылкой на объект, который остается неизменным .
Другими словами, независимо от того, как часто вы используетеbaseObj или то, как часто вы обращаетесь к его свойствам, значения не изменятся, поскольку Math.random () выполняется и значение присваивается свойству объектов.
Преодолеть эта проблема Я обернул вывод в функцию, которую я могу вызвать, и получил новый Объект с новыми значениями:
var baseObj = () => ({
border: Math.round(Math.random() * 10 +3),
background: 'hsl('+Math.random() * 360 + 'deg 100% 50%)'
})
Пока все хорошо, но теперь допустим, что эта функция ожидаетобъектно если его там нет, я буду использовать baseObj по умолчанию.
draw = tempObj => {
if (!tempObj) {tempObj = baseObj;}
div.style.borderWidth = tempObj.border + "px";
div.style.backgroundColor = tempObj.background;
// missing here merge the two objects
// missing and main question how to update baseObj with new information
}
draw({
border: Math.round(Math.random() * 55 + 20)
})
Точка, в которой я сейчас борюсь, состоит в том, как переписать "шаблон функции baseObj" с шаблономкакого бы значения tempObj не было?
Ожидаемый результат при повторном вызове draw () без каких-либо параметров заключается в том, что вы получите большую границу по меньшей мере 20 и случайный цвет фона.В основном, обновление baseObj новыми правилами того, каким должен быть возвращаемый объект.
Демонстрационная ссылка / Фрагмент
У меня есть ссылка codepen, где я делаю немного больше и объединяю tempObjс baseObj, но я все еще ищу решение той же проблемы.https://codepen.io/Type-Style/pen/VqMMJd?editors=0010
var div = document.querySelector("#div"),
getNewStyle = document.querySelector("#getNewStyle"),
changeStyle1 = document.querySelector("#changeStyle1"),
baseObj = () => ({
border: Math.round(Math.random() * 10 +3),
background: 'hsl('+Math.random() * 360 + 'deg 100% 50%)'
}),
enhancementObj = null,
getObj = () => (enhancementObj || baseObj()),
calculate = (overwriteObj) => {
if (!overwriteObj) {
var tempObj = getObj();
} else {
var tempObj = { // merge the two objects
...getObj(),
...overwriteObj
}
enhancementObj = tempObj; // now I have static values again :-(
}
draw(tempObj);
},
draw = tempObj => {
div.style.borderWidth = tempObj.border + "px";
div.style.backgroundColor = tempObj.background;
}
getNewStyle.onclick = () => {draw(getObj())};
changeStyle1.onclick = () => {calculate({
border: Math.round(Math.random() * 55 + 20)
})};
#div {
width: 300px;
height: 300px;
box-sizing: border-box;
border-style: dashed;
border-radius: 50%;
}
/* excuse me using IDs and useless Names in CSS, I know better but this is a JS Question */
<div id="div"></div>
<button id="getNewStyle">getNewStyle</button>
<br>
<button id="changeStyle1">changeStyle1</button>
<p>Press the first button to get random border-size and background color.
The second button should overite the border-size and clicking the first button again should give you a bigger border and random background color, but it doesn't.</p>
Вопросы / Разное.
Есть ли лучший способ получить новые значения, которые помещают его в функцию?Не стесняйтесь редактировать вопрос, если считаете, что его легче понять.
С новым годом!