116. 만들어보자.
// 어떤 서버에서 데이터를 받아왔다고 가정하면,
requestAjax(function (data) {
// data = { who: ‘택배’, when: ‘도착’ };
// 데이터를 받아서 HTML 코드를 생성한 후에
// DOM에 추가하면 땡!
});
118. 간단하게!
// 어떤 서버에서 데이터를 받아왔다고 가정하면,
requestAjax(function (data) {
// data = { who: ‘택배’, when: ‘도착’ };
// 데이터를 받아서 HTML 코드를 생성한 후에
var result = getPpopo(data);
// DOM에 추가하면 땡!
$(‘#result’).html(result);
});
function getPpopo(data) {
return data.who + ‘가 ‘ + data.when + ‘할 때 뽀뽀뽀~’;
}
126. 듯.
var tmplStr = ‘{who}가 {when}할 때 뽀뽀뽀~’;
var result = replaceTemplate(tmplStr, data);
$(‘#result’).html(result);
function replaceTemplate(tmplStr, data){
var result = tmplStr;
for (var key in data) [
result = result.replace(‘{‘ + key + ‘}’, data[key]);
}
return result;
}
128. 많아진다면?
var tmplStr = ‘{who}가 {when}할 때 뽀뽀뽀~’;
var tmplFoo = ‘...’;
var tmplBar = ‘...’;
...
var tmplBaz = ‘...’;
실제 코드보다 템플릿이 더 많아지는 상황.
템플릿을 코드에서 분리하자!
161. 불러오자.
[ppopo.tmpl]
{who}가 {when}할 때 뽀뽀뽀~
[main.js]
loadTemplate(‘ppopo.tmpl’, function (tmplStr) {
var result = replaceTemplate(tmplStr, data);
$(‘#result’).html(result);
});
function loadTemplate(filename, callback) {
requestAjax(filename, callback);
}
// 비동기이기 때문에 주의해야 함.
165. 요청한다면?
loadTemplate(‘ppopo.tmpl’, function () { ... });
loadTemplate(‘ppopo.tmpl’, function () { ... });
loadTemplate(‘ppopo.tmpl’, function () { ... });
Ajax로 템플릿을 가져오는 비용은 매우 크다.
DOM에서 가져오는 것도 마찬가지!
210. 가만...
매번 문자열을 치환하고 있었는데...
function replaceTemplate(tmplStr, data) {
var result = tmplStr;
for (var key in data) {
result = result.replace(‘{‘ + key + ‘}’, data[key]);
}
return result;
}
치환 비용을 줄일 순 없을까?
212. 만들어버리자.
// 템플릿을 함수로 만든다. (컴파일)
var compiledPpopo = compileTemplate(tmplStr);
// 이후로는 컴파일 한 함수를 호출
var result = compiledPpopo(data);
$(‘#result’).html(data);
214. 컴파일.
function compileTemplate(tmplStr) {
// 템플릿을 파싱해 아래 형태의 함수를 리턴한다.
// function (data) {
// return data.who + ‘가 ‘ + data.when + ‘ 할 때 뽀뽀뽀~’;
// }
return function (data) { ... }
}
매번 템플릿을 치환하는 비용을 줄일 수 있다.
218. 컴파일하면?
빌드 과정에서 미리 컴파일한다.
프리 컴파일 결과로 함수 문자열을 생성해 내려주면,
클라이언트에서의 컴파일 비용을 줄일 수 있다.
[ ppopo.tmpl, foo.tmpl, bar.tmpl, ..., baz.tmpl ]
--(컴파일)-- tmpl.js