Сложные таймеры в javascript и шаблон проектирования - PullRequest
Новая
       23

Сложные таймеры в javascript и шаблон проектирования

0 голосов
/ 25 мая 2020

В настоящее время я создаю приложение, которое является наложением на игру. Это приложение принимает игровые события и создает объекты для создания таймеров. Каждый таймер отличается в зависимости от того, какие события приложение взяло из игры. Какой шаблон проектирования лучше всего подходит для этой ситуации?

это таймер, а другой - функция, которая записывает в html файл 

function startTimer(duration, display) {
    var timer = duration;
    var minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

var writeSum = function(sums, champ){
    var height = "height: 25px;";  
    var width = "width: 25px;";
    var size = "background-size: 25px 25px;";
    var image = "background-image: url( '../../icons/summoner spells/"+sums.path + "\' );";
    var display = "display: inline;";
    var click = "onclick =\"startTimer("+ sums.cd+", document.getElementById('"+ champ.name+ sums.name+"'\)\)\" ";

    return tag("div","",tag("button", click+style(height+width+image+size),"")+ tag("p","id = \""+champ.name+ sums.name + "\" "+style(display),"Ready"));
};

1 Ответ

0 голосов
/ 26 мая 2020

Простая демонстрация отслеживания нескольких таймеров с массивом объектов. Просто выберите хорошо сформированную структуру, с которой будет легко работать для представления вашей модели данных. Будь то классы, функции или простые объекты.

Я настоятельно рекомендую провести рефакторинг вашей строковой сборки. Особенно код onclick= с кодом JavaScript, сгенерированный путем конкатенации строк. И в идеале вам нужно отслеживать таймеры, которые startTimer должен возвращать и которые должны быть объединены и трансформированы с вашей структурой данных для представления каждого таймера. параметры около.
Если это простая задача, вероятно, не составит большого труда вести глобальный список таймеров. 

tag = (x,y,z)=>`<${x} ${y||''}>${z||''}</${x}>`


    function startTimer(duration, display) {
        var timer = duration;
        var minutes, seconds;
        setInterval(function () {
            minutes = parseInt(timer / 60, 10)
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            display.textContent = minutes + ":" + seconds;

            if (--timer < 0) {
                timer = duration;
            }
        }, 1000);
    }

    var writeSum = function(sums, champ){
        var height = "height: 25px;";  
        var width = "width: 25px;";
        var size = "background-size: 25px 25px;";
        var image = "background-image: url( '../../icons/summoner spells/"+sums.path + "\' );";
        var display = "display: inline;";
        var click = "onclick =\"startTimer("+ sums.cd+", document.getElementById('"+ champ.name+ sums.name+"'\)\)\" ";

        return tag("div","",tag("button", click+style(height+width+image+size),"")+ tag("p","id = \""+champ.name+ sums.name + "\" "+style(display),"Ready"));
    };

    function style(x){return `style="${x}"`}

let entities = [
    {sums: {path:'spath1',cd:'10',name:'sname1'}, champ: {name:'cname1'}},
    {sums: {path:'spath2',cd:'10',name:'sname2'}, champ: {name:'cname2'}},
    {sums: {path:'spath3',cd:'10',name:'sname3'}, champ: {name:'cname3'}},
    {sums: {path:'spath4',cd:'10',name:'sname4'}, champ: {name:'cname4'}}
]
document.body.innerHTML=entities.map(({sums, champ})=>writeSum(sums, champ)).join('')
...