2019.09.23 15:30
   ,

JsDataBind 1.0

- 자바스크립트를 이용한 데이터 교체 라이브러리

- 문자열을 'Json'으로 받은 데이터로 교체기능

- 사용자 정의 패턴 정의 가능


라이브러리 테스트 : https://dang-gun.github.io/DG_JsDataBind/test/index.html

프로그램 소스 : (깃 허브) https://github.com/dang-gun/DG_JsDataBind




Author  : Dang-Gun Roleeyas ( http://blog.danggun.net/ )

Create date : 2019.09.20

License  : MIT( https://opensource.org/licenses/MIT )


사용기술 : javascript



라이브러리 설명

자바스크립트 웹 프레임웍들을 보면 데이터 바인딩 기능이 있습니다.

Html이나 문서에 특정구분자를 찾아서 데이터로 교체해주는 기능이죠.




Html에 데이터를 표현하려면 Html조각이 있어야 하는데 이 조각을 정석대로 만들면 손이 너무 많이 갑니다.

이걸 교체(Replace)하는 방식으로 처리하면 한방에 데이터를 넣을 수 있죠.


이 교체하는 기능을 구현하는 것이 이 라이브러리입니다.




바인드용 문자열을 수정하여 같은 문자열을 쓰는 아이템을 한번에 관리 할 수 있습니다.





1. 주요 기능

- 지정한 패턴을 찾아 데이터로 교체

- 사용자 지정 패턴 추가

- 패턴 그룹화

- 사용할 그룹 선택 지정 가능


2. 사용 방법

'JsDataBind' 개체를 생성해 둡니다.


예>

1
var insDB = new DG_JsDataBind();
cs



원본 문서의 기본 패턴은 '{{'로 시작해서 '}}'로 끝나야합니다.

패턴의 내용에 패턴의 이름을 넣어 줍니다.


예> 

1
var sOriData = "내 나이는 {{age}}입니다.";
cs



변경할 데이터는 json형식으로 제공되야 합니다.

'{[패턴 이름] : [교체할 데이터]' 형식으로 json을 구성해야 합니다.


예>

1
2
3
4
{
    "name""John"
    ,"age""50"
}
cs



2-1. 기본 패턴 사용해 보기

기본 패턴의 이름은 "defult" 입니다.

생성한 개체에서 'DataBind([원본 문자열], [사용할 패턴 배열], [바인딩할 데이터], [매치방식])'함수를 호출하여 데이터를 바인딩 합니다.


예>

1
var sReturn = insDB.DataBind(sOriData, ["defult"], jsonValue, DG_JsDataBind_MatchType.Select);
cs




기본 패턴을 사용하여 데이터를 바인딩 해봅시다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/** 셈플1 */
function Test_Sample01()
{
    var insDB = new DG_JsDataBind();
    var sOriData = "내 나이는 {{age}}입니다.";
 
    var jsonValue = {
        "name""John"
        , "age""50"
    };
 
    var sReturn =
        insDB.DataBind(
            sOriData
            , ["defult"]
            , jsonValue
            , DG_JsDataBind_MatchType.Select
        );
 
    domTxtResult.value = sReturn;
}
cs



실행을 하면 '{{age}}'가 '50'으로 교체되는 것을 확인 할 수 있습니다.




2-2. 패턴 추가하기

직접 원하는 패턴을 만들어 사용할 수 있습니다.

'MatchPatternListAdd([리스트매치 구분용 타입], [매치 패턴에 사용할 json])'함수를 이용하여 원하는 패턴을 만들어 추가할 수 있습니다.



여기서는 ':name1', ':name2'라는 패턴을 추가하고 출력하는 방법을 알아보겠습니다.


일단 원본 문자열을 아래와 같이 선언합니다.


1
2
//원본 데이터
var sOriData = "내 이름은 {{name:name1}}{{name:name2}} 나이는 {{age}}입니다.";
cs



이 원본을 사용하면 "이름(이름)" 이런 형식으로 결과물이 나올 것입니다,



2-2-1. 사용자 정의 패턴 만들기

'json' 오브젝트를 선언하고 다음과 같이 선언합니다,


1
var jsonAdd = { ":name1"function (sOriData, sMatchString, sValue) { return insDB.ReplaceAll(sOriData, sMatchString, sValue); }};
cs



':name1' 은 패턴 비교에 사용할 문자열입니다.

이렇게 되면 "{{[데이터 이름]:name1}}" 이 패턴을 찾게 됩니다.

일치하는 패턴을 찾으면 설정된 함수가 동작합니다.


패턴에 사용할 함수의 형식은 다음과 같습니다.


1
2
3
4
5
6
7
8
9
/**
 * @param {string} sOriData 원본 문자열
 * @param {string} sMatchString 매치에 사용된 문자열
 * @param {string} sValue 바꿀 문자열
 */
function (sOriData, sMatchString, sValue)
{
    return [리턴 문자열];
}
cs



패턴에 사용할 함수는 마음대로 구성이 가능하지만 리턴은 문자열로 넘겨야 합니다.

문자열에서 패턴을 찾아 전체 변경하려면 생성한 개체에서 'ReplaceAll([원본], [찾을 문자열], [바꿀 문자열])'함수를 호출하여 사용할 수 있습니다.


예>

1
insDB.ReplaceAll(sOriData, sMatchString, sValue + ":AddTest1");
cs



이것을 'ReplaceAll'함수는 필수 사항이 아닙니다.

자체적으로 지원하는 함수를 구현하고 있다면 그것을 사용해도 됩니다.



같은 방법으로 ':name2'도 만들어 줍니다.


1
2
3
4
5
//사용자 정의 패턴 추가
var jsonAdd = {
    ":name1"function (sOriData, sMatchString, sValue) { return insDB.ReplaceAll(sOriData, sMatchString, sValue); }
    , ":name2"function (sOriData, sMatchString, sValue) { return insDB.ReplaceAll(sOriData, sMatchString, "(" + sValue + ")"); }
};
cs


2-2-2. 사용자 정의 패턴 추가하기
패턴은 json형식으로 만들어야 합니다.

'{"[패턴 문자열]", [패턴에 사용할 함수]}' 형식으로 만들어야 합니다.


위에서 만든 패턴을 'MatchPatternListAdd([리스트매치 구분용 타입], [매치 패턴에 사용할 json])'함수에 전달합니다.


1
2
//패턴 추가
insDB.MatchPatternListAdd("NameAdd", jsonAdd);
cs



이렇게 되면 'NameAdd'패턴이 추가됩니다.



2-2-3. 추가한 패턴 사용하기

'DataBind'를 사용할때 이름을 'NameAdd'로 사용하면 결과가 나옵니다.


1
2
//데이터 바인딩 시도
var sReturn = insDB.DataBind(sOriData, ["NameAdd"], jsonValue, DG_JsDataBind_MatchType.Select);
cs





전체 코드는 아래와 같습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/** 셈플2 */
function Test_Sample02()
{
    //개체 생성
    var insDB = new DG_JsDataBind();
    //원본 데이터
    var sOriData = "내 이름은 {{name:name1}}{{name:name2}} 나이는 {{age}}입니다.";
 
    //사용자 정의 패턴 추가
    var jsonAdd = {
        ":name1"function (sOriData, sMatchString, sValue) { return insDB.ReplaceAll(sOriData, sMatchString, sValue); }
        , ":name2"function (sOriData, sMatchString, sValue) { return insDB.ReplaceAll(sOriData, sMatchString, "(" + sValue + ")"); }
    };
 
    //패턴 추가
    insDB.MatchPatternListAdd("NameAdd", jsonAdd);
 
    //바인딩에 사용할 데이터
    var jsonValue = {
        "name""John"
        , "age""50"
    };
 
 
    //데이터 바인딩 시도
    var sReturn =
        insDB.DataBind(
            sOriData
            , ["NameAdd"]
            , jsonValue
, DG_JsDataBind_MatchType.Select
        );
 
    //결과 출력
    domTxtResult.value = sReturn;
}
cs



2-3. 여러 패턴 한번에 사용하기

'defult'패턴과 'NameAdd'패턴을 동시에 사용해 봅시다.


'DataBind'함수를 호출할때 패턴 이름 배열에 사용할 패턴이름을 나열하면됩니다.

나열된 순서대로 패턴이 처리되게 됩니다.


1
2
//데이터 바인딩 시도
var sReturn = insDB.DataBind(sOriData, ["defult","NameAdd"], jsonValue, DG_JsDataBind_MatchType.Select);
cs





2-4. 매치 방식 활용
매치 방식 옵션을 사용하여 성능향상을 할 수 있습니다.

'DG_JsDataBind_MatchType'에 미리 정의 되어있습니다.


Select : 1 

- 지정된 모든 매치패턴 리스트 검사

- 매치된 내용이 있어도 전체 검사를 합니다.

- 데이터에 바인딩용 문자열이 1개만있어도 모두 검사합니다.


First : 2, 

- 처음 1개가 매치되면 검사를 끝냄

- 매치 순서는 지정된 리스트의 순서를 따릅니다.

- 맨처음 일치하는 1개만 바꾸고 검사를 끝냅니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/** 셈플4 */
function Test_Sample04() {
    //개체 생성
    var insDB = new DG_JsDataBind();
    //원본 데이터
    var sOriData = "내 이름은 {{name:name1}}{{name:name2}} 나이는 {{age}}입니다.";
 
    //사용자 정의 패턴 추가
    var jsonAdd = {
        ":name1"function (sOriData, sMatchString, sValue) { return insDB.ReplaceAll(sOriData, sMatchString, sValue); }
        , ":name2"function (sOriData, sMatchString, sValue) { return insDB.ReplaceAll(sOriData, sMatchString, "(" + sValue + ")"); }
    };
 
    //패턴 추가
    insDB.MatchPatternListAdd("NameAdd", jsonAdd);
 
    //바인딩에 사용할 데이터
    var jsonValue = {
        "name""John"
        , "age""50"
    };
 
 
    //데이터 바인딩 시도
    var sReturn =
        insDB.DataBind(
            sOriData
            , ["defult""NameAdd"]
            , jsonValue
            , DG_JsDataBind_MatchType.First
        );
 
    //결과 출력
    domTxtResult.value = sReturn.ResultString;
}
cs



3. 수정 이력

2019.09.24

- 매치방법 기능 추가


2019.09.20 
- 구현 완료

댓글 작성

이름
패스워드
홈페이지
비밀글