//2016-12-01 至 2016-12-30 前端工作知识点总结

目标：

                  1、学习和使用移动端，字体适配，rem单位的字体。
                  2、开始接触和熟悉sourceTree，gitLab进行代码的管理。

知识点：
1、获取多维数组中最大最小值的方法：

 getMaxValue : function(d){
    //将多维数组转换为一维数组
    var array =d.join(",").split(',');
    var tempA = [];
    $.each(array,function(i,item){
        //排除非数值
        if(!isNaN(item)){
            tempA.push(item);
        }
    });
    if(tempA.length===0){
        return '-';
    }else{
        return Math.max.apply(null,tempA);  //获取最大值，获取最小值同理。
    }
}

2、页面不需要加载完所有资源再执行业务初始化方法则不使用

      $(function(){ });  //页面资源全部加载完才执行
             应该使用自执行函数：
                (function(){ })();//执行到这条语句就执行init初始化方法。

3、前端设计稿使用750屏，前端sass对px转换为rem的换算方法和调用方法应该为：

                  $basePx: 750px !default;
                  @function pxToRem($px){
                                                                                                                                                                                                                                                                                                                                                                                                                                  @return $px / $basePx * 10rem;
                  }
                  margin:pxToRem(86px) 0 pxToRem(60px)
                                    同时页面需要引入（可按比例缩放）：
                  <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
                  
注：对于背景图片(雪碧图)采用rem，需要设置样式background-size: cover。不要设置缩放。
      4、清除浮动(子元素设置了float,对父元素设置clearfix可清除浮动)：
            .clearfix{*zoom:1;}

     5、滑屏<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>实现：
              //事件监听
              document.getElementById('J_container').addEventListener('touchstart',_this.touch,false);
    document.getElementById('J_container').addEventListener('touchmove',false);
    document.getElementById('J_container').addEventListener('touchend',false);
    //判断滑屏事件
    touch:function(event){
var tType=event.type;
var touch = event.targetTouches[0];
if(tType==='touchstart'){
    _this.sTime = +new Date();
    _this.sPox = touch.pageX;
    _this.ePox = touch.pageX;
}else if(tType==='touchmove'){
    _this.ePox = touch.pageX;
}else if(tType==='touchend'){
    var duration = +new Date - _this.sTime; 
    _this.mPox = _this.ePox-_this.sPox;
    if(Number(duration)>200){
        _this.scrollToPage(_this.mPox);
    }
}
}

//滑动屏幕

scrollToPage:function(movDis){

var width = $("#J_container").width();

var allLeft = $("#J_content").width();

var curLeft=$('#J_content').css('transform').replace(/[^0-9-,]/g,'').split(','); //获取当前translateX的值

curLeft=(curLeft.length>1)?curLeft[4]:curLeft[0];

curLeft=-parseInt(curLeft);

var movLeft = '';

if(movDis>10){

movLeft=curLeft-width;

}else if(movDis<-10){

movLeft=curLeft+width;

}

var idx = (movLeft/width+1);

if(movLeft<allLeft && movLeft>=0 && (movDis>50 || movDis<-50)){

$("#J_content").css("transform",("translateX(-"+movLeft+"px)"));

$("#J_header>ul>li").removeClass("active");

$("#J_header>ul>li:nth-child("+idx+")").addClass("active");

}

}
  6、手机浏览器wap网页点击<a href="/tag/lianjie/" target="_blank" class="keywords">链接</a>触发颜色区块的问题<a href="/tag/jiejue/" target="_blank" class="keywords">解决</a>办法：http://www.luoxiao123.cn/1487-2.html
            -webkit-tap-highlight-color:rgba(0,0)

  7、click的点透问题处理：阻止默认事件
       http://www.uedsc.com/through-the-click-point-in-the-development-of-web.html

  8、移动端一般使用touchend代替click。但是，但凡有点击选中的 不能用touch，用touch滑动的时候会触发

  9、git checkout V2.0
       git branch
       git status

总结：

                  1、对遇到的知识点，只是简单的堆砌，复制黏贴保存。并没有去细究里面原理、知识点看扩充，提及不同场景的使用。
                  2、开始使用sourcetree gitlab作为代码管理的工具，希望熟悉之后，自己可以也开一个github，可以写一些自己的小文章，体会什么的。并将自己平时的一些代码片段push上去，进行共享。