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

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

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>

技術分享

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

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

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

1,基礎數據綁定

2 數據綁定其它語法

3 節點的隱藏/顯示

4 點擊事件

5 自定義跳轉事件

6 列表（基礎）

7 列表（多模板）

8 列表（追加數據）

9 列表（空數據）

10 數據獲取，獲取已設置的數據，getData,getDataValue兩個方法

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 )

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

簡約而不簡單的Django新手圖文教程

程式設計師過關斬將--為微服務擼一個簡約而不簡單的配置中心

【Flutter 實戰】簡約而不簡單的計算器

程式設計師修神之路--簡約而不簡單的分散式通訊基石

【演算法】排序04——程式碼簡約而不簡單的希爾排序（含程式碼實現）

網路協議 12 - HTTP 協議：常用而不簡單

一個簡潔而不簡單的安卓上下拉重新整理框架

node(基礎)_node.js中的http服務以及模板引擎的渲染

徹底解決Spring Boot1.5.X版本不支援Velocity模板引擎的方法

寫一個簡單的模板引擎

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

模板引擎template-native.js傳入的資料中包含HTML標籤，如何讓頁面直接識別標籤而不是顯示在標籤？

react精華之next.js getInitialProps自動切換服務端渲染和瀏覽器渲染而不需要同時使用渲染

用JS寫的效果，怎樣讓下拉選單出現在下面的表格之上，而不是把下面表格推下去

關於原生js 如何找到他的直接子元素而不是後代子元素

js實現連個數字相加而不是拼接

編寫簡單js的mvc模板引擎

js 檔案自動下載，而不是自動開啟 Content-disposition

在Angular.js使用組合+依賴注入而不是繼承

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

1,基礎數據綁定

2 數據綁定其它語法

3 節點的隱藏/顯示

4 點擊事件

5 自定義跳轉事件

6 列表（基礎）

7 列表（多模板）

8 列表（追加數據）

9 列表（空數據）

10 數據獲取，獲取已設置的數據，getData,getDataValue兩個方法

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 )

相關推薦