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