배민찬

TAB UI 리팩토링

1. AJAX로 받아온 데이터 보관

이미 받아온 데이터는 어딘가에 보관해두고 더 이상 ajax를 통해 받아오지 않기로 함.

보관할 장소 후보

model
html(선택): model은 자주 수정되는 데이터를 보관하는 곳이므로 html에 넣어두기로 결정

flow

categoryId를 통해 엘리먼트를 확인한다
- 엘리먼트가 없을 경우 -> 2.
- 엘리먼트가 있을 경우 -> 5.
ajax로부터 데이터를 받아온다
- id > baseURI/id
- 데이터: [item ,item, item]
templating을 한다
- class에 display 속성이 들어가 있어야 함
best_dishes_view엘리먼트 하위에 추가
BestDishesView의 하위 엘리먼트를 전부 display: none
해당하는 엘리먼트만 display

설계

class BestDishesNav {
    bindSelectBestDishCategory(handler) {}
}
class Controller {
    selectBestDishCategory(categoryId) {
        if(this.oBestDishView.hasBestDish(categoryId)) this.oBestDishView.display...
        else {
            const x = new XMLHttpRequest();
            x.addEventListener('load', () => {
                this.oBestDishView.render(JSON.parse(x.reponse));
            })
            x.open('GET', this.baseURI + categoryID);
            x.send();
        }
    }
}
class BestDishView {
    render(bestDishData) {}
    hasBestDish(categoryId) {}
    displayBestDish(categoryId) {}
}
class Template {
    bestDishesView() {}
}
const bestDishView = new BestDishView({
    template: new Template.bestDishesView
})

Template의 역할과 크기가 점점 커지고 있다.

2. styling

template를 너무 쪼개놨더니 html을 수정하기가 쉽지 않았다.

inline 엘리먼트도 margin과 padding을 줄 수 있다.

Q. Template의 가독성

templating을 위해 Template클래스를 사용했다. Template의 메소드는 엘리먼트 별로 templating하도록 잘게 쪼개놨는데 가독성이 떨어졌다.

html가독성이 떨어져서 수정하기도 쉽지 않았다.

// 쪼개기 전
class Template {
    view(data) {
        return `
		<div class='image'>
			<ul class='list'>
				<li>first</li>
			</ul>
		</div>`
    }
}

// 쪼갠 후
class Template {
    view(data) {
        return '<div class="image">' + this._image(data) + '</div>';
    }
    _image(data) {
        return '<ul class="list">' + _item(data) + '</ul>';
    }
    _item(data) {
        return `<li>${data}</li>`
    }
}