art-template 模版引擎

art-template 模版引擎

概述

  • art-template 是一个简约、超快的模板引擎
  • 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器

官方文档

下载

在文档中下载并保存template-web.js

在这里插入图片描述

使用

基本使用

art-template 支持标准语法与原始语法。标准语法可以让模板易读写,而原始语法拥有强大的逻辑表达能力。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>art-template</title>
    <script src="./template-web.js"></script>
  </head>
  <body>
    <div id="container1"></div>
    <div id="container2"></div>

    <script type="text/html" id="t-normal">
      <h1>标准语法</h1>
      <p>姓名:{{name}} 年龄:{{age}} 性别:{{sex?"男":"女"}}</p>
      <div>
        是否转义:
        <p>{{hello}} {{@ hello }}</p>
      </div>
      <div>
        <label>条件:</label>
        {{ if score<60 }} 
        不及格 
        {{ else if score <80 }}
        及格 
        {{ else }} 
        优秀
        {{/if}}
      </div>
      <div>
        <label>循环:</label>
        {{each address}} {{$index}} {{$value}} {{/each}}
      </div>
    </script>

    <script type="text/html" id="t-original">
      <h1>原始语法</h1>
      <p>姓名:<%= name %> 年龄:<%= age %> 性别:<%= sex?"男":"女" %></p>
      <div>
        是否转义:
        <p><%= hello %> <%- hello%></p>
      </div>
      <div>
        <label>条件:</label>
        <% if(score<60){ %>
            不及格
        <% } else if(score<80){ %>
            及格
        <% } else {%>
            优秀
        <% } %>
      </div>
      <div>
        <label>循环:</label>
        <% for(let i=0;i<address.length;i++){ %>
            <%= i %> <%= address[i] %>
        <% } %>
      </div>
    </script>
    <script>
      const content1 = document.querySelector("#container1");
      const content2 = document.querySelector("#container2");

      let user = {
        name: "小明",
        age: 18,
        sex: true,
        hello: "<span style='color:red;'>hello<span>",
        score: 88,
        address: ["广东省", "广州市", "黄埔区"],
      };

      // 渲染HTML结构
      content1.innerHTML = template("t-normal", user);
      content2.innerHTML = template("t-original", user);
    </script>
  </body>
</html>

在这里插入图片描述

使用子模版

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
    <script id="my-template" type="text/html">
      {{include "header"}}
      <p>hello world</p>
      {{include "footer"}}
    </script>
    <script id="header" type="text/html">
      公共头部
    </script>
    <script id="footer" type="text/html">
      公共底部
    </script>
    <script>
      let container = document.getElementById("container");
      container.innerHTML = template("my-template", {});
    </script>
  </body>
</html>

在这里插入图片描述

子模板传参

原始语法:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
    <script id="my-template" type="text/html">
      <% include("header",{data:"abc"}) %>
      <p>hello world</p>
      <% include("footer",{data:"123"}) %>
    </script>
    <script id="header" type="text/html">
      公共头部 {{data}}
    </script>
    <script id="footer" type="text/html">
      公共底部 {{data}}
    </script>
    <script>
      let container = document.getElementById("container");
      container.innerHTML = template("my-template", {});
    </script>
  </body>
</html>

在这里插入图片描述

webpack中使用art-template

安装

npm install -D art-template-loader@1.4.3
npm install art-template@4.13.2

配置package.json

{
  "name": "use_art-template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "art-template-loader": "^1.4.3",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "art-template": "^4.13.2"
  }
}

配置webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

// 获取绝对路径
const resolve = (dir) => path.resolve(__dirname, dir);

module.exports = {
  mode: "development",
  // Webpack 入口文件
  entry: {
    index: "./src/index.js",
    list: "./src/list.js",
  },
  // Webpack 输出路径
  output: {
    // 输出的目录
    path: resolve("dist"),
    // 输出的文件名
    filename: "js/[name].js",
  },
  // source-map,调试用的,出错的时候,将直接定位到原始代码,而不是转换后的代码
  devtool: "cheap-module-eval-source-map",
  // 不同类型模块的处理规则
  module: {
    rules: [
      // 模板文件
      {
        test: /\.art$/,
        loader: "art-template-loader",
      },
    ],
  },
  plugins: [
    // 自动将依赖注入 html 模板,并输出最终的 html 文件到目标文件夹
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      chunks: ["index"],
    }),
    new HtmlWebpackPlugin({
      template: "./src/list.art",
      filename: "list.html",
      chunks: ["list"],
    }),
  ],
};

编写源代码

新建common/header.art文件:

<header>公共头部:{{data}}</header>

新建common/footer.art文件:

<footer>公共底部:{{data}}</footer>

新建index.art文件:

<% include("./common/header.art",{data:"index头部"}) %>
<p>index页面</p>
<% include("./common/footer.art",{data:"index底部"}) %>
data: {{ data }}

新建index.html文件:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>index</title>
  </head>
  <body>
    <div id="content"></div>
  </body>
</html>

新建index.js文件:

import render from "./index.art";
console.log("index.js");
let html = render({ data: "hello world" });
console.log(html);
let content = document.querySelector("#content");
content.innerHTML = html;

新建list.art文件:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>list</title>
  </head>
  <body>
     <%  include("./common/header.art",{data:"list头部"}) %>
     <p>list页面</p>
     <%  include("./common/footer.art",{data:"list底部"}) %>
  </body>
</html>

新建list.js文件:

console.log("list.js");

打包

执行命令:

npm run webpack

打包完成后如下:

在这里插入图片描述

打开index.html

在这里插入图片描述

打开list.html

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值