[convertTemplate.js] GitHub 뒤지기 1

GitHub 뒤지기 - 1

hsol / convertTemplate.js

---

-    소개

리스트에서의 아이템, 레이어팝업의 값 등 템플릿화 하여 사용하는 코드들을 간편하게 사용하게 해주는 라이브러리.

개발자는 본인이다. 깃헙 뒤지기를 쓰기 위한 첫걸음

링크: https://github.com/hsol/convertTemplate.js

-   구성

convertTemplate.js

convertTemplate.min.js

-    공식 예제

http://codepen.io/anon/pen/aOQdyW

-    사용법 (by 한솔)

페이지에 해당 라이브러리를 포함하게 되면 전역변수로 convertTemplate 가 만들어진다.

먼저 set 객체는 라이브러리에서 사용하는 값들을 설정해주기 위한 것 이다.

차례로 frame 은 치환할 템플릿을,

rule 은 템플릿에서 사용할 기호를,

그리고 variable 은 치환할 값들을 뜻한다.

※ rule 의 경우 기본 "{", "}" 으로 초기화 되어 있다.

모든 값을 세팅한 후 get 객체의 result 메소드를 호출하면 원하는 값이 치환되어 반환 된다.

원하는 결과

블로그 URL: [url] -> 블로그 URL: http://hsol.tistory.com

사용예시

convertTemplate.set.frame("블로그 URL: [url]");

convertTemplate.set.rule("[", "]");

convertTemplate.set.variable({url:"http://hsol.tistory.com"});

convertTemplate.get.result();

결과> 블로그 URL: http://hsol.tistory.com

이 과정을 한번에 하기 위하여 from 메소드가 존재한다.

이 메소드는 두가지 형식으로 오버로딩 되어 있다.

1. convertTemplate.from(String, Object);

첫번째 인자에는 템플릿을 넣어주고, 두번째 인자에는 치환될 값들을 넣어준다.

이 메소드는 기본 rule 을 따른다.

위 예제와 같은 결과를 내기 위해서는 다음과 같이 작성해주면 된다.

convertTemplate.from("블로그 URL: {url}", {url:"http://hsol.tistory.com"});

2. convertTemplate.from(Object);

이 경우엔 인자값에 객체하나만 넣어준다.

convertTemplate.from({

    frame: "템플릿",

    variable: 치환할 값,

    head: "치환할 rule",

    tail: "치환할 rule2"

});

-    활용

API 를 사용하여 비동기로 데이터를 불러올 경우 데이터를 템플릿에 채워 뿌릴 수 있다.

jsp, php, asp 등 script page 에 익숙해진 사람들에겐 안성맞춤.