// MV 패턴 var Model = (function () { var model = function () { return new init(); }; function init() { this.listeners = {}; return this; }; // 리스너 집합을 통해 현재 View 영역의 상태를 관리한다. init.prototype.addListener = function (listenerId, checked) { listenerId = listenerId || ''; checked = checked || false; this.listeners[listenerId] = { 'elem': document.getElementById(listenerId), 'checked': checked }; return this; }; init.prototype.removeListener = function (listenerId) { listenerId = listenerId || ''; delete this.listeners[listenerId]; return this; }; init.prototype.isListener = function (listenerId) { listenerId = listenerId || ''; return this.listeners[listenerId]; }; // 현재 View 영역의 상태를 정의한다. init.prototype.setChecked = function (listenerId, checked) { listenerId = listenerId || ''; checked = checked || false; this.listeners[listenerId].checked = checked; return this.listeners; }; // 현재 View 영역의 상태를 반환한다. init.prototype.getChecked = function(listenerId){ listenerId = listenerId || ''; var elem = this.listeners[listenerId].elem; return elem.checked || false; }; return model; } ()); var View = (function () { var view = function (model, id, checked) { return new init(model, id, checked); } function init(model, id, checked) { this.id = id; this.elem = document.getElementById(this.id); this.model = model; this.model.addListener(this.id, checked); if (this.elem){ this.elem.checked = checked; this.model.setChecked(this.id, checked); } return this; } // View 영역의 현재 상태를 Model 영역에 적용 시킨다. init.prototype.toogle = function () { if (this.elem){ if (this.elem.checked) this.elem.checked = false; else this.elem.checked = true; this.checkedList = this.model.setChecked(this.id, this.elem.checked); // View Layer의 최대 목적인 화면 랜더링 this.render(this.checkedList); } return this; }; init.prototype.isElem = function () { return this.model.listeners[this.id].elem ? true : false; }; init.prototype.getChecked = function(){ alert(this.model.getChecked(this.id)); }; // 반환받은 Model 영역의 현재 상태를 View에 랜더링 시킨다. init.prototype.render = function (checkedList) { for (var n in checkedList) { if (checkedList[n].elem){ checkedList[n].elem.checked = checkedList[n].checked; } } return this; }; return view; }()); var View1 = null; var View2 = null; var View3 = null; var View4 = null; window.onload = function () { // Model 객체 var model = Model(); // 각 View 영역들을 초기화 시킨다. View1 = View(model, 'checkbox1', true); View2 = View(model, 'checkbox2', true); View3 = View(model, 'checkbox3', false); View4 = View(model, 'checkbox4', false); // 사용자 요청으로 인한 View 영역 호출 document.getElementById('tcheckbox1').onclick = function () { View1.toogle(); } document.getElementById('tcheckbox2').onclick = function () { View2.toogle(); } document.getElementById('tcheckbox3').onclick = function () { View3.toogle(); } document.getElementById('tcheckbox4').onclick = function () { View4.toogle(); } // 사용자 요청에 의한 Model 영역의 상태 상태 반환 document.getElementById('checker').onclick = function () { if (View1.isElem()) View1.getChecked(); if (View2.isElem()) View2.getChecked(); if (View3.isElem()) View3.getChecked(); if (View4.isElem()) View4.getChecked(); } // 사용자 요청에 의한 Model 및 View 영역의 초기화 document.getElementById('reset').onclick = function () { // 모든 View를 초기화 시킨다. View1 = View(model, 'checkbox1', false); View2 = View(model, 'checkbox2', false); View3 = View(model, 'checkbox3', false); View4 = View(model, 'checkbox4', false); } }
<label>test1<input type="checkbox" id="checkbox1" name="checkbox1" /></label> <label>test2<input type="checkbox" id="checkbox2" name="checkbox2" /></label> <label>test3<input type="checkbox" id="checkbox3" name="checkbox3" /></label> <label>test4<input type="checkbox" id="checkbox4" name="checkbox4" /></label> <br><br> <a href="#" id="tcheckbox1" name="tcheckbox1">checkbox1_toggle</a><br> <a href="#" id="tcheckbox2" name="tcheckbox2">checkbox2_toggle</a><br> <a href="#" id="tcheckbox3" name="tcheckbox3">checkbox3_toggle</a><br> <a href="#" id="tcheckbox4" name="tcheckbox4">checkbox4_toggle</a><br> <br><br> <a href="#" id="checker" name="checker">checkerEvent</a><br> <a href="#" id="reset" name="reset">resetEvent</a><br>