Epii.js 简约而不简单的Js模板引擎

Epii.js 一个极其简单的Js模板引擎

Epii.js 简约而不简单的JavaScript模板引擎

项目地址

极低门槛，拿来即用，别忘记star

特性

一个轻量级模板引擎，可快速实现数据与ui绑定（数据变动，UI自动变动），快速实现事件绑定和处理，不依赖任何第三方库,仅仅8k。
可快速应用于web开发,native+webapp开发,h5微网页开发,不与其它框架冲突。
让开发者更多关注与应用本身，而不用花费大量时间实现数据与ui的，和事件处理。效率大幅度提升。

名字由来

自然数e，圆周率π，虚数单位i，三者合在一起组成 epii。

兼容性

兼容 Chrome，IE8及以上，火狐，Safari，Opera 及其它主流浏览器。

特别提示

由于 Ie 对 dom style 属性的局限性，在ie中 style 中含有变量必须改用 r-style 标签代替，如 r-style="display:{show}"

文档目录

如何使用，并写出第一个程序
数据与模板的绑定
事件
列表
数据的获取

第一个程序

1.下载 epii.min.js,并在网页中引用

<script src="path/to/epii.min.js"></script>

2.编写一个最简单模板

<body>

	<div id="content">

		<span r-data='{hi}' style='font-size:{font}'></span>

	</div>

</body>

3.使用epii(dom)方法初始化epii对象

var myepii = epii(document.getElementById("content"))//初始化epii对象，需要指定dom节点 可以是 document.body

4.数据与模板绑定

    var myepii = epii(document.getElementById("content"));//初始化epii对象，需要指定dom节点 可以是 document.body

    myepii.setData({

        hi: "hello epii.js",

        font: "50px"

    });

    setTimeout(function () {

        myepii.setData({

            font: "100px"

        });

    },3000);//3秒后数据变动，ui自动变动

点击查看效果demo1.html

变量的解析（基础）

特性(重点)

变量在模板中一般用 {} 表示。如{a},{b}
变量只能在dom标签属性中使用。如 style="width:{width}"
r-data 标签是epii.js自定义最重要的一个标签。一般用来赋值。
- <input> 标签将用于赋予 value 属性值。
- <img> 标签将用于赋予 src 属性值。
- <div> <span> <p> 等其它标签 将用于赋予 innerHTML 属性值。
r-data-default 标签，是当r-data标签值得变量在没有数据时候显示默认值。
r-data="title" 和 r-data="{title}" 的区别是，在title值不存在时，第一种情况将显示 title 字符串，第二种情况显示空，如果第二种情况设置了r-data-default 则显示其设置的默认值。

示例

<div id="content">

    <span r-data='您好，我是{name}' r-style='font-size:{font}'></span>

    <div r-style="background-color: {bgcolor}">

        我的Logo是:<br><img r-data="logo_img">

    </div>

    <span r-data="{subject}" r-data-default="默认的简介：我叫：{name}"></span>

    <p >

        成立于：<input r-data="{time}">

    </p>

</div>

<script>

    var myepii = epii(document.getElementById("content")); 

    myepii.setData({

        name: "epii.js",

        font: "50px",

        logo_img: "//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL3Jhdy5naXRodWJ1c2VyY29udGVudC5jb20vZXBhaWkvZXBpaS5qcy9tYXN0ZXIvZG9jcy9FcGlpLmpzLmpwZw==.jpg",

        bgcolor: "red",

        time: "2017-06-22"

    });

    setTimeout(function () {

        myepii.setData({

            subject: "我的简介是：Epii.js 简约而不简单的JavaScript模板引擎",

            bgcolor:"#999999"

        });

    },3000);

</script>

特别提示

由于 Ie 对 dom style 属性的局限性，在ie中 style 中含有变量必须改用 r-style 标签代替，如 r-style="display:{show}" r-style 支持所有浏览器。

点击查看效果demo2.html

变量的解析（高级）

支持链条式变量，如{info.name},{info.user.sex}
r-data 可定义变量空间。可大幅度简化变量写法。

未使用变量空间的写法

 <!-- 不设置空间的写法-->

<div>

        <p>title:<span r-data="{info.title}" r-style="color:{info.title_color}"></span></p>

        <p>subject:<span r-data="{info.subject}"></span></p>

        <div>

            作者信息: name:<span r-data="{info.author.name}"></span>,sex:<span r-data="{info.author.sex}"></span>

        </div>

    </div>

<div>

<div>

设置空间的写法

<!--r-data 设置变量空间 设置空间为 info,在空间内部 info.title 直接写 title就可以 的写法-->

<div r-data="{info}" r-style="background: cadetblue">

        <p>title:<span r-data="{title}" r-style="color:{title_color}"></span></p>

        <p>subject:<span r-data="{subject}"></span></p>

        <div r-data="author">

            作者信息: name:<span r-data="name"></span>,sex:<span r-data="{sex}"></span>

        </div>

</div>

全部代码

<div id="content">

    <!-- 不设置空间的写法-->

    <div>

        <p>title:<span r-data="{info.title}" r-style="color:{info.title_color}"></span></p>

        <p>subject:<span r-data="{info.subject}"></span></p>

        <div>

            作者信息: name:<span r-data="{info.author.name}"></span>,sex:<span r-data="{info.author.sex}"></span>

        </div>

    </div>

    <!--r-data 设置变量空间 设置空间为 info,在空间内部 info.title 直接写 title就可以 的写法-->

    <div r-data="{info}" style="background: cadetblue">

        <p>title:<span r-data="{title}" r-style="color:{title_color}"></span></p>

        <p>subject:<span r-data="{subject}"></span></p>

        <div r-data="author">

            作者信息: name:<span r-data="name"></span>,sex:<span r-data="{sex}"></span>

        </div>

    </div>

</div>

<script>

    var myepii = epii(document.getElementById("content")); 

    myepii.setData({

        info: {

            title: "epii.js 简介",

            title_color:"red",

            subject: "epii.js 简约而不简单的JavaScript模板引擎",

            author: {

                name: "MrRen",

                sex: "男"

            }

        }

    });

    setTimeout(function () {

        myepii.setData({

            info: {

                title: "epii.js 新的简介"

            }

        });

    }, 3000);

</script>

点击查看效果demo3.html

节点的隐藏和显示

epii.js 提共两种方式设置dom节点隐藏和显示。

方法1 r-style="display: {h1_display}" 通过style属性来控制。
方法2 通过 r-display 标签来设定。 r-display="{img_show}-1==0"，必须为bool 等式字符串，推荐使用这种方式
两种方法都支持变量空间

<div id="content">

    <h1 r-data="title" r-style="display: {h1_display}"> <!--第一种方法，直接在style中 用变量，不推荐-->

    </h1>

    <br>

    <img r-data="img_url" r-display="{img_show}-1==0"><!--第二种方法，使用 r-display 标签，推荐-->

</div>

<script>

    var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 body

    myepii.setData({

        title: "我是标题",

        h1_display:"block",

        img_url:"//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL3Jhdy5naXRodWJ1c2VyY29udGVudC5jb20vZXBhaWkvZXBpaS5qcy9tYXN0ZXIvZG9jcy9FcGlpLmpzLmpwZw==.jpg",

        img_show:1

    });

    setTimeout(function () {//两种方法隐藏

        myepii.setData({

            h1_display:"none",

            img_show:0

        });

    }, 3000);

</script>

点击查看效果demo4.html

事件

1、dom 事件，仍可通过常规设置来实现，如 onclick="fun('{name}','{age}')"

onblur="myblur('{name}','{age}')"
2、epii.js 自定义 r-click-change 和 r-click-function 两个标签来处理点击跳转和点击执行函数事件（这两种事件占比最高）。
3、r-click-change 标签设置点击跳转链接。如 r-click-change='http://www.baidu.com?name={name}'
4、r-click-function 标签设置点击执行函数。如 r-click-function="on_subject_click#{info.subject}#{title}",这种写法和 onclick="on_subject_click('{info.subject}','{title}')" 实现效果一样，推荐使用前者。
5、* onclick，r-click-change，r-click-function * 同一节点不可重复使用

<div id="content">

    <h1 r-data="title" r-click-change="{baidu_link}">

    </h1>

    <br>

    <img r-data="img_url" r-click-function="{imgclick}#{title}#{img_url}">

</div>

<script>

    var myepii = epii(document.getElementById("content"));

    myepii.setData({

        title: "点我跳转到百度",

        baidu_link: "http://www.baidu.com",

        img_url: "//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL3Jhdy5naXRodWJ1c2VyY29udGVudC5jb20vZXBhaWkvZXBpaS5qcy9tYXN0ZXIvZG9jcy9FcGlpLmpzLmpwZw==.jpg",

        imgclick: "myfunction"

    });

    function myfunction(title, img_url) {

        console.log(this.src);//this is dom itself

        console.log(title);

        console.log(img_url);

    }

</script>

点击查看效果demo5.html

自定义跳转事件

通过 epii.setClickToChangeFunction(f); 来自定义 r-click-change 事件，在native+webapp开发中一般需要不会直接通过location 页面跳转，而是需要处理自定义协议。

<div id="content">

    <h1 r-data="title" r-click-change="baidu://?a=1&b=2"></h1>

</div>

<script>

    //自定义r-click-change 处理事件， 在native+webapp开发中 一般需要自定义协议

    epii.setClickToChangeFunction(function (url) {

        console.log(url);

    });

    var myepii = epii(document.getElementById("content"));

    myepii.setData({

        title: "我是 Epii.js"

    });

</script>

点击查看效果demo6.html

列表

基础

epii.js 通过自定义标签 r-list 来设置此dom节点将显示列表，在列表节点内的变量将自切换为列表某一项数据。

支持多级列表展示

<div id="content">

    <h1 r-data="title" >  </h1>

    <div r-list="users">

        <div>名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>

    </div>

</div>

<script>

    var myepii = epii(document.getElementById("content"));

    myepii.setData({

        title: "列表展示",

        users:[

            {name:"张三",age:"12岁"},

            {name:"李四",age:"14岁"}

        ]

    });

</script>

点击查看效果demo7.html

多模板

如果列表中有多个模板，则根据 r-display 来自动选择对应的模板,

<div id="content">

    <h1 r-data="title" > </h1>

    <div r-list="users">

        <div r-display="{item_type}-1==0" r-style="background-color: blueviolet">名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>

        <div r-display="{item_type}-2==0" r-style="background-color: red">名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>

    </div>

</div>

<script>

    var myepii = epii(document.getElementById("content"));

    myepii.setData({

        title: "列表展示",

        users:[

            {name:"张三",age:"12岁",item_type:1},

            {name:"李四",age:"14岁",item_type:2},

            {name:"张三1",age:"121岁",item_type:1},

            {name:"李四1",age:"141岁",item_type:2}

        ]

    });

</script>

点击查看效果demo8.html

追加数据

epii 可两种方式对列表追加数据
方法1 ，重新 setData, 将重新显示列表所有数据，如果旧数据有改变，则用这种方法。
方法2 ， addData ，已有数据不变，追加数据，如果旧数据没有任何改变，推荐使用这种方式。

<div id="content">

    <h1 r-data="title" >  </h1>

    <div r-list="users">

        <div r-display="{item_type}-1==0" r-style="background-color: blueviolet">名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>

        <div r-display="{item_type}-2==0" r-style="background-color: red">名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>

    </div>

</div>

<script>

    var myepii = epii(document.getElementById("content"));

    myepii.setData({

        title: "列表展示",

        users:[

            {name:"张三",age:"12岁",item_type:1},

            {name:"李四",age:"14岁",item_type:2},

            {name:"张三1",age:"121岁",item_type:1},

            {name:"李四1",age:"141岁",item_type:2}

        ]

    });

    setTimeout(function () {//3秒后追加列表

        myepii.addData({ //追加已有数据，列表将被追加，其它类型直接覆盖

            title: "追加列表展示",

            users:[

                {name:"张三5",age:"12岁",item_type:1},

                {name:"李四6",age:"14岁",item_type:2},

                {name:"张三7",age:"121岁",item_type:1},

                {name:"李四8",age:"141岁",item_type:2}

            ]

        });

    },3000);

</script>

点击查看效果demo9.html

空数据

通过 r-empty="1" 设置当数据为空，或者未设置时候列表的样式。

<div id="content">

    <h1 r-data="title" >  </h1>

    <div r-list="users">

        <div r-display="{item_type}-1==0" r-style="background-color: blueviolet">名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>

        <div r-display="{item_type}-2==0" r-style="background-color: red">名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>

        <div r-empty="1" style="background-color: cadetblue">没有数据的时候显示</div>

    </div>

</div>

<script>

    var myepii = epii(document.getElementById("content"));

        myepii.setData({

        title: "列表展示",

        users:[]

    });

    setTimeout(function () {

        myepii.addData({ //追加已有数据，列表将别被加，其它类型直接覆盖

            title: "追加列表展示",

            users:[

                {name:"张三5",age:"12岁",item_type:1},

                {name:"李四6",age:"14岁",item_type:2},

                {name:"张三7",age:"121岁",item_type:1},

                {name:"李四8",age:"141岁",item_type:2}

            ]

        });

    },3000);

</script>

点击查看效果demo10.html

数据获取，获取已设置的数据

getData,getDataValue两个方法

特性

通过 epii.js 的 getData 方法可以获取所有设置的数据
通过 epii的 getDataValue 方法可以快速获取已设置的数据，getDataValue 支持多参数，链条key
如 myepii.getDataValue("title"); myepii.getDataValue("info","subject"); myepii.getDataValue("users",1,"age")

<div id="content">

    <h1 r-data="title" >  </h1>

    <div r-list="users">

        <div r-display="{item_type}-1==0" r-style="background-color: blueviolet">名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>

        <div r-display="{item_type}-2==0" r-style="background-color: red">名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>

    </div>

</div>

<script>

    var myepii = epii(document.getElementById("content"));

    myepii.setData({

        title: "获取数据",

        info:{subject:"标题"},

        users:[

            {name:"张三",age:"12岁",item_type:1},

            {name:"李四",age:"14岁",item_type:2},

            {name:"张三1",age:"121岁",item_type:1},

            {name:"李四1",age:"141岁",item_type:2}

        ]

    });

    console.log(myepii.getData());

    alert(myepii.getDataValue("title"));

    alert(myepii.getDataValue("info","subject"));

    alert(myepii.getDataValue("users",1,"age"));

</script>

点击查看效果demo11.html

一个复杂的demo，几乎涉及所有语法



<div>

    <div r-data="我的名字是{name}，性别:{sex}" r-click-function="index#{name}#{sex}">

    </div>

    <div r-click-change="http://www.baidu.cc/?a={name}">click_to_change</div>

    <div r-data="show_name" r-display="{isshow}-1==0" r-style="background-color: green">

    </div>

    <div r-data="{hebei}" r-data-default="默认值{name}"  r-style="width:{width}px;height:{height}px;background-color:{bgcolor};display: {display}" >

    </div>

    <div r-data="{map.age}"  r-display="{map.show}-1==0" >

    </div>

    <img r-data="{img_url}"    >

    <img src="{img_url}"    >

    <input type="text" r-data="{img_url}"    >

    <input type="text" value="{img_url}"    >

    <div r-list="list" style="background-color: #007bc7">

        <span r-data="name" r-display="{moban}-1==0"></span>

        <span r-data="name" style="color: red" r-display="{moban}-2==0" r-click-change="http://www.ddle.cc/?a={age}">

        </span>

        <div r-display="{moban}-3==0" r-click-function="index#2#{age}">

            <div> 二级列表：</div>

            <div r-list="wanju">

                <span r-data="name" r-display="{moban}-1==0"></span>

                <span r-data="name" r-style="color: blue" r-display="{moban}-2==0"

                      r-click-change="http://www.ddle.cc/?a={a}">

                    </span>

            </div>

        </div>

        <span   r-empty="1">

            真的没有数据

        </span>

    </div>

</div>

<script>

    epii.setClickToChangeFunction(function (url) {

        alert(url);

    });

    function index(c, b) {//this  bind to uiview

        console.log(this.innerHTML);

        console.log(c);

        console.log(b);

    }

    var data = {

        "img_url":"//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL3Jhdy5naXRodWJ1c2VyY29udGVudC5jb20vZXBhaWkvZXBpaS5qcy9tYXN0ZXIvZG9jcy9FcGlpLmpzLmpwZw==.jpg",

        "display":"block",

        "width":100,

        "height":200,

        "bgcolor":"red",

        "name": "张三",

        "sex": "男",

        "isshow": 1,

        "show_name": "show/hide",

        "map":{"show":"1","age":"map_age"},

         "list": [{"name": "list_item_1", "moban": 1}, {"name": "list_item_2", "moban": 2, "age": 2}]

    };

    var myepii = epii(document.body);

    myepii.setData(data);

    //模拟数据变化

    setTimeout(function () {

        myepii.setData({//改变已有数据

            "hebei":"河北邯郸",

            "name": "李四",

            "sex": "女",

            "map":{"show":"0","age":"map_age1"},

            "bgcolor":"blue",

            "width":500,

            "height":50,

            isshow: 0

        });

        setTimeout(function () {

            myepii.addData({//追加已有数据，列表将被追加，其它类型直接覆盖

                "hebei":"河北石家庄",

                 "display":"none",

                "list": [

                    {"name": "list_item_3", "moban": 1},

                    {"name": "list_item_4", "moban": 2, "age": 4},

                    {

                        "moban": 3,

                        "age": 10,

                        "wanju": [{"name": "list_item_list1", "moban": 1}, {"name": "list_item_list2", "moban": 2, a: 5}]

                    }]

            });

            console.log(myepii.getDataValue("name"));

            console.log(myepii.getDataValue("list",1,"age"));

            console.log(myepii.getDataValue("list",4,"wanju",1,"name"));

        },3000);

    }, 3000);

</script>

点击查看效果demo12.html

Epii.js 一个极其简单的Js模板引擎的更多相关文章

一个最简单 node&period;js 命令行工具
一个最简单 node.js 命令行工具 node.js cli $ node cli.js xyz # OR $ node cli xyz 接受参数 process.argv js "use ...
用node在本机搭建一个极其简单的服务器
首先安装node, 建一个文件夹server, 在里面创建一个server.js,内容如下: var http = require("http"); http.createServ ...
node(基础)&lowbar;node&period;js中的http服务以及模板引擎的渲染
一.前言本节的内容主要涉及: 1.node.js中http服务 2.node.js中fs服务 3.node.js中模板引擎的渲染 4.利用上面几点模拟apache服务器二.知识 1.node.js ...
最简单的JavaScript模板引擎
在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...
发布一个开源极致的javascript模板引擎tpl&period;js
tpl.js(大家直接去https://git.oschina.net/tianqiq/tpl.js这个上面看) 简介 tpl.js是一个比较极致(极小,极快,极简单)的js模板引擎,可以在各种js环 ...
一个简单的PHP模板引擎
PHP早期开发中通常是PHP代码和HTML代码混写,这也使代码中充斥着数据库操作,逻辑处理等.当项目不大时,这样的代码还可以接受,但是随着项目不断扩大,我们就会发现同一个文件中同时存在前端逻辑和后端处 ...
Angular js 之一些简单的js操作
1.<div ng-if()> </div> 括号里面是布尔值如果是false那么你ng-if的那个dom就会不显示.(感觉这是angular js中最给力的一点) 一般会 ...
一个超级简单的HTML模板框架源代码以及使用示例
HTML模板框架源代码 var HtmlTemplate = (function () { function HtmlTemplate(htmlSource) { this.htmlSource = ...
Node&period;js学习（2）-使用模板引擎art-template
node 安装cnpm i -S art-template 加载require('art-template') template.render接收的是字符串

随机推荐

&commat;import与link
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 1. 老祖宗的差别.link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可 ...
[问题2014A01] 解答三（升阶法，由董麒麟同学提供）
[问题2014A01] 解答三(升阶法,由董麒麟同学提供) 引入变量 $y$,将 $|A|$ 升阶,考虑如下行列式: \[|B|=\begin{vmatrix} 1 & x_1-a & ...
hdu 4612 Warm up 双连通+树形dp思想
Warm up Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) Total S ...
20145236 《Java程序设计》第十周学习总结
20145236 <Java程序设计> 第十周学习总结 Java网络编程 Java网络编程技术 Java语言是在网络环境下诞生的,所以Java语言虽然不能说是对于网络编程的支持最好的语言, ...
HDU 4572 Bottles Arrangement（找规律，仔细读题）
题目 //找规律,123321123321123321…发现这样排列恰好可以错开 // 其中注意题中数据范围: M是行,N是列,3 <= N < 2×M //则猜测:m,m,m-1,m-1 ...
tomcat动态映射路径
写了一个工具类,将上传文件功能保存文件的目录移到webapps目录外面,通过动态生成xml映射文件到tomcat\conf\Catalina\localhost目录下从而实现目录映射.可以被http直 ...
C语言程序设计第一作业
C语言程序设计第一作业实验总结 (一) 1.题目:输入圆的半径,求圆周长和面积 2.流程图: 3.测试数据及运行结果: 4.实验分析: 问题1: 出现了错误原因:是在赋值那写反了解决方法:应该是 ...
我在B站投稿啦、、、
我在B站投稿啦....欢迎评论交流... https://www.bilibili.com/video/av31539882/ 怎样激活Win10系统修改windows系统账户的名称-mp4 外链: ...
DTLS协议中client/server的认证过程和密钥协商过程
我的总结:DTLS的握手就是协商出一个对称加密的秘钥(每个客户端的秘钥都会不一样),之后的通信就要这个秘钥进行加密通信.协商的过程要么使用非对称加密算法进行签名校验身份,要么通过客户端和服务器各自存对 ...
BMP、GIF、JPEG、PNG以及其它图片格式简单介绍
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/songjinshi/article/details/37516649 BMP格式 BMP是英文Bit ...