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

特别提示

由于 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:"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" 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":"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模板引擎的更多相关文章

一个最简单 node.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(基础)_node.js中的http服务以及模板引擎的渲染
一.前言本节的内容主要涉及: 1.node.js中http服务 2.node.js中fs服务 3.node.js中模板引擎的渲染 4.利用上面几点模拟apache服务器二.知识 1.node.js ...
最简单的JavaScript模板引擎
在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...
发布一个开源极致的javascript模板引擎tpl.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.js学习（2）-使用模板引擎art-template
node 安装cnpm i -S art-template 加载require('art-template') template.render接收的是字符串

随机推荐

thinkphp5.0学习笔记（二）
本文为公司制作API接口后台的小结! 1.命名注意事项: 不要使用易混淆的名字,如index,index01... 我喜欢用拼音... 比如: public function zhuce(Reques ...
java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleExcept问题解决方案
在部署Dynamic Web Project时,如果正确配置web.xml或者标注时,仍然出现以上异常的话,可以尝试以下内容讲解的方法: 首先,双击eclipse中的servers,位置如下图&quo ...
openvpn配置注意事项
1.安装VPN安装结束后,需要配置CONFIG文件夹服务端及客户端的配置文件,建议从sample文件里直接拷贝修改,网上的一些案例会引起无法启动的问题,没仔细研究过是哪里错了,反正最后从sample里 ...
Scrapy爬虫大战京东商城
Scrapy爬虫大战京东商城引言上一篇已经讲过怎样获取链接,怎样获得参数了,详情请看python爬取京东商城普通篇代码详解首先应该构造请求,这里使用scrapy.Request,这个方法默认调 ...
MVP架构
一.介绍 MVP(Model View Presenter)架构是从著名的MVC(Model View Controller)架构演变而来的.对于在Android应用中开发就可以视为是MVC架构,布局 ...
Linux中的apache的服务命令
1. 启动apachesudo service httpd start 2. 停止服务apachesudo service httpd stop 3. 重新启动apachesudo service h ...
Ext修改所有Ajax的timeout
Ext修改所有Ajax的timeout stackoverflow上的解决方案 //需要在初始化viewport时执行 //方法一重写 Ext.Ajax.timeout= 60000; Ext.ove ...
CSS自适应的占位符效果
一种不错的自适应input效果,分享一下.html section : <div style="width:500px;height:500px;margin:300px auto;b ...
Apollo框架试玩
2017年7月5日,百度举行了AI开发者大会,在会上发布了Apollo项目,并进行了演示,该项目在Github上已经能够被访问.出于一个程序员的好奇,昨天试玩了一把,确实不错. http://apol ...
vue和mvvm的一些小区别
Vue.js 和 MVVM 小细节 MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这 ...

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

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

项目地址

特性

名字由来

兼容性

特别提示

文档目录

第一个程序

变量的解析（基础）

特性(重点)

示例

特别提示

变量的解析（高级）

节点的隐藏和显示

事件

自定义跳转事件

列表

基础

多模板

追加数据

空数据

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

特性

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

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

随机推荐

热门专题