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 ...
随机推荐
- linux内核分析 第七周 Linux内核如何装载和启动一个可执行程序
一.编译链接的过程和ELF可执行文件格式 vi hello.c gcc -E -o hello.cpp hello.c -m32 //预处理.c文件,预处理包括把include的文件包含进来以及宏替换 ...
- MySQL总结小妙招
mysql5.7版本,免登陆修改管理员密码: vim /etc/my.cnf 加入skip-grant-tables,重启MySQL 终端输入 mysql ,直接登录MySQL数据库,然后use my ...
- STS导入Gradle项目出现 Could not create task of type 'DependencyManagementReportTask'
解决方法: 在build.gradle文件下添加如下: classpath 'io.spring.gradle:dependency-management-plugin:0.6.1.RELEASE'
- 调用Android系统设置项
Intent mIntent = new Intent(); ComponentName comp = new ComponentName("com.android.settings&quo ...
- pytorch文档阅读(一)
本章主要针对pytorch0.4.0英文文档的前两节,顺序可能有些不一样: torch torch.Tensor 张量 Tensors Data type CPU tensor GPU tensor ...
- 在 iPad 上试验从用算法生成法线贴图-到法线映射光照效果
在 iPad 上试验从用算法生成法线贴图-到法线映射光照效果 目录 概述 一般来说, 法线贴图是用高模的法线图, 低模的纹理图, 来生成较好的渲染效果. 而法线图通常是通过图像处理软件来生成的, 这里 ...
- java项目中Excel文件预览
package com.linkonworks.df.busi.utils; import java.io.File; import java.io.FileInputStream; import j ...
- .net WebService 大数据量时性能的提高
1.直接返回DataSet对象 [WebMethod(Description = "直接返回DataSet对象")] public DataSet GetUserListDateS ...
- 线搜索(line search)方法
在机器学习中, 通常需要求某个函数的最值(比如最大似然中需要求的似然的最大值). 线搜索(line search)是求得一个函数\(f(x)\)的最值的两种常用迭代方法之一(另外一个是trust re ...
- 给Ubuntu替换阿里的源
1. 阿里巴巴镜像源站点 有所有linux的源的镜像加速. 点击查看介绍 2. 具体配置方法在这里 copy: ubuntu 18.04(bionic) 配置如下 创建自己的配置文件,比如创建文件 / ...