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;
}
其实就是使用前面已经完成的方法反向实现。
zepto源码--插入节点--学习笔记的更多相关文章
- zepto源码--定义变量--学习笔记
主要了解一下zepto定义的初始变量. 逐一以自己的理解解析,待到后面完全透彻理解之后,争取再写一遍zepto源码学习的文章. 其中的undefined确实不明白为什么定义这么个变量在这里. docu ...
- zepto源码--整体框架--学习笔记
为了深入学习javascript,根据别人推荐的方法之一:研究源码. 相对而言,之前的项目中仅仅使用过zepto和jquery,当前阶段,看到好几千行的jquery源码,心生敬畏,望而却步,所以选择相 ...
- zepto源码--width,height--学习笔记
width和height函数,实际上通过css方法也完全可以取到这两个函数的结果.获取width,$elem.css('width');设置width的话,$elem.css('width', 100 ...
- 《Android源码设计模式》学习笔记之ImageLoader
微信公众号:CodingAndroid cnblog:http://www.cnblogs.com/angel88/ CSDN:http://blog.csdn.net/xinpengfei521 需 ...
- 《PHP7底层设计与源码实现》学习笔记1——PHP7的新特性和源码结构
<PHP7底层设计与源码实现>一书的作者陈雷亲自给我们授课,大佬现身!但也因此深感自己基础薄弱,遂买了此书.希望看完这本书后,能让我对PHP7底层的认识更上一层楼.好了,言归正传,本书共1 ...
- .NET 云原生架构师训练营(KestrelServer源码分析)--学习笔记
目录 目标 源码 目标 理解 KestrelServer 如何接收网络请求,网络请求如何转换成 http request context(C# 可识别) 源码 https://github.com/d ...
- stl源码剖析 详细学习笔记 hashtable
//---------------------------15/03/24---------------------------- //hashtable { /* 概述: sgi采用的是开链法完成h ...
- stl源码剖析 详细学习笔记 set map
// // set map.cpp // 笔记 // // Created by fam on 15/3/23. // // //---------------------------15/03 ...
- stl源码剖析 详细学习笔记priority_queue slist
// // priority_queue.cpp // 笔记 // // Created by fam on 15/3/16. // // //------------------------- ...
随机推荐
- Javascript实现Linq查询方式
Linq是.net平台一个重要的技术,全称Language Integrated Query.通过构建快速查询语句,可快速从数据库或集合中筛选数据集.以查询数据库相同的方式操作内存数据. 在ECMAS ...
- LightOJ1257 Farthest Nodes in a Tree (II)(树的点分治)
题目给一棵树,边带有权值,求每一点到其他点路径上的最大权和. 树上任意两点的路径都可以看成是经过某棵子树根的路径,即路径权=两个点到根路径权的和,于是果断树分治. 对于每次分治的子树,计算其所有结点到 ...
- BZOJ2388 : 旅行规划
考虑分块,每块维护两个标记$ts,td$. 那么对于块中一个位置$i$,它的实际值为$i\times td+ts+v_i$. 修改的时候,对于整块,直接打标记,对于零散的暴力修改,然后重构凸壳,时间复 ...
- Ural 1018 (树形DP+背包+优化)
题目链接: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=17662 题目大意:树枝上间连接着一坨坨苹果(不要在意'坨'),给 ...
- Java递归搜索指定文件夹下的匹配文件
import java.io.File; import java.util.ArrayList; import java.util.List; import java.util.Queue; /** ...
- hdu Turn the corner
这题是道三分的题,首先要分析满足条件的情况,这个就是平面几何的功夫了.要想车子能够转弯成功,最上面那个点到水平线的距离要小于等于y.这里h和s的公式就是利用平面几何的知识求出来的:s=l*cos(a) ...
- Html - 图片
千图网 http://www.58pic.com/ 图标宝 http://ico.58pic.com/ 瓢城Web俱乐部 http://www.ycku.com/demo/
- C# - Dbhelp
dbhelp.cs using System; using System.Data; using System.Data.Common; using System.Configuration; pub ...
- [转]Entity Framework4.0 (七) EF4的存储过程
本文转自:http://www.cnblogs.com/marksun/archive/2011/12/21/2296500.html 前面了解了EF4的CRUD的操作,你会发现EF4使用起来比较简单 ...
- 《GK101任意波发生器》升级固件发布(版本:1.0.2build306)
一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build306 编译日期:2014-09-24 ====================================== 二. ...