工作生活

Zepto.js读源码

2019-08-01  本文已影响0人  xuehairong

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>"
上一篇下一篇

猜你喜欢

热点阅读