前端开发问题汇总
最近更新时间：2017年7月26日12:17:24
《我的博客地图》
前端技术开发的过程中，经常会遇到零碎的知识点，本文主要记录开发过程中的所有问题，从量变到质变后作为专题进行详细梳理。
非单页面应用开发：常规web项目，前后端不分离项目
1、页面跳转传递参数
新页面获取参数：location.search = ?from=buy
2、页面返回配置
从哪里来返回到哪里去：history.back()
返回到指定页面：location.href = './home.html'
3、移动端H5项目，判断是否在微信内置浏览器中打开的公共方法
commonJs['openWechat'] = function () {
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == null)
return false
if(ua.match(/MicroMessenger/i)[0] == "micromessenger"){
//console.log(ua.match(/MicroMessenger/i));//["micromEssenger", index: 4, input: "ffffmicromEssengerw", length: 1]
return true
}
};
引申：match()方法，返回的是数组
4、移动端H5项目，拨打电话功能
拨打号码
发送短信
但是，在微信内置浏览器中是拨打不的，微信做了屏蔽，解决方法如下：对于有拨打电话的页面要做下处理，在网址后面增加一个锚节点mp.weixin.qq.com。
如 www.wanshaobo.com 改为 www.wanshaobo.com#mp.weixin.qq.com，就可以实现拨打电话功能
5、点击切换A-B图片
在开发中经常会遇到点击切换图片的情况，比如输入密码点击‘眼睛’可以查看和隐藏密码，同时这个logo也做变化。图片切换的方案如下：
.open{background: url('./images/open.png') no-repeat 34rem 2.2rem/1.8rem 0.9rem;}
.close{background: url('./images/close.png') no-repeat 34rem 2.2rem/1.8rem 0.9rem;}
//34rem 2.2rem/1.8rem 0.9rem;left top/width height
if($(this).attr('class') == 'open'){
$(this).removeClass('open').addClass('close');
}else{
$(this).removeClass('city-up').addClass('open');
}
6、元素设置背景图片
HTML标签设置背景图片，宽高缩放，会保持宽高比；body元素设置背景图片，仅仅是固定宽度进行缩放；
PC端网页的图片，如果设置为背景图片，不可拖动；如果是img标签，图片可以拖动；
7、单页面应用页面跳转
location.href = location.href.substring(0, location.href.lastIndexOf('/') + 1) + 'home'
8、判断是否在微信中打开
对于Vue项目，首页url为www.wanshaobo.com/#/，其他页面都是在这个路径下面拼接而成，因此Vue项目的路由跳转方案如下：
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == "micromessenger" || ua.match(/MicroMessenger/i) == "MicroMessenger") {
var index1 = loginBackUrl.indexOf("#")+2
var loginBackUrlAll = loginBackUrl.slice(index1,loginBackUrl.length+1)
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?......
window.location.href = www.wanshaobo.com/index
}else{
window.location.href = www.wanshaobo.com/index
}
9、将页面滚动到指定坐标
window.scrollTo(0,0);//将页面滚动到顶部
10、H5项目触屏事件-监听用户上滑和下滑行为
移动端滑动操作分为：开始触摸屏幕、在屏幕上滑动、离开屏幕，对应的事件分别为'touchstart'、'touchmove'、'touchend'，其中每个事件都能获取一个event对象，event对象中包含很多信息：
console.log(event.targetTouches[0].clientY);//'touchend'事件不能获取Y轴坐标
console.log(event.changedTouches[0].clientY);//三个事件都能获取Y轴坐标
因此，监听用户在某个元素上 向上滑动 和 向下滑动 的的操作方案如下：
let touchstartY = 0;
let touchendY = 0;
$Ele.on("touchstart", function(e) {
e.preventDefault();
touchstartY = e.changedTouches[0].clientY;
});
$Ele.on("touchend", function(e){
touchendY = e.changedTouches[0].clientY;
if(touchstartY - touchendY > 50){//上滑
}
if(touchstartY - touchendY < -50){//上滑
}
})
11、获取宽高信息
获取浏览器中HTML文档显示区域的宽高：window.innerWidth || window.innerHeight
获取浏览的宽高：window.outerWidth || window.outerHeight
获取屏幕的宽高：window.screen.width || window.screen.height
获取屏幕的宽高（不包括Windows任务栏）：window.screen.avaliWidth || window.screen.avaliHeight
获取文档的总高度，包括带滚动条隐藏的内容：document.documentElement.scrollHeight || document.body.scrollHeight;
文档滚动过的高度：
document.documentElement.scrollTop;//HTML DOM Document 对象.文档的根节点.属性-返回文档滚动过的距离
document.body.scrollTop;//HTML DOM Document 对象.文档的body元素.属性
因此，严谨的方案：document.documentElement.scrollTop || document.body.scrollTop
12、HTML元素左上角距离 浏览器中HTML文档显示区域顶部 的距离（正值或者负值）
document.getElementsByClassName("foot")[0].getBoundingClientRect().top;
引申：元素的getBoundingClientRect()方法获取到ClientRect对象，该对象描述了元素的定位和宽高信息；ClientRect = {width:'元素的宽度',height:'元素的高度',top:'元素左上角距离当前文档显示区域的距离',bottom:'',left:'',right:''}
13、当底部foot元素从浏览器底部出现时，累计所滚动的距离（0px => *px）
window.innerHeight - document.getElementsByClassName("foot")[0].getBoundingClientRect().top;
14、元素距离 文档 顶部的距离
JavaScript原生方法：document.getElementsByClassName("foot")[0].offsetTop;
引申：element.offsetHeight |offsetWidth | offsetLeft;元素宽高（不包括margin），元素的左偏移
jQuery方法：$('.foot').offset().top;
引申：$('.foot').offset();获取匹配的元素集合中第一个元素相对于 文档 的当前坐标，有top和left属性
15、事件对象event详解
function clicked(event){
var event = event || window.event;
console.log(event);//MouseEvent {some property...}
console.log(event.target);//
console.log(event.srcElement);//同event.target
console.log(event.clientX);//事件发生的X轴坐标（浏览器显示文档区域）
console.log(event.clientY);//
console.log(event.offertX);//相对于该元素relative位置偏移的X轴坐标（浏览器显示文档区域）
console.log(event.offsetY);//
console.log(event.layerX);//距离浮动的祖先元素层 原点 的X轴坐标（浏览器显示文档区域）
console.log(event.layerY);//
console.log(event.pageX);//同event.clientX
console.log(event.pageY);//
console.log(event.path);//数组，存储div => body => html => document => Window，该对象到顶层对象的集合
console.log(event.screenX);//事件发生的X轴坐标（相对于显示器整个区域而言）
console.log(event.screenY);//
console.log(eventtimeStamp);//页面加载完成后 到 该事件 发生时 经过的时间
console.log(event.type);//事件类型 click
console.log(event.x);//
console.log(event.y);//
...
}