2017-03-19 JS 学习笔记

常见的取整函数的认识

• 向上取整函数
  如果是正数，那么向上取整得到的是绝对值大的
  如果是负数，那么向上取整得到的是绝对值小的
  Math.ceil()
• 向下取整函数
  如果是正数，那么向下取整得到的是绝对值小的
  如果是负数，那么向下取整得到的是绝对值大的
  Math.floor()

缓动动画的补丁

• 一般对于缓动动画，我们速度一般是小数，所以永远得不到对应的 target 值
  所以我们要取整，但是取的是绝对值大的那个

var speed = Math.ceil((target - begin)*0.2);

缓动动画的封装

fucntion buffer(obj,target){
          clearInterval(obj.timer);
          obj.timer = setInterval(function(){
              begin = box.offsetLeft;
              var speed = target > begin?Math.ceil((target - begin)*0.2):Math.floor((target - begin)*0.2);
              obj.style.left = begin + speed + 'px';
              if(begin == target){
                  clearInterval(obj.timer);
                  }
        },20)
}

获取某个标签的初始值

• 通过 style 获取不了页内样式的值
  但是可以获取行内样式的值
• 获取页内样式的值
  ie box.currentStyle.width
  一般浏览器window.getComputedStyle(boxm,null).width
• 获取某个标签标签样式的值，是一个功能，所以我们抽取一个函数，其中 obj 表示获取哪一个标签， attr 表示抽取哪一个属性

function getCssAttr(obj,attr){
        if(obj.currentStyle){
                return obj.currentStyle[attr];
        }else{
                return window.getComputedStyle(obj,null)[attr];
        }
}
//对于属性如果用点语法访问不到就用[]来访问

封装单值动画

function buffer(obj,target,attr){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
                  var begin = parsetInt(getCssAttr(obj,attr)) || 0;
                  var speed = target > begin?Math.ceil((target - begin)*0.2):Math.floor((target - begin)*0.2);
                  obj.style[attr] = begin + speed + 'px';
                  if(begin  == target){
                      clearInterval(obj.timer);
                      }
        },20)
}

封装多值动画

function buffer(obj,json){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
        var flag = true;
        for(var key in json){
             var begin = parseInt(getCssAttr(obj,key)) || 0;
             var target = parseInt(json[key]);
              var speed = target > begin ? Math.ceil((target - begin)*0.2) : Math.floor((target - begin)*0.2);
              obj.style[key] = begin + speed + 'px';
              if(begin != target){
               flag = false;
              }                           
        }
        if(flag == true){
            clearInterval(obj.timer);
        }
    },20)
}
//只要有一个值达到了 begin == target 条件时，计时器就会停止，所以不能保证所有的值同时到达，但是我们需要他们同时到达，所以需要加节流器 var flag

封装多值动画的回调

• 为了达到结束一个动画然后再开始一个新的动画目的，我们需要监听动画结束，然后回调自身,在形参里加函数

buffer(box,{width:800,height:300},function(){
        buffer(box,width:100,height:300)
});
function buffer(obj,json,fn){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
        var flag = true;
        for(var key in json){
             var begin = parseInt(getCssAttr(obj,key)) || 0;
             var target = parseInt(json[key]);
              var speed = target > begin ? Math.ceil((target - begin)*0.2) : Math.floor((target - begin)*0.2);
              obj.style[key] = begin + speed + 'px';
              if(begin != target){
               flag = false;
              }                           
        }
        if(flag == true){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },20)
}

缓动动画的多值动画其他需要动画属性设置

 function  buffer(obj,json,fn){

            clearInterval(obj.timer);

            obj.timer = setInterval(function(){


                /*设置一个值用来表示是否清空定时器*/
                var flag = true;

                var begin = 0;
                var target = 0;


                /*设置多个值，要遍历字典*/
                for(var key in json){

                    /*对于opcity类似的值，我们通过现在的代码没法设置对应的值
                    * 我们区别对待,要在取出值的时候和设置值的时候都有重新设置*/

                    if('opacity' == key){
                        begin = parseInt( parseFloat(getCssAtt(obj,key))*100)||100;
                        target = parseInt(json[key]*100) ;
                    }else {
                         begin = parseInt(getCssAtt(obj,key))||0;
                         target = parseInt(json[key]) ;
                    }
                    var speed = target > begin ?Math.ceil((target - begin)*0.2):Math.floor((target - begin)*0.2);
                    /**/
                    if ('opacity' == key){
                        /*普通浏览器*/
                        obj.style.opacity =( begin + speed)/100;
                        /*ie浏览器*/
                        obj.style.filter = 'alpha(opacity:'+(begin + speed)+')';

                    }else  if ('zIndex'== key){
                        obj.style.zIndex = json[key];
                    }
                    else {
                        obj.style[key] = begin +speed +'px';
                    }
                    /*只要有一个值，到达对应目标值，就会停止定时器，所以不能保证所有的值同时到达，但是我们需要让他同时到达*/
                    if (begin != target){
                        flag = false;
                    }
                }
                if(flag == true){
                    /*回调：就是表示当上一次动画完成后，我们要做的事情*/

                    clearInterval(obj.timer);
                    /*一般为了严格，我们需要判断这个函数是否实现，如果实现我们采取调用
                    * 如果没有实现就不调用*/
                    if(fn){
                        fn();
                    }
                }
            },20)
}

楼层效果的实现

音乐导航的实现

• 获取 keyCode 值，有 keyCode 表
  需要通过事件对象获取event.keyCode

内存管理

• JS 和 Java 采用垃圾内存回收，回定时清除垃圾内存，因此，会造成垃圾内存堆积
• iOS 采用实时垃圾内存回收，只要产生垃圾内存就会被回收
• 内存分栈区和堆区
• 栈区保存变量名称（指针），系统自动管理
• 堆区保存赋值型数据，不会自动管理，需要我们手动管理，管理方式有计数回收法，和标记回收法
• 数据主要两种，一般性数据类型，和引用型数据类型，前者保存在栈区，后者保存在堆区