博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
zepto中的属性设置
阅读量:7016 次
发布时间:2019-06-28

本文共 2518 字,大约阅读时间需要 8 分钟。

上次看zepto的init方法时,有一段属性设置的代码,先来看看其表现:

if (isPlainObject(properties)) {      nodes = $(dom)      $.each(properties, function(key, value) {        if (methodAttributes.indexOf(key) > -1) nodes[key](value)        else nodes.attr(key, value)      })    }

在分析这里的时候,一直很困惑,为什么实例化dom之后,对nodes进行属性设置会导致dom也有了属性设置的结果。回想了一下,在javascript中,对象是引用,而不是赋值,而dom不是zepto对象就是Dom对象,假如是zepto对象的话,那么nodes其实就是dom,因为在zepto的init方法中,传入参数是zepto对象的话则直接返回该对象。而如果是其他对象的话,则将其设置为数组的第一个元素返回该数组。

zepto.init = function(selector, context) {    var dom      ...    else if (typeof selector == 'string') {      ...    }     ...    else if (zepto.isZ(selector)) return selector    else {     ...      else if (isObject(selector))        dom = [selector], selector = null      ....    }    // create a new Zepto collection from the nodes found    return zepto.Z(dom, selector)  }

那么dom = [selector],是不是相当于dom[0] = selector;也是一个引用呢?

实验结果也就是一个引用。

那么言归正传,我们接下来看$.each函数

$.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  }

该函数事实上并没有什么特别,对于传入的第一个参数为要迭代的数组或对象,第二个为回调函数,如果迭代过程中有一个元素或属性返回false,则返回传入的第一个参数,否则迭代完再返回第一个参数。

然后就是attr方法了。

attr: function(name, value){      var result      return (typeof name == 'string' && !(1 in arguments)) ?        (0 in this && this[0].nodeType == 1 && (result = this[0].getAttribute(name)) != null ? result : undefined) :        this.each(function(idx){          if (this.nodeType !== 1) return          if (isObject(name)) for (key in name) setAttribute(this, key, name[key])          else setAttribute(this, name, funcArg(this, value, idx, this.getAttribute(name)))        })    },

 

该方法首先判断传入的第一个参数是否为一个字符串,并判断是否有第二个参数,然后根据条件返回读取属性的值。

如果传入的是其他情况,则调用each方法,注意,这里的each是$.fn.each,与上面的$.each不同。

 

each: function(callback){      emptyArray.every.call(this, function(el, idx){        return callback.call(el, idx, el) !== false      })      return this    },

 

each方法传入一个回调函数,并调用数组的every方法对this(则zepto对象)进行迭代,并将对象的属性作为回调函数的上下文进行调用。

那么attr方法中,传入的回调函数,则是首先判断this的nodeType是否为1,nodeType可以参考这里。若是,则调用setAttribute方法直接将传入的key-value对象设置为属性,否则就通过一个funcArg函数来设置其属性name的值。

function funcArg(context, arg, idx, payload) {    return isFunction(arg) ? arg.call(context, idx, payload) : arg  }

 

转载于:https://www.cnblogs.com/Darlietoothpaste/p/6596967.html

你可能感兴趣的文章
jquery获取节点的时候获取包含自己在内的HTML标签
查看>>
CPU profiling
查看>>
Exchanging Partitions and Subpartitions with Tables--官方文档
查看>>
[Typescript] Typescript Enums vs Booleans when Handling State
查看>>
Java中HashMap源码分析
查看>>
(转)c#.net常用字符串函数
查看>>
Xamarin提示Build-tools版本过老
查看>>
[linux]scp指令
查看>>
自从升级到macOS后,整个人都不好了
查看>>
border-style 属性
查看>>
拒绝旧国标劣质排插,新国标插线板首选品胜
查看>>
新疆国省干线总里程突破2.9万公里
查看>>
国产智轨电车开进“冰城”接受严寒测试 表现良好
查看>>
面试官,你再问我 Bit Operation 试试?
查看>>
PSV 3.60 固化升级到 3.68 破解完全攻略
查看>>
【实操干货】KVM命令管理虚拟机与性能优化
查看>>
Android NDK JNI 开发之旅01 环境搭建入门篇
查看>>
RxJava应用:实现七牛云多图上传
查看>>
Android爬坑之旅之不易发现的BUG
查看>>
koa2开发微信公众号: 不定期推送最新币圈消息
查看>>