前端开发问题汇总

迷南。 2022-06-12 03:17 187阅读 0赞

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

[《我的博客地图》][Link 1]

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

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

1、页面跳转传递参数

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

新页面获取参数：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项目，拨打电话功能

<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...\}