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

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

项目地址

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

特性

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

名字由来

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

文档目录

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

第一个程序

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}' style='font-size:{font}'></span>
    <div 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"));//初始化殷勤，需要制定dom节点 可以是 body

    myepii.setData({
        name: "epii.js",
        font: "50px",
        logo_img: "https://raw.githubusercontent.com/epaii/epii.js/master/docs/Epii.js.jpg",
        bgcolor: "red",
        time: "2017-06-22"
    });


    setTimeout(function () {
        myepii.setData({
            subject: "我的简介是：Epii.js 简约而不简单的JavaScript模板引擎",
            bgcolor:"#999999"
        });
    },3000);

</script>

点击查看效果demo2.html

变量的解析（高级）

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

未使用变量空间的写法

 <!-- 不设置空间的写法-->
<div>
        <p>title:<span r-data="{info.title}" 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}" style="background: cadetblue">
        <p>title:<span r-data="{title}" 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}" 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}" 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"));//初始化殷勤，需要制定dom节点 可以是 body

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

<div id="content">
    <h1 r-data="title" 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:"https://raw.githubusercontent.com/epaii/epii.js/master/docs/Epii.js.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: "https://raw.githubusercontent.com/epaii/epii.js/master/docs/Epii.js.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" style="background-color: blueviolet">名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>
        <div r-display="{item_type}-2==0" 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" style="background-color: blueviolet">名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>
        <div r-display="{item_type}-2==0" style="background-color: red">名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>
    </div>
</div>
<script>
    var myepii = epii(document.getElementById("content"));//初始化引擎，需要指定dom节点 可以是 body
    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" style="background-color: blueviolet">名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>
        <div r-display="{item_type}-2==0" 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" style="background-color: blueviolet">名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>
        <div r-display="{item_type}-2==0" 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" style="background-color: green">

    </div>
    <div r-data="{hebei}" r-data-default="默认值{name}"  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_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" 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":"https://raw.githubusercontent.com/epaii/epii.js/master/docs/Epii.js.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

最后编辑于：2017.12.09 02:51:45

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,014评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,796评论 3赞 386
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,484评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,830评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,946评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,114评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,182评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,927评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,369评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,678评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,832评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,533评论 4赞 335
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,166评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,885评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,128评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,659评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,738评论 2赞 351

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

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

项目地址

特性

名字由来

文档目录

第一个程序

变量的解析（基础）

特性(重点)

示例

变量的解析（高级）

节点的隐藏和显示

事件

自定义跳转事件

列表

基础

多模板

追加数据

空数据

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

特性

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

推荐阅读更多精彩内容