Epii.js 一個極其簡單的Js模板引擎

阿新 • • 發佈：2017-07-28

idt 定義 images 更多 mas play 寫法 ren gin

Epii.js 簡約而不簡單的JavaScript模板引擎

項目地址

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

極低門檻，拿來即用，別忘記star

特性

一個輕量級模板引擎，可快速實現數據與ui綁定（數據變動，UI自動變動），快速實現事件綁定和處理，不依賴任何第三方庫,僅僅8k。
可快速應用於web開發,native+webapp開發,h5微網頁開發,不與其它框架沖突。
讓開發者更多關註與應用本身，而不用花費大量時間實現數據與ui的，和事件處理。效率大幅度提升。

名字由來

自然數e，圓周率π，虛數單位i，三者合在一起組成 epii。

文檔目錄

如何使用，並寫出第一個程序
數據與模板的綁定
- 變量的解析(基礎)
- 變量的解析(高級)
- 節點的隱藏和顯示
事件
列表
- 基礎列表
- 列表(多模板)
- 列表(追加數據)
- 列表(空數據)
數據的獲取

第一個程序

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}‘ style=‘font-size:{font}‘></span>
    <div 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"));//初始化殷勤，需要制定dom節點 可以是 body

    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>

點擊查看效果demo2.html

變量的解析（高級）

支持鏈條式變量，如{info.name},{info.user.sex}
r-data 可定義變量空間。可大幅度簡化變量寫法。

未使用變量空間的寫法

 <!-- 不設置空間的寫法-->
<div>
        <p>title:<span r-data="{info.title}" 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}" style="background: cadetblue">
        <p>title:<span r-data="{title}" 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}" 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}" 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"));//初始化殷勤，需要制定dom節點 可以是 body

    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 style="display: {h1_display}" 通過style屬性來控制。
方法2 通過 r-display 標簽來設定。 r-display="{img_show}-1==0"，必須為bool 等式字符串，推薦使用這種方式
兩種方法都支持變量空間

<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://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" 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"));
    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" 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>

點擊查看效果demo9.html

空數據

通過 r-empty="1" 設置當數據為空，或者未設置時候列表的樣式。

<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"));
        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" 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"));
    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" style="background-color: green">

    </div>
    <div r-data="{hebei}" r-data-default="默認值{name}"  style="width:{width}px;height:{height}px;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://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模板引擎

idt 定義 images 更多 mas play 寫法 ren gin Epii.js 簡約而不簡單的JavaScript模板引擎項目地址 https://github.com/epaii/epii.js 極低門檻，拿來即用，別忘記star

js數據綁定(模板引擎原理)

name 沒有 bsp creat 兩種 spa 而是 length clas 1 <div> 2 <ul id="list"> 3 <li>11111111111</li> 4 &l

寫一個簡單的模板引擎

寫一個簡單的模板引擎 ES5 開始支援模板字串(Template literals)，支援如下的寫法： `string text ${expression} string text`; 其實在很多模板引擎中，常常會有這樣需求，比如常用的 doT，使用類似的語法 <div>{{=1+2}}</

一個極其簡單的用golang net寫的tcpip echoserver

一個極其簡單的用golang net寫的tcpip echoserver 關鍵字：linux golang tcpip echoserver 雖然然效率不是很理想，但是可以給初學者參考 package main import ( "

HTML一個極其簡單實用的瀏覽器載入效果

需求分析：在wap/pc瀏覽器介面中，為了增強使用者的體驗效果，在進行資料操作的時候，通常需要一個載入效果來提示使用者等待，但是很多時候為了這麼一個效果回去引用一個外掛顯得相當冗餘，因此這裡提供一個方便的效果，在當前頁面就能做到提示效果，仿蘋果載入提示，快來試試吧！程式碼

寫一個屬於自己的模板引擎【一】

參考文件《毛毛蟲教你寫一個屬於自己的模板引擎》,自己也模仿著寫一遍，原諒我比較懶，具體詳解請百度原作者作品。 stupid.class.php <?php define('TPL_DIR','

react native 學習筆記-----理解redux的一個極其簡單例子

'use strict'; import React, { Component, PropTypes} from 'react'; import { StyleSheet, Text, View, Image, Button, AppRegistry, TouchableHighl

epii.js簡約而不簡單的JS模板引擎

js1,基礎數據綁定epii 自定義dom節點屬性 r-data 可以對任何類型節點賦值，其中 input 節點最終賦值其value 屬性，img節點賦值其 src 屬性，其它類型節點均賦值innerHtml 屬性。如果設置r-data-default 則在沒有數據時候顯示默認值。r-data="title

編寫簡單js的mvc模板引擎

<div id="con"></div> <script type="text/html" id="template"> <p>name:{{name}}</p> <p>age:{{age}}</p&

js模板引擎——artTemplate的使用問題

-- sel rip 方式 blog 使用都在 text element 最近在使用模板引擎，對於出現的錯誤做一個小總結。想要在下拉框中使用模板，讓下拉選項中的每一項都由模板顯示。用下面的寫法會出錯，只有一個下拉選項，所有的數據都在一行內。 .... <se

js模板引擎---jtemplates使用

sel this href pla text cda phone js模板編寫昨天記錄了如何使用騰訊的模板引擎，今天記錄一下jquery的模板引擎jtemplates。官網：http://jtemplates.tpython.com/ 編寫模板：需要在頁面引入jquer

微擎框架下拉分頁（使用js模板引擎）

contain don obi 方式 get onf info 循環 time 1.需要分頁的頁面，引入一下文件 <script language="javascript" src="\addons\{$_GPC[‘m‘]}\template\mobile\js/re

js模板引擎

spa 其他多個 js模板引擎 col bsp 參數 ron list 1.有多個循環的可以把其他循環內容放進原來循環的一個參數裏面，然後循環這個參數就行了 <%esch list as log jianzhi%>======jianzhi就是鍵值，從0開始

[js高手之路]Node.js模板引擎教程-jade速學與實戰3-mixin

函數 .cn ima images ade 高手 js模板引擎 ron pan 強大的mixin mixin類似於函數的功能，可以達到模塊復用的效果 mixin show: 定義一個類似函數的功能，名字叫show，裏面的就是他的內容 +show: 調用show，每

[js高手之路]Node.js模板引擎教程-jade速學與實戰2-流程控制,轉義與非轉義

title 學習 != 下一步 cas ase spa back name 一、轉義與非轉義 jade模板文件代碼： 1 doctype html 2 html 3 head 4 meta(charset=‘utf-8‘)

[js高手之路]Node.js模板引擎教程-jade速學與實戰4-模板引用,繼承,插件使用

node.js ade 方法頭部 containe jade bsp 繼承 for 一、block 模塊復用把需要復用的模塊用block定義 block後面跟上模塊的名字，引用一次block 內容就會被復用一次編譯之後的結果：二，繼承模板(exten

簡易js模板引擎

n) oot 拆分而且想要 list function stripe 上下文前面 js 模板引擎有很多很多，我以前經常用 art-template ，有時候也會拿 vue 來當模板引擎用。直到...... 年初的時候，我還在上個項目組，那時候代碼規範是

js模板引擎-art-template常用

ava 隱藏定義函數 debug 很多原生語法 console 接受 art-template javascript 模板引擎分為原生語法和簡潔語法，本文主要是講簡潔語法基礎數據渲染輸出HTML 流程控制遍歷調用自定義函數方法子模板引入基礎數據渲染

百度JS模板引擎

lan cap pla 說明 doc list集合 template 比較 xss 1. 應用場景前端使用的模板系統或後端Javascript環境發布頁面 2. 功能描述提供一套模板語法，用戶可以寫一個模板區塊，每次根據傳入的數據，生成對應數據產生的HTM

模板引擎原理及underscore.js使用

chang ast i++ 外賣o2o 發出 url 市場 star $1 為什麽要使用模板引擎 DOM結構簡單，完全可以使用DOM方法創建DOM樹。$("<td></td").appendTo(); 當頁面比較復雜的時候，下面的程序中紅色部分來自JSON

Epii.js 一個極其簡單的Js模板引擎

Epii.js 簡約而不簡單的JavaScript模板引擎

項目地址

特性

名字由來

文檔目錄

第一個程序

變量的解析（基礎）

特性(重點)

示例

變量的解析（高級）

節點的隱藏和顯示

事件

自定義跳轉事件

列表

基礎

多模板

追加數據

空數據

數據獲取，獲取已設置的數據

特性

一個復雜的demo，幾乎涉及所有語法

相關推薦