|
//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)
同时页面需要引入（可按比例缩放）：
!function(a,b){function c(){var b=f.getBoundingClientRect().width;var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial-scale=([d.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial-dpr=([d.]+)/),o=m.match(/maximum-dpr=([d.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+",maximum-scale="+j+",minimum-scale="+j+",user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),300))},"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
注：对于背景图片(雪碧图)采用rem，需要设置样式background-size: cover。不要设置缩放。
4、清除浮动(子元素设置了float,对父元素设置clearfix可清除浮动)：
.clearfix{*zoom:1;}
5、滑屏效果实现：
//事件监听
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网页点击链接触发颜色区块的问题解决办法：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上去，进行共享。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
