前端学习(二十六）移动端s（笔记）

===================================================
弹性布局
rem布局
---------------------------------------------------
CSS3     transform
    rotate                 旋转
    translate             平移
    scale                 缩放
    skew                 扭曲
=======================================================
    rotate    深入
        rotate()             Z轴
        rotateX()             X轴

    透视效果
        perspective(px)         透视的强度
            数值越小越明显
            推荐范围:     800-1200

    切记：
        transform一定要加初始值
==========================================================
    translate         
        translate(x,y)             x轴和y轴方向平移

        Z轴平移
        translateZ()
    --------------------------------------------------
    开启3D模式
        transform-style: preserve-3d;

        开启3D模式，一般加给父级
        perspective一般加给父级

    3D正反面
        父级
            -webkit-transform-style: preserve-3d;
            -webkit-transition: 1s all ease;
            -webkit-transform: perspective(800px) rotateY(0deg);

            子级
                正面
                    -webkit-transform: translateZ(1px);
                反面
                    -webkit-transform: translateZ(-1px) scale(-1,1);

        3d盒子(立方体)
        父级
            -webkit-transform-style: preserve-3d;
            -webkit-transition: 1s all ease;
            -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
        子级
        front         translateZ(1px);
        back         translateZ(-1px);
        left        translate(-150px,0) rotateY(-90deg);
        right        translate(150px,0) rotateY(90deg);
        top            translate(0,-150px) rotateX(90deg);
        bottom        translate(0,150px) rotateX(-90deg);
==========================================================
    定时器并不稳定

    当transition走完执行的事件
        transitionend        必须用事件绑定加
==========================================================
    翻书
        iNow         oBox     oFront     oBack     oPage2
        0             1         1         2        2
        1             2         2        3        3
        2             3        3        1        1
        3             1        1        2        2
        4             2        2        3        3
        5             3        3        1        1
        6             1        1        2        2

        iNow%3+1

        (iNow+1)%3+1



    爆炸
    反转
========================================================
字符串对象
    str.charAt()             
    str.indexOf()             
    str.lastIndexOf()
    str.substring()
    str.split()
    str.toUpperCase()
    str.toLowerCase()
数组对象
    arr.push()
    arr.pop()
    arr.unshift()
    arr.shift()
    arr.splice()
    arr.join()
    arr.concat()
    arr.reverse()
    arr.sort()

Math     对象
    Math.random()         获取0-1的随机小数，绝对不包括1

    取整
    Math.floor()         向下取整
    Math.ceil()         向上取整
    Math.round()         四舍五入

    其他
    Math.pow()             n次方     幂
        Math.pow(3,2)     3的2次方
    Math.sqrt()         开方     

    Math.max(10,30,0,100,25)             最大值
    Math.min()                             最小值

    Math.abs()             绝对值

    三角函数
    Math.PI         π
    Math.sin()
    Math.cos()
    Math.atan2()



    function rnd(n,m){
        return parseInt();
    }

======================================================
i的问题
    1.循环中加事件，事件中使用i
    2.循环中加定时器，定时器中使用i

    函数
==============================================
    i值问题怎么解决?
        封闭空间、自执行函数、闭包
================================================
    传统语言
        c语言
            申请空间(1000)
            ...用
            free(1000)

            内存泄露
            内存溢出
    垃圾回收机制     生命周期     生存周期
    局部 很短        函数调用完成后，里面的局部变量会消失
    全局 很长         关闭页面的时候
    闭包 可长可短    
        只要里面的函数还有用，函数中局部变量就不会消失
        只要里面的函数还有用，函数中所有的局部变量就不会消失
        只要里面的函数还有用，那整条作用域链上的变量就不会消失

    function show(){
        var a = 12;
    }
                 调用前         没有a
    show();     调用中         有a
                调用后         没有a

    function show(){
        var a = 12;
        document.onclick = function(){
            alert(a);
        };
    }
            调用前            没有a
    show()    调用中             有a
            调用后             有a

    function show(){
        var a = 12;
        var b = 5;
        document.onclick = function(){
            alert(a);
        };
    }

            调用前             没有a，没有b
    show()    调用中             有a，有b
            调用后             有a，有b

    var a = 12;
    function show(){
        var b = 5;
        function show2(){
            var c = 3;
            document.onclick = function(){
                alert(a);
            };
        }
        show2();
    }

作用域链:现在自身找，如果没有，找父级，如果在没有再往上找。直到找到全局。

======================================================
闭包是什么?
======================================================
递归
    函数调用自己，只是递归的一种形式
    大事化小

    1.兔子不吃东西，不会死
    2.兔子可以近亲繁殖
    3.小兔子，三个月长大

1    2    3    4    5    6    7    8    9    10    11     12
1    1    2    3    5     8     13     21     34     55     89     144

    12         144         1440
    24        46368         463680
    36        14930352     149303520
    48         4807526976     48075269760

    斐波那契数列
    斐波那契算法
    兔子数列
=======================================================
    99乘法表