내 기사 중 하나에서 create a simple JS template engine 방법을 보여주었습니다. 이 기사에서는 템플릿 컴파일에 간단한 캐싱을 추가하는 방법을 보여줍니다.

캐싱이 JS 템플릿 엔진에서 작동하는 방식

템플릿 엔진으로 캐싱하는 것은 매우 간단합니다. 우리는 키 값 객체를 유지하고 템플릿 문자열을 키로 사용하고 함수를 값으로 사용합니다. 이렇게 하면 템플릿을 더 빠르게 사용할 수 있습니다.

컴파일 내부에서 구현하기

모든 컴파일 기능은 다음과 같습니다.

const compile = (template) => {
    return new Function("data", "return " + compileToString(template))
}

이름을 compileToFunction 로 바꾸겠습니다.

const compileToFunction = (template) => {
    return new Function("data", "return " + compileToString(template))
}

이제 캐시를 생성해 보겠습니다. 이를 위해 Map를 사용합니다.

const cache = new Map();

이제 이 캐시를 사용하는 compile 함수를 추가해 보겠습니다.

우리가 해야 할 일은 cache.has(template) 여부를 확인하는 것입니다. 그렇지 않은 경우 생성하고 설정해야 합니다. 그것이 있다면, 우리는 그것을 돌려주기만 하면 됩니다.

const compile = (template) => {
    if (cache.has(template)) {
        return cache.get(template);
    } else {
        const compiledFunction = compileToFunction(template);
        cache.set(template, compiledFunction);
        return compiledFunction;
    }
}

렌더 기능 변경하기

현재 render 함수는 일부 Regex를 사용하여 모든 값을 대체합니다.

var render = (template, data) => {
    return template.replace(/{{(.*?)}}/g, (match) => {
        return data[match.split(/{{|}}/).filter(Boolean)[0]]
    })
}

더 빠른 자동 캐싱을 위해 후드 아래에서 compile를 사용하도록 변경해야 한다고 생각합니다. 구현하는 것은 매우 간단합니다. compile 를 실행한 다음 data 로 해당 기능을 실행하면 됩니다.

const render = (template, data) => {
    return compile(template)(data);
}

결론

이 튜토리얼에서는 더 빠른 컴파일 및 렌더링을 위해 캐싱을 사용하여 이전 게시물에서 만든 템플릿 엔진을 확장하는 방법을 보여주었습니다.

당신이 좋아할 만한 다른 기사

Creating a JS Template Engine

🚀14 JS Template Engines🚀