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接收的是字符串

随机推荐

同是办公软件，wps和office有什么区别？
今天完美小编为大家带来的是wps和office有什么区别教程,那么到底有什么区别呢?相信很多朋友都模棱两可,说不出所以然,看看下面的教程,相信你会选择更适合你的那一款软件.一起来看看吧! 1.两者特点 ...
Thrift生成的bean对象，用java内省操作时注意(自己笔记)
项目需要,需要使用内省操作,将数据写入thrift生成的bean里,于是按常理getWritedMethod.invoke 结果发现set方法找不到,结果看了下thrift自己生成的bean里,set ...
进程控制fork与vfork
1. 进程标识符在前面进程描述一章节里已经介绍过进程的两个基本标识符pid和ppid,现在将详细介绍进程的其他标识符. 每个进程都有非负的整形表示唯一的进程ID.一个进程终止后,其进程ID就可以再次 ...
CVE-2017-8464远程命令执行漏洞（震网漏洞）复现
前言 2017年6月13日,微软官方发布编号为CVE-2017-8464的漏洞公告,官方介绍Windows系统在解析快捷方式时存在远程执行任意代码的高危漏洞,黑客可以通过U盘.网络共享等途径触发漏洞, ...
[编织消息框架][netty源码分析]4 eventLoop 实现类NioEventLoop职责与实现
NioEventLoop 是jdk nio多路处理实现同修复jdk nio的bug 1.NioEventLoop继承SingleThreadEventLoop 重用单线程处理 2.NioEventLo ...
Maven中pom.xml的scope
一.compile:编译范围compile是默认的范围:如果没有提供一个范围,编译范围依赖在所有的classpath 中可用,同时它们也会被打包.而且这些dependency会传递到依赖的项目中. ...
Streaming输入输出
Structured Streaming 输入输出输入 SparkSession.readStream() 返回一个 DataStreamReader 接口对象,可以通过该对象对输入源进行参数配置, ...
用mybatis实现dao的编写或者实现mapper代理
一.mybatis和hibernate的区别和应用场景hibernate:是一个标准的ORM框架(对象关系映射).入门门槛较高的,不需要写sql,sql语句自动生成了.对sql语句进行优化.修改比较困 ...
tomcat7的web.xml的xml片段与注解资源的发现处理逻辑
1.metadata-complete 属性 Servlet 3.0 的部署描述文件 web.xml 的顶层标签 <web-app> 有一个 metadata-complete 属性,该属 ...
3.jsp基本语法笔记
1.page标签 <%@ page language="java" import="java.util.*" contentType="text ...

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

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

项目地址

特性

名字由来

兼容性

特别提示

文档目录

第一个程序

变量的解析（基础）

特性(重点)

示例

特别提示

变量的解析（高级）

节点的隐藏和显示

事件

自定义跳转事件

列表

基础

多模板

追加数据

空数据

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

特性

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

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

随机推荐

热门专题