Шаблоны разработки, как предполагается, обеспечивают структуру , в котором могут быть решены проблемы. При решении настоящей проблемы необходимо рассмотреть многие крошечные изменения решения той проблемы видеть ли любые соответствия шаблон разработки. В частности, необходимо будет, вероятно, обобщить проблему или ее решение, для создания соответствия шаблона разработки.
ответ, это - искусство. Знание шаблоны разработки является, конечно, важным шагом. Один способ привыкнуть к этому виду вещи состоит в том, чтобы учиться приложения из шаблонов разработки, не только шаблоны. Наблюдение многих различных приложений одного шаблона может помочь Вам со временем поправиться при отображении задачи на шаблон.
можно использовать ES6, назад выходит
var inputs = [
`<input type='checkbox' id='chbox0' onclick='checkboxChecked(this);'> <input type='text' class='noteinputs0'id='note` + 0 + `' placeholder='task0'><button id='notebtn0' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 1 + `' placeholder='task1'><button class='notebuttons' id='notebtn1' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 2 + `' placeholder='task2'><button class='notebuttons' id='notebtn2' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 3 + `' placeholder='task3'><button class='notebuttons' id='notebtn3' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 4 + `' placeholder='task4'><button class='notebuttons' id='notebtn4' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 5 + `' placeholder='task5'><button class='notebuttons' id='notebtn5' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 6 + `' placeholder='task6'><button class='notebuttons' id='notebtn6' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 7 + `' placeholder='task7'><button class='notebuttons' id='notebtn7' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 8 + `' placeholder='task8'><button class='notebuttons' id='notebtn8' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 9 + `' placeholder='task9'><button class='notebuttons' id='notebtn9' >creat</button>`
].sort().join(" ");
document.querySelector('#hi').innerHTML += `<br>` +inputs;
<div id="hi"></div>