与生成width和height使用的方法类似,通过`after`, `prepend`, `before`, `append`,这四者之间的共性,生成对应的函数。并根据这四个函数,生成

`insertAfter`, `insertBefore`, `appendTo`,  `prependTo`。

将具有共性的四者存储在一个数组中,以便于循环遍历。

adjacencyOperators.forEach(function(operator, operatorIndex) {})

使用forEach进行遍历,获取到遍历的元素operator和序号operatorIndex

var inside = operatorIndex % 2

如果对一个数组中的特定项进行不同的操作,可以对索引取余数,因为在js里面0代表false,正数代表true,当前数组中明显的after和before操作类似,prepend和append操作类似,所以使用inside进行区分。1%2=1,3%2=1,所以当遍历到的当前项为prepend和append时,inside为真。

$.fn[operator] = function(){}这里开始定义函数。

定义四个变量argType,nodes,parent,copyByClone,其中argType和parent属于直接定义,不需要更多解析。copyByClone需要根据当前项的个数是否大于1进行区分,如果大于1,值为true,否则为false。

需要进行比较复杂的处理的是变量nodes,这几个函数主要是为了往dom中插入节点使用的,所以传入的参数类型可能比较复杂,可能是节点、节点数组、zepto对象或者html字符串,nodes就是将传入的节点转换为合适的dom集合

nodes实现的方法似乎没有什么比较困难的。

需要注意的是这里面调用的push,concat都是数组原生方法。

if (nodes.length < 1) return this表示如果没有选取到节点,也没有创建新的节点的话,就是$(elem)的值为非真的话就直接返回。不再进行后续操作。

从return this.each(function(_, target){...})函数内部属于真正的实现插入节点的操作。

`after`, `prepend`, `before`, `append`这四个方法都是使用原生函数insertBefore来实现的,insertBefore() 方法在您指定的已有子节点之前插入新的子节点。即应当为

parent.insertBefore(newItem, existingItem),after和before实现的是插入到当前节点的后面或者前面,prepend和append实现的是当前节点内部插入。


 当parent.insertBefore(newItem, null)时,是直接插入到parent内部的最后面,正好满足append的需要。

这么来一一对应的话可能更容易理解一点。

获取对应的parent元素节点和target元素节点。

nodes.forEach(function(node){...})对获取的元素节点遍历进行处理。

copyByClone=true时,进行深拷贝。

if (!parent) return $(node).remove()如果元素不存在,则没办法进行插入操作,则直接删除元素并返回。

parent.insertBefore(node, target)实现插入操作。

到这里基本上插入操作已经处理完成了,但是如果插入的节点中有script标签包裹的内容,需要继续操作一下,让script标签内部的js执行,不细述。

实现insertBefore,insertAfter,prependTo,appendTo方法。

分开来看,$.fn.appendTo = function(html){

  $(html).append(this);

  return this;

}

其实就是使用前面已经完成的方法反向实现。

zepto源码--插入节点--学习笔记的更多相关文章

  1. zepto源码--定义变量--学习笔记

    主要了解一下zepto定义的初始变量. 逐一以自己的理解解析,待到后面完全透彻理解之后,争取再写一遍zepto源码学习的文章. 其中的undefined确实不明白为什么定义这么个变量在这里. docu ...

  2. zepto源码--整体框架--学习笔记

    为了深入学习javascript,根据别人推荐的方法之一:研究源码. 相对而言,之前的项目中仅仅使用过zepto和jquery,当前阶段,看到好几千行的jquery源码,心生敬畏,望而却步,所以选择相 ...

  3. zepto源码--width,height--学习笔记

    width和height函数,实际上通过css方法也完全可以取到这两个函数的结果.获取width,$elem.css('width');设置width的话,$elem.css('width', 100 ...

  4. 《Android源码设计模式》学习笔记之ImageLoader

    微信公众号:CodingAndroid cnblog:http://www.cnblogs.com/angel88/ CSDN:http://blog.csdn.net/xinpengfei521 需 ...

  5. 《PHP7底层设计与源码实现》学习笔记1——PHP7的新特性和源码结构

    <PHP7底层设计与源码实现>一书的作者陈雷亲自给我们授课,大佬现身!但也因此深感自己基础薄弱,遂买了此书.希望看完这本书后,能让我对PHP7底层的认识更上一层楼.好了,言归正传,本书共1 ...

  6. .NET 云原生架构师训练营(KestrelServer源码分析)--学习笔记

    目录 目标 源码 目标 理解 KestrelServer 如何接收网络请求,网络请求如何转换成 http request context(C# 可识别) 源码 https://github.com/d ...

  7. stl源码剖析 详细学习笔记 hashtable

    //---------------------------15/03/24---------------------------- //hashtable { /* 概述: sgi采用的是开链法完成h ...

  8. stl源码剖析 详细学习笔记 set map

    // //  set map.cpp //  笔记 // //  Created by fam on 15/3/23. // // //---------------------------15/03 ...

  9. stl源码剖析 详细学习笔记priority_queue slist

    // //  priority_queue.cpp //  笔记 // //  Created by fam on 15/3/16. // // //------------------------- ...

随机推荐

  1. Javascript实现Linq查询方式

    Linq是.net平台一个重要的技术,全称Language Integrated Query.通过构建快速查询语句,可快速从数据库或集合中筛选数据集.以查询数据库相同的方式操作内存数据. 在ECMAS ...

  2. LightOJ1257 Farthest Nodes in a Tree (II)(树的点分治)

    题目给一棵树,边带有权值,求每一点到其他点路径上的最大权和. 树上任意两点的路径都可以看成是经过某棵子树根的路径,即路径权=两个点到根路径权的和,于是果断树分治. 对于每次分治的子树,计算其所有结点到 ...

  3. BZOJ2388 : 旅行规划

    考虑分块,每块维护两个标记$ts,td$. 那么对于块中一个位置$i$,它的实际值为$i\times td+ts+v_i$. 修改的时候,对于整块,直接打标记,对于零散的暴力修改,然后重构凸壳,时间复 ...

  4. Ural 1018 (树形DP+背包+优化)

    题目链接: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=17662 题目大意:树枝上间连接着一坨坨苹果(不要在意'坨'),给 ...

  5. Java递归搜索指定文件夹下的匹配文件

    import java.io.File; import java.util.ArrayList; import java.util.List; import java.util.Queue; /** ...

  6. hdu Turn the corner

    这题是道三分的题,首先要分析满足条件的情况,这个就是平面几何的功夫了.要想车子能够转弯成功,最上面那个点到水平线的距离要小于等于y.这里h和s的公式就是利用平面几何的知识求出来的:s=l*cos(a) ...

  7. Html - 图片

    千图网 http://www.58pic.com/ 图标宝 http://ico.58pic.com/ 瓢城Web俱乐部 http://www.ycku.com/demo/

  8. C# - Dbhelp

    dbhelp.cs using System; using System.Data; using System.Data.Common; using System.Configuration; pub ...

  9. [转]Entity Framework4.0 (七) EF4的存储过程

    本文转自:http://www.cnblogs.com/marksun/archive/2011/12/21/2296500.html 前面了解了EF4的CRUD的操作,你会发现EF4使用起来比较简单 ...

  10. 《GK101任意波发生器》升级固件发布(版本:1.0.2build306)

    一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build306 编译日期:2014-09-24 ====================================== 二. ...