每周学习总结——第一周

最新推荐文章于 2022-10-01 22:43:54 发布

weixin_33774883

最新推荐文章于 2022-10-01 22:43:54 发布

阅读量925

点赞数

原文链接：https://juejin.im/post/5b99c535f265da0a8c6c1188

版权

1.typeof

typeof undefined === 'undefined' // true

typeof null === 'object' // true
let a = null
if (!a && typeof a === 'object')// 判断null
复制代码

虽然array 、object、function的在基本类型中都是Object，但是使用typeof获取结果能过区分function

let a = function() {}
typeof a === 'function' //true

let b = []
let c = {}
typeof b === 'array' //false
typeof b === 'object' //true
typeof c === 'object' // true
复制代码

区分array与object必须通过其他方式

let a = []
if (Array.isArray) {
    Array.isArray(a)
} else {
    Object.toString.call(a) === [Object Array]
}
复制代码

typeof获取到的返回值是字符串

typeof typeof {} === 'string' // true
复制代码

2.line-height

line-height让文字居中与height没有关系，设置line-height后文字水平中线仅与line-height高度有关（学习内容来源张鑫旭）

/*css*/
div{
    line-height:40px;
    height: 30px;
}
// 文字内容水平中线会在20px处
复制代码

当元素存在内容，设置line-height可以达到设置高度的效果，基于这个特性，在没有固定高度要求或者仅排版文字或者图片内容的时候，line-height可以用来替代height，并且将内容表现为水平居中，文字和图片排版都可以;在inline box模型中，有一个line boxes，设置line-height后会给line boxes一个高度，如果div没有设置height，那么其高度就由line boxes撑开。但是有一个问题，这种高度无法继承，也无法覆盖height

  <style>
  .parent {
    width: 100px;
    line-height: 150px;
    background: red; 
  }
  .child {
    width: 100%;
    height: 100%;
    background: blue
  }
  </style>
</head>

<body>
  <div class="parent">
    asdfasdfasdfasdfasdfasdfffffffffffffffffffffffffffffffffffffff
    <div class="child">
    </div>

  </div>
</body>
// 出现一个红色的盒子，子类无法继承高度，不显示，如果parent内容不存在，界面上无任何内容，因为line-height无法撑开没有内容的区域，line boxes是作为一个包裹文字的中间模型存在，当没有内容，无法产生line boxes
复制代码

line-height 也可以设置百分比和数值，差别在于百分比具有继承性，使用百分比后续子元素继承的时候，是继承通过百分比转成的px像素大小，而数值1.2这种，是先继承1.2，显示的时候再计算。line-height属于行高，其设置的仅仅为单行内容高度

3.vertical-align

首先，是关系vertical-align属性描述

通过调节数值和百分比，可以直接调节内容相对于基线的位置，百分值%的计算来源于当前内容行高。例如line-height 20px，那么 vertical-align:-10%内容就是2px

经常会出现vertical不起作用的情况，那是因为vertical仅仅适用于inline-block元素，可以相对影响inline元素。vertical-align设置middle，top，bottom仅与父标签有关，与对标的文字内容无关

4.MutationObserver

mutationObserver的出现是为了解决mutationEvent所带来的问题，mutationEvent的事件无法取消，这是设计所带来的问题，appendChild，remove等添加删除节点都会执行mutationEvent事件。mutationEvent事件是同步执行的，意味着每次修改dom都会触发，对性能影响很大，而且会造成安全问题

document.addEventListener('DOMNodeInserted', function() {
    var newEl = document.createElement('div');
    document.body.appendChild(newEl);
});
复制代码

这样，每次appendChild会执行DOMNodeInserted，而同样每次坚挺到inserted都会执行一次appenChild，从而让浏览器崩溃

mutationObserver在性能和事件处理方面有了很大进步，而且是异步进行操作的，属于与nextTick，then同一类型的微任务，但是兼容性不够，最低只能适配ie11。mutationObserver的使用也很简单，

let observe = new MutationObserver(function(mutations,observer){})
复制代码

生成observe有三个总要属性： 1.observe(target,options),target表示你要监听的dom对象或者说目标，option是一个对象，通过设置它的属性，来表达所要进行的监听方式

option属性

childList：设置true，表示观察目标子节点的变化，比如添加或者删除目标子节点，不包括修改子节点以及子节点后代的变化

attributes：设置true，表示观察目标属性的改变

characterData：设置true，表示观察目标数据的改变

subtree：设置为true，目标以及目标的后代改变都会观察

attributeOldValue：如果属性为true或者省略，则相当于设置为true，表示需要记录改变前的目标属性值，设置了attributeOldValue可以省略attributes设置

characterDataOldValue：如果characterData为true或省略，则相当于设置为true,表示需要记录改变之前的目标数据，设置了characterDataOldValue可以省略characterData设置

attributeFilter：如果不是所有的属性改变都需要被观察，并且attributes设置为true或者被忽略，那么设置一个需要观察的属性本地名称（不需要命名空间）的列表
复制代码

disconnect：阻止观察者观察任何改变

takeRecords：清空记录队列并返回里面的内容

与mutationEvent做对比：

一般用法：

function callBack() {}
let dom = documment.getElementById('')
let observe = new MutationObserver(callBack)
observe.observe(dom,{childList:true,subtree:true})
dom.appendChild(childDom)
// 当dom执行添加操作的时候，会执行callBack
复制代码

使用mutationObserver执行异步操作。类似nextTick或者preomise.then这种微任务操作

 let mutation = window.MutationObserver || window.webkitMutationObserver
  let observer = new mutation(callback)
  let element = document.createTextNode('')
  observer.observe(element, {
    characterData: true
  })
  element.data = 1
  // 创建一个空的文本节点，监听它的数据变化，然后修改数据，就会执行一次mutationObserver监听，从而达到异步操作的效果
复制代码