JS 템플릿 구현 방법_javascript 기술

개요

JS를 사용하여 DOM을 렌더링할 때 일반적으로 문자열을 사용하여 DOM을 생성한 다음 이를 상위 요소에 연결합니다. 연결된 DOM이 동적이고 휘발성인 경우 함수에 많은 로직을 작성해야 합니다. 제어 구현 과정 중이라면 이로 인해 발생하는 문제는 더욱 심각합니다.

이 문제에 대한 일반적인 해결책은 템플릿을 사용하고 이를 구성 항목으로 컨트롤에 전달하여 데이터와 렌더링을 분리하는 것입니다. 구체적인 구현 방법은 다음과 같습니다.

1. 문자열 교체, 일반 매칭을 사용하여 데이터를 문자열로 교체합니다.
2. 렌더링 함수, 이 함수는 문자열을 반환합니다.
3. 문자열(내장 또는 사용자 정의)로 함수를 실행할 수 있는 템플릿 엔진

대체

문자열 교체는 템플릿을 구현하는 가장 간단한 방법입니다. 구체적인 구현을 살펴보세요.

1. 교체 기능 정의

코드 복사 코드는 다음과 같습니다.

/**

* 문자열의 필드를 바꿉니다.

* @param {String} str 템플릿 문자열

* @param {Object} o json 데이터

* @param {RegExp} [regexp] 정규식 일치 문자열

*/

함수 대체(str,o,regexp){

return str.replace(regexp || /\?{([^{}] )}/g, 함수(일치, 이름) {

return (o[이름] === 정의되지 않음) ? '' : o[이름];

});

}

2. 구성 항목 사용:

코드 복사 코드는 다음과 같습니다.

var config = {

데이터 : {값 : '123',텍스트:'abc'},

템플릿 : '{text}'

};

3. DOM을 생성하는 과정에서는 다음과 같이 부릅니다.

코드 복사 코드는 다음과 같습니다.

var str = replacement(template,data) ;

$(str).appendTo('body');

위의 예를 통해 컨트롤에서 유연하게 사용할 수 있는 데이터와 문자열의 분리를 완료했습니다. 대부분의 최신 JS 프레임워크는 이러한 방식으로 템플릿을 제공합니다.

이를 바탕으로 다음과 같은 확장을 만들 수 있습니다. 관심이 있는 경우 직접 구현할 수 있습니다.

1. 매개변수 이름 대신 숫자를 사용하세요.

예: '{0}'

2. 객체 속성의 중첩 사용:

예: '{obj.name}'

장점: 구현이 간단하고 이해하기 쉽습니다.

단점: 단순한 데이터 구조만 수행할 수 있고 루프 및 조건문을 처리할 수 없습니다.

렌더링 방식(렌더링)

렌더링 기능에서 매우 복잡한 로직을 처리하고 렌더링 기능을 매개변수로 구성 항목에 전달할 수 있습니다.

구성 항목:

코드 복사 코드는 다음과 같습니다.

var config = {

데이터 : [{값 : '0',텍스트:'abc'},{값 : '1',텍스트:'bcd'}],

렌더러: 함수(obj){

if(obj.value === '0'){

obj.text를 반환합니다.

}그 외{

'';를 반환합니다.

}

}

};

사용시:

코드 복사 코드는 다음과 같습니다.

for(var i = 0; i< 데이터.길이 i ){

var obj = 데이터[i],

str = config.renderer(obj);

$(str).appendTo('body');

}

이것은 루프, 조건문을 처리할 때 훌륭한 솔루션입니다.

장점: 비교적 간단한 구현, 유연한 구현, 복잡한 데이터 구조 충족 가능, 디버깅 용이

단점:

1. 렌더링 기능은 구성 항목이라 이해하기 어렵습니다.
2. 기능이 길어지면 구성 항목이 부풀어 오릅니다.
3. 각 장면은 자체 렌더링 기능을 구현해야 합니다.

템플릿 엔진(XTemplate)

모든 JS UI 라이브러리에는 강력한 템플릿 엔진이 있습니다. 템플릿 엔진은 다음 기능을 구현해야 합니다.

1. 문자열 교체

2. 복잡한 명령문, 조건, 루프 처리

3. 내장된 기능을 사용하세요

4. 사용자가 맞춤 기능을 전달할 수 있도록 허용

현재 템플릿 엔진에는 두 가지 일반적인 구현 방법이 있습니다.

1. 정규식을 사용하여 문자열을 분석하고 특수 명령문 논리를 실행하고 해당 데이터를 바꿉니다

KISSY 템플릿의 예를 살펴보겠습니다.

'안녕하세요, {{#각 사용자}}{{#if _ks_value.show}}{{_ks_value.name}}{{/if}}{{/each}}님.'

위는 루프와 조건문을 처리할 수 있는 템플릿입니다.

2. 문자열에 대한 구문 분석을 수행하고 구문 트리를 생성한 후 해당 태그 또는 데이터를 바꿉니다.

Ext의 xtemplate을 사용하는 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var tpl = new Ext.XTemplate(
'

{name}님이 좋아하는 음료:

',
'',
'

- {.} ',
''
);
tpl.overwrite(panel.body, data);

장점: 강력한 기능과 높은 유연성

단점: 사용하기가 복잡하고 이해하기가 더욱 어렵습니다. 디버깅이 쉽지 않습니다.

문제에 대한 생각

1. 컨트롤에 템플릿을 사용하면 데이터와 DOM이 분리될 수 있습니다. 그러나 컨트롤에 템플릿이 많이 포함되면 사용자의 작업량이 증가하고 디버깅이 어려워지므로 균형을 맞춰야 합니다.

2. 다수의 컨트롤이 동일한 템플릿과 동일한 데이터 구조를 사용하는 경우 각 컨트롤을 개별적으로 구성하는 것이 불편합니다. 더 나은 해결책은 상위 컨트롤이 템플릿을 구성하도록 허용하는 것입니다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.