웹이 개발되면서 프론트 엔드 애플리케이션이 점점 더 복잡해졌으며 백엔드 기반 JavaScript (node.js)도 등장하기 시작했습니다. 현재 JavaScript가 더 큰 기대를 가지고 배치되었습니다. 동시에 JavaScript MVC 아이디어도 인기를 얻었습니다. 데이터와 인터페이스 분리의 가장 중요한 부분 인 JavaScript 템플릿 엔진은 개발자로부터 점점 더 많은 관심을 끌었습니다. 작년에는 오픈 소스 커뮤니티에서 꽃이 피었습니다. 트위터, 타오 바오,시나 웨이보, 텐 센트 QQ 공간 및 Tencent Weibo와 같은 대규모 웹 사이트에서 볼 수 있습니다.
이 기사는 가장 간단한 예제 코드를 사용하여 새로운 세대의 JavaScript 템플릿 엔진 ArtTemplate의 특성 구현 원리를 포함하여 기존 JavaScript 템플릿 엔진의 원칙을 설명합니다. 함께 토론 할 수 있습니다.
arttemplate 소개
ArtTemplate은 차세대 JavaScript 템플릿 엔진입니다. 사전 컴파일을 사용하여 성능이 질적 인 도약을하고 JavaScript 엔진의 기능을 최대한 활용하여 프론트 엔드 및 백엔드에서 성능을 극도로 뛰어납니다. Chrome의 렌더링 효율 테스트에서 잘 알려진 엔진 콧수염 및 마이크로 TMPL의 25 배 및 32 배입니다.
성능 장점 외에도 디버깅 기능도 언급 할 가치가 있습니다. 템플릿 디버거는 렌더링 오류를 유발하고 템플릿을 작성하는 동안 부주의 한 디버깅의 통증을 해결하고 개발 효율적이며 단일 템플릿의 오류로 인해 전체 응용 프로그램 충돌을 피하는 템플릿 문을 정확하게 찾을 수 있습니다.
ArtTemplate 이것은 모두 1.7KB (GZIP)로 구현됩니다!
자바 스크립트 템플릿 엔진 기본 사항
각 엔진에는 템플릿 구문, 구문 구문 분석, 가변 할당 및 문자열 스 플라이 싱과는 다른 구현 방법이 있지만 주요 렌더링 원리는 여전히 JavaScript 문자열을 동적으로 실행하는 것입니다.
JavaScript 문자열의 동적 실행과 관련 하여이 기사는 예를 들어 템플릿 코드를 사용합니다.
이것은 매우 간단한 템플릿 쓰기입니다. ""는 옷장입니다 (논리 문장 폐쇄 태그). OpEntag 다음에 "="가 이어지면 변수의 내용이 출력됩니다.
HTML 문 및 가변 출력 문은 직접 출력되며 구문 분석 문자열은 비슷합니다.
구문 분석이 완료되면 일반적으로 렌더링 방법이 반환됩니다.
렌더링 테스트 :
위의 렌더 메소드에서 템플릿 변수 할당은 with 문을 사용하고 문자열 스 플라이 싱은 IE6 및 7의 성능을 향상시키기 위해 배열의 푸시 방법을 사용합니다.
원칙 구현에서 해결해야 할 두 가지 문제가 기존의 JavaScript 템플릿 엔진에 남아 있음을 알 수 있습니다.
성능 : 템플릿 엔진을 렌더링 할 때는 기능 생성자에 의존하여 구현합니다. Eval, Settimeout 및 SetInterval과 마찬가지로 함수는 텍스트를 사용하여 JavaScript 구문 분석 엔진에 액세스하는 메소드를 제공하지만 이러한 방식으로 JavaScript를 실행하는 성능은 매우 낮습니다.
2. 디버깅 : 동적 실행 문자열이므로 디버거가 오류가 발생하면 디버거가 오류 소스를 잡을 수 없어 템플릿 버그 디버깅이 극도로 고통스럽게됩니다. 결함 공차를 수행하지 않는 엔진에서 로컬 템플릿으로 인해 데이터 예외로 인해 전체 애플리케이션이 충돌 할 수있는 경우 템플릿 수가 증가함에 따라 유지 보수 비용이 크게 증가합니다.
ArtTemplate 효율적인 비밀
1. 사전 컴파일
위에서 언급 한 템플릿 엔진 구현 원리에서 템플릿 변수가 할당되므로 각 렌더링에는 변수 할당을 완료하기 위해 JavaScript 문자열의 동적 컴파일이 필요합니다. 그러나 ArtTemplate의 편집 및 할당 프로세스는 렌더링 전에 완료되며 "사전 컴파일"이라고합니다. ArtTemplate 템플릿 컴파일러는 간단한 규칙에 따라 모든 템플릿 변수를 추출하여 렌더링 기능의 헤드에서 선언합니다. 이 기능은 다음과 유사합니다.
이 자동 생성 된 기능은 손으로 작성된 JavaScript 기능과 같습니다. 동일한 수의 실행을 통해 CPU 및 메모리 사용량이 크게 줄어들 었으며 성능은 거의 한계입니다.
ArtTemplate의 많은 기능은 샌드 박스 사양 및 사용자 정의 구문과 같은 사전 컴파일 된 구현을 기반으로합니다.
2. 더 빠른 문자열 추가 방법
많은 사람들은 배열 푸시 방법이 +=보다 빨리 문자열을 스플 라이스 할 것이라고 잘못 생각합니다. 이것은 IE6-8 브라우저에만 있다는 것을 알아야합니다. 실제 측정에 따르면 최신 브라우저는 +=를 사용하여 배열 푸시 방법을 사용하는 반면 V8 엔진에서 += 메소드를 사용하는 것은 배열 스 플라이 싱보다 4.7 배 빠릅니다. 따라서 ArtTemplate은 JavaScript 엔진의 특성에 따라 두 가지 다른 문자열 스 플라이 싱 방법을 채택합니다.
ArtTemplate 디버그 모드 원리
프론트 엔드 템플릿 엔진은 백엔드 템플릿 엔진과 다릅니다. 동적 파싱이므로 디버거는 잘못된 줄 번호를 찾을 수 없습니다. ArtTemplate은 템플릿 디버거가 렌더링 오류를 던지는 템플릿 문을 정확하게 찾을 수 있도록합니다.
ArtTemplate은 두 가지 유형의 오류 캡처를 지원합니다. 하나는 렌더링 오류 (렌더 오류) 및 컴파일 오류 (구문 오류)입니다.
1. 렌더링 오류
렌더링 오류는 일반적으로 템플릿 데이터 오류 또는 가변 오류로 인해 발생합니다. 렌더링 할 때는 정상 템플릿 실행 효율에 영향을 미치지 않고 템플릿을 다시 컴파일하기 위해 디버그 모드로 들어갑니다. 템플릿 컴파일러는 템플릿 라인 브레이크를 기반으로 줄 번호를 기록하고 컴파일 된 함수는 유사합니다.
실행 프로세스 중에 오류가 발생하면 예외 템플릿에 해당하는 줄 번호가 즉시 던져지고 템플릿 디버거는 줄 번호에 따라 템플릿에 해당하는 해당 문을 확인하고 콘솔에 인쇄합니다.
2. 컴파일 오류
컴파일 오류는 일반적으로 자격이없는 중첩, 알 수없는 구문 등과 같은 템플릿 구문 오류입니다. ArtTemplate은 완전한 어휘 분석을 수행하지 않기 때문에 오류 소스의 위치를 결정하는 것은 불가능하며 개발자가 판사에 대한 원본 텍스트에 대한 오류 정보 및 소스 코드 만 출력 할 수 있습니다.