文档片段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--学习笔记的更多相关文章

  1. zepto 源码 $.contains 学习笔记

    $.contains(parent,node)  返回值为一个布尔值 ==> boolean parent,node我们需要检查的节点检查父节点是否包含给定的dom节点,如果两者是相同的节点,返 ...

  2. zepto源码--init--学习笔记

    先展示init函数,由于笔记本屏幕太小,删掉了部分源码注释,才能在一屏内截图. 当我们调用$()的时候,便会直接调用zepto.init()生成zepto对象,跟jquery生成jquery对象类似. ...

  3. c++ stl源码剖析学习笔记(一)uninitialized_copy()函数

    template <class InputIterator, class ForwardIterator>inline ForwardIterator uninitialized_copy ...

  4. zepto源码--qsa--学习笔记

    zepto内部选择器qsa方法的实现. 简述实现原理: 通过判断传入的参数类型: 如果是'#id',则使用getElementById(id)来获取元素,并且将结果包装成数组形式: 如果是'.clas ...

  5. zepto源码--extend--学习笔记

    对象继承函数: $.extend(){},默认传递一个参数,需要继承的对象目标.函数展示: 最终实现的过程,需要调用工具函数extend,首先分析extend函数. 默认传递三个参数,继承的目标对象- ...

  6. zepto源码--matches--学习笔记

    zepto的第一个函数,zepto.matches: 作用:用来匹配dom元素是否匹配某css selector. 它为后面的一些高级方法的实现提供了基础支持,比如事件代理,parent, close ...

  7. requests源码阅读学习笔记

    0:此文并不想拆requests的功能,目的仅仅只是让自己以后写的代码更pythonic.可能会涉及到一部分requests的功能模块,但全看心情. 1.另一种类的初始化方式 class Reques ...

  8. c++ stl源码剖析学习笔记(二)iterator

    ITERATOR 迭代器 template<class InputIterator,class T> InputIterator find(InputIterator first,Inpu ...

  9. c++ stl源码剖析学习笔记(三)容器 vector

    stl中容器有很多种 最简单的应该算是vector 一个空间连续的数组 他的构造函数有多个 以其中 template<typename T> vector(size_type n,cons ...

随机推荐

  1. Codeforces Round #330 (Div. 2)

    C题题目出错了,unrating,2题就能有很好的名次,只能呵呵了. 水 A - Vitaly and Night /***************************************** ...

  2. Visual Studio 2013 EF5实体数据模型 EDMX 使用 T4模板生成后使用 ObjectContext对象

    Visual Studio 2013 EF5实体数据模型 EDMX 使用 T4模板生成后的继承对象为DbContext,以前的熟悉的ObjectContext对象不见了,当然使用ObjectConte ...

  3. 【Linux程序设计】之Linux库函数的使用,多文件程序开发,静态与共享函数

    这个系列的博客贴的都是我大二的时候学习Linux系统高级编程时的一些实验程序,都挺简单的.贴出来纯粹是聊胜于无. 实验题目:Linux基础程序设计综合实验 实验目的:熟悉并掌握Linux库函数的使用, ...

  4. BZOJ3012 : [Usaco2012 Dec]First!

    建立Trie,那么成为答案的串必须满足其终止节点到根路径上没有其它点. 对于Trie上每个节点维护一个bitset,表示哪些字符必须在哪些字符之前. 每到达一个可能成为答案的终止节点,对图进行拓扑排序 ...

  5. HDU 1561 (树形DP+背包)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1561 题目大意:从树根开始取点.最多取m个点,问最大价值. 解题思路: cost=1的树形背包. 有 ...

  6. HDU 1429 (BFS+记忆化状压搜索)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1429 题目大意:最短时间内出迷宫,可以走回头路,迷宫内有不同的门,对应不同的钥匙. 解题思路: 要是 ...

  7. 我理解的 js 的观察者模式 Observable

    我第一次看 四人帮 写的<设计模式>时一头雾水,现在也是,或许其是针对专业的程序员学习使用的. 通过对Ext / Backbone 源码的学习,可总结如下: 模式 - 就是对解决某一类特定 ...

  8. How to Programmatically Switch between the HubTile Visual States

    In this post I am going to talk about how to programmatically switch between different HubTile Visua ...

  9. Xcode 编辑时的爆炸效果

    Xcode 的爆炸效果 1.打开终端输入 $mkdir -p ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins;$curl ...

  10. TYVJ P1036 统计数字 Label:坑!!!(用queue+map做出来的水)

    背景 NOIP2007年提高组第一题 描述 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*109).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数 ...