zepto源码--fragment--学习笔记
文档片段fragment函数默认传递三个参数:
html文档片段字符串
name标签
properties额外添加的属性
函数内部实现过程:
var dom, nodes, container;
中间是将字符串html转换成符合需求的dom,并返回。
if (singleTagRE.test(html)) dom = document.createElement(RegExp.$1);
判断html如果是单标签,直接使用标签名称创建dom元素。
其中的在定义变量时已经预先定义了。并且进行了匹配的获取。
如果不是单标签的话,这里没有使用else,而是通过有没有创建过dom来判断。if(!dom){}
继续判断html类型,
a: 如果是字符串的话,转化为dom元素
b: 如果没有传递标签名称, 则直接从正则表达式捕获的匹配获取
c: 如果标签名称不属于containers的属性名称的话,则将name值修改为'*'
d: 真正的操作流程,
将字符串使用合适的标签包裹起来,并且取得包裹元素的子元素(实际为传入的字符串),并且再删除这些不必要的包裹元素。
最后一个判断,我觉得很强大很贴心的功能,可惜到目前为止,一直没有使用过,不得不说,确实有必要研究一下源码,不然可能永远不会发现这种用法。
就是第三个参数properties,如果传递了properties,并且是以键值对的方式传递的,则将该对象的键值对最为dom对象的属性和属性值赋值给dom对象。
其中也利用了methodAttributes的缓存,避免不断重复读取、设置。
举个例子,证明:
我们在使用ajax回调获取数据之后,一般需要将这些数据拼接到页面上面去,这里就有了该方法的发挥着地
从而避免了我们一个一个属性的添加的麻烦,也使得函数更加清晰明了。
在页面展示的效果
zepto源码--fragment--学习笔记的更多相关文章
- zepto 源码 $.contains 学习笔记
$.contains(parent,node) 返回值为一个布尔值 ==> boolean parent,node我们需要检查的节点检查父节点是否包含给定的dom节点,如果两者是相同的节点,返 ...
- zepto源码--init--学习笔记
先展示init函数,由于笔记本屏幕太小,删掉了部分源码注释,才能在一屏内截图. 当我们调用$()的时候,便会直接调用zepto.init()生成zepto对象,跟jquery生成jquery对象类似. ...
- c++ stl源码剖析学习笔记(一)uninitialized_copy()函数
template <class InputIterator, class ForwardIterator>inline ForwardIterator uninitialized_copy ...
- zepto源码--qsa--学习笔记
zepto内部选择器qsa方法的实现. 简述实现原理: 通过判断传入的参数类型: 如果是'#id',则使用getElementById(id)来获取元素,并且将结果包装成数组形式: 如果是'.clas ...
- zepto源码--extend--学习笔记
对象继承函数: $.extend(){},默认传递一个参数,需要继承的对象目标.函数展示: 最终实现的过程,需要调用工具函数extend,首先分析extend函数. 默认传递三个参数,继承的目标对象- ...
- zepto源码--matches--学习笔记
zepto的第一个函数,zepto.matches: 作用:用来匹配dom元素是否匹配某css selector. 它为后面的一些高级方法的实现提供了基础支持,比如事件代理,parent, close ...
- requests源码阅读学习笔记
0:此文并不想拆requests的功能,目的仅仅只是让自己以后写的代码更pythonic.可能会涉及到一部分requests的功能模块,但全看心情. 1.另一种类的初始化方式 class Reques ...
- c++ stl源码剖析学习笔记(二)iterator
ITERATOR 迭代器 template<class InputIterator,class T> InputIterator find(InputIterator first,Inpu ...
- c++ stl源码剖析学习笔记(三)容器 vector
stl中容器有很多种 最简单的应该算是vector 一个空间连续的数组 他的构造函数有多个 以其中 template<typename T> vector(size_type n,cons ...
随机推荐
- Bridge 桥模式
之前一直以为桥是简单地沟通几个不同接口,使之能够按照一定流程工作.但重新查了一下解释,才有新解. 对于同一个产品的不同影响因子,如果使用继承的话,则这些影响因子则会按照M1*M2* ... Mn的数量 ...
- SplendidCRM 中文语言包改正版
由于官方的中文语言包太多地方词不达意,可能是文化差异吧,如“删除”却写成“德尔”.本人修改了几十个地方,还修改了不能清除已有数据的Bug.相关文件在下载包中. http://files.cnblogs ...
- python 代码片段
print 'dongshen' for word in ['capitalize','these','words']: print word.upper() for i in range(0,5): ...
- HDU 1026 (BFS搜索+优先队列+记录方案)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1026 题目大意:最短时间内出迷宫.迷宫里要杀怪,每个怪有一定HP,也就是说要耗一定时.输出方案. 解 ...
- 【wikioi】1191 数轴染色(线段树+水题)
http://wikioi.com/problem/1191/ 太水的线段树了,敲了10分钟就敲完了,但是听说还有一种并查集的做法?不明觉厉. #include <cstdio> #inc ...
- 【BZOJ】1507: [NOI2003]Editor(Splay)
http://www.lydsy.com/JudgeOnline/problem.php?id=1507 当练splay模板了,发现wjmzbmr的splay写得异常简介,学习了.orzzzzzzzz ...
- jstl fn标签
JSTL使用表达式来简化页面的代码,这对一些标准的方法,例如bean的getter/setter方法,请 求参数或者context以及session中的数据的访问非常方便,但是我们在实际应用中经常需要 ...
- SQL Server事务的隔离级别
SQL Server事务的隔离级别 ########## 数据库中数据的一致性 ########## 针对并发事务出现的数据不一致性,提出了4个级别的解决方法: 隔离级别 第一类丢失更新 脏读 ...
- include动作标记和include指令标记学习笔记
我的jsp学习参考书是耿祥义,张跃平编著的jsp大学使用教程这本书,我也向大家推荐这本书,我觉得这本书适合我的学习方式,知识的讲解透彻易懂. include指令标记 ...
- OpenCV学习笔记——滑动条开关
由于opencv库中并没有专门为开关而设的函数,可以用滑动条做开关 代码: #include<highgui.h> #include<cv.h> int g_switch_va ...