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

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

    在页面展示的效果

  • 相关阅读:
    Medium | LeetCode 148. 排序链表 | 归并排序(递归)
    Hard | LeetCode 4. 寻找两个正序数组的中位数 | 二分法
    Medium | LeetCode 341. 扁平化嵌套列表迭代器 | 递归 | 栈
    Hard | LeetCode 312. 戳气球 | 递归+记忆化数组 | 动态规划
    如何删除万能输入法
    javaweb 怎么获取路径
    Controller 返回 json那些小事
    螺旋矩阵
    javaweb怎么使用html
    tomcat中文乱码
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/6015570.html
Copyright © 2020-2023  润新知