AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

epii.js简约而不简单的JS模板引擎

2017-11-16 872
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
数据可视化DataV，5个大屏 1个月
可视分析地图（DataV-Atlas），3 个项目，100M 存储空间
简介：

1,基础数据绑定

  • epii 自定义dom节点属性 r-data 可以对任何类型节点赋值，其中 input 节点最终 赋值其value 属性，img节点赋值其 src 属性，其它类型节点均赋值innerHtml 属性。

  • 如果设置r-data-default 则在没有数据时候显示默认值。

  • r-data="title" 和 r-data="{title}" 的区别是，在title值不存在时，第一种情况 将显示 title 字符串，第二种情况 显示空，如果第二种情况设置了r-data-default 则显示其设置的默认值

  • 以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo1.html

    复制代码

    <div id="content">
    
 <h1 r-data="title">
    
 </h1>
    
 <div r-data="文章内容：{content}"></div>
    
 <br>
    
  <div r-data="{subject}" r-data-default="没有被赋值，只能用：{title}"></div><!-- 默认值-->
    
 <br>
    
 <input r-data="inputvalue"><!-- input 负值方法1-->
    
 <input value="{inputvalue}"><!-- input 负值方法2-->
    
 <br>
    
 <img r-data="img_url" style="width: {img_width}px"><!-- img 负值方法1-->
    
 ![]({img_url})<!-- img 负值方法2  ,但这种存在缺点，因为在解析前，已经加载一次不存在的图片，多一次请求，不推荐-->
    
</div>
    
<script>  var myepii = epii(document.getElementById("content"));//初始化殷勤，需要制定dom节点 可以是 body
    
 myepii.setData({
    
     title: "我是标题",
    
     content: "我是内容主题",
    
     inputvalue: "input内容",
    
     img_url:"https://www.baidu.com/img/bd_logo1.png",
    
     img_width:100
    
 });

    
 setTimeout(function () {
    
     myepii.setData({
    
         title: "我是新的标题",
    
         content: "我是新的内容主题"
    
     });
    
 }, 3000);</script>

    复制代码

     

    2 数据绑定其它语法

  • epii 可以实现dom节点 属性的变量绑定，可以在任意属性中使用变量标签，比如 style ，width，等任意属性,以下代码效果可在此处预览

  • 支持 链条式变量，比如 {info.subject}
    ht t p s : / / e pa i i . g i t hu b . i o / e p i i. j s / d e m o / de m o 2.html

复制代码

<div id="content">

   <h1 r-data="title" style="width: {h1_width}px;height: {h1_height}px;background-color: {h1_color}">

   </h1>

   <div r-data="{info.subject}"></div>

   <br>

   <img r-data="{img.img_url}" style="width: {img.img_width}px">


</div>

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

   myepii.setData({

       h1_width:100,

       h1_height:100,

       h1_color:"red",

       title: "我是标题",

       info:{subject:"文章简介"},

       img:{

           img_url: "https://www.baidu.com/img/bd_logo1.png",

           img_width: 100

       }

   });


   setTimeout(function () {

       myepii.setData({

           title: "我是新的标题",

           h1_width:300,

           h1_height:300,

           h1_color:"blue",

           img:{  img_width:300}

       });

   }, 3000);</script>

复制代码

 

3 节点的隐藏/显示

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

  • 方法1 ，style="display: {h1_display}" 通过style 属性绑定

  • 方法2 ， 通过 r-display 标签 r-display="{img_show}-1==0"，必须为bool 等式字符串 ，推荐使用这种方式

  • 以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo3.html

复制代码

<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://www.baidu.com/img/bd_logo1.png",

       img_show:1

   });


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

           h1_display:"none",

           img_show:0

       });

   }, 3000);</script>

复制代码

 

4 点击事件

  • epii 通过 r-click-change 和 r-click-function 两个标签，实现点击事件，标签内容均可以使用变量符号，其中 r-click-change 标签实现点击自定义跳转， r-click-function标签实现点击触发自定义函数

  • r-click-change="http://www.baidu.com/?1={title}" 点击时候 直接跳转

  • r-click-function="on_subject_click#{info.subject}#{title}" 和 onclick="on_subject_click('{info.subject}','{title}')" 实现效果一样，推荐使用前者

  • 同一节点不可重复使用

  • 以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo9.html

复制代码

<div id="content">

   <h1 r-data="title"  r-click-change="http://www.baidu.com/?q={title}">  </h1>

   </h1>

   <div r-data="{info.subject}" r-click-function="on_subject_click#{info.subject}#{title}"></div>

   <br>

   <div r-data="{info.subject}" onclick="on_subject_click('{info.subject}','{title}')"></div>

   <br>

   <div r-list="users">

       <div r-click-function="on_item_click#{name}#{age}">

           名称<span r-data="name"></span>,

           年龄<span r-data="age" r-click-change="http://www.baidu.com/?age={age}"></span>

       </div>

   </div>

</div>

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

   myepii.setData({

       title: "列表展示",

       info:{subject:"文章简介"},

       users:[

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

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

       ]

   });    function on_subject_click(subject,title) {

       console.log(subject,title);


   }    function on_item_click(name,age) {

       console.log(name,age);

   }</script>

复制代码

 

5 自定义跳转事件

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

epii.setClickToChangeFunction(function (url) {

       console.log(url);

   });

 

  • 以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo10.html

复制代码

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

   epii.setClickToChangeFunction(function (url) {

       console.log(url);

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

   myepii.setData({

       title: "列表展示",


   });

复制代码

 

6 列表（基础）

  • epii 通过 r-list 标签指定此dom节点将显示列表， 在列表节点内的 变量 将自切换为 列表某一项数据，在列表内之前所有标签,以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo4.html

复制代码

<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"));//初始化引擎，需要制定dom节点 可以是 body

   myepii.setData({

       title: "列表展示",

       users:[

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

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

       ]

   });</script>

复制代码

 

7 列表（多模板）

  • 如果列表中有多个模板，则根据r-display 来自动选择对应的模板,以下代码效果可在此处预览 h t t ps : / / e p ai i . g i t h ub . i o / ep i i . j s /d e m o /  de mo5.html

复制代码

<div id="content">

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

   <div r-list="users">

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

       <div r-display="{item_type}-2==0" style="名称<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}

       ]

   });</script>

复制代码

 

8 列表（追加数据）

  • epii 可两种方式对列表追加数据

  • 方法1 ，重新 setData, 将重新显示列表所有数据，如果旧数据有改变，则用这种方法

  • 方法2 ， addData ，已有数据不变，追加数据，如果旧数据没有任何改变，推荐使用这种方式

  • 以下代码效果可在此处预览 h t t p s : / /e p a i i . g i th u b . i o / e pi i.js/demo/demo6.html

复制代码

<div id="content">

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

   <div r-list="users">

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

       <div r-display="{item_type}-2==0" style="名称<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>

复制代码

 

9 列表（空数据）

通过 r-empty="1" 设置当数据为空，或者未设置时候列表的样式，以下代码效果可在此处预览 h t t p s : / /e p a i i . g i t h ub . i o / e p i i .j s / d e mo / d e m o 7 . ht m l 

复制代码

<div id="content">

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

   <div r-list="users">

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

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

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

   </div>

</div>

<script>

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

   myepii.setData({

       title: "列表展示",

       users:[]

   });

   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>

复制代码

 

10 数据获取，获取已设置的数据，getData,getDataValue两个方法

  • 通过 epii 的 getData 方法 可以获取所有设置的数据

  • 通过 epii的 getDataValue 方法 可以快速获取已设置的数据，getDataValue 支持多参数，链条key

  • 如 myepii.getDataValue("title"); myepii.getDataValue("info","subject"); myepii.getDataValue("users",1,"age")

  • 以下代码效果可在此处预览 h t t p s : / / e pa i i . g i th u b . i o /e p i i .j s/demo/demo8.html

复制代码

<div id="content">

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

   <div r-list="users">

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

       <div r-display="{item_type}-2==0" style="名称<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: "获取数据",

       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>

复制代码

 

11 完整的demo，几乎涉及所有语法

demo案例源码:(h t t p s: / / g i t h u b. c o m / ep a i i / ep i i . j s/ blob/master/index.html)

demo案例效果:(ht t p s: / / e p a i i. g i t h u b. i o / e p ii . j s / i n de x . h t ml ) 

复制代码

<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;">{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://www.baidu.com/img/bd_logo1.png",        "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>

复制代码


















本文转自xsster51CTO博客，原文链接： http://blog.51cto.com/12945177/1948467，如需转载请自行联系原作者




文章标签：
DataV数据可视化
JavaScript
开发工具
人工智能
git
BI
关键词：
JavaScript引擎
JavaScript模板引擎
相关实践学习
Github实时数据分析与可视化
基于Github Archive公开数据集，将项目、行为等20+种事件类型数据实时采集至Hologres进行分析，并搭建可视化大屏。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程，理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上，理解并学会运用各个服务组件，了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准，准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
技术小甜
目录
相关文章
凯小默
|
JavaScript 定位技术
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎
凯小默
303 0
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎
Star时光
|
17天前
|
Web App开发 JavaScript 前端开发
什么是JavaScript引擎
【8月更文挑战第14天】什么是JavaScript引擎
Star时光
30 1
n7lskg6uuowc2
|
3月前
|
XML 缓存 JavaScript
一篇文章讲明白JS模板引擎之JST模板
一篇文章讲明白JS模板引擎之JST模板
n7lskg6uuowc2
26 2
肥晨
|
3月前
|
缓存 自然语言处理 前端开发
深入剖析JavaScript引擎的工作原理
【6月更文挑战第3天】JavaScript引擎由解析器、解释器、优化器和垃圾回收器组成，它们协同完成代码的解析、编译和执行。解析器将源代码转为抽象语法树（AST），编译阶段进行作用域分析和变量提升。解释器执行AST，优化器在代码频繁执行时进行即时编译以提高性能。垃圾回收器自动回收不再使用的内存，防止泄漏。理解这些原理有助于优化代码和提升Web应用性能。
肥晨
34 1
李木子2024
|
4月前
|
JavaScript 前端开发 NoSQL
【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
【5月更文挑战第11天】MongoDB 的 JavaScript 引擎允许在服务器端直接执行脚本，提升效率并实现定制化操作。脚本环境提供独立但与数据库关联的运行空间，引擎负责脚本的解析、编译和执行。执行过程包括脚本提交、解析、编译和执行四个步骤。掌握脚本逻辑设计和 JavaScript 语言特性对于高效利用这一功能至关重要。例如，通过脚本可以计算商品总销售额，增强数据库操作的灵活性。
李木子2024
73 1
【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
懒鱼七忆
|
4月前
|
JavaScript 前端开发 开发者
Vue.js深度解析：前端开发的生产力引擎
Vue.js深度解析：前端开发的生产力引擎
懒鱼七忆
72 0
技术小达人
|
11月前
|
JavaScript 前端开发 算法
带你读《现代Javascript高级教程》十一、JavaScript引擎的垃圾回收机制（1）
带你读《现代Javascript高级教程》十一、JavaScript引擎的垃圾回收机制（1）
技术小达人
73 1
技术小达人
|
11月前
|
JavaScript 前端开发 算法
带你读《现代Javascript高级教程》十一、JavaScript引擎的垃圾回收机制（2）
带你读《现代Javascript高级教程》十一、JavaScript引擎的垃圾回收机制（2）
技术小达人
61 1
技术小达人
|
11月前
|
Web App开发 自然语言处理 JavaScript
带你读《现代Javascript高级教程》十、JavaScript引擎的工作原理：代码解析与执行（1）
带你读《现代Javascript高级教程》十、JavaScript引擎的工作原理：代码解析与执行（1）
技术小达人
55 0
技术小达人
|
11月前
|
Web App开发 缓存 JavaScript
带你读《现代Javascript高级教程》十、JavaScript引擎的工作原理：代码解析与执行（2）
带你读《现代Javascript高级教程》十、JavaScript引擎的工作原理：代码解析与执行（2）
技术小达人
55 0

热门文章

最新文章

  • 1
    JavaScript基本数据类型分析
  • 2
    挑战JavaScript正则表达式每日两题(1)
  • 3
    JS弹出层
  • 4
    《JavaScript框架设计》——1.2　对象扩展
  • 5
    js/jq仿window文件夹框选操作插件
  • 6
    JavaScript学习（十二）---正则表达式
  • 7
    扩展JavaScript的时候，千万要保留其原来的所有功能
  • 8
    《编写可维护的JavaScript》——1.7　直接量
  • 9
    When to use next() and return next() in Node.js
  • 10
    javascript jquery json ajax 关系
  • 1
    【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
    52
  • 2
    Vue.js 中父组件调用子组件的方法
    90
  • 3
    Vue.js 中子组件向父组件传值的方法
    53
  • 4
    使用JavaScript和XLSX.js将数据导出为Excel文件
    221
  • 5
    AngularJS是一款由Google收购的JavaScript结构框架
    50
  • 6
    JavaScript 关键字
    32
  • 7
    【Web 前端】什么是JS变量提升？
    69
  • 8
    <body> 中的JavaScript函数
    20
  • 9
    <head> 中的JavaScript 函数
    17
  • 10
    【JavaScript 与 TypeScript 技术专栏】JavaScript 与 TypeScript 的未来发展趋势
    119

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • jQuery开发教程
  • 前端开发CSS基础

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • HTML及前端框架
  • CSS基础教程
  • 搭建Node.js编程环境
    • 下一篇
    云函数