Epii.js 템플릿 엔진 소개
epii.js
epii.js란 데이터를 UI에 빠르게 바인딩하고, 이벤트 바인딩 및 처리를 빠르게 구현할 수 있는 템플릿 엔진으로, 타사 라이브러리에 의존하지 않고 네이티브에서 8K만 사용합니다. +웹앱 개발 및 웹 개발은 h5 마이크로 웹페이지에서 사용할 수 있으며 다른 프레임워크와 충돌하지 않습니다.
개발자가 데이터 및 UI 구현, 이벤트 처리에 많은 시간을 소비하는 대신 애플리케이션 자체에 더 집중할 수 있습니다. 효율성이 크게 향상됩니다.
프로젝트 주소
1, 기본 데이터 바인딩
epii 사용자 정의 dom 노드 속성 r-data는 모든 유형의 노드에 값을 할당할 수 있으며, 입력 노드에는 궁극적으로 값 속성이 할당됩니다. , img 노드에는 값이 할당됩니다. src 속성과 다른 유형의 노드에는 innerHtml 속성이 할당됩니다.
r-data-default를 설정하면 데이터가 없을 때 기본값이 표시됩니다.
r-data="title"과 r-data="{title}"의 차이점은 제목 값이 존재하지 않는 경우 첫 번째 경우에는 제목 문자열이 표시되고 두 번째 경우에는 비어 있다는 것입니다. 두 번째 경우, r-data-default가 설정되면 기본값이 표시됩니다
-
다음 코드의 효과는 https://epaii.github.io/epii.js/에서 미리 볼 수 있습니다. 데모/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 负值方法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 노드 속성의 변수 바인딩을 실현할 수 있으며 스타일, 너비 및 기타 임의 속성과 같은 모든 속성에서 변수 태그를 사용할 수 있습니다. 다음 코드의 효과는 여기 미리보기에서 확인할 수 있습니다.
-
는 {info.subject}
과 같은 체인 변수를 지원합니다.
https://epii.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>3개 노드 Hide/Show
epii DOM 노드 숨기기 및 표시를 설정하는 방법에는 두 가지가 있습니다
방법 1, style="display: {h1_display}" 스타일 속성
방법 2, r을 통해 - 표시 태그 r-display="{img_show}-1==0"은 부울 방정식 문자열이어야 합니다. 이 방법을 사용하는 것이 좋습니다
-
효과 다음 코드는 https://epaii.github에서 미리 볼 수 있습니다. r-click-function 클릭 이벤트와 태그 내용을 구현하는 두 개의 태그 변수 기호를 사용할 수 있으며, 그 중 r-click-change 태그는 클릭 맞춤형 점프를 구현하고, r-click-function 태그는 클릭 트리거 맞춤형 기능을 구현합니다
r-click-function="on_subject_click#{info.subject}# {title}" 및 onclick="on_subject_click('{info.subject} ','{title}')"과 동일한 효과를 얻으려면 이전
onclick, r-click-change를 사용하는 것이 좋습니다. r-click-function. 동일한 노드는 재사용할 수 없습니다
다음 코드의 효과는 여기 https://epaii.github.io/epii.js/demo/demo9.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>로그인 후 복사 5 사용자 정의 점프 이벤트
via epii.setClickToChangeFunction(f); 사용자 정의 r- 클릭 변경 이벤트의 경우 네이티브+웹앱 개발에서는 일반적으로 위치 페이지를 직접 뛰어넘을 필요가 없지만 사용자 정의 프로토콜을 처리합니다.
<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节点 可以是 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>- 다음 코드 효과는 https://epaii.github.io/epii.js/demo/demo10.html
epii.setClickToChangeFunction(function (url) {
console.log(url);
});6 목록( 기본)
epii r-list 태그를 통해 이 dom 노드를 지정하면 목록이 표시됩니다. 목록 노드의 변수는 목록 앞의 모든 태그, 다음 코드의 특정 데이터 항목으로 자동 전환됩니다. 효과는 여기에서 확인할 수 있습니다. 미리보기 https://epaii.github.io/epii.js/demo/demo4.html
//自定义r-click-change 处理事件， 在native+webapp开发中 一般需要自定义协议epii.setClickToChangeFunction(function (url) {
console.log(url);
});var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 bodymyepii.setData({
title: "列表展示",
});
7 목록(여러 템플릿)
여러 템플릿이 있는 경우 r -display를 기반으로 해당 템플릿을 자동으로 선택하는 목록, 다음 코드의 효과는 여기 https://epaii.github.io/epii.js/demo/demo5.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>8 목록(데이터 추가)
epii 목록에 데이터를 추가하는 방법에는 두 가지가 있습니다
방법 2, addData , 기존 데이터는 그대로 두고 데이터를 추가하고, 기존 데이터에 변화가 없으면 이 방법을 사용하는 것이 좋습니다
다음 코드의 효과를 미리 볼 수 있습니다 여기 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节点 可以是 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>로그인 후 복사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}" >  <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>로그인 후 복사
위 내용은 Epii.js 템플릿 엔진 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7444
15
1371
52
76
11
39
19
10
6
WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법
Dec 17, 2023 pm 02:54 PM
WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.
WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술
Dec 17, 2023 pm 05:30 PM
WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술
WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법
Dec 17, 2023 am 09:39 AM
WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법
Dec 17, 2023 pm 12:09 PM
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면
JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축
Dec 17, 2023 pm 05:13 PM
JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리
간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
Jan 05, 2024 pm 06:08 PM
JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용
자바스크립트에서 insertBefore를 사용하는 방법
Nov 24, 2023 am 11:56 AM
사용법: JavaScript에서 insertBefore() 메서드는 DOM 트리에 새 노드를 삽입하는 데 사용됩니다. 이 방법에는 삽입할 새 노드와 참조 노드(즉, 새 노드가 삽입될 노드)라는 두 가지 매개 변수가 필요합니다.
JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법
Jan 05, 2024 pm 01:37 PM
JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가
