前端开发问题汇总

最近更新时间：2017年7月26日12:17:24

《我的博客地图》

    前端技术开发的过程中，经常会遇到零碎的知识点，本文主要记录开发过程中的所有问题，从量变到质变后作为专题进行详细梳理。

非单页面应用开发：常规web项目，前后端不分离项目

1、页面跳转传递参数

    a标签方案：<a href="./me?from=buy"></a>

    新页面获取参数：location.search = ?from=buy

2、页面返回配置

    从哪里来返回到哪里去：history.back()

    返回到指定页面：location.href = './home.html'

    <a href="javascript:toBack();">返回</a>

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项目，拨打电话功能

    <a href="tel:13764567708">拨打号码</a>
    <a href="sms:13764567708">发送短信</a>
    但是，在微信内置浏览器中是拨打不的，微信做了屏蔽，解决方法如下：对于有拨打电话的页面要做下处理，在网址后面增加一个锚节点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详解

<div οnclick="clicked()">点击我出发单机事件</div>

function clicked(event){

var event = event || window.event;

console.log(event);//MouseEvent {some property...}

console.log(event.target);//<div οnclick="clicked()">点击我出发单机事件</div>

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);//

...

}