# JavaScript Templates
## Demo
[JavaScript Templates Demo](https://blueimp.github.io/JavaScript-Templates/)
## Description
1KB lightweight, fast & powerful JavaScript templating engine with zero
dependencies. Compatible with server-side environments like Node.js, module
loaders like RequireJS, Browserify or webpack and all web browsers.
## Usage
### Client-side
Include the (minified) JavaScript Templates script in your HTML markup:
```html
<script src="js/tmpl.min.js"></script>
```
Add a script section with type **"text/x-tmpl"**, a unique **id** property and
your template definition as content:
```html
<script type="text/x-tmpl" id="tmpl-demo">
<h3>{%=o.title%}</h3>
<p>Released under the
<a href="{%=o.license.url%}">{%=o.license.name%}</a>.</p>
<h4>Features</h4>
<ul>
{% for (var i=0; i<o.features.length; i++) { %}
<li>{%=o.features[i]%}</li>
{% } %}
</ul>
</script>
```
**"o"** (the lowercase letter) is a reference to the data parameter of the
template function (see the API section on how to modify this identifier).
In your application code, create a JavaScript object to use as data for the
template:
```js
var data = {
"title": "JavaScript Templates",
"license": {
"name": "MIT license",
"url": "https://opensource.org/licenses/MIT"
},
"features": [
"lightweight & fast",
"powerful",
"zero dependencies"
]
};
```
In a real application, this data could be the result of retrieving a
[JSON](http://json.org/) resource.
Render the result by calling the **tmpl()** method with the id of the template
and the data object as arguments:
```js
document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);
```
### Server-side
The following is an example how to use the JavaScript Templates engine on the
server-side with [node.js](http://nodejs.org/).
Create a new directory and add the **tmpl.js** file. Or alternatively, install
the **blueimp-tmpl** package with [npm](https://www.npmjs.org/):
```sh
npm install blueimp-tmpl
```
Add a file **template.html** with the following content:
```html
<!DOCTYPE HTML>
<title>{%=o.title%}</title>
<h3><a href="{%=o.url%}">{%=o.title%}</a></h3>
<h4>Features</h4>
<ul>
{% for (var i=0; i<o.features.length; i++) { %}
<li>{%=o.features[i]%}</li>
{% } %}
</ul>
```
Add a file **server.js** with the following content:
```js
require("http").createServer(function (req, res) {
var fs = require("fs"),
// The tmpl module exports the tmpl() function:
tmpl = require("./tmpl"),
// Use the following version if you installed the package with npm:
// tmpl = require("blueimp-tmpl"),
// Sample data:
data = {
"title": "JavaScript Templates",
"url": "https://github.com/blueimp/JavaScript-Templates",
"features": [
"lightweight & fast",
"powerful",
"zero dependencies"
]
};
// Override the template loading method:
tmpl.load = function (id) {
var filename = id + ".html";
console.log("Loading " + filename);
return fs.readFileSync(filename, "utf8");
};
res.writeHead(200, {"Content-Type": "text/x-tmpl"});
// Render the content:
res.end(tmpl("template", data));
}).listen(8080, "localhost");
console.log("Server running at http://localhost:8080/");
```
Run the application with the following command:
```sh
node server.js
```
## Requirements
The JavaScript Templates script has zero dependencies.
## API
### tmpl() function
The **tmpl()** function is added to the global **window** object and can be
called as global function:
```js
var result = tmpl("tmpl-demo", data);
```
The **tmpl()** function can be called with the id of a template, or with a
template string:
```js
var result = tmpl("<h3>{%=o.title%}</h3>", data);
```
If called without second argument, **tmpl()** returns a reusable template
function:
```js
var func = tmpl("<h3>{%=o.title%}</h3>");
document.getElementById("result").innerHTML = func(data);
```
### Templates cache
Templates loaded by id are cached in the map **tmpl.cache**:
```js
var func = tmpl("tmpl-demo"), // Loads and parses the template
cached = typeof tmpl.cache["tmpl-demo"] === "function", // true
result = tmpl("tmpl-demo", data); // Uses cached template function
tmpl.cache["tmpl-demo"] = null;
result = tmpl("tmpl-demo", data); // Loads and parses the template again
```
### Output encoding
The method **tmpl.encode** is used to escape HTML special characters in the
template output:
```js
var output = tmpl.encode("<>&\"'\x00"); // Renders "<>&"'"
```
**tmpl.encode** makes use of the regular expression **tmpl.encReg** and the
encoding map **tmpl.encMap** to match and replace special characters, which can
be modified to change the behavior of the output encoding.
Strings matched by the regular expression, but not found in the encoding map are
removed from the output. This allows for example to automatically trim input
values (removing whitespace from the start and end of the string):
```js
tmpl.encReg = /(^\s+)|(\s+$)|[<>&"'\x00]/g;
var output = tmpl.encode(" Banana! "); // Renders "Banana" (without whitespace)
```
### Local helper variables
The local variables available inside the templates are the following:
* **o**: The data object given as parameter to the template function
(see the next section on how to modify the parameter name).
* **tmpl**: A reference to the **tmpl** function object.
* **_s**: The string for the rendered result content.
* **_e**: A reference to the **tmpl.encode** method.
* **print**: Helper function to add content to the rendered result string.
* **include**: Helper function to include the return value of a different
template in the result.
To introduce additional local helper variables, the string **tmpl.helper** can
be extended. The following adds a convenience function for *console.log* and a
streaming function, that streams the template rendering result back to the
callback argument
(note the comma at the beginning of each variable declaration):
```js
tmpl.helper += ",log=function(){console.log.apply(console, arguments)}" +
",st='',stream=function(cb){var l=st.length;st=_s;cb( _s.slice(l));}";
```
Those new helper functions could be used to stream the template contents to the
console output:
```html
<script type="text/x-tmpl" id="tmpl-demo">
<h3>{%=o.title%}</h3>
{% stream(log); %}
<p>Released under the
<a href="{%=o.license.url%}">{%=o.license.name%}</a>.</p>
{% stream(log); %}
<h4>Features</h4>
<ul>
{% stream(log); %}
{% for (var i=0; i<o.features.length; i++) { %}
<li>{%=o.features[i]%}</li>
{% stream(log); %}
{% } %}
</ul>
{% stream(log); %}
</script>
```
### Template function argument
The generated template functions accept one argument, which is the data object
given to the **tmpl(id, data)** function. This argument is available inside the
template definitions as parameter **o** (the lowercase letter).
The argument name can be modified by overriding **tmpl.arg**:
```js
tmpl.arg = "p";
// Renders "<h3>JavaScript Templates</h3>":
var result = tmpl("<h3>{%=p.title%}</h3>", {title: "JavaScript Templates"});
```
### Template parsing
The template contents are matched and replaced using the regular expression
**tmpl.regexp** and the replacement function **tmpl.func**.
The replacement function operates based on the
[parenthesized submatch strings](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter).
To use different tags for the template syntax, override **tmpl.regexp** with a
modified regular expression, by exchanging all occurrences of "{%" and "%}",
e.g. with "[%" and "%]":
```js
tmpl.regexp = /([\s'\\])(?!(?:[^[]|\[(?!%))*%\])|(?:\[%(=|#)([\s\S]+?)%\])|(\[%)|(%\])/g;
```
By default, the plugin preserves whitespace
(newlines, carriage returns, tabs and spaces).
To strip unnece
基于JSP+Servlet +SQLServer实现的图书馆管理系统【100012695】
版权申诉
21 浏览量
2023-06-12
11:05:34
上传
评论
收藏 21.92MB ZIP 举报
神仙别闹
- 粉丝: 2671
- 资源: 7640
最新资源
- MyBatis动态SQL是一种强大的特性,它允许我们在SQL语句中根据条件动态地添加或删除某些部分,从而实现更加灵活和高效的数据
- MyBatis动态SQL是一种强大的特性,它允许我们在SQL语句中根据条件动态地添加或删除某些部分,从而实现更加灵活和高效的数据
- 【ERP标准流程-标准流程-进货管理】(DOC 17页).doc
- MyBatis动态SQL是一种强大的特性,它允许我们在SQL语句中根据条件动态地添加或删除某些部分,从而实现更加灵活和高效的数据
- MyBatis动态SQL是一种强大的特性,它允许我们在SQL语句中根据条件动态地添加或删除某些部分,从而实现更加灵活和高效的数据
- Java爬虫项目【项目开发计划】(共12页).docx
- 11111111111
- MyBatis动态SQL是一种强大的特性,它允许我们在SQL语句中根据条件动态地添加或删除某些部分,从而实现更加灵活和高效的数据
- MyBatis动态SQL是一种强大的特性,它允许我们在SQL语句中根据条件动态地添加或删除某些部分,从而实现更加灵活和高效的数据
- MyBatis动态SQL是一种强大的特性,它允许我们在SQL语句中根据条件动态地添加或删除某些部分,从而实现更加灵活和高效的数据
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈