zepto源码--插入节点--学习笔记

与生成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;

}

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

原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/6047063.html