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回调获取数据之后，一般需要将这些数据拼接到页面上面去，这里就有了该方法的发挥着地

从而避免了我们一个一个属性的添加的麻烦，也使得函数更加清晰明了。

在页面展示的效果

 

转载于:https://www.cnblogs.com/zhuhuoxingguang/p/6015570.html