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

web开发作者:dayu日期:6天前点击:3

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


项目地址

https://github.com/epaii/epii.js

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

特性


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

名字由来

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

文档目录

  1. 如何使用,并写出第一个程序
  2. 数据与模板的绑定
    • 变量的解析(基础)
    • 变量的解析(高级)
    • 节点的隐藏和显示
  3. 事件
  4. 列表
    • 基础列表
    • 列表(多模板)
    • 列表(追加数据)
    • 列表(空数据)
  5. 数据的获取

第一个程序


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

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

2.编写一个最简单模板

<body>
    <divr-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 页面跳转,而是需要处理自定义协议。

<divr-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>  </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> </h1>
    <div r-list="users">
        <div r-display="{item_type}-1==0"name"></span>,年龄<span r-data="age"></span></div>
        <div r-display="{item_type}-2==0"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>  </h1>
    <div r-list="users">
        <div r-display="{item_type}-1==0"name"></span>,年龄<span r-data="age"></span></div>
        <div r-display="{item_type}-2==0"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>  </h1>
    <div r-list="users">
        <div r-display="{item_type}-1==0"name"></span>,年龄<span r-data="age"></span></div>
        <div r-display="{item_type}-2==0"name"></span>,年龄<span r-data="age"></span></div>
        <div r-empty="1"color: #000000;">没有数据的时候显示</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.jsgetData方法 可以获取所有设置的数据
  • 通过 epii的getDataValue方法 可以快速获取已设置的数据,getDataValue支持多参数,链条key
  • myepii.getDataValue("title");myepii.getDataValue("info","subject");myepii.getDataValue("users",1,"age")
<div>  </h1>
    <div r-list="users">
        <div r-display="{item_type}-1==0"name"></span>,年龄<span r-data="age"></span></div>
        <div r-display="{item_type}-2==0"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">

    </div>
    <div r-data="{hebei}" r-data-default="默认值{name}"  >

    </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">

        <span r-data="name" r-display="{moban}-1==0"></span>
        <span r-data="name" 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-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


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

原文地址:http://www.cnblogs.com/tianliangle/p/7248777.html


下一篇       上一篇