js数据绑定(模板引擎原理)
<div>
<ul id="list">
<li>11111111111</li>
<li>22222222222</li>
<li>33333333333</li>
</ul>
</div>
我为ul中的每个li绑定了事件,鼠标移入变换背景色(为了演示代码,这里没有使用事件代理,如果使用事件代理,对于本例无效)
var data = ["aaa", "bbb", "ccc"]; var oUl = document.querySelector("#list");
var oLi = document.getElementsByTagName("li"); for(var i = 0; i < oLi.length; i++) {
oLi[i].onmouseover = function(e) { e.target.style.backgroundColor = "pink"; }
oLi[i].onmouseout = function(e) { e.target.style.backgroundColor = ""; }
}
(此例使用事件代理写法是这样,不过对于本案例无效,所以不使用这种方法)
oUl.onmouseover = function(e) {
if(e.target.tagName == "LI") {
e.target.style.backgroundColor = "pink";
}
}
oUl.onmouseout = function(e) {
if(e.target.tagName == "LI") {
e.target.style.backgroundColor = "";
}
}
1.动态插入节点(优点:不影响原有结构绑定的事件,缺点:触发dom重排,非常耗性能,不建议使用)
var data = ["aaa", "bbb", "ccc"]; var oUl = document.querySelector("#list"); for(var i = 0; i < data.length; i++) {
var oLi = document.createElement("li");
oLi.innerHTML = data[i];
oUl.appendChild(oLi);
}
2.字符串拼接(优点:只触发一次dom重排,缺点:影响原有结构绑定的事件【注意此时假如你没有使用事件代理,而是使用循环为每个li添加事件,才会出现原有结构绑定的事件无效,否则,原有事件依然有效,这其实也体现了事件代理的一个优势,就是不关心子元素如何变化,只要父元素没有变化,事件依然有效】)
var str = "";
for(var i = 0; i < data.length; i++) {
str += "<li>";
str += data[i];
str += "</li>"
} oUl.innerHTML += str;
3.dom碎片(前两种方法的综合,既考虑性能,又不影响原有结构)
var frg = document.createDocumentFragment(); var str = "";
for(var i = 0; i < data.length; i++) {
var oLi = document.createElement("li");
oLi.innerHTML = data[i];
frg.appendChild(oLi);
} oUl.appendChild(frg);
js数据绑定(模板引擎原理)的更多相关文章
- JS数据绑定模板artTemplate试用
之前写JS绑定数据曾经用过tmpl库,虽然功能比较强大但是感觉不是很轻量,对于相对简单的数据需求显得有些臃肿.而Ajax返回数据自己拼接html的方式又显得不够高端,因此今天看了一篇介绍artTemp ...
- JavaScript模板引擎原理
JavaScript模板引擎原理,几行代码的事儿 2013-12-03 16:35 by BarretLee, 650 阅读, 6 评论, 收藏, 编辑 一.前言 什么是模板引擎,说的简单点,就是一个 ...
- 写一个迷你版Smarty模板引擎,对认识模板引擎原理非常好(附代码)
前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...
- smarty模板引擎原理解析
//php 控制器文件 <?php//引入模板引擎文件include("20130304.php");$smarty =newTinySmarty();$qq_numbers ...
- js 简单模板引擎
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 模板引擎原理及underscore.js使用
为什么要使用模板引擎 DOM结构简单,完全可以使用DOM方法创建DOM树.$("<td></td").appendTo(); 当页面比较复杂的时候,下面的程序中红 ...
- JavaScript模板引擎原理,几行代码的事儿
一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age% ...
- Mustache.js前端模板引擎源码解读
mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...
- 高性能JavaScript模板引擎原理解析
随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC ...
随机推荐
- BZOJ2878 [Noi2012]迷失游乐园 【基环树 + 树形dp + 期望dp】
题目链接 BZOJ2878 题解 除了实现起来比较长,思维难度还是挺小的 观察数据范围发现环长不超过\(20\),而我们去掉环上任何一个点就可以形成森林 于是乎我们枚举断掉的点,然后只需求出剩余每个点 ...
- jumpserver 堡垒机搭建
1.摘要 Jumpserver 是一款由python编写开源的跳板机(堡垒机)系统,实现了跳板机应有的功能.基于ssh协议来管理,客户端无需安装agent. 特点: 完全开源,GPL授权 Python ...
- JS的语法
1.语句和表达式 var a = 3 * 6; var b = a; b; 这里,3 * 6是一个表达式(结果为18).第二行的a也是一个表达式,第三行的b也是.表达式a和b的结果值都是18. var ...
- Dubbo、Zookeeper集群搭建及Rose使用心得(二)
上篇讲了一下配置,这次主要写一下这个框架开发的大概流程.这里以实现 登陆 功能为例. 一.准备工作 1.访问拦截器 用户在进行网站访问的时候,有可能访问到不存在的网页,所以,我们需要把这些链接重新定向 ...
- UESTC--1468
题目:A Coin Problem 原题链接:http://acm.uestc.edu.cn/problem.php?pid=1468 分析:满足裴波纳契数列,打表找周期. #include<i ...
- 读论文Machine Learning for Improved Diagnosis and Prognosis in Healthcare
Deep Learning的基本思想 假设我们有一个系统S,它有n层(S1,…Sn),它的输入是I,输出是O,形象地表示为: I =>S1=>S2=>…..=>Sn => ...
- bzoj 3224
3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 16656 Solved: 7255[Submit][St ...
- MySQL服务无法启动,错误代码1067
偶然间一次服务器意外重启 重启过后发现MySQL服务停止 手动启动之,发现无法启动 错误代码1067,进程意外终止 遂开始排查问题,首先想到的可能就是my.ini文件出了问题 但是已经忘了写过什么东西 ...
- 「Vue」Vue cli3中引用mui-ui问题及解决办法
1.引用mui.js无效,top-bar划动,numbox点击无效等问题 解决办法: -main.js中import mui from './lib/mui/js/mui.js' Vue.protot ...
- 用Anaconda安装本地python包
Anaconda确实带来了很多方便,但是之前也过多的依赖了conda自带的一键下载python包的功能.这不,这几天突然要用FastFM这个包,无奈conda里没有,于是只能从github下载下来,实 ...