원래 ArtTemplate 소스 코드의 이전 분석 릴리스를 공유하고 싶었지만 1 년 후에는 찾을 수 없었기 때문에 당시에는 분석 템플릿 엔진 원리를 시도해야했습니다.
글쓰기 템플릿 엔진은 당시에 여러 템플릿 엔진이 있다는 것을 기억하면서 기념관을 남겨두고 공유했습니다.
여기에 언급 된 JS 템플릿 엔진은 기본 JavaScript 구문을 사용하므로 PHP의 기본 템플릿 엔진과 유사합니다.
프론트 엔드 템플릿 엔진의 역할?
1. Front -End 개발을보다 쉽게 만들 수 있습니다. DOM 구조를 생성하기 위해+컴퓨팅 기호를 사용하지 않아도됩니다. 또는 하나의 템플릿 파일
2. 커플 링을 유지하고 줄이기 쉽습니다.
3. 템플릿이 .tpl과 비슷한 파일 인 경우 캐시 할 수 있습니다. 브라우저를 사용하여로드하고 저장할 수 있습니다. .tpl 파일에 관해서는 캐시뿐만 아니라 모듈 로더가 될 수도 있습니다.
.tpl을 모듈로 사용하면 더 많은 광대역을 절약하고 페이지 속도를 높이 지 않습니까?
4. 잠깐
프론트 엔드 템플릿 엔진의 원리?
원리는 객체 (data) + 템플릿 (변수 포함) -> 문자열 (html)이 매우 간단합니다.
프론트 엔드 템플릿 엔진을 달성하는 방법?
단어 메소드에 따라 템플릿을 구문 분석하여 템플릿이 함수로 변환되고 함수가 호출되고 객체 (데이터)가 전달되고 출력 문자열 (html)이 전달됩니다.
(물론 특정 것은 코드에 따라 다릅니다)
이것은 다음과 같습니다.
다음과 같이 코드 코드를 복사하십시오.
var tpl = '나는 <%= name%>, <%= age => olod old a a in. // <%= xxx> 변수로 표시됩니다
var obj = {
이름 : 'Lovesuee',
나이 : 24
};
var fn = enginepile (tpl); // 함수로 컴파일됩니다
var str = fn (obj);
예:
다음과 같이 코드 코드를 복사하십시오.
<doctype html>
<html>
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<title> 얼음 데모 </title>
<script src = "/javascripts/jquery/jquery-1.7.2.js"> </script>
<script src = "/javascripts/ice/ice.js"> </script>
<body>
<div id = "content"> </div>
</body>
<script type = "text/html"id = "tpl">
<div> 렌더 결과는 다음과 같습니다. </div>
<% = this.title ();%>
<테이블 테두리 = 1>
< % (var i = 0, tl = this.trs.length, tr; i <tl; i ++) { %>
<%
tr = this.trs [i];
if (tr.sex === "여성") {
%>
<tr>
<td> < %= tr.name ;;
</tr>
< %} %>
< %} %>
</테이블>
<img src = "< %= this.href %>">
< %= this.include ( 'tpl2', this);
</스크립트>
<script type = "text/html"id = "tpl2">
<div> 렌더 결과는 다음과 같습니다. </div>
<% = this.print ( 'Ice Template');%>
<테이블 테두리 = 1>
< % (var i = 0, tl = this.trs.length, tr; i <tl; i ++) { %>
<%
tr = this.trs [i];
if (tr.sex === "male") {
%>
<tr>
<td> < %= tr.name ;;
</tr>
< %} %>
< %} %>
</테이블>
<img src = "< %= this.href %>">
</스크립트>
<cript>
var test = [
{이름 : "보이지 않는 살인자", 나이 : 29, 섹스 : "Male"},
{이름 : "소라", 나이 : 22, 섹스 : "남자"},
{이름 : "Fesyo", 나이 : 23, 섹스 : "여성"},
{이름 : "Love Bo", 나이 : 18, 섹스 : "Male"},
{이름 : "Izaki", 나이 : 25, 섹스 : "남자"},
{이름 : "당신은 이해하지 못합니다", 나이 : 30, 섹스 : "여자"}}
]]
// var html = Ice ( "tpl", {
// trs : trs,
// href : "http://images.vevb.com/type4.jpg"
//}, {
// 제목 : function () {{
// "<p> view helper </p>"를 사용하여 코드 조각 출력입니다. ""
//}
//});
var elem = document.getElementById ( 'tpl');
var tpl = elem.innerhtml;
var html = 얼음 (tpl, {
TRS : TRS,
href : "http://images.vevb.com/type4.jpg"
}, {
제목 : function () {
"<p> return view helper </p>" ""에서 코드를 사용하는 코드입니다.
}
});
Console.log (HTML);
$ ( "#Content").
</스크립트>
</html>
간단한 구현 :
다음과 같이 코드 코드를 복사하십시오.
(기능 (WIN) {
// 템플릿 엔진 라우팅 기능
var ice = function (id, content) {
반환 얼음 [
Content의 타입 === '객체': 'Compile'
].
};
ice.version = '1.0.0';
// 템플릿 구성
var iconfig = {
OpenTag : '<%',
옷장 : '%>'
};
var isnewengine = !!
// 템플릿 캐시
var icache = ice.cache = {};
// 보조 기능
var ihelper = {
포함 : function (id, data) {
반환 Irender (id, data);
},
인쇄 : 함수 (str) {
Return str;
}
};
// 프로토 타입 상속
var iextend = object.create || (Object) {{
함수 fn () {};
fn.prototype = 객체;
새로운 fn을 반환합니다.
};
// 템플릿 컴파일
var icompile = ice.compile = function (id, tpl, 옵션) {
var cache = null;
id && (cache = icache [id]);
if (캐시) {
반환 캐시;
}
// [id |. tpl]
if (typeof tpl! == 'string') {
var elem = document.getElementById (id);
옵션 = tpl;
if (elem) {
// [ID, 옵션]
옵션 = tpl;
tpl = elem.value || elem.innerhtml;
} 또 다른 {
// [tpl, 옵션]
tpl = id;
id = null;
}
}
옵션 = 옵션 || {};
var render = iparse (tpl, 옵션);
id && (icache [id] = render);
반환 렌더링;
};
// 템플릿 렌더링
var irender = ice.rener = function (id, data, 옵션) {
return icompile (id, 옵션) (데이터);
};
var iforeach = array.prototype.foreach?
기능 (ARR, FN) {
arr.foreach (fn)
} :
기능 (ARR, FN) {
for (var i = 0; i <arr.length; i ++) {
fn (arr [i], i, arr)
}
};
// 템플릿 분석
var iparse = function (tpl, 옵션) {
var html = [];
var js = [];
vargingag = options.opentag ||.
var closetag = 옵션 .Closetag ||.
// 브라우저의 다른 접합 문자열 전략 채택에 따라
var는 = isneweengine을 대체합니다
"var out = ', line = 1;", ";";
: "var out = [], line = 1;", ",", ")"out.push (html [ ","); 가입하다 (''); "];;
// 기능 본체
var body = 대체 [0];
iforeach (tpl.split (opentag), 함수 (val, i) {{
if (! val)
반품;
}
var parts = 값 (옷장);
var head = 부품 [0];
var foot = 부품 [1];
var len = parts.length;
// html
if (len === 1) {
Body + = 대체 [3] + html.length + 대체 [4];
html.push (헤드);
} 또 다른 {
if (머리) {
// 코드
// 공간을 제거합니다
머리 = 머리
.replace (/^/s+|/s+$/g, '')
.replace (/[/n/r]+/s*/, '')
// 출력 문
ifad.indexof ( '=') === 0) {{
head = head.substring (1) .ruplace (/^[/s]+| [/s;]+$/g, '');
Body + = 대체 [1] + 헤드 + [2];
} 또 다른 {
몸 += 머리;
}
body += 'line += 1;';
js.push (머리);
}
// html
if (foot) {
_foot = foot.replace (/^[/n/r]+/s*/g, '');
if (! _foot) {
반품;
}
Body + = 대체 [3] + html.length + 대체 [4];
html.push (발);
}
}
});
body = "var render = function (data) {ice.mix (this, data); try {" "
+ 몸
+ 대체 [5]
+ "} catch (e) {ice.log ( 'rend error :', line, 'line'); ic.log ( '잘못된 문 :', js [line-1]);
+ "var proto = render.prototype = iextend (ihelper);"
+ "Ice.Mix (프로토, 옵션);"
+ "return function (data) {return new render (data) .result;};";;;;;;;;;;;;;
var render = new 함수 ( 'html', 'js', 'iextend', 'ihelper', '옵션', 본문);
반환 렌더 (HTML, JS, IEXTEND, IHELPER, 옵션);
};
ice.log = function () {{
if (console의 typeof === 'underfined') {{
반품;
}
var args = array.prototype.slice.call (인수);
console.log.apply && console.log.apply (콘솔, args);
};
// 객체를 병합합니다
ice.mix = 함수 (대상, 소스) {
for (소스의 var 키) {
if (source.hasownproperty (key)) {
대상 [키] = 소스 [키];
}
}
};
// 등록 기능
ice.on = 함수 (이름, fn) {
IHELPER [이름] = fn;
};
// 캐시를 지 웁니다
Ice.ClearCache = function () {
icache = {};
};
// 구성을 변경합니다
ice.set = 함수 (이름, 값) {
iConfig [name] = value;
};
// 노출 인터페이스
ifof module! == 'undefined'&& module.exports) {
module.exports = 템플릿;
} 또 다른 {
win.ice = 얼음;
}
}) (창문);