【zepto学习笔记01】核心方法$()(补)
2013-11-21 15:50
323 查看
前言
昨天学习了核心$(),有几个遗留问题,我们今天来看看吧$.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学习笔记01】核心方法$()(补)
- zepto源码--核心方法5(文本操作)--学习笔记
- zepto源码--核心方法7(管理包装集)--学习笔记
- zepto源码--核心方法3(属性相关)--学习笔记
- zepto源码--核心方法6(显示隐藏)--学习笔记
- zepto源码--核心方法10(位置)--学习笔记
- zepto源码--核心方法8(管理包装集)--学习笔记
- zepto源码--核心方法4(包装)--学习笔记
- zepto源码--核心方法(类数组相关)--学习笔记
- zepto源码--核心方法9(管理包装集)--学习笔记
- zepto源码--核心方法2(class相关)--学习笔记
- iOS学习笔记-075.核心动画01——简介
- python核心编程学习笔记-2016-08-15-01-左加法__add__和右加法__radd__
- Hibernate学习笔记----session核心方法
- Servlet 与 Jsp核心编程 卷一 学习笔记 01
- 逆向工程核心原理学习笔记(三):检索API方法
- (原创)c#学习笔记10--定义类成员01--成员定义02--建立方法
- Ext学习笔记01 - NameSpace,类实例属性,类实例方法,类静态方法