Zepto.js读源码

作者: xuehairong | 来源:发表于2019-08-01 15:25 被阅读0次

    1. RegExp.$1 是指第一个匹配项
    2. 对象可以用for(key in obj)遍历,对象的键可以是任何值,包括数字var obj={0:'adfc',1:'dfd'},然后可以用obj[0]访问
    3. 这个样可以把html字符串转化为NodeList对象container.childNodes(这个对象 不是数组,跟源码中$()返回的原理一样)

    var container=document.createElement('div')
    container.innerHTML='<div><p>23223</p></div><div></div><p></p>'
    

    4. (1)[].slice.call(arguments)(等于Array.prototype.slice.call(arguments))能将具有length属性的对象转成数组。(2)[].slice.call(arguments, 1)第二个参数可以获取从1开始的数据。(3)[obj]可以将一个单独对象转成数组。(4) 1 in arguments可以检测函数有几个参数。(5)'className' in obj可以检测对象有没有该属性
    这点的作用可以将document.getElementByIddocument.getElementsByTagName得到的不同类型结果都转成数组格式,方便统一处理

    var elements=[].slice.call(container.childNodes)
    

    5. Object.prototype.toString.call(obj)可以判断类型

    var class2type = {
    "[object Array]": "array",
    "[object Boolean]": "boolean",
    "[object Date]": "date",
    "[object Error]": "error",
    "[object Function]": "function",
    "[object Number]": "number",
    "[object Object]": "object",
    "[object RegExp]": "regexp",
    "[object String]": "string"
    }
        toString = class2type.toString,
    function type(obj) {
        return obj == null ? String(obj) :
          class2type[toString.call(obj)] || "object" 
    //这边其实就等同于Object.prototype.toString.call(obj) 用意是使用Object的toString(),而不是用elements的toString()
      }
    console.log(type(elements))//接上面定义的elements
    

    函数:
    (1).构造器调用模式,用new来调用时,创建一个隐藏连接到该函数的prototype成员的新对象,同时this将会被绑定到那个新对象上
    function F(a,b){
    this.a=a;
    this.b=b;
    console.log(this)
    }
    console.log(new F(1,2))
    6. 二元表达式可以这么写,定义在前面,不用写两次element.getElementById

    var found;
    (found = element.getElementById(nameOnly)) ? [found] : []
    

    7. String.prototype.repace此方法第二个参数传入函数时,可以进行更细致的处理

    var string='hello-there';
    var result=string.replace(/-+(.)?/g,function(match,chr ,pos,originalText){
      console.log(match);
      console.log(chr);
      console.log(pos);
      console.log(originalText);
      return chr ? chr.toUpperCase() : ''
    })
    console.log(result)
    //注意这边函数的参数,如果是用字符匹配的话,参数不一样,与上面正则表达式的相比,第一个和最后2个参数一样,第二个参数不一样
    var result2=string.replace('-',function(match,pos,originalText){
      console.log(match);
      console.log(pos);
      console.log(originalText);
    })
    

    8. 关于深拷贝,cc就是实现了深拷贝,这个只是个简单的例子,深拷贝的原理,遍历引用类型的数据,然后拷贝他的键值,实际情况可能会引用类型嵌套引用类型,比如:{one:1,two:{two1:21,two2:22}}这种情况就需要遍历(源码中参考$.extend

    let aa=[1,2,3]
    let aa=[1,2,3]
    let cc=[]
    for(key in aa){
     cc[key]=aa[key]
    }
    aa[0]=99
    console.log(aa,bb,cc)
    

    9. 数组去重的方法

    var array=[0,10,0,0,2]
    array.filter(function(item, idx){ 
      console.log(item,idx,array.indexOf(item));
     //如果indexOf出现的位置跟当前出现的位置不一样就是重复数据(当前元素在别的位置出现了)
      return array.indexOf(item) == idx;
    })
    

    9.数组some()、every()、map()、filter()的区别 (共同点都传入回调函数,都不改变原数组)const arr = [1,2,3,4];
    some()返回一个Boolean,判断是否有元素符合func条件arr.some((item)=>{return item>1})
    every()返回一个Boolean,判断是否每个元素符合func条件arr.every((item)=>{return item>1})
    filter()返回一个符合func条件的元素数组arr.filter((item)=>{return item>1})
    map()返回一个新的array,数组元素由每一次调用函数产生结果组成arr.map((item)=>{return item*10})
    foreach()返回值是undefined,数组每个元素都执行一次回调函数

    var sum = 0;
    function myFunction(item) {
        sum += item;
        demo.innerHTML = sum;
    }
    arr.forEach(myFunction)
    console.log(sum)
    

    10. 蛮神奇的写法,第一次见,源码用在append()

      var testObj={}
      var array=['test1','test2']//要创建的方法名集合
      array.forEach(function(item,index){//遍历集合来批量定义函数
        testObj[item]=function(){
          console.log(item)
        }
        //感觉这边比较神奇,我理解的是生成了test1Add()方法了,但调用的时候还是能够拆分
        testObj[item+'Add']=function(){
          console.log('Add'+item)
        }
      })
      testObj.test1()
      testObj.test1Add()
    

    11. getComputedStyle(element,'').getPropertyValue("display")返回值是'block',element.style.display返回值是空
    12. Element是Node的nodeType==1的
    13.innerHTML,textContent=innerText

    var a=document.getElementById('id')
    a.innerHTML='<p>这是一个P</p>'
    //这里替换为真正的P标签
    a.textContent='<p>这是一个P</p>'
    // 这里就变成字符串"<p>这是一个P</p>"
    

    相关文章

      网友评论

        本文标题:Zepto.js读源码

        本文链接:https://www.haomeiwen.com/subject/qpsncctx.html