学习zepto.js(对象方法)[2]
学习zepto.js(对象方法)[2]
今天来说下zepto那一套dom操作方法,
['prepend', 'append', 'prependTo', 'appendTo', 'before', 'after', 'insertBefore', 'insertAfter']
按着从内到外,从主到从,从前到后的顺序来说这八个方法.
这些方法的参数可以是一个dom节点,也可是是一个html片段,或者Zepto对象;
prepend():
将参数插入对象内部的头部;
append():
将参数插入对象内部的尾部;
prependTo():
将对象插入到参数内部的头部(可以理解为将prepend的参数变为调用方法的对象,将对象变为方法的参数);
appendTo():
将对象插入到参数内部的尾部;
以上四个全都是元素内部的插入,接下来的四个全部是元素外部插入的.
before():
将参数插入到对象的前边;
after():
将参数插入到对象的后边;
insertBefore():
将对象插入到参数的前边;
insertAfter():
将对象插入到参数的后边;
之所以将这八个方法放在一块说,是因为这八个方法是通过循环动态生成的.首先要先会用,才可以去试着了解内部结构.了解完了以后,你会发现,你会很熟练的使用它;
上边那个数组是储存的几个操作的名称,下边的forEach循环是在zepto自执行函数中执行的,就是说,在构件zepto原型的是否就创建了这几个方法;
forEach方法回调返回的参数,第一个是值,第二个是值的下标;
map方法回调返回的参数同上,在方法内部第一个参数名使用了_(下划线),表示在该函数中并未使用到,但必须要占位(某群某大神就是这么干的),注意数组中存储的,
只有四个值(四个将参数插入至对象中的方法名[就叫它主动方法吧,原创名字,可以随意使用,不受任何版权约束]),还有数组的顺序也是很重要(根据数组顺序决定插入的位置);
inside变量存储了该方法是否为内部插入的bool值,这也是为什么上边说数组的顺序很重要;
跳过map方法中的处理,不多做解释,因为这个是转换参数为DOm节点的;
在方法返回时执行的each方法,
方法首先会判断该方法是否为对象内部的操作,如果是,将parent变量赋值为当前对象,如果不是,就说明是对象外部操作,就将parent赋值为对象的parentNode;
然后根据方法名字在操作集合中的下标来判断去什么dom节点,
把八个操作带进去,因为这八个方法最后使用的都是insertBefore方法,
顺便说一下原生的insertBefore方法使用方式.
首先调用该方法的为要被插入的对象,接收两个参数,第一个是要插入的对象,第二个是要插谁的前边;
售票处.insertBefore(李四,张三);
思考一下为什么要这么做.
after
首先after是第一个,after是外部的操作,而且是插入到当前调用的对象的后边,
要想使用insertBefore来实现插入到某对象的后边,我们需要三个对象,一个是当前对象,还有要插入的对象,以及当前对象的容器,也就是他的parent;
在进入方法时,我们通过inside变量获取到了该方法是否为内部插入,然后通过inside变量来给对象的容器赋值(自身或者parent);
在这里,三个所需的变量我们就都拿到了.
after执行的是插入到当前对象后,所以说
我们通过下标取出after操作执行所需的dom元素,对象的nextSibling,就是对象的后一个元素.插入到对象.nextSibling前边就相当于插入到对象的后边,
(就是说,超过了第二名,你就是第二名,绕不过来的自行撞墙);
parent(容器).insertBefore(要插入的对象,当前对象的后一个节点);一个dom树中同一个dom节点不会出现两次,就是说,移动对象属于剪切操作,而不是复制操作,
这也是为什么方法内不会进行判断调用方法的对象是否为多个,如果是多个,则需要将对象进行copy;
prepend
第二个是prepend,prepend是内部插入,将参数插入到对象内部最前边,与append相反(append插入到内部的尾部);
由于是内部操作,所以parent我们会取自身.然后再判断下标得到是prepend.然后我们取出用来确定位置的dom元素,就是对象的第一个子节点,插入到该节点前,就是取代了该节点成为firstChild(干掉熊猫,我就是国宝);
调用方式就是:
parent(这里是对象自身).insertBefore(要插入的对象,当前对象的第一个子节点);
before
before,插入到对象前(外部操作),这个就没什么好解释的了.insertBefore本来就是干这个使得.
append
append,插入到对象内尾部,
其实,区分这几个方法的核心就在这里,如果执行insertBefore方法,第二个参数为null,则会直接将第一个元素插入到容器的最后,相当于原生的appendChild方法.
关于下边那四个方法,就不做多解释了.
只是简单的将对象以及参数掉了个(个儿);
如果让我来实现这八个方法,我也许会写一个switch,更好点了也许会动态判断内部外部插入,里边会使用appendChild等等一系列方法,但绝对不会想到这种写法,所以说,读源码真心的学习最快的途径.
今天先写到这里,八个dom插入方法,自己也消化一下.里边也许说的还有点不太详细,如果有什么不明白的,欢迎留言,大家一起探讨.
//明日面试,求祝福
- 关于PHP字符编码的函数区别
- Java集合源码分析(二)Linkedlist
- array_shift() 函数
- 可穿戴设备:不要纠结“可穿戴”
- RXTX for JAVA 串口通信
- Java集合源码分析(一)ArrayList
- 运行jar包找不到主类
- spring cloud 学习(7) - 生产环境如何不停机热发布?
- jupyter notebook 在mac OS上的安装
- Hadoop(七)HDFS容错机制详解
- java一些常用并发工具示例
- 机器人来“抢工作”了,瑞典人为何能淡定处之
- 线性代数01 线性的大脑
- spring cloud 学习(10) - 利用springfox集成swagger
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 细品Redis高性能数据结构之SDS
- linux之第一个shell程序
- pyspark之从HDFS上读取文件、从本地读取文件
- spring之使用外部属性文件(连接数据库时使用)
- 【python-leetcode92-翻转链表】反转链表2
- 细品Redis高性能数据结构之hash对象
- pyspark之常用算子
- linux之shell综合例子之定时任务
- spring之配置单例的集合bean,以供多个bean进行引用
- 【python-leetcode25-翻转链表】K 个一组翻转链表
- spring之通过实例工厂方法配置Bean
- 细品redis分布式锁
- 【python-leetcode102-树的宽度遍历】二叉树的层次遍历
- 【python-树的宽度遍历】二叉树的反向层次遍历
- 基于TypeScript封装Axios笔记(二)