一、四种动画
（一）、合成器动画
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>
网友评论