epii.js是什么

• epii.js是一個(gè) 模板引擎，可快速實(shí)現(xiàn)數(shù)據(jù)與ui綁定，快速實(shí)現(xiàn)事件綁定，與處理，不依賴任何第三方庫(kù),僅僅8k，在native+webapp開(kāi)發(fā) 和 web開(kāi)發(fā)，h5微網(wǎng)頁(yè)上均可以使用， 不與其它框架沖突。

• 讓開(kāi)發(fā)者更多關(guān)注與應(yīng)用本身，而不用花費(fèi)大量時(shí)間實(shí)現(xiàn)數(shù)據(jù)與ui的，和事件處理。效率大幅度提升。

項(xiàng)目地址

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

1,基礎(chǔ)數(shù)據(jù)綁定

• epii 自定義dom節(jié)點(diǎn)屬性 r-data 可以對(duì)任何類型節(jié)點(diǎn)賦值，其中 input 節(jié)點(diǎn)最終 賦值其value 屬性，img節(jié)點(diǎn)賦值其 src 屬性，其它類型節(jié)點(diǎn)均賦值innerHtml 屬性。

• 如果設(shè)置r-data-default 則在沒(méi)有數(shù)據(jù)時(shí)候顯示默認(rèn)值。

• r-data="title" 和 r-data="{title}" 的區(qū)別是，在title值不存在時(shí)，第一種情況 將顯示 title 字符串，第二種情況 顯示空，如果第二種情況設(shè)置了r-data-default 則顯示其設(shè)置的默認(rèn)值

• 以下代碼效果可在此處預(yù)覽 https://epaii.github.io/epii.js/demo/demo1.html

  

  <div id="content">
    <h1 r-data="title">
    </h1>
    <div r-data="文章內(nèi)容：{content}"></div>
    <br>
     <div r-data="{subject}" r-data-default="沒(méi)有被賦值，只能用：{title}"></div><!-- 默認(rèn)值-->
    <br>
    <input r-data="inputvalue"><!-- input 負(fù)值方法1-->
    <input value="{inputvalue}"><!-- input 負(fù)值方法2-->
    <br>
    <img r-data="img_url" style="width: {img_width}px"><!-- img 負(fù)值方法1-->
    ![]({img_url})<!-- img 負(fù)值方法2  ,但這種存在缺點(diǎn)，因?yàn)樵诮馕銮?，已?jīng)加載一次不存在的圖片，多一次請(qǐng)求，不推薦-->
  </div>
  <script>  var myepii = epii(document.getElementById("content"));//初始化殷勤，需要制定dom節(jié)點(diǎn) 可以是 body
    myepii.setData({
        title: "我是標(biāo)題",
        content: "我是內(nèi)容主題",
        inputvalue: "input內(nèi)容",
        img_url:"https://www.baidu.com/img/bd_logo1.png",
        img_width:100
    });
  
    setTimeout(function () {
        myepii.setData({
            title: "我是新的標(biāo)題",
            content: "我是新的內(nèi)容主題"
        });
    }, 3000);</script>

  

   

  2 數(shù)據(jù)綁定其它語(yǔ)法

• epii 可以實(shí)現(xiàn)dom節(jié)點(diǎn) 屬性的變量綁定，可以在任意屬性中使用變量標(biāo)簽，比如 style ，width，等任意屬性,以下代碼效果可在此處預(yù)覽

• 支持 鏈條式變量，比如 {info.subject}
  https://epaii.github.io/epii.js/demo/demo2.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節(jié)點(diǎn) 可以是 body
    myepii.setData({
        h1_width:100,
        h1_height:100,
        h1_color:"red",
        title: "我是標(biāo)題",
        info:{subject:"文章簡(jiǎn)介"},
        img:{
            img_url: "https://www.baidu.com/img/bd_logo1.png",
            img_width: 100
        }
    });

    setTimeout(function () {
        myepii.setData({
            title: "我是新的標(biāo)題",
            h1_width:300,
            h1_height:300,
            h1_color:"blue",
            img:{  img_width:300}
        });
    }, 3000);</script>

3 節(jié)點(diǎn)的隱藏/顯示

• epii 提共兩種方式設(shè)置dom節(jié)點(diǎn)隱藏和顯示

• 方法1 ，style="display: {h1_display}" 通過(guò)style 屬性綁定

• 方法2 ， 通過(guò) r-display 標(biāo)簽 r-display="{img_show}-1==0"，必須為bool 等式字符串 ，推薦使用這種方式

• 以下代碼效果可在此處預(yù)覽 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 標(biāo)簽，推薦-->

</div>
<script>    var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom節(jié)點(diǎn) 可以是 body
    myepii.setData({
        title: "我是標(biāo)題",
        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 點(diǎn)擊事件

• epii 通過(guò) r-click-change 和 r-click-function 兩個(gè)標(biāo)簽，實(shí)現(xiàn)點(diǎn)擊事件，標(biāo)簽內(nèi)容均可以使用變量符號(hào)，其中 r-click-change 標(biāo)簽實(shí)現(xiàn)點(diǎn)擊自定義跳轉(zhuǎn)， r-click-function標(biāo)簽實(shí)現(xiàn)點(diǎn)擊觸發(fā)自定義函數(shù)

• r-click-change="http://www.baidu.com/?1={title}" 點(diǎn)擊時(shí)候 直接跳轉(zhuǎn)

• r-click-function="on_subject_click#{info.subject}#{title}" 和 onclick="on_subject_click('{info.subject}','{title}')" 實(shí)現(xiàn)效果一樣，推薦使用前者

• onclick，r-click-change，r-click-function 同一節(jié)點(diǎn)不可重復(fù)使用

• 以下代碼效果可在此處預(yù)覽 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節(jié)點(diǎn) 可以是 body
    myepii.setData({
        title: "列表展示",
        info:{subject:"文章簡(jiǎn)介"},
        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 自定義跳轉(zhuǎn)事件

• 通過(guò) epii.setClickToChangeFunction(f); 來(lái)自定義 r-click-change 事件， 在native+webapp開(kāi)發(fā)中 一般需要不會(huì)直接通過(guò)location 頁(yè)面跳轉(zhuǎn)，而是需要處理自定義協(xié)議。

epii.setClickToChangeFunction(function (url) {
        console.log(url);
    });

• 以下代碼效果可在此處預(yù)覽 https://epaii.github.io/epii.js/demo/demo10.html

 //自定義r-click-change 處理事件， 在native+webapp開(kāi)發(fā)中 一般需要自定義協(xié)議
    epii.setClickToChangeFunction(function (url) {
        console.log(url);
    });    var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom節(jié)點(diǎn) 可以是 body
    myepii.setData({
        title: "列表展示",

    });

6 列表（基礎(chǔ)）

• epii 通過(guò) r-list 標(biāo)簽指定此dom節(jié)點(diǎn)將顯示列表， 在列表節(jié)點(diǎn)內(nèi)的 變量 將自切換為 列表某一項(xiàng)數(shù)據(jù)，在列表內(nèi)之前所有標(biāo)簽,以下代碼效果可在此處預(yù)覽 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節(jié)點(diǎn) 可以是 body
    myepii.setData({
        title: "列表展示",
        users:[
            {name:"張三",age:"12歲"},
            {name:"李四",age:"14歲"}
        ]
    });</script>

7 列表（多模板）

• 如果列表中有多個(gè)模板，則根據(jù)r-display 來(lái)自動(dòng)選擇對(duì)應(yīng)的模板,以下代碼效果可在此處預(yù)覽 https://epaii.github.io/epii.js/demo/demo5.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節(jié)點(diǎn) 可以是 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 列表（追加數(shù)據(jù)）

• epii 可兩種方式對(duì)列表追加數(shù)據(jù)

• 方法1 ，重新 setData, 將重新顯示列表所有數(shù)據(jù)，如果舊數(shù)據(jù)有改變，則用這種方法

• 方法2 ， addData ，已有數(shù)據(jù)不變，追加數(shù)據(jù)，如果舊數(shù)據(jù)沒(méi)有任何改變，推薦使用這種方式

• 以下代碼效果可在此處預(yù)覽 https://epaii.github.io/epii.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節(jié)點(diǎn) 可以是 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({ //追加已有數(shù)據(jù)，列表將被追加，其它類型直接覆蓋
            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 列表（空數(shù)據(jù)）

通過(guò) r-empty="1" 設(shè)置當(dāng)數(shù)據(jù)為空，或者未設(shè)置時(shí)候列表的樣式，以下代碼效果可在此處預(yù)覽 https://epaii.github.io/epii.js/demo/demo7.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 r-empty="1" style="沒(méi)有數(shù)據(jù)的時(shí)候顯示</div>
    </div>
</div>
<script>
    var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom節(jié)點(diǎn) 可以是 body
    myepii.setData({
        title: "列表展示",
        users:[]
    });
    setTimeout(function () {//3秒后追加列表
        myepii.addData({ //追加已有數(shù)據(jù)，列表將別被加，其它類型直接覆蓋
            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 數(shù)據(jù)獲取，獲取已設(shè)置的數(shù)據(jù)，getData,getDataValue兩個(gè)方法

• 通過(guò) epii 的 getData 方法 可以獲取所有設(shè)置的數(shù)據(jù)

• 通過(guò) epii的 getDataValue 方法 可以快速獲取已設(shè)置的數(shù)據(jù)，getDataValue 支持多參數(shù)，鏈條key

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

• 以下代碼效果可在此處預(yù)覽 https://epaii.github.io/epii.js/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節(jié)點(diǎn) 可以是 body
    myepii.setData({
        title: "獲取數(shù)據(jù)",
        info:{subject:"標(biāo)題"},
        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>

http://www.cnblogs.com/tianliangle/p/7193849.html

延伸閱讀

• 程序員不是碼農(nóng)那么簡(jiǎn)單 2019-05-13
• webpack教程(二)——webpack.config.js文件 2017-07-26
• kotlin的一些特性介紹和與java C#的簡(jiǎn)單對(duì)比 2017-07-26
• 設(shè)計(jì)模式解密（4）- 模板方法模式 2017-07-26
• Vue.js 基本功能了解 2017-07-25
• nopCommerce 3.9 大波浪系列 之 引擎 NopEngine 2017-07-25
• Vue.js之深入淺出 2017-07-25
• 移動(dòng)端JS事件、移動(dòng)端框架 2017-07-25
• 簡(jiǎn)單談?wù)刯s中的MVC 2017-07-25
• vue.js移動(dòng)端app實(shí)戰(zhàn)1：初始配置 2017-07-24

程序員不是碼農(nóng)那么簡(jiǎn)單