本来是打算参考zepto.js,然后将里面想要的部分抽出来做函数,随调随用。

但后面发现这种写法重复代码太多,代码不整洁,于是就打算模仿下zepto的写法,挑出些比较实用的方法,造一下轮子。

起名叫“iSelector”,已经放到了github上面

简单的做了封装,本来也想使用“$”相关的符号,但看来看去不是很合适,就用大写的“S”替代。

在造轮子的过程中,了解到了以前不知道的Element、Array等相关的方法或属性,这也是种收获。

同时引进了jasmine单元测试工具,通过加载其中的一个组件,就可以测试DOM了。

一、基础概念

1)Element与Node

Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,常用的如下:

Element继承了Node类,也就是说Element是Node多种类型中的一种,nodeType=1的Node就是Element,并且Element还有很多自己的属性和方法。

2)children与childNodes

Element类中的children返回nodeType为1的子元素集合,该集合为一个即时更新的(live)HTMLCollection

Node类中childNodes返回nodeType为1或3的子元素的集合,该集合为一个即时更新的(live)NodeList

<div id="outter">
<p id="inner">inner</p>
</div>

分别将outter中的两个值打印出,可在线调试,如下所示:

 

3)Element.matches()

matches表示如果当前元素能被指定的css选择器查找到,则返回true,否则返回false。这个方法在不同浏览器中需要使用前缀。


selectorString 是个css选择器字符串,语法与querySelector相同,同样可以在线调试

function matches(element, selector) {
var matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector || element.oMatchesSelector || element.matchesSelector;
return matchesSelector.call(element, selector)
}
var ismatch = matches(inner, "#inner");

4)Array相关方法

Array有众多方法,平时会用slice做数组转换、forEach做迭代,在zepto源码中用到了好几个我平时没怎么用的方法。

concat:将传入的数组或非数组值与原数组合并,组成一个新的数组并返回。

filter:使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。

reduce:接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。

some:测试数组中的某些元素是否通过了指定函数的测试。

every:测试数组的所有元素是否都通过了指定函数的测试。

map:返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

二、通用方法

zepto是将普通的元素包装了起来,在原型链中添加了很多方法,而通过“$”查找到的是个数组。

我自己封装的就用“S”来代表“$”符号。

例如$("div")调用上面的html代码,返回是将是下面一个伪数组,如果要变成数组就要手动的做“slice”操作。

1)S.matches

前面讲到过,用来做选择器匹配,对于不支持matches的浏览器,zepto中做了些兼容操作,源码在zepto中的51行左右。

在zepto经常引用的find、filter、is、closest等操作中就会使用这个方法。

2)S.qsa

根据输入的选择器,做匹配查询,使用getElementByIdgetElementsByClassNamegetElementsByTagNamequerySelectorAll

其实通过这个方法,可以选择最合适的匹配方法,选择器的语法也能做到与jQuery类似,源码在zepto中的249行左右。

3)S.extend

通过源对象扩展目标对象属性,源对象属性将覆盖目标对象属性,源码在zepto中的255行左右。

在zepto中的extend中,如果参数是个对象,那么浅复制仅仅是复制一个引用,深复制是复制内容。

var source = {0:1, 3:{4:'a', 5:'b'}};
var target = {};
extend(target, source);//第三个值为true,是深复制
source[3][4] = 'c';
console.log(target);
console.log(source);

上面是浅复制,修改source,target也会改变,左边是target,右边source。

  

如果是深复制,就不会改变。

    

我想简单点使用,就直接修改为浅复制吧,但我会过个hasOwnProperty的判断,过滤原型链上的属性或方法。

function extend(target, source) {
for (key in source) {
if (source[key] !== undefined && source.hasOwnProperty(key))
target[key] = source[key];
}
}

4)S.contains

containsNode类中的方法,返回一个boolean表示传入的节点是否是子节点。

zepto的代码中,还做了兼容性处理,可以直接拿来用,源码在273行左右。

5)S.children

查找子元素的兼容方法,这里面涉及到两个属性,“ParentNode.children”和“Node.childNodes”。

前者返回HTMLCollection集合,可以不用做NodeType的判断。

而后者返回的是NodeList集合,会返回两种类型的NodeType,1和3,所以要做判断过滤。

6)S.map

本来就是想直接用数组的map方法,但是后面在通过map集合后,要做“null”的过滤,并且还要做“concat”操作。

因为map后的集合会出现“[Array[2],Array[3]]”的方式,我只需要一维数组即可。

7)S.init

初始化操作,通过一些逻辑操作,获取HTMLCollection集合,再做“new iSelector”操作,做一层包裹。

三、DOM操作

接下来的方法都是在S.fn内,也就是会放到iSelector.prototype中。

1)filter

一个一维的节点数组,通过特定的函数或选择器过滤后,返回一个新的数组。

在children、siblings、prev和next中也会引用这个方法。

2)find

查找元素的子节点,就是在引用上面的qsa公共方法,在某个元素下面执行querySelectorAll等。

3)closest

返回最先匹配选择器的一个祖先元素,通过循环“parentNode”,再用上面的“S.matches”匹配指定的选择器。

4)children

获取直接子元素,通过公共的“S.children”获取到元素下面的子元素,再通过“filter”过滤指定的选择器。

5)siblings

获取兄弟元素。没有直接的库方法,通过点小技巧,先获取父元素,然后再“S.children”获取到此元素的子元素,再通过“filter”过滤指定的选择器。

6)prev与next

获取上一个元素与下一个元素,这里用到了两个Element类中的属性,“previousElementSibling”和“nextElementSibling

7)before与after

将元素插入到前面与后面,原生方法中只有“insertBefore”,如果要插入到后面就要模拟一下。

通过前面的“next”方法获取当前元素的下一个元素,然后插入到这个元素之前,就达到插入到后面的效果。

四、属性操作

1)html

既可做赋值也可做获取,使用了原生的“innerHTML”。

2)attr与removeAttr

获取属性与移除属性,使用了原生的方法“setAttribute”和“removeAttribute”。

3)setClass

设置与删除元素的class值,Element类中的className可以获取当前元素的class值。

将这个值用“split(/\s+/)”来分割,然后在数组中与输入的做匹配。

4)hasClass

判断元素的class值是否存在,也用到了正则“new RegExp('(^|\\s)'+name+'(\\s|$)')”,用这个来对比是否存在。

灵活运用正则可以简化很多工作,关于正则更多信息可以参考《JavaScript与PHP中正则

五、单元测试

单元测试使用了jasmine,还使用了单元测试的一个组件jasmine-jquery,简单的引用后就可直接使用。

<link rel="stylesheet" type="text/css" href="lib/jasmine.css">
<script src="lib/jasmine.js"></script>
<script src="lib/jasmine-html.js"></script>
<script src="lib/boot.js"></script>
<script src="lib/jquery.js"></script>
<script src="lib/jasmine-jquery.js"></script>
<!-- 被测试的代码 -->
<script src="../js/iSelector.js"></script>
<!-- 测试用例代码 -->
<script src="specs/iSelector_spec.js"></script>

目录结构中fixtures保存是html文件,测试DOM操作的时候,操作的html就是这里面的。

双击index.html就可以看到测试结果。

参考资料:

Zepto.js API 中文版

深入剖析 JavaScript 的深复制

How to forget about jQuery and start using native JavaScript APIs

订制DOM选择器的更多相关文章

  1. 都别说工资低了,我们来一起写简单的dom选择器吧!

    前言 我师父(http://www.cnblogs.com/aaronjs/)说应当阅读框架(jquery),所以老夫就准备开始看了 然后公司的师兄原来写了个dom选择器,感觉不错啊!!!原来自己从来 ...

  2. 关于一个新的DOM选择器querySelector

    在传统的javascript中,提到DOM选择器,大家比较熟悉的方式是通过tag,name,id来获取,其实大家都发现如果获取比较复杂的话,用这个方法会很繁琐,这时大家应该都会想到jquery里获取一 ...

  3. 一周学会Mootools 1.4中文教程:(1)Dom选择器

    利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...

  4. JEasyPoi 2.1.4 (Jeecg订制) 版本发布,Excel 和 Word 简易工具类

    JEasyPoi 2.1.4 (jeecg订制)版本发布,EasyPoi Excel 和 Word 简易工具类 easypoi 功能如同名字easy,主打的功能就是容易,让一个没见接触过poi的人员 ...

  5. 订制rpm包到Centos7镜像中

    本文以CentOS 7.4 最小化镜像(CentOS-7-x86_64-Minimal-1708.iso)为模版 要达到的目的: 1.订制所需的rpm软件包集成到iso文件中 2.制作完成的ISO全自 ...

  6. 订制EditText光标

    订制EditText光标 设置背景android:background="@null" 设置光标样式:android:textCursorDrawable="@drawa ...

  7. XMPP键盘订制实现图文混排

    在现阶段的通信服务中,各种标准都有,因此会出现无法实现相互连通,而XMPP(Extensible Message and presence Protocol)协议的出现,实现了整个及时通信服务协议的互 ...

  8. 【函数】wm_concat包的订制

     [函数]wm_concat包的订制   1  BLOG文档结构图     2  前言部分   2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道 ...

  9. DOM选择器

    DOM选择器分为:id.class.name.tagname.高级.关系选择器;(返回的都是标签) 一:元素节点选择器: 1. id: 返回的是单个对象 <body> <div cl ...

随机推荐

  1. 最小生成树 prime poj1258

    题意:给你一个矩阵M[i][j]表示i到j的距离 求最小生成树 思路:裸最小生成树 prime就可以了 最小生成树专题 AC代码: #include "iostream" #inc ...

  2. 后台PageVo中字段赋值与前台datagrid字段获取

    后台PageVo中字段的geter与setter函数需根据pageVo的字段自动生成,前台字段与后台字段名保持一致. 数据返回到前台时,datagrid会根据字段名隐射到相应的getter与sette ...

  3. properties文件使用{0}...

    例如properties文件的配置 weixin.token.url=https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credent ...

  4. android——相对布局,表格布局

    1.相对布局 RelativeLayout 又称作相对布局,也是一种非常常用的布局.和LinearLayout 的排列规则不同,RelativeLayout 显得更加随意一些,它可以通过相对定位的方式 ...

  5. TreeView 使用方法:(在View.Details模式下)

    1.建立TreeView的標題         2.建立TreeView的Item         3.在TreeView的Item中的建立SubItem                  如果將各部 ...

  6. java学习之面向对象(2)

    在描述事物的时候,该事物已存在就具备的一些内容,这是我们就可以把它们都定义在构造函数中,那么什么是构造函数呢? 构造函数就是构建创造对象时调用的函数,它可以给对象进行初始化.构造函数与类名相同,第一个 ...

  7. XML数据的解析

    XML数据的解析 相比于JSON数据解析而言,XML数据解析可能会让更多的童鞋感觉到吃力,对我来说,同样认为JSON数据好像让人感觉比较友好,不过对于程序开发者来说,无非就是这两种数据解析占比较大的部 ...

  8. shell条件测试test

    shell条件测试可以通过以下两种方式: test   参数    测试内容 [ 参数  测试内容 ] 一.测试文件类型: test  -e   文件名          (测试文件是否存在) [ - ...

  9. Sequence Project Showplan Operator 序列映射运算符

    Sequence Project Showplan Operator 序列映射运算符 序列映射运算符会从一个已经排序的集合里通过不停添加集合里的列执行计算. 运算符根据一个或多个列的值把输入集合分为多 ...

  10. 循序渐进做项目系列(3):迷你QQ篇(1)——实现客户端互相聊天

    <循序渐进做项目系列迷你QQ篇>将陆续介绍客户端聊天,文件传输,加好友,群聊,包括语音聊天,视频聊天,远程桌面等等需求如何实现,感兴趣的朋友可以持续关注.考虑到某些需求较为复杂,本系列采用 ...