苹胖学习记录（二）4.1

• 练习

1. 猫动画
2. js简单获取
3. WEUI使用以及简单的js插元素

• JS

1. 时钟
   获取时间计算出指针偏转的角度并改变转心用setInterval()，定时调用即可
2. 构造函数 Constructor 原型 prototype 实例 instance
   
   三者关系
   
   构造函数 Person 可以生成实例 person ，都有自身不同的属性指向原型，通过这个指向原型的属性可以拿到定义好的方法函数和成员变量。他们是三个互相独立的个体，只不过他们有各自的属性指向对方，从而建立了联系。所以在构造函数上定义的静态函数，不能被实例调用。
   继承
   Person.prototype = new Animal('earth');
   继承实质上只是把原型更改成另外一个实例，从去获取那个实例带有的属性（也包括函数类型）。
3. 类型选择
   JS里的typeof能判断的复杂数据类型只有function，其他的都是object。所以，不能用原生的typeof。

var Type = {};
    for (var i=0, type;type = ['String','Array','Number'][i++];) {
        (function(type) { 
            Type['is' + type] = function(obj) {
                return Object.prototype.toString.call(obj) === `[object ${type}]`;
            }
        })(type)
    }

辨别方法是利用Object原型的toString方法转交得到的字符串做对比，从而确定数据类型。

4. open-book
   用两个盒子，其中一个盒子transform: rotateY(180deg);紧贴另外一个盒子组成page。
   翻页就用鼠标移动事件来做，并依靠鼠标点下和放开事件给一个信号量，改变整个page的style的transform:rotateY()。

• CSS

1. 豆瓣PC
   flex在老浏览器不兼容，大部分布局都是float，但是float有很多坏处，所以用更好的inline-block、grid。
   豆瓣里的四宫格ul>li>div>a>img用inline-block做
2. 世界杯页面仿写
   待完成
3. flexible十分之一
   原博客的说明
4. 火焰
   用滤镜写了一个小火花的样式后，再用stylus里的for循环做多个火花，并取随机数做动画延迟。
5. 飞机
   简单的定位，和旋转以及translate3D动画

• ES6

1. 使用map()快速处理

arr.forEach(function(ele形参){});     //arr多长就循环几次
arr.map(function(ele形参){
    return ???;
});     //每次循环返回一个元素替掉原数组的元素
或者arr.map(形参 => {
    return ???;
});     //其中ele和其他形参都是arr[n]

模版字符串`我叫${name}，我有${age}岁；`
即``字符串中可以插入变量不用+号

arr.join(a)可以快速用a分隔数组做成字符串

2. function和箭头函数

注意参数箭头之间不能换行
arguments所有函数里面(除了箭头函数)都可以用的变量
箭头函数不支持重复命名形参，普通函数可以(a,a)
箭头函数不能使用call apply 等方法改变this
箭头函数没有 this 它的 this 指向定义时所处的上下文（外部函数）的this
箭头函数没有原型对象 .prototype
箭头函数不能作为构造函数箭头函数没有 arguments

    function Person() {
        if(!new.target){
            console.log('只能使用new调用该构造函数');
        }
        console.log(new.target);
    }
    Person();

返回一个对象的正确做法
var arrow_4 = () => ({name:'马冬梅', age:19})

3. 数组解构和reset

• ES6支持解构const [a,[b],c]=[18,[20],30];
  对象也支持解构
  const obj = {
  foo:'foo val',
  bar:'bar val',
  baz:'baz val'
  }
  const {baz, foo:str1}=obj;
  const obj1 = {
  p:['hello',{msg:'Wolrd'}]
  }
  const {p:[a,{msg:b}]} = obj1;
• const this_age = ages.find((ages) => ages.age > 18);//找满足条件的第一个
  const this_age_filter = ages.filter((ages) => ages.age > 18);//找满足条件的所有
  const this_age_every = ages.every((ages)=> ages.age > 18);//判断是否所有都满足条件
  const this_age_some = ages.some(ages=> ages.age > 18);//判断是否有其中某项满足条件
• ES6从类数组对象建真数组对象有两个条件

1. 有length 对象
2. 通过索引 获取值
   const objarr = Array.from(obj);

• ES5中的方法
  function sum() {
  const args = Array.from(arguments);
  console.log(args.map(arr => 2*arr),args);
  // return [2,4,6,8];
  }
• // rest 参数 形式(...变量名)
  // 作用：获取函数多余参数
  // 搭配的变量是一个数组
  // rest参数不在最后一个的报错：Rest parameter must be last formal parameter
  const arrow_sum = (a,...args) => {
  console.log(a,args);
  }
  arrow_sum(1,2,3,4);
• ...相当于rest 参数的逆运算
  const arr = [18,19,20];
  console.log(...arr);//等同于console.log((18),(19),(20));
  console.log(Math.max(...arr));//等同于console.log(Math.max((18),(19),(20)));

• webgl

1. 用three.js做3d效果地球
   配置canvas/* 幕布 /,camera/ 照相机 /,scene/ 场景 /,group,renderer/ 渲染器 */
   添加球体（加载贴图）到组，组加载在场景里，渲染器渲染到页面上。
   动画就用requestAnimationFrame(animate);不停的刷新canvas的静态照片

• SVG

1. 加载笑脸的购物袋
   transform使嘴转动，stroke-dashoffset和stroke-dasharray截断做类似上次霓虹灯的效果，眼睛的移动动画用SVG路径做