Первоначально я хотел поделиться выпуском ранее анализа исходного кода ArtTemplate, но через год я не смог его найти, поэтому мне пришлось попробовать принцип анализа шаблона двигателя в то время.
Двигатель письменного шаблона поделился с вами, оставляя мемориал, вспоминая, что в то время было несколько шаблонных двигателей.
В упомянутом здесь двигателе JS JS используется нативный синтаксис JavaScript, поэтому он похож на нативный шаблонный двигатель PHP.
Роль шаблон -двигателя переднего монтажа?
1. Это может облегчить разработку переднего фронта. или один шаблонный файл
2. Это легко поддерживать и уменьшить связь.
3. Вы можете кэш. Когда дело доходит до файла .tpl, вы можете сделать не только кэш, вы также можете быть загрузчиком модуля
Используйте .tpl в качестве модуля, тогда вы можете загрузить файлы по требованию.
4. Подождите
Принцип переднего шаблона двигателя?
Принцип очень прост, что шаблон объекта (Data) + (включая переменные) -> String (html)
Как достичь переднего шаблонного двигателя?
Спонировав шаблон, в соответствии с методом слова, шаблон преобразуется в функцию, а затем вызывается функция, и объект (данные) передается, и выходная строка (HTML)
(Конечно, конкретные зависит от кода)
Это так:
Код кода копирования следующим образом:
Var tpl = 'i am <%= name%>, <%= age => лет';
var obj = {
Имя: 'Lovesueee',
Возраст: 24
};
var fn = Engine.compile (tpl);
var str = fn (obj); // рендеринг строки
пример:
Код кода копирования следующим образом:
<!
<html>
<голова>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<Название> Ледяная демонстрация </title>
<script src = "/javascripts/jquery/jquery-1.7.2.js"> </script>
<script src = "/javascripts/ice/ice.js"> </script>
<тело>
<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 ;; %> </td> < %= tr.age;
</tr>
< %} %>
< %} %>
</table>
<img src = "< %= this.href %>">
< %= this.include ('tpl2', это);
</script>
<script type = "text/html" id = "tpl2">
<div> Вот результат рендеринга: </div>
<% = this.print ('Welcom to 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 ;; %> </td> < %= tr.age;
</tr>
< %} %>
< %} %>
</table>
<img src = "< %= this.href %>">
</script>
<Скрипт>
var test = [
{имя: "невидимый убийца", возраст: 29, секс: "мужчина"},
{имя: "Сора", возраст: 22, пол: "мужчины"},
{name: "fesyo", возраст: 23, пол: "Женщина"},
{Имя: «Любовь Бо», возраст: 18, секс: "мужчина"},
{name: "izaki", возраст: 25, секс: "мужчины"},
{name: «Вы не понимаете», возраст: 30, пол: «Женщины»}
]
// var html = ice ("tpl", {
// trs: trs,
// href: "http://images.vevb.com/type4.jpg"
//}, {
// title: function () {{
// return "<p> Это вывод кода с использованием view helper </p>" "
//}
//});
var elem = document.getElementbyId ('tpl');
var tpl = elem.innerhtml;
var html = ice (tpl, {
TRS: TRS,
href: "http://images.vevb.com/type4.jpg"
}, {
Название: function () {
Возврат "<p> Это код, который использует код из View Helper </p>" ""
}
});
console.log (html);
$ ("#Content").
</script>
</html>
Простая реализация:
Код кода копирования следующим образом:
(Function (win) {
// Функция маршрутизации двигателя шаблона
var ice = function (id, content) {
Вернуть лед [
TypeOF Content === 'Object'?
] .apply (ICE, Arguments);
};
Ice.version = '1.0.0';
// Конфигурация шаблона
var iconfig = {
Opentag: '<%',
Шкаф: '%>'
};
var isnewengine = !!
// шаблонный кеш
var Icache = icaCh.cache = {};
// вспомогательная функция
var iHelper = {
Включите: function (id, data) {
Вернуть Irender (id, data);
},
Print: function (str) {
Вернуть Str;
}
};
// Прототип наследования
var iextend = object.create || function (Object) {{
Функция fn () {};
Fn.prototype = object;
Вернуть новый FN;
};
// Шаблонный сборник
var iCompile = ice.compile = function (id, tpl, options) {
var cache = null;
id && (cache = icache [id]);
if (cache) {
Вернуть кэш;
}
// [id |.
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, options);
id && (icache [id] = render);
Возврат рендеринга;
};
// шаблон рендеринг
var Irender = ice.rener = function (id, data, options) {
Вернуть iCompile (id, options) (data);
};
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, options) {
var html = [];
var js = [];
vargingag = options.opentag || iconfig ['opentag'];
var closeTag = опции.
// В зависимости от браузера различные стратегии сплайсинга строк
var заменяет = isneweengine
?
: [var out = [], line = 1; "," out.push (",", ");" out.push (html [",", ");" Присоединиться (''); "];;
// Функциональное тело
var body = заменяет [0];
iforeach (tpl.split (opentag), function (val, i) {{{{
if (! val)
Возвращаться;
}
var parts = value (щит);
var head = parts [0];
var foot = части [1];
var len = parts.length;
// html
if (len === 1) {
Тело + = заменяет [3] + html.length + заменяет [4];
html.push (голова);
} Еще {
if (head) {
// код
// Удалить пространство
Голова = голова
.replace (/^/s+|/s+$/g, '')
.replace (/[/n/r]+/s*/, '')
// Вывод оператора
ifad.indexof ('=') === 0) {{{
Head = Head.Substring (1) .Ruplace (/^[/s]+| [/s;]+$/g, '');
Тело + = заменяет [1] + головка + заменяет [2];
} Еще {
тело += голова;
}
тело += 'line += 1;';
Js.push (голова);
}
// html
if (foot) {
_foot = foot.replace (/^[/n/r]+/s*/g, '');
if (! _foot) {
Возвращаться;
}
Тело + = заменяет [3] + html.length + заменяет [4];
html.push (foot);
}
}
});
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 (proto, опции);"
+ "Return Function (data) {Return New Render (data) .Result;};";;;;;;;;
var render = новая функция ('html', 'js', 'iextend', 'ihelper', 'options', body);
Return render (html, JS, iextend, iHelper, Options);
};
ice.log = function () {{
if (typeof console === 'недооценивается') {{
Возвращаться;
}
var args = array.prototype.slice.call (аргументы);
console.log.apply && console.log.apply (console, args);
};
// Объединение объекта
ice.mix = function (target, source) {
для (var key in source) {
if (source.hasownproperty (key)) {
target [key] = source [key];
}
}
};
// Функция регистрации
ice.on = function (имя, fn) {
IHelper [name] = fn;
};
// очистить кеш
ice.clearcache = function () {
icache = {};
};
// Измените конфигурацию
ice.set = function (name, value) {
iconfig [name] = value;
};
// интерфейс экспозиции
module!
module.exports = шаблон;
} Еще {
win.ice = ICE;
}
}) (Окно);