안녕하세요 <div><br></div> <div>요즘 대세는 ReactJS 이긴 하지만</div> <div>일반 SI 업무에서는 JQuery 기반 개발을 많이 합니다.</div> <div>저도 이것저것 써봤지만, 대부분의 요구사항이나 페이지 형태가 보편적인 html + jquery 기반인 경우가 많죠</div> <div><br></div> <div>그중에서도 가장 많은 부분을 차지하는게 <FORM> 입니다.</div> <div><br></div> <div>그게 귀찮아서 만든 라이브러리 처럼 하나 만들어서 쓰고 있는데</div> <div>프로젝트 한두군데 적용해보고 주위 사람들에게도 보여주고 하니 반응이 나쁘지 않아서 한번 올려봅니다.</div> <div><br></div> <div>submit에 validation 기능 등은 <span style="font-size:9pt;line-height:1.5;">구현은 해서 쓰고 있으나</span></div> <div><span style="font-size:9pt;line-height:1.5;">수천가지의 라이브러리가 그런 기능을 하고 있으니, 별도로 언급하지는 않습니다.</span></div> <div><span style="font-size:9pt;line-height:1.5;"><br></span></div> <div><span style="font-size:9pt;line-height:1.5;">그냥 "이런 컨셉 어떤가요" 라고 물어보고 싶습니다.</span></div> <div><span style="font-size:9pt;line-height:1.5;"><br></span></div> <div>GitHub : <a target="_blank" href="https://github.com/TheBar/lazy_duck" target="_blank">https://github.com/TheBar/lazy_duck</a></div> <div>Live Example : <a target="_blank" href="http://dm1430720111901.fun25.co.kr/lazyduck/" target="_blank">http://dm1430720111901.fun25.co.kr/lazyduck/</a></div> <div><br></div> <div>딱 이거!!</div> <div>----</div> <div>Form 데이터 가져올때</div> <div>var value = $("#inputText").val();</div> <div><span style="font-size:9pt;line-height:1.5;">var value = $('input:checkbox[name="inputCheck"]').val();</span></div> <div><span style="font-size:9pt;line-height:1.5;"><br></span></div> <div>뭐 이런식으로 가져오고 설정할때도 val(), name='name'로 하고 하는게 귀찮아서 그냥 이렇게 접근합니다.</div> <div><br></div> <div><br></div> <div>LD.invoke(); // 초기화</div> <div><br></div> <div>// -- Set</div> <div>LD.form.inputText = 'value';</div> <div>LD.form.inputCheck = ['key', 'one', 'two'];</div> <div><br></div> <div>// -- Get</div> <div>var value = LD.form.inputText;</div> <div>var value = LD.form.inputCheck;</div> <div><br></div> <div>구현 방식은 Object.defineProperty로 getter / setter 를 구현한것이고</div> <div>직접 접근이 아니라 form.name 형태로 접근</div> <div><br></div> <div>그래서 일반적인 폼 라이브러리의 아래 형태보다 좀더 코드를 읽기 편하게 만들었습니다.</div> <div><span style="font-size:9pt;line-height:1.5;">$("#inputText").setField('value');</span></div> <div>-></div> <div>LD.form.inputText = 'value';</div> <div><br></div> <div>문론 LD.form.name 을 쓰는것에 대해 부정적인 의견도 있겠지만</div> <div>지금 까지의 업무나 코드를 확실히 줄여주는데 많은 도움이 되었습니다.</div> <div><br></div> <div>Object.defineProperty 가 IE 8에서는 지원이 안되는걸로 알고 있습니다.</div> <div>그냥 업무에 필요해서 코드를 줄이다가 만든 라이브러리인데 위 개념이 좀더 편한거 같기도하고, 다른분들에게도 이런 컨셉을 공유했으면 좋을꺼 같고, 의견도 들어보고 싶어서 글을 써보았습니다.</div> <div><br></div> <div>감사합니다.</div>
댓글 분란 또는 분쟁 때문에 전체 댓글이 블라인드 처리되었습니다.