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

    }

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

  • 相关阅读:
    第一章 第二节逻辑代数基础
    第一章 第一节数制与编码
    Altium Designer多原理图、PCB更新处理
    AD添加LOGO的方法
    XML中<beans>属性
    程序员值得学习的技术博客
    设计模式
    js分页实例
    Java构造和解析Json数据的方法
    H5+ 移动app学习之三 App离线存储
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/6047063.html
Copyright © 2011-2022 走看看