고성능 자바 스크립트 템플릿 엔진의 원리 분석

웹 성장 함에 따라 프런트 엔드 응용 프로그램 될 더 복잡 한, 그리고 자바 스크립트 (Node.js), 백 엔드에 따라 등장, 자바 자바 MVC 인기가 되고있다 하는 동안 큰 기대에 배치 되 고는 하는 동안 시작. 데이터 및 인터페이스 분리의 작품의 가장 중요 한 부분으로 자바 스크립트 템플릿 엔진, 개발자, 오픈 소스 커뮤니티에서 작년에 의해 점점 더 많은 관심은 꽃, 트위터, Taobao, Sina Weibo, Tencent QQ 공간, Tencent의 마이크로 블로그와 다른 대형 사이트는 그들의 그림을 볼 수 있습니다.

이 기사는 토론 오신 자바 스크립트 템플릿 엔진 Arttemplate 기능 구현 원리의 새로운 세대를 포함 하 여 기존 자바 스크립트 템플릿 엔진의 원리를 설명 하기 위해 간단한 예제 코드를 사용 합니다.

Arttemplate 다음-세대 자바 스크립트 템플릿 엔진 성능에서 질적 도약을 미리 컴파일 사용 하 고 프런트 엔드 및 백 엔드 성능 수 있도록 자바 스크립트 엔진 기능을 활용 하는 우수한. 크롬 렌더링 효율 테스트에서는 유명한 엔진 콧수염 및 마이크로 Tmpl 25, 32 시간입니다.

성능 상의 이점 뿐만 아니라 디버깅 기능 또한 언급 가치가 있다. 템플릿 디버거 렌더링 오류를 throw 하는 템플릿 문을 정확 하, 고통을 수 없습니다 템플릿 작성 하는 동안 디버깅 될, 보다 효율적으로 개발, 그리고 충돌 전체 응용 프로그램을 단일 서식 파일의 오류 방지를 해결 수 있습니다.

Arttemplate 모든이 1.7 k b (gzip) 구현!

각 엔진 템플릿 구문, 구문 분석, 변수 할당 및 문자열 연결에서 다릅니다, 하지만 주요 렌더링 원리 여전히 자바 스크립트 문자열의 동적 실행입니다.

자바 스크립트 문자열의 동적 실행에 대 한이 문서 템플릿 코드의 예는.

이것은, 매우 간단한 서식 파일 "" Closetag에 대 한 (논리 문을 폐쇄 태그), 뒤에 "=" opentag 변수의 내용을 출력 합니다.

HTML 문과 변수 출력 문을 직접 수출 하 고, 하 고 구문 분석 된 문자열에 다음과 유사한:

구문 분석 작업이 완료 되 면 렌더링 메서드를 사용 하면 일반적으로 반환 됩니다.

테스트 렌더링:

위의 렌더링 방법, 템플릿 변수 할당 With 문을 사용 하 여, 문자열 연결 배열 push 메서드를 사용 하 여 IE6, 7에서 성능을 홍보, JQuery 저자 죤 Tmpl에 의해 개발 된 소형 템플릿 엔진은이 방법의 전형적인 대표, 참고: Http://ejo hn.org/blog/javascript-micro-templating/

보이는 원리 구현으로, 전통적인 자바 스크립트 템플릿 엔진 나뭇잎 두 미해결된 문제:

1, 성능: 템플릿 엔진 렌더링 함수 생성자 구현에 의존 하는 경우 기능 및 평가, settimeout, setinterval, 같은 구문 분석 엔진 방법,이 실행 하지만 JavaScript에 텍스트 액세스의 사용을 제공 합니다 자바 스크립트 성능 매우 낮습니다.

2, 디버깅: 오류가 발생 하는 경우 동적 실행 문자열 이므로 디버거 오류 소스를 잡을 수 없는, 서식 파일에서 결과 버그 디버깅은 매우 고통 스러운. 결함 허용 엔진의 부재에서 데이터 변칙 때문에 로컬 서식 파일 수 하는 경우 심지어 원인 전체 응용 프로그램 충돌, 서식 파일의 수로 증가, 유지 보수 비용이 증가 합니다.

arttemplate

1, 미리 컴파일된

위의 템플릿 엔진 구현 원리에서 템플릿 변수 할당 하려는 있기 때문에 당신이 각 렌더링에 대 한 JavaScript 문자열 완료 변수 할당을 동적으로 컴파일 필요 합니다. Arttemplate 컴파일 할당 프로세스는 미리 컴파일 이라고 렌더링 하기 전에 수행 됩니다. Arttemplate 템플릿 컴파일러는 다음과 같은 렌더링 함수 헤더에 선언 하는 몇 가지 간단한 규칙에 따라 모든 템플릿 변수를 추출 합니다.

이 자동 생성 기능, 손으로 쓴 자바 스크립트 함수 처럼 거의 무제한 성능으로 CPU 및 메모리 사용에 상당한 감소를 있다.

그것은 언급할 가치가 있다: Arttemplate 많은 기능 샌드 박스 사양 등 사용자 지정 구문을 미리 컴파일된 구현을 기반으로.

2, 빠른 문자열 추가 방법

많은 사람들이 실수로 바느질 문자열 배열 push 메서드 보다 빠른 것 생각 + +, 6으로 8 브라우저 바로 아래 이것이 알고. 측정 결과 최신 브라우저를 사용 하 여 + + 배열 push 메서드 V8 엔진에서 보다는 + + 메서드는 4.7 배 배 배열 바느질 보다 빠른. 그래서 Arttemplate 자바 스크립트 엔진 기능에 따라 두 개의 다른 문자열 연결 방법을 사용 합니다.

백 엔드 템플릿 엔진 달리 프런트 엔드 템플릿 엔진 이므로 동적 구문 분석, 오류 줄 번호를 arttemplate 예를 들어 렌더링 오류를 발생 하는 서식 파일 문을 정확 하 게 탐색 하려면 템플릿 디버거는 디버거 탐색할 수 없습니다.

Arttemplate 지원 두 가지 유형의 오류 잡기, 하나는 렌더링 오류 (렌더링 오류) 및 컴파일 오류 (구문 오류).

1. 렌더링 오류

렌더링 오류 일반적으로 템플릿 데이터 오류 또는 렌더링만 때 발생 했습니다 오류 입력 합니다 디버그 모드 재컴파일 서식 파일, 서식 실행 효율성에 영향을 주지 않고 변수 오류에 의해 발생 합니다. 템플릿 컴파일러 레코드 숫자 서식 파일 줄 바꿈 문자에 따라 라인과 컴파일된 함수는 다음과 같습니다.

실행 오류를 발견 하면 즉시 throw 예외 서식 파일 및 서식 파일 디버거 줄 번호 다음 줄 번호에 대 한 서식 파일의 해당 문이 검사 그것과 콘솔에 인쇄.

2. 컴파일 오류

컴파일 오류는 일반적으로 서식 파일 구문 오류, 비정규 중첩, 알 수 없는 구문, 등. 때문에 Arttemplate는 완전 한 어휘 분석을 수행 하지 못했습니다, 오류, 오류 정보 및 판단 하는 개발자를 위한 원래 출력에 대 한 소스 코드의 소스 위치를 확인할 수 아니다.

는

Arttemplate 오픈 소스 계약에 따라, 상업 회사와 개인 모두 무료로 사용할 수 있는 프로젝트에의 일반적인 완벽 한 환영.

다운로드 주소:

Https://github.com/aui/artTemplate

온라인 미리 보기:

http://aui.github.com/artTemplate/

피드백:

Tencent 마이크로 블로그 | 시 나 Weibo