# epii.js **Repository Path**: epii/epii.js ## Basic Information - **Project Name**: epii.js - **Description**: 一个轻量级Js模板引擎，不依赖任何第三方库,仅仅8k - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 0 - **Created**: 2018-06-29 - **Last Updated**: 2022-11-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Epii.js 简约而不简单的Js模板引擎

epii.js

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

--- # 特性 ------ 1. 一个轻量级模板引擎，可快速实现数据与ui绑定（数据变动，UI自动变动），快速实现事件绑定和处理，**不依赖任何第三方库,仅仅8k**。 2. 可快速应用于**web开发**,**native+webapp**开发,**h5**微网页开发,不与其它框架冲突。 3. **让开发者更多关注与应用本身，而不用花费大量时间实现数据与ui的，和事件处理。效率大幅度提升。** # 名字由来 ``` 自然数e，圆周率π，虚数单位i，三者合在一起组成 epii。 ``` # 特别感谢 [@foxhunter](https://github.com/foxhunter) ,[我叫张大熊](https://github.com/daxiong123) # 兼容性 兼容 Chrome，IE8及以上，火狐，Safari，Opera 及其它主流浏览器。 ## 特别提示 由于 `Ie` 对 `dom style` 属性的局限性，在ie中 `style` 中含有变量必须改用 `r-style` 标签代替，如 `r-style="display:{show}" ` # 文档目录 1. [如何使用，并写出第一个程序](#第一个程序) 2. 数据与模板的绑定 * [变量的解析(基础)](#变量的解析基础) * [变量的解析(高级)](#变量的解析高级) * [节点的隐藏和显示](#节点的隐藏和显示) 3. [事件](#事件) 4. 列表 * [基础列表](#基础) * [列表(多模板)](#多模板) * [列表(追加数据)](#追加数据) * [列表(空数据)](#空数据) 4. [数据的获取](#数据获取获取已设置的数据) # 第一个程序 --- 1.下载 [**epii.min.js**][epiijslink],并在网页中引用 ```html ``` > 如果在nodejs环境中使用，可以通过npm包管理安装 ``` npm install epii.js ``` 2.编写一个最简单模板 ```html
``` 3.使用**epii(dom)**方法初始化epii对象 ```javascript var myepii = epii(document.getElementById("content"))//初始化epii对象，需要指定dom节点 可以是 document.body ``` 4.数据与模板绑定 ```javascript 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][demo1.html] # 变量的解析（基础） --- ## 特性(重点) * 变量在模板中一般用 *{}* 表示。**如{a},{b}** * 变量只能在dom标签属性中使用。如 *style="width:{width}"* * *r-data* 标签是epii.js自定义最重要的一个标签。一般用来赋值。 * *``* 标签将用于赋予 value 属性值。 * *``* 标签将用于赋予 src 属性值。 * *`

等其它标签`* 将用于赋予 innerHTML 属性值。 * *r-data-default* 标签，是当*r-data*标签值得变量在没有数据时候显示默认值。 * `r-data="title"`  和 `r-data="{title}"` 的区别是，在`title`值不存在时，第一种情况 将显示 title 字符串，第二种情况 显示空，如果第二种情况设置了r-data-default 则显示其设置的默认值。 ## 示例 ```javascript

我的Logo是:

成立于：

``` ## 特别提示 由于 `Ie` 对 `dom style` 属性的局限性，在ie中 `style` 中含有变量必须改用 `r-style` 标签代替，如 `r-style="display:{show}" ` `r-style` 支持所有浏览器。 > 点击查看效果[demo2.html][demo2.html] # 变量的解析（高级） --- * 支持链条式变量，如*{info.name}*,*{info.user.sex}* * *r-data* 可定义变量空间。可大幅度简化变量写法。 > 未使用变量空间的写法 ```html

title:

subject:

作者信息: name:,sex:
``` > 设置空间的写法 ```html

title:

subject:

作者信息: name:,sex:
``` > 全部代码 ```javascript

title:

subject:

作者信息: name:,sex:

title:

subject:

作者信息: name:,sex:
``` > 点击查看效果[demo3.html][demo3.html] # 节点的隐藏和显示 --- *epii.js* 提共两种方式设置dom节点隐藏和显示。 * 方法1 `r-style="display: {h1_display}"`  通过style属性来控制。 * 方法2 通过 `r-display` 标签来设定。 `r-display="{img_show}-1==0"`，必须为bool 等式字符串 ，推荐使用这种方式 * 两种方法都支持变量空间 ```javascript


``` > 点击查看效果[demo4.html][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 * 同一节点不可重复使用 ```html


``` > 点击查看效果[demo5.html][demo5.html] ### 自定义跳转事件 > 通过 `epii.setClickToChangeFunction(f);` 来自定义 `r-click-change` 事件， 在`native+webapp`开发中 一般需要不会直接通过location 页面跳转，而是需要处理自定义协议。 ```html

``` > 点击查看效果[demo6.html][demo6.html] # 列表 --- ### 基础 * *epii.js* 通过自定义标签 *`r-list`* 来设置此dom节点将显示列表， 在列表节点内的 变量 将自切换为 列表某一项数据。 * 支持多级列表展示 * 如果数据为纯字符串数组，则值用`value`表示 ```javascript

名称,年龄
value:
``` > 点击查看效果[demo7.html][demo7.html] ### 多模板 > 如果列表中有多个模板，则根据 `r-display` 来自动选择对应的模板, ```javascript

名称,年龄
名称,年龄
``` > 点击查看效果[demo8.html][demo8.html] ### 追加数据 * epii 可两种方式对列表追加数据 * 方法1 ，重新 *setData*, 将重新显示列表所有数据，如果旧数据有改变，则用这种方法 。 * 方法2 ， *addData* ，已有数据不变，追加数据，如果旧数据没有任何改变，推荐使用这种方式 。 ```javascript

名称,年龄
名称,年龄
``` > 点击查看效果[demo9.html][demo9.html] ### 空数据 > 通过 `r-empty="1"` 设置当数据为空，或者未设置时候列表的样式 。 ```javascript

名称,年龄
名称,年龄
没有数据的时候显示
``` > 点击查看效果[demo10.html][demo10.html] # 数据获取，获取已设置的数据 --- ``` getData,getDataValue两个方法``` ### 特性 * 通过 *`epii.js`* 的 `getData` 方法 可以获取所有设置的数据 * 通过 epii的 `getDataValue` 方法 可以快速获取已设置的数据，`getDataValue` 支持多参数，链条`key` * 如 `myepii.getDataValue("title");` `myepii.getDataValue("info","subject"); ` `myepii.getDataValue("users",1,"age")` ```javascript

名称,年龄
名称,年龄
``` > 点击查看效果[demo11.html][demo11.html] # 一个复杂的demo，几乎涉及所有语法 --- ```html
click_to_change
二级列表：
真的没有数据
``` > 点击查看效果[demo12.html][demo12.html] [epiijslink]:https://raw.githubusercontent.com/epaii/epii.js/master/epii.min.js [demo1.html]:https://epaii.github.io/epii.js/demo/docs_html/demo1.html "epii.js JavaScript 模板引擎" [demo2.html]:https://epaii.github.io/epii.js/demo/docs_html/demo2.html "epii.js JavaScript 模板引擎" [demo3.html]:https://epaii.github.io/epii.js/demo/docs_html/demo3.html "epii.js JavaScript 模板引擎" [demo4.html]:https://epaii.github.io/epii.js/demo/docs_html/demo4.html "epii.js JavaScript 模板引擎" [demo5.html]:https://epaii.github.io/epii.js/demo/docs_html/demo5.html "epii.js JavaScript 模板引擎" [demo6.html]:https://epaii.github.io/epii.js/demo/docs_html/demo6.html "epii.js JavaScript 模板引擎" [demo7.html]:https://epaii.github.io/epii.js/demo/docs_html/demo7.html "epii.js JavaScript 模板引擎" [demo8.html]:https://epaii.github.io/epii.js/demo/docs_html/demo8.html "epii.js JavaScript 模板引擎" [demo9.html]:https://epaii.github.io/epii.js/demo/docs_html/demo9.html "epii.js JavaScript 模板引擎" [demo10.html]:https://epaii.github.io/epii.js/demo/docs_html/demo10.html "epii.js JavaScript 模板引擎" [demo11.html]:https://epaii.github.io/epii.js/demo/docs_html/demo11.html "epii.js JavaScript 模板引擎" [demo12.html]:https://epaii.github.io/epii.js/demo/docs_html/demo12.html "epii.js JavaScript 模板引擎"