С разработкой Интернета, фронтальные приложения становятся все более и более сложными, а также начался javaScript на основе конец (node.js). В настоящее время JavaScript был размещен с большими ожиданиями. В то же время идеи JavaScript MVC также стали популярными. Как наиболее важная часть разделения данных и интерфейсов, шаблонный двигатель JavaScript привлекает все больше и больше внимания разработчиков. В прошлом году он расцвел в сообществе с открытым исходным кодом. Их можно увидеть на крупных сайтах, таких как Twitter, Taobao, Sina Weibo, Tencent QQ Space и Tencent Weibo.
В этой статье будет использован самый простой пример кода для описания принципов существующего шаблонного двигателя JavaScript, включая принципы реализации характеристик нового поколения шаблона JavaScript Arttemplate. Добро пожаловать, чтобы обсудить их вместе.
ArtTemplate Введение
Arttemplate - это новое поколение шаблон -двигателя JavaScript. Он использует предварительную комплектацию, чтобы сделать качественный скачок в производительности и в полной мере использовать функции двигателя JavaScript, что делает его производительность чрезвычайно выдающейся как на переднем, так и на заднем плане. В тесте на эффективность рендеринга под Chrome он в 25 и 32 раза больше, чем у хорошо известных усов двигателей и Micro TMPL.
В дополнение к преимуществам производительности, также стоит упомянуть функции отладки. Отладчик шаблона может точно найти оператор шаблона, который запускает ошибки рендеринга, решает боль непреднамеренной отладки во время написания шаблонов, повышает развитие и избегает всего сбоя приложения из -за ошибок в одном шаблоне.
ArtTemplate Это все реализовано в 1,7 КБ (GZIP)!
Основы двигателя шаблона JavaScript
Хотя каждый двигатель имеет разные методы реализации из синтаксиса шаблона, синтаксис -анализа, назначения переменных и сплайсинга строки, принцип рендеринга ключа по -прежнему предназначен для динамического выполнения строк JavaScript.
Что касается динамического выполнения строк JavaScript, в этой статье используется часть шаблона кода в качестве примера:
Это очень простое написание шаблонов, где «» - это шкаф (логическое заявление закрыто). Если за Opentag следует "=", содержание переменной будет выходить.
Операторы HTML и выходные операторы переменных выводятся непосредственно, а строки проанализированных схожи:
После того, как анализ синтаксиса завершен, метод рендеринга обычно будет возвращен:
Тест на рендеринг:
В приведенном выше методе рендеринга назначение переменных шаблонов использует оператор с оператором, а струнный сплайсинг использует метод Push массивов для повышения производительности в IE6 и 7. TMPL Micro Template Engine, разработанный автором jQuery John-типичный представитель этого метода, см.
Из принципиального реализации можно увидеть, что две проблемы, которые необходимо решить, остаются в традиционном двигателе шаблона JavaScript:
1. Производительность: при рендеринге шаблон -двигателя он полагается на конструктор функции для его реализации. Как и Eval, Settimeout и SetInterval, функция предоставляет метод для доступа к двигателю диавазона JavaScript с использованием текста, но производительность выполнения JavaScript таким образом очень низкая.
2. Отладка: поскольку это динамическая строка выполнения, если отладчик сталкивается с ошибкой, отладчик не может поймать источник ошибки, что приводит к тому, что отладка ошибки шаблона станет чрезвычайно болезненной. В двигателе, который не выполняет устойчивость к неисправности, если локальные шаблоны могут даже привести к сбою всего приложения из -за исключений данных, стоимость технического обслуживания резко возрастет по мере увеличения количества шаблонов.
ArtTemplate Секрет эффективного
1. Предварительно скомпилирован
В приведенном вышеупомянутом принципе реализации механизма шаблона, поскольку присваивается переменная шаблона, каждый рендеринг требует динамического компиляции строк JavaScript для завершения назначения переменной. Тем не менее, процесс компиляции и назначения ArtTemplate завершен до рендеринга, который называется «предварительным комплементам». Компилятор шаблона ArtTemplate извлечет все переменные шаблона в соответствии с некоторыми простыми правилами и объявляет их в главе функции рендеринга. Эта функция похожа на:
Эта автоматически сгенерированная функция похожа на написанную рукописную функцию JavaScript. С одинаковым количеством выполнения, использование ЦП и памяти было значительно сокращено, и производительность почти на пределе.
Стоит отметить, что многие функции ArtTemplate основаны на предварительно скомпилированных реализациях, таких как спецификации песочницы и индивидуальный синтаксис.
2. Более быстрый метод добавления строки
Многие люди по ошибке думают, что метод толчка массива будет размывать струны быстрее, чем +=. Вы должны знать, что это только в браузере IE6-8. Фактические измерения показывают, что современные браузеры используют += для использования метода толчка массива, в то время как в двигателе V8 с использованием метода += в 4,7 раза быстрее, чем сплайсинг массива. Поэтому ArtTemplate принимает два разных метода сплайсинга струн в соответствии с характеристиками двигателя JavaScript.
Принцип режима отладки ArtTemplate
Передний шаблонный двигатель не похож на шаблонный двигатель. Это динамический анализ, поэтому отладчик не может найти неправильный номер строки. ArtTemplate Cleverly позволяет отладчику шаблона точно определять указание шаблона, которое выбрасывает ошибки рендеринга, например:
ArtTemplate поддерживает два типа захвата ошибок, один из них - ошибка рендеринга (ошибка рендеринга) и ошибка компиляции (ошибка синтаксиса).
1. Ошибка рендеринга
Ошибки рендеринга обычно вызваны ошибками данных шаблона или ошибками переменных. При рендеринге они войдут в режим отладки, чтобы перекомпилировать шаблон, не влияя на нормальную эффективность выполнения шаблона. Шаблон компилятор записывает номера строк на основе разрыва линии шаблона, а компилированная функция аналогична:
Когда возникает ошибка во время процесса выполнения, номер строки, соответствующий шаблону исключения, немедленно выбрасывается, а затем отладчик шаблона проверяет соответствующие операторы, соответствующие шаблону в соответствии с номером строки, и печатает его на консоли.
2. ошибки компиляции
Ошибки компиляции, как правило, представляют собой ошибки синтаксиса шаблонов, такие как неквалифицированное гнездование, неизвестный синтаксис и т. Д. Поскольку ArtTemplate не проводит полный лексический анализ, невозможно определить местоположение источника ошибки и может только вывести информацию об ошибке и исходный код для исходного текста для разработчиков.