zoukankan      html  css  js  c++  java
  • 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即可。

  • 相关阅读:
    bzoj3105: [cqoi2013]新Nim游戏
    bzoj2142: 礼物
    bzoj3295: [Cqoi2011]动态逆序对
    THUWC2018酱油记
    hdu5306 Gorgeous Sequence
    高斯消元入门
    bzoj3667: RabinMiller算法
    关于wordpress忘记密码 找回密码的方式
    数据库事务四个特性
    mysql的账户失效,之前的密码无法登录
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/6064574.html
Copyright © 2011-2022 走看看