ReactivityTemplate 极小的响应式前端模板引擎教程

​

前言

ReactivityTemplate 可以用JS来生成 HTML页面。而且非常小，不到1K。并且支持响应式

安装

npm i reactivity-template

引入

使用esm引入

import compile from 'reactivity-template'

或在html文件中直接引入iife

<script src="./dist/templatejs.iife.js"></script>

使用

一个demo，在id="demo"的div里是模板，然后通过 template.compile 编译

<div id="demo">
    <p>Hello <%= name %></p>
    <% if (!login) { %>
        <p>请登录</p>    
    <% } %>
</div>
<script>
    let demo_template = template.compile('demo')
    document.getElementById('demo').innerHTML = demo_template({
        name:'saobby',
        login:true
    })
</script>

或

import compile from 'reactivity-template'

let demo_template = compile('demo')
document.getElementById('demo').innerHTML = demo_template({
    name: 'saobby',
    login: true
})

template-js 有两种标签，分别是<% %>与 <%= %>

<%= %>: 输出数据到模板

<% %> : 脚本标签，可以执行Js

响应式

有时在数据更改时调用渲染有点麻烦，所以你可以使用响应式让templateJS来监测数据的改变并重新渲染。

只需要在template.compile 里加上 reactive=true 即可使用响应式

<div id="demo">
    <p>Hello <%= name %></p>
    <% if (!login) { %>
        <p>请登录</p>    
    <% } %>
    <%= time %>
</div>
<script>
    let data = {
        name:'saobby',
        login:true,
        time:0,
    }
    data = template.compile('demo',data,reactive=true);

    setInterval(()=>{
        data.time ++
    },1000)
</script>

以上代码的template.compile返回了一个Proxy，当data值改变时重新渲染。

若你想获取整个data值的话请使用data.value。否则请用data.key

若你想要赋值整个data的话请data.value = {...}

但是只想修改它的属性的话可以直接data.key = ...修改。比如上面的代码修改data的time就可以直接data.time ++

项目地址

Nightscratch/reactivity-template-js: Javascript reactive template framework (github.com)

​