zepto源码--核心方法4（包装）--学习笔记

主要介绍一下wrap, wrapAll, wrapInner, unwrap方法。

wrapAll

在所有匹配元素外面包一个单独的结构。结构可以是单个元素或 几个嵌套的元素，并且可以是html字符串或者dom元素。

用文字解释一下，就是先把传入的参数转换为dom结构，插入到所选择的包装集的前面，然后将包装集插入到所插入的dom元素的最深层次的第一个子集里面。

逐行解释：

structure = $(structure)是将传入的参数转换为dom元素，再使用before方法插入到所选择的包装集的第一个元素的前面。

这里的this[0]相当于$(selector).get(0)

children = structure.children()就是获取插入的dom结构的子集，利用while循环，判断children是否存在，直到最内存的children，取得第一个dom元素，并赋值给structure。

将所选取的包装集直接插入到$(structure)。

返回$(this)，确保可以链式调用。

wrap

在每个匹配的元素外层包上一个html元素。参数与wrapAll类似，但是比wrapAll多一种类型，wrap的参数可以为函数类型，通过回调函数返回前面的包裹片段。

如果包装集不为空，并且传入的参数不是函数类型，定义两个变量，举例：如果参数为‘<div class="test1"></div><div class="test2"></div>’，则dom的值为'<div class="test1"></div>'，自动忽略后面的。

clone = dom.parentNode || this.length > 1

由于包装集不一定仅有一个元素，如果超过一个元素的话，要实现每一个包装集元素进行包裹的话，就需要对dom进行克隆，而且属于深拷贝。根据当前选择的包装集是否大于1来判断是否需要深拷贝。不理解dom.parentNode的作用是什么，dom是传入的参数所转化的dom结构，怎么会有parentNode?

准备工作完成之后，需要对所选取的包装集遍历，逐个使用wrapAll进行包装。

wrapAll里面的参数，需要依据条件进行判断，如果wrap参数是函数的话，则将执行函数，返回结果作为wrapAll的参数，如果不是函数，就一句clone的值，来判断是不是需要多次使用，如果包装集只有一个元素，则直接将dom传入，如果有多个元素，则将dom深拷贝。

这里需要对三元运算符有一定的理解，能够更容易理解这段。

wrapInner

将每个元素中的内容包裹在一个单独的结构中。

可以参照wrap进行理解，区别在于是将wrap需要包裹的元素本身，替换成wrapInner需要包裹其子集，关键点在于contents = self.contents()，然后如果该元素没有子集，则直接将所传入的参数转换的dom结构插入到该元素之内(self.append(dom))

unwrap

移除集合中每个元素的直接父节点，并把他们的子元素保留在原来的位置。

目标是移除所有父节点，所以先获取当前包装集的父元素，并进行遍历，对遍历的项利用其子集直接替换replaceWith($(this).children())，这里需要理解的是this，一共有四个this，但是this的指向并不相同，this.parent和 return this中的this，指的是包装集，而两个$(this)中的this指的是获取到的parents进行遍历的每一个parent项。

深入理解this即可。