遗漏知识点

2019-11-25 本文已影响0人该帐号已被查封_才怪

一、四种动画

（一）、合成器动画
1、合成器自身触发的动画，如惯性滚动；2、transform、opacity
（二）、非合成器动画
1、合成器无法单独运行的transition、animation
2、timer或者rAF驱动的js动画

二、类型检查

1、instanceOf
2、typeOf
3、Object.prototype.toString.call

image.png

三、克隆/拷贝

（一）、深拷贝
1、JSON.parse
2、getPrototypeOf(parent) 返回指定对象的原型

// 处理对象原型
proto=Object.getPrototypeOf(parent)
//采用Object.create(proto)切断原型链
child=Object.create(proto)

3、使用... 拆箱与装箱
注意打包时babel插件会使用Object.assign来替换
（二）、浅拷贝
1、for in
2、hasOwnProperty
3、Object.assigin

四、combo技术

使用combo技术可以将多个资源合并成一个（需要后端支持）
例如淘宝

<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">

<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>

五、position:fixed 定位问题

如果定义某个元素 position:fixed ，如果其祖先元素没有transform属性，则相对于视口，如果祖先元素有transform属性，则相对于该祖先元素；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;

    }
    .ct{
      margin: 50px;
      padding: 100px;
      background-color: #4d85d1;
      outline: 1px solid red;
    }
    .ct .fixed-fa-fa-tsf{
      outline: 1px solid blue;
      transform: translate(20px);
      height: 50px;
    }
    .ct .fixed-fa{
      height: 40px;
      margin-left: 50px;
      outline: 1px solid black;
    }
    .fixed{
      position: fixed;
      left: 0;
      top: 0;
    }

  </style>
</head>
<body>
<div class="ct">
  <div class="fixed-fa-fa-tsf">
    <div class="fixed-fa">
      <div class="fixed">测试fixed</div>
    </div>
  </div>
</div>

</body>


</html>