Introduction au moteur de modèles epii.js

Qu'est-ce que epii.js

• epii.js est un moteur de modèle qui peut rapidement implémenter la liaison de données et d'interface utilisateur, implémenter rapidement la liaison d'événements et le traitement, ne s'appuie sur aucune bibliothèque tierce, seulement 8k, peut être utilisé dans le développement natif + d'applications Web, le développement Web, les micro-pages Web h5 et n'entre pas en conflit avec d'autres frameworks.

• Laissez les développeurs se concentrer davantage sur l'application elle-même, au lieu de passer beaucoup de temps à implémenter les données, l'interface utilisateur et le traitement des événements. L'efficacité est grandement améliorée.

Adresse du projet

1, liaison de données de base

• epii L'attribut de nœud dom personnalisé r-data peut être attribué à n'importe quel type de nœud. Le nœud d'entrée se voit attribuer son attribut value, le nœud img reçoit son attribut src et les autres types de nœuds se voient attribuer l'attribut innerHtml.

• Si r-data-default est défini, la valeur par défaut sera affichée lorsqu'il n'y a pas de données.

• La différence entre r-data="title" et r-data="{title}" est que lorsque la valeur du titre n'existe pas, la chaîne du titre sera affichée dans le premier cas, Dans le deuxième cas, il s'affiche vide Si r-data-default est défini dans le deuxième cas, la valeur par défaut de son paramètre est affichée

• L'effet de ce qui suit. le code peut être prévisualisé ici 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 Autre syntaxe pour les données liaison

• epii peut réaliser une liaison variable des attributs du nœud dom, et vous pouvez utiliser des balises variables dans n'importe quel attribut, tel que le style, la largeur et d'autres attributs. être prévisualisé ici

• Prend en charge les variables de chaîne, telles que {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节点 可以是 bodymyepii.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>

Masquage/affichage de 3 nœuds

• epii propose deux façons de définir le masquage et affichage des nœuds dom

• Méthode 1, style="display: {h1_display}" Lier via l'attribut de style

• Méthode 2, via r -display tag r-display="{img_show} -1==0", doit être une chaîne d'équation booléenne, il est recommandé d'utiliser cette méthode

• L'effet du code suivant peut être prévisualisé ici 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节点 可以是 bodymyepii.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 Événement de clic

• epii implémente les événements de clic via deux balises, r-click-change et r-click-function. Le contenu de la balise peut utiliser des symboles variables. Parmi eux, le r-click. La balise -change réalise des sauts personnalisés par clic, et la balise r-click-function Implémente des fonctions personnalisées déclenchées par un clic

• r-click-change="http://www.baidu. com/?1={title}" pour sauter directement lorsque vous cliquez dessus

• r-click-function="on_subject_click#{info.subject}#{title}" et onclick="on_subject_click ('{info.subject}','{title}')" implémentation L'effet est le même, il est recommandé d'utiliser l'ancien

• onclick, r-click-change, r-click-function. Le même nœud ne peut pas être réutilisé

• Le code suivant L'effet peut être prévisualisé ici 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(&#39;{info.subject}&#39;,&#39;{title}&#39;)"></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节点 可以是 bodymyepii.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 Personnaliser l'événement de saut

• Utiliser epii.setClickToChangeFunction (f) ; pour personnaliser l'événement r-click-change. Dans le développement natif + webapp, il n'est généralement pas nécessaire de transmettre directement les sauts de page d'emplacement, mais doit gérer des protocoles personnalisés.

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

• Les effets de code suivants peuvent être prévisualisés ici 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节点 可以是 bodymyepii.setData({
        title: "列表展示",

    });

Liste 6 (de base)

• epii La spécification de ce nœud dom via la balise r-list affichera la liste. Les variables du nœud de liste basculeront automatiquement vers un certain élément de données dans la liste. Toutes les balises avant la liste. le code peut être prévisualisé ici 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节点 可以是 bodymyepii.setData({
        title: "列表展示",
        users:[
            {name:"张三",age:"12岁"},
            {name:"李四",age:"14岁"}
        ]
    });</script>

7 Liste (plusieurs modèles)

• S'il y a plusieurs modèles dans la liste, le modèle correspondant sera automatiquement sélectionné en fonction de l'affichage r. L'effet du code suivant peut être prévisualisé. ici 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节点 可以是 bodymyepii.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 Liste ( ajouter des données)

• epii peut ajouter des données à la liste de deux manières

• Méthode 1, re-setData réaffichera toutes les données dans la liste. Si les anciennes données ont changé, utilisez cette méthode

• Méthode 2, addData, les données existantes restent inchangées, ajoutez les données, s'il n'y a aucun changement dans les anciennes données, cela il est recommandé d'utiliser cette méthode

• Les effets de code suivants peuvent être prévisualisés ici 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节点 可以是 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" 设置当数据为空，或者未设置时候列表的样式，以下代码效果可在此处预览 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="没有数据的时候显示</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")

• 以下代码效果可在此处预览 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节点 可以是 bodymyepii.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案例源码:()

demo案例效果:(https://epaii.github.io/epii.js/index.html)

<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 uiviewconsole.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>

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!