Shulou(Shulou.com)06/01 Report--

This article mainly explains the "template engine artTemplate and template precompiler what are the knowledge points", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "template engine artTemplate and template precompiler what are the knowledge points" bar!

First, why use the front-end template?

The main purpose is to solve the entanglement between UI layer and business logic. For example, when we need to dynamically generate a table or table-like DOM based on the data returned from the backend (such as ul > li, etc.), according to the traditional way, we need to obtain the data first, and then generate the final DOM in the js of the page by traversing the data, extracting relevant values and dynamically stitching html strings. This leads to the entanglement of UI and business logic. The problem may not be obvious if it is only used occasionally or locally, but if the amount of code is large and the business or data is very complex, the code generated in this way will be very detrimental to later maintenance. This must be something that every developer doesn't want to see. As a result, front-end templates and template engines that process them are created.

II. Introduction to artTemplate and TmodJS

To be exact, artTemplate (hereinafter referred to as aT) is the template engine, while TmodJS (hereinafter referred to as TJ, formerly known as atc) is a template precompiler that depends on the former. Both are developed by Tencent. In fact, aT can be used independently, and the purpose of TJ is to provide an environment for precompiling templates (based on NodeJS and modularization). With TJ,aT, you can store templates by directory and call templates in the specified directory by include (note: include here is different from include in aT, the latter can only refer to different template tags in the same page), automatic monitoring template changes and automatic compilation, dependency management and combination with grunt, it can be said to further enhance the ability of aT. Currently, both aT and TJ are available through npm: npm install arttemplate-g/npm install tmodjs-g.

For more details and DEMO, please see: and

III. Workflow and differences between aT and TJ

The workflow of the two can be roughly divided into two steps: edit the template and render the template. The editing template is to abstract the DOM that needs to be generated dynamically into a template, while rendering is to use the rendering function to fill the data returned by the back end into the corresponding location in the template, generate the final html string and backfill it into the specified location of the html page. Because TJ uses modular loading technology, its template organization, reference and rendering are more complex than simple aT, and there are more internal encapsulation processes, but its essence has not changed fundamentally.

Because aT does not use modularization technology, all you need to use is the engine file that introduces aT into the page. Due to the use of modular technology, TJ needs to introduce the corresponding standard modular loader. Because TJ has merged the engine into the compiled file, there is no need to introduce the engine file separately. Note that with TJ, all templates must be compiled with the tmod command before they can be used properly.

It is precisely because of the lack of modularity, the difference between the two is also reflected in the organizational form and writing mode of the template. In aT, templates are all written in the same html page, but different templates can be written in different tags, and each template is named with id to distinguish it. As mentioned earlier, although aT also supports include statements, it can only contain templates within the same page. Include is invalid if the template is stored in another directory.

In TJ, templates are stored in the form of html files. Include statements can contain template files in different directories. When compiled through tmod, it reads the template files one by one according to the reference relationship in the specified template directory, and encapsulates the template name and contents in the function a (). When all templates are processed in this way, they will encapsulate the above encapsulated functions and engine code and generate a compiled js file. The file will be loaded via require in the future, throwing out the rendering function template () and performing the rendering and generating DOM with the data returned from the back end.

In addition, the two are also different in the way they call rendering. Since aT exists independently, you can simply call template ('ID',data). The invocation of TJ is relatively complex due to modularization:

Require (['compiled js file (without suffix)'], function (template) {

Document.getElementById ('id'). InnerHTML=template ('template entry', data)

})

IV. Concise grammar of aT

AT is divided into two syntax modes: simple and native. The so-called original is that its grammatical expression is more similar to JS grammar. However, individuals prefer the simple model for the reason of simplicity. The original way is only similar, and it is better to have a more simple and direct one than to look like it. Only concise grammar patterns are introduced here.

4.1 if judgment

{{if var}}

/ / some code...

{{/ if}}

4.2 traversing objects

{{each obj}}

/ / some code...

{{/ each}}

Or

{{each obj as value i}}

/ / some code...

{{/ each}}

4.3 call other templates on the page

{{include 'template ID'}}

4.4 rendering templat

Var rendered=template ('ID',data); / / ID is the data returned from the backend of the template ID,data. This call returns the rendered html string.

Var renderFunc=template ('ID'); / / if only template ID is specified, a rendering function is returned

Var renderFunc=template (template variable); / / if the template is stored in a variable and only that variable is specified, a rendering function is returned

4.5 other features

{{print}} / / output variable value

Template.helper (name,callback); / / use custom functions in the template. Accordingly, the template should be written as follows: {{arg1 | dateFormat:arg2}}

Template.config (name,value); / / modify the default configuration of the engine. The settings are as shown in the figure:

5. The use of TJ

After TJ is installed, you can perform the related precompilation work by executing the tmod command. This precompilation is also compiled according to the relevant configuration, which is stored in the package.json in the template directory. The structure of the file is as follows:

{

"name": "template"

"version": "1.0.1"

"dependencies": {

"tmodjs": "1.0.2"

}

"tmodjs-config": {

"output":

"charset": "utf-8"

"syntax": "simple"

"helpers": null

"escape": true

"compress": true

"type": "default"

"runtime": "main.js"

"combo": true

"minify": true

"cache": false

}

}

The main ones used are "tmodjs-config" and its related items:

1.output: the output directory of the compilation result

2.charset: specifies the character encoding used for compilation

3.syntax: indicates the mode used by the engine (simple / native)

4.helpers: auxiliary function

5.escape:bool, whether to escape characters (to prevent XSS attacks)

6.compress:bool, whether to compress the extra white space characters in html

7.type: which standard will be used for modular processing of the template, which can be cmd, amd, commonjs

8.runtime: the name of the js file produced after compilation. Compilation refers to converting the template into modular js code and merging the engine (seed) with the converted template in a js file. It can be understood as the "main entrance"

9.combo:bool, whether to merge templates (available when the type value is default)

10.minify:bool, whether to compress

11.cache:bool, whether to generate the compilation cache directory (version 1.0.2 seems to be invalid)

The above is the configuration written in package.json. When invoking the tmod command, you also need to (can) follow parameters:

Tmod [template directory] [configuration parameters]

1.--debug output debug version

2.--charset value defines template encoding, default utf-8

3.--output value defines the output directory, default

4.--type value defines the format of the output module. Default is default. Optional cmd, amd, commonjs

5.--no-watch turns off template directory monitoring

6.--version displays the version number

7.--help displays help information

The parameters that follow the tmod command automatically override the values of the corresponding attributes in the package.json.

After compilation, we will see a directory called ". Cache" in the output directory of the compilation result, which is the cache file generated during the compilation process. This directory can be deleted without affecting the final use, because its contents have been integrated into the js file specified by "runtime".

Thank you for your reading, the above is the content of "what are the knowledge points of template engine artTemplate and template precompiler". After the study of this article, I believe you have a deeper understanding of what the knowledge points of template engine artTemplate and template precompiler have, and the specific use still needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.