高性能前端 art-template 模板

時間  2019-11-24
標籤 高性能 前端 art template 模板 简体版
原文   原文鏈接

高性能前端 art-template 模板

官網： https://aui.github.io/art-template/zh-cn/index.htmljavascript

nodejs 服務器端使用

第一步： 引入 art-template 的包css

npm install --save art-template npm install --save express-art-template

第二步：項目中設置 express 的應用 art-template 模板引擎html

const art_express = require('express-art-template'); const app = express(); // 建立app對象。 // 設置art的模板引擎 app.engine('art', art_express); app.get('/user/list', (req, res) => { res.render('users/userlist2.art', { title: '你好啊！', users: userService.getUsers() }); });

核心方法

// 基於模板名渲染模板 template(filename, data); // 將模板源代碼編譯成函數 template.compile(source, options); // 將模板源代碼編譯成函數並馬上執行 template.render(source, data, options);

瀏覽器端使用

下載：lib/template-web.js（gzip: 6kb）前端

由於瀏覽器不支持文件系統，因此 template(filename, data) 不支持傳入文件路徑，它內部使用 document.getElementById(filename).innerHTML 來獲取模板，例如：java

<script src="lib/template-web.js"></script> <script id="tpl-user" type="text/html"> {{if user}} <h2>{{user.name}}</h2> {{/if}} </script>

兼容到 IE8 的實例：node

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>IE</title> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>--> <script src="es5-shim.min.js"></script> <script src="es5-sham.min.js"></script> <script src="json3.min.js"></script> <script src="../../lib/template-web.js"></script> </head> <body> <div id="content"></div> <script id="test" type="text/html"> {{if isAdmin}} <h1>{{title}}</h1> <ul> {{each list value i}} <li>索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul> {{/if}} {{$data}} </script> <script> var data = { title: '基本例子', isAdmin: true, list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他'] }; var html = template('test', data); document.getElementById('content').innerHTML = html; </script> </body> </html>

基本語法

輸出

  • 輸出標準語法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
  • 原始語法
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

模板一級特殊變量可使用 $data 加下標的方式訪問：jquery

{{$data['user list']}}webpack

原文輸出

  • 原文輸出標準語法

{{@ value }}git

  • 原始語法

<%- value %>github

原文輸出語句不會對 HTML 內容進行轉義處理，可能存在安全風險，請謹慎使用。

條件語法

  • 條件標準語法
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
  • 原始語法
<% if (value) { %> ... <% } %> <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

循環

  • 循環標準語法
{{each target}}
{{$index}} {{$value}}
{{/each}}
  • 原始語法
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>

target 支持 array 與 object 的迭代，其默認值爲 $data。 $value 與 $index 能夠自定義：{{each target val key}}。變量標準語法

{{set temp = data.sub.content}} 原始語法

<% var temp = data.sub.content; %>

模板繼承

  • 模板繼承標準語法
{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}
  • 原始語法
<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>

模板繼承容許你構建一個包含你站點共同元素的基本模板「骨架」。範例：

<!--layout.art--> <!doctype html> <html> <head> <meta charset="utf-8"> <title>{{block 'title'}}My Site{{/block}}</title> {{block 'head'}} <link rel="stylesheet" href="main.css"> {{/block}} </head> <body> {{block 'content'}}{{/block}} </body> </html> <!--index.art--> {{extend './layout.art'}} {{block 'title'}}{{title}}{{/block}} {{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}} {{block 'content'}} <p>This is just an awesome page.</p> {{/block}}

渲染 index.art 後，將自動應用佈局骨架。

子模板

  • 子模板標準語法
{{include './header.art'}}
{{include './header.art' data}}
  • 原始語法
<% include('./header.art') %>
<% include('./header.art', data) %>

data 數默認值爲 $data；標準語法不支持聲明 object 與 array，只支持引用變量，而原始語法不受限制。 art-template 內建 HTML 壓縮器，請避免書寫 HTML 非正常閉合的子模板，不然開啓壓縮後標籤可能會被意外「優化。過濾器註冊過濾器

template.defaults.imports.dateFormat = function(date, format){/_[code..]_/}; template.defaults.imports.timestamp = function(value){return value \* 1000};

過濾器函數

過濾器函數第一個參數接受目標值。

  • 標準語法
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}
{{value | filter}} 過濾器語法相似管道操做符，它的上一個輸出做爲下一個輸入。
  • 原始語法
<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>

配合 gulp 自動化預編譯

前端使用art-template的時候很是不方便，不能把模板拆成單獨的模板文件，TmodJS（原名 atc)能夠把模板預編譯成 js，直接解放了生產力。 固然若是你用 webpack，天然有對應的 loader。可是咱們此次要講的是 gulp。

對應 gulp 的插件：gulp-tmod

安裝 gulp-tmod

$ npm install gulp-tmod --save-dev

配置 gulpfile.js 文件

const tmodjs = require('gulp-tmod'); gulp.task('tpl', function() { gulp .src('src/template/**/*.html') // 找到全部的html模板 .pipe( tmodjs({ templateBase: 'src/template/', // 模板根目錄 runtime: 'tpl.js', // 輸出的js文件 compress: false // 是否壓縮 }) ) // 自動生成的模板文件，進行babel轉換，會報錯，此轉換插件已經停更，因此間接改這個bug // 參考bug：https://github.com/aui/tmodjs/issues/112 主要是this → window .pipe(replace('var String = this.String;', 'var String = window.String;')) .pipe(gulp.dest('src/js/tmpl/')); });

使用選項設置：

  • output Default: false

We use gulp steam other than tmodjs output, so set it to false prevent tmodjs create files.

  • runtime Type: String

Default: template.js

This will be use as a path pass to gulp-util File

  • templateBase Default: __dirname

Your template basepath.

  • minify Minify is deprecated, we should use gulp-uglify

若是想把不一樣的模板文件夾生成不一樣的 js 文件，那麼下面的例子：

const tmodjs = require('gulp-tmod'); gulp.task('tpl', function() { // 拿到全部的路徑 let basePath = path.join(__dirname, 'src/template'); let files = fs.readdirSync(basePath); files.forEach((val, index) => { let dirPath = path.join(basePath, val); let stat = fs.statSync(dirPath); if (!stat.isDirectory()) { // 判斷是不是文件夾 return; } var fileter = 'src/template/' + val + '/**/*.html'; console.log(fileter); gulp .src('src/template/' + val + '/**/*.html') .pipe( tmodjs({ templateBase: 'src/template/' + val, runtime: val + '.js', compress: false }) ) // 自動生成的模板文件，進行babel轉換，會報錯，此轉換插件已經停更，因此間接改這個bug // 參考bug：https://github.com/aui/tmodjs/issues/112 主要是this → window .pipe(replace('var String = this.String;', 'var String = window.String;')) .pipe(gulp.dest('src/js/tmpl/')); }); });

artt

配合 require.js

/* * @Author: malun * @Date: 2018-04-18 01:14:20 * @Last Modified by: malun * @Last Modified time: 2018-06-11 19:57:24 */ require(['template', 'jquery', 'js/tmpl/user', 'js/tmpl/header'], function( template, $, userTpl, headTpl ) { document.getElementById('dt').innerHTML = headTpl('header', data); $.ajax({ url: '/api/shoplist', type: 'GET', success: function(data) { document.getElementById('dt2').innerHTML = userTpl('footer', data); } }); });
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程