JsDataBind 1.0 - 문자열에 데이터 바인딩 해주는 자바스크립트 라이브러리

JsDataBind 1.0

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

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

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

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

프로그램 소스 : (깃 허브) dang-gun/DG_JavaScript_Utility/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' 개체를 생성해 둡니다.

예>

var insDB = new DG_JsDataBind();

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

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

예> 

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

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

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

예>

{
    "name": "John"
    ,"age": "50"
}

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

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

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

예>

var sReturn = insDB.DataBind(sOriData, ["defult"], jsonValue, DG_JsDataBind_MatchType.Select);
//단축하여 사용
var sReturn2 = insDB.DataBind_All(sOriData, jsonValue);

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

/** 셈플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.ResultString;
}

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

2-2. 패턴 추가하기

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

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

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

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

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

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

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

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

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

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

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

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

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

/**
 * @param {string} sOriData 원본 문자열
 * @param {string} sMatchString 매치에 사용된 문자열
 * @param {string} sValue 바꿀 문자열
 */
function (sOriData, sMatchString, sValue)
{
    return [리턴 문자열];
}

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

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

예>

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

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

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

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

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

2-2-2. 사용자 정의 패턴 추가하기

패턴은 json형식으로 만들어야 합니다.

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

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

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

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

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

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

1 2

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

cs

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

/** 셈플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.ResultString;
}

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

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

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

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

1 2

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

cs

2-4. 매치 방식 활용

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

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

Select : 1 

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

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

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

First : 2, 

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

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

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

/** 셈플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.ResultString;
}

3. 수정 이력

2020.02.14 

- 단축하여 호출할 수 있도록 'DataBind_All' 함수 추가

2019.09.24 

- 매치방법 기능 추가

2019.09.20 

- 구현 완료