-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
getSearchResultsHTML VS getKeywordsHtml
18.06.28 11:28 작성 조회수 137
0
안녕하세요, 제목에 있는 2개 함수의 구현이 유사한데요,
전자는 데이터가 바인딩된 html 문자열을 다시 메소드로 분리하여 리턴하였고,
후자는 문자리터럴 그대로 html변수에 담아 리턴하였는데요, 어떤 이유가 있나요?
더 나은 코드는 무엇이며 왜 더 나은 지 알 수 있을까요?
MVC모델로 뭔가 작업하는 게 처음이라서,, 뭔가 잘게잘게 쪼개서 함수의 역할을 분리하는 것 같은데
어떤 기준으로 그렇게 되는 것인지 모르겠어서 질문 올립니다.
getSearchResultsHTML
ResultView.getSearchResultsHTML = function (data) { return data.reduce((html, item) => {
html += this.getSearchItemHtml(item)
return html
}, '<ul>') + '</ul>'
}
ResultView.getSearchItemHtml = function (item) {
return `<li>
<img src="${item.image}" />
<p>${item.name}</p>
</li>`
}
getKeywordsHtml
KeywordView.getKeywordsHtml = function (data) { return data.reduce((html, item, index) => {
html += `<li data-keyword="${item.keyword}"><span class="number">${index + 1}</span>${item.keyword}</li>`
return html
}, '<ul class="list">') + "</ul>"
}
답변을 작성해보세요.
2
김정환
지식공유자2018.06.28
추천검색어는 하나의 함수 getKeywordsHtml
만 호출했느데, 검색결과는 getSearchResultsHtml
, getSearchItemHtml
두개로 쪼겠느냐는 질문이시죠?
검색결과가 비교적 html이 많아서 함수로 분리한 것 뿐입니다. getKeywordsHtml
도 분리하게 되면 좀 더 그럴듯한 코드가 될것 같네요.
KeywordView.getKeywordsHtml = function (data) { return data.reduce((html, item, index) => {
html += this.getKeywordItemHtml(item, index)
return html
}, '<ul class="list">') + "</ul>"
}
KeywordView.getKeywordItemHtml = function (item, index) {
return `<li data-keyword="${item.keyword}">
<span class="number">${index + 1}</span>${item.keyword}
</li>`
}
답변 1