rexjs-template

Rexjs-Template - 是一种具有数据绑定功能的 html 模板解析器

---

下载安装

• npm - npm install rexjs-template

• git - git clone https://github.com/china-liji/Rexjs-Template

• Zip - https://github.com/china-liji/Rexjs-Template/archive/master.zip

---

快速使用

./temp.html

<div onclick="<%= this.onclick %>">
    <span data-key="<%= this.key %>" >
        <% if(this.isRed){ %>
            <p><%= this.red %></p>
        <% }else{ %>
            <p><%= this.blue %></p>
        <% } %>
    </span>
    <br />
    <ul class="my-ul-class">
        <% for(var i = 0;i < 3;i++){ %>
            <li><%= i %></li>
        <% } %>
    </ul>
</div>

JavaScript

// babel 解析 es6 版
import { RexjsTemplate } from "./rexjs-template.min.js";
// Rexjs（https://github.com/china-liji/Rexjs） 解析 es6 版
import { RexjsTemplate } from "./rexjs-template-unhelper.min.js";
// script 标签形式：<script src="./rexjs-template.min.js"></script>
let RexjsTemplate = window.RexjsTemplate;
 
// 加载 html 模板
import temp from "./temp.html";
 
// 初始化数据
let data = {
    isRed: false,
    red: "#f00",
    blue: "#00f",
    key: "hello",
    onclick: function(){
        alert(99999)
    }
};
 
// 编译模板，获取元素
let returnElement = RexjsTemplate.compile(
    // html 模板字符串
    temp,
    // 模板数据
    data,
    // 模板中所关联的选择器映射，只处理模板中的 id 与 class
    { myUlClass: "my-ul-class-gd6" }
);
 
// 添加到 body
document.body.appendChild(returnElement);
 
// 2 秒后修改 data.blue 属性
setTimeout(() => {
    // 修改数据
    data.blue = "#22f";
 
    // 主动刷新数据相关模板
    RexjsTemplate.refresh(data);
}, 2000);

最终渲染结果 - returnElement.outerHTML

<div rex-template>
    <span data-key="hello">
        
            <p>#22f</p>
        
    </span>
    <br>
    <ul class="my-ul-class-gd6">
        
            <li>0</li>
        
            <li>1</li>
        
            <li>2</li>
        
    </ul>
</div>

模板使用说明

• 如何插入 JavaScript 语法

在标签的 innerHTML 中使用 <% %> 进行标记，但并不支持在标签属性或属性值上使用。

<% if(true){ %>
    <span class="abc"></span>
<% } else { %>
    <span class="xyz"></span>
<% } %>

• 如何输出 JavaScript 表达式的值

在标签的 innerHTML 或 属性值 中使用 <%= %>，但并不支持在标签属性名上使用。

<span class="<%= true ? 'abc' : 'xyz' %>" onclick="<%= function(){ alert('clicked'); } %>">
    <%= true ? 123 : 789 %>
</span>
 
<!-- 事件属性上，如果存在 <%= %> 之外的非空白字符，则会按字符串拼接处理，而不会进行事件绑定处理 -->
<span onclick="this.<%= function(){ alert('clicked'); %>"</span>
 
<!-- 可以在非注释中添加 debugger 进行模板数据调试 -->
<% debugger %>

• 如何获取传入的数据

在模板标记中，使用 this 关键字进行获取。

<span class="<%= this.ok ? 'abc' : 'xyz' %>" onclick="<%= this.onclick %>">
    <%= this.ok ? 123 : 789 %>
</span>

• 如何动态绑定 DOM

在标签的 innerHTML 中使用 <%: %>，但并不支持在标签属性或属性值上使用。

<span>
    <%: document.createTextNode("hello world") %>
</span>

属性

RexjsTemplate.watching：是否处于自动监听数据中。

• @type {Boolean}

方法

RexjsTemplate.addRef(ref)：添加需要判断引用类型实例的构造函数。

• @params {Function} ref - 需要判断引用类型实例的构造函数

RexjsTemplate.compile(template, data, _selectorMap)：编译模板，返回生成的模板根元素。

• @param {String} template - html模板
• @param {Object, Array} data - 模板数据
• @param {Rexjs.CSSSelectorMap, Object} _selectorMap - 选择器映射表
• @returns {HTMLElement}

RexjsTemplate.refresh(_data)：根据数据刷新对应模板，返回受影响而被刷新的模板数量。

• @param {Object, Array} _data - 模板数据
• @returns {Number}

RexjsTemplate.watch()：自动监听数据：当数据发生变动时，如果对应模板在视窗范围内，则会在下一帧时自动更新模板信息。

RexjsTemplate.unwatch()：取消自动监听数据。

---

特殊说明

该模板解析器，目前只支持单向数据绑定，并不支持双向数据绑定。

相关产品

• Rexjs - 是一款又快、又小、性价比极高的 JavaScript(ES6+) 语法的编译器！

---

谢谢使用