【zepto学习笔记01】核心方法$()(补)
前言
昨天学习了核心$(),有几个遗留问题,我们今天来看看吧
$.each
遍历数组/对象,将每条数据作为callback的上下文,并传入数据以及数据的索引进行处理,
如果其中一条数据的处理结果明确返回false,则停止遍历,并返回elements
$.each = function (elements, callback) {
var i, key
if (likeArray(elements)) {
for (i = 0; i < elements.length; i++) {
if (callback.call(elements[i], i, elements[i]) === false)
return elements;
}
} else {
for (key in elements) {
if (callback.call(elements[key], key, elements[key]) === false)
return elements;
}
}
return elements
}
这个方法本身实现比较简单,我们就不追究了,我们看看里面用到了一个likeArray
function likeArray(obj) {
return typeof obj.length == 'number'
}
这个方法我们就说完了,下面会用到的所以这里就先提出来
zepto.fragment
首先,他的调用时这个样子的:
dom = zepto.fragment(selector.trim(), RegExp.$1, context)
传入html字符串,第二个参数为寻找到的name,第三个是上下文,我们先来看看这个正则
var fragmentRE = /^\s*<(\w+|!)[^>]*>/;
我们来随便写一段代码测试下
//HTML代码片断的正则
var fragmentRE = /^\s*<(\w+|!)[^>]*>/;
var str = '<div><span>fdfdsdf</span></div>';
console.log(RegExp.$1);
console.log(fragmentRE.test(str));
console.log(RegExp.$1);
console.log(fragmentRE.exec(str));
这段代码的结果如下,RegExp.$1应该是取得最近一次匹配的标签
所以这里传入的参数就是字符串和最外层标签名了,我们继续往下走
然后他这里来了一个html修复,向只写了<div>没结尾的会补全
var tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig;
var str = '<p class="ddd"/>';
console.log(tagExpanderRE.exec(str));
console.log(str.replace(tagExpanderRE, "<$1></$2>"));
因为下面要用到name,而如果没有传入name参数,name就会被指定相关值,设值方式与上面一致
if (name === undefined) name = fragmentRE.test(html) && RegExp.$1
现在设值容器标签名,因为table情况有所不同所以这里单独对table做了处理,其它的容器都是div
var table = document.createElement('table');
var tableRow = document.createElement('tr');
var containers = {
'tr': document.createElement('tbody'),
'tbody': table,
'thead': table,
'tfoot': table,
'td': tableRow,
'th': tableRow,
'*': document.createElement('div')
};
var container.innerHTML = '' + html //将html代码片断放入容器
然后依次取出容器中的dom结构,这里用到了each方法,我们上面已经说明了
这个方法反正就是将dom中的所有children删除了,然后返回
var table = document.createElement('table');
var tableRow = document.createElement('tr');
var containers = {
'tr': document.createElement('tbody'),
'tbody': table,
'thead': table,
'tfoot': table,
'td': tableRow,
'th': tableRow,
'*': document.createElement('div')
}; function likeArray(obj) {
return typeof obj.length == 'number'
}
var $ = {};
var slice = [].slice;
//slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
//var str = "Hello happy world!"
//document.write(str.slice(6, 11)); //happy $.each = function (elements, callback) {
var i, key
if (likeArray(elements)) {
for (i = 0; i < elements.length; i++) {
if (callback.call(elements[i], i, elements[i]) === false)
return elements;
}
} else {
for (key in elements) {
if (callback.call(elements[key], key, elements[key]) === false)
return elements;
}
}
return elements
}
var name = '*', html = '<div><span></spam></div>';
var container = containers[name];
container.innerHTML = html; var dom = $.each(slice.call(container.childNodes), function () {
container.removeChild(this);
})
console.log(container);
console.log(dom);
这里只清空container,我们的dom还是在的,并真资格的编程了dom数组了
这里dom其实基本搞完了,完了可以对属性进行设置,其中就用到了zepto属性设置的方法了,我们这里暂时不管他
if (isPlainObject(properties)) {
nodes = $(dom) //将dom转成zepto对象,为了方便下面调用zepto上的方法
//遍历对象,设置属性
$.each(properties, function (key, value) {
//如果设置的是'val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset',则调用zepto上相对应的方法
if (methodAttributes.indexOf(key) > -1) nodes[key](value)
else nodes.attr(key, value)
})
}
最后返回了我们创建好的dom数组,所以我们就可以使用zepto.Z将之封装了
这个完了,我们来看看我们的zepto.qsa
zepto.qsa
这个方法用作选择器,这个直接调用的html5 javascript选择元素的方法
zepto.qsa = function (element, selector) {
var found
//当element为document,且selector为ID选择器时
return (isDocument(element) && idSelectorRE.test(selector)) ?
//直接返回document.getElementById,RegExp.$1为ID的值,当没有找节点时返回[]
((found = element.getElementById(RegExp.$1)) ? [found] : []) :
//当element不为元素节点或者document时,返回[]
(element.nodeType !== 1 && element.nodeType !== 9) ? [] :
//否则将获取到的结果转成数组并返回
slice.call(
//如果selector是标签名,直接调用getElementsByClassName
classSelectorRE.test(selector) ? element.getElementsByClassName(RegExp.$1) :
//如果selector是标签名,直接调用getElementsByTagName
tagSelectorRE.test(selector) ? element.getElementsByTagName(selector) :
//否则调用querySelectorAll
element.querySelectorAll(selector))
}
这个方法我最后发现比较简单,就是选择器,我们这里就不管他了
结语
我们今天暂时到这,下次再继续
【zepto学习笔记01】核心方法$()(补)的更多相关文章
- 【zepto学习笔记01】核心方法$()
前言 我们移动端基本使用zepto了,而我也从一个小白变成稍微靠谱一点的前端了,最近居然经常要改到zepto源码但是,我对zepto不太熟悉,其实前端水准还是不够,所以便私下偷偷学习下吧,别被发现了 ...
- Redis:学习笔记-01
Redis:学习笔记-01 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 1. Redis入门 2.1 ...
- 软件测试之loadrunner学习笔记-01事务
loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...
- C++ GUI Qt4学习笔记01
C++ GUI Qt4学习笔记01 qtc++signalmakefile文档平台 这一章介绍了如何把基本的C++只是与Qt所提供的功能组合起来创建一些简单的图形用户界面应用程序. 引入两个重要概 ...
- SaToken学习笔记-01
SaToken学习笔记-01 SaToken版本为1.18 如果有排版方面的错误,请查看:传送门 springboot集成 根据官网步骤maven导入依赖 <dependency> < ...
- PHP 学习笔记 01
例子: 为什么要学PHP 主观原因: 前段时间在学校处理了毕业的一些事情,回到上海后开始了找工作的旅程.意向工作是WPF开发或者ASP.NET 作为后端的WEB开发. 陆陆续续一直在面试,其中有一家公 ...
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- [Golang学习笔记] 01 工作区和GOPATH
Go语言3个环境变量: GOROOT:GO语言按照根路径,也就是GO语言的安装路径. GOPATH:若干工作区目录的路径.是我自己定义的工作空间. GOBIN:GO程序生成的可执行文件(executa ...
- xml基础学习笔记01
注意:刚刚看了网上对于XML中的标签,节点和元素?到底应该怎么表述?起初我也有这个疑惑,现在我的想法是:下面出现node的应称作节点,节点对象.element应称作元素,毕竟这更符合英文的本意.至于标 ...
随机推荐
- java集合框架之List
一.List: 1. 特有的常见方法:(有个共性特点就是都可以操作角标) (1).添加 void add(int Index , E element):在list的指定位置插入元素 void add ...
- Tmux - Linux从业者必备利器
本文详细介绍tmux的概念和搭建过程 本博客已经迁移至: http://cenalulu.github.io/ 为了更好的体验,请通过此链接阅读: http://cenalulu.github.io/ ...
- Hadoop官方文档翻译——HDFS Architecture 2.7.3
HDFS Architecture HDFS Architecture(HDFS 架构) Introduction(简介) Assumptions and Goals(假设和目标) Hardware ...
- Javascript的实例化与继承:请停止使用new关键字
本文同时也发表在我另一篇独立博客 <Javascript的实例化与继承:请停止使用new关键字>(管理员请注意!这两个都是我自己的原创博客!不要踢出首页!不是转载!已经误会三次了!) 标题 ...
- 基于HTML5的WebGL结合Box2DJS物理引擎应用
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是 ...
- IOS开发技巧快速生成二维码
随着移动互联网的发展,二维码应用非常普遍,各大商场,饭店,水果店 基本都有二维码的身影,那么ios中怎么生成二维码呢? 下面的的程序演示了快速生成二维码的方法: 在ios里面要生成二维码,需要借助一个 ...
- 利用jstree插件轻松构建树应用
最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树, ...
- C#基础03
学习集合的一些知识.集合:泛型集合,非泛型集合;ArrayList,Hashtable,List<T>,Dictionary<k,v>等,还有一些集合的常用方法. 一:集合的介 ...
- Microsoft Orleans 之 入门指南
Microsoft Orleans 在.net用简单方法构建高并发.分布式的大型应用程序框架. 原文:http://dotnet.github.io/orleans/ 在线文档:http://dotn ...
- web前端学习笔记---实现雪花飘落的效果
看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈旧了,那么就学者改掉吧. 包括: 1.对le ...