上周记录前端提高用户体验关于css的部分，今天总结一下开发中遇到的关于js部分。
输入框格式化
支付宝、微信是我们都经常用的APP，当我们用app充值手机话费时，或者绑定银行卡时，会发现我们输入的号码是会分段的
前段时间，还真遇到了这样的客服要求，我自己模拟了一下，只能说效果类似吧。
$('#tel').bind("keyup", function(event) {
let keyCode = event.keyCode;
let curLength = $(this).val().length;
if(keyCode === 8 || keyCode === 46){
}else if(curLength > 13){
$(this).val($(this).val().slice(0,13))
}else if(96 <= keyCode <= 105){
if(curLength === 3 || curLength === 8){
$(this).val($(this).val() + " ");
}
}
})
$("#tel").change(function(){
console.log(TrimAll($(this).val(),"g"))
})
//去除字符串中所有的空格
function TrimAll(str, is_global) {
var result;
result = str.replace(/(^\s+)|(\s+$)/g, "");
if (is_global.toLowerCase() == "g") {
result = result.replace(/\s/g, "");
}
return result;
}
rem视口适配
我们身边有很多移动设备，它们尺寸有大有小，我们该如何让一套代码高度匹配各个不同尺寸的设备呢：
(function(docs, win) {
htmlSize = function() {
var value = document.documentElement.clientWidth
var ua = navigator.userAgent
var deviceWidth = Math.min(750, value)
document.documentElement.style.fontSize = 100 * (deviceWidth / 750) + "px";
};
htmlSize();
window.onresize = function(){
htmlSize();
}
})(document, window); 
滚动加载
滚动加载即滚动条触底后执行事件，那么如何判断滚动条是否触底呢？
滚动条的总高度(document.body.scrollTop) - 可视区的高度(document.body.clientHeight) - 滚动条滚动时距离顶部的距离(document.body.scrollHeight) = 0;就表示滚动触底。
扫描二维码关注公众号，回复：
12804000 查看本文章
$(() => {
loding()
function loding() {
$.get('https://www.fastmock.site/mock/961b619357977ecee63001f0f5140734/yghh/imgRe', (res) => {
let imgstr = "";
console.log(res)
for (let i = 0; i < res.length; i++) {
imgstr += `<img src='${res[i].img}' />`
}
$("body").append(imgstr)
})
}
function scrollLoging(){
//变量scrollTop是滚动条滚动时，距离顶部的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//变量windowHeight是可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollHeight是滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动条到底部的条件
// console.log(scrollTop + windowHeight,scrollHeight)
if (scrollHeight - (scrollTop + windowHeight) < 5) {
loding();
}
}
$(window).bind("scroll",debounce(scrollLoging,2000))
function debounce(callBack,wait,isWait){
let timeOut;
return function(){
clearTimeout(timeOut);
timeOut = setTimeout(() => {
callBack.apply(this,arguments)
},wait)
}
}
})
时间，地址选择插件
demo下载： http://www.htmleaf.com/Demo/201906145693.html
demo下载:https://www.jq22.com/yanshi15195
图片裁剪插件使用
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="asset/css/framework.css" />
<script src="asset/js/changePX.js" type="text/javascript" charset="utf-8"></script>
<script src="asset/js/main.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="ui-pane">
<div class="ui-header">
<a href="" class="header-button">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-left"></use>
</svg>
</a>
<div class="header-title">修改头像</div>
</div>
<div class="ui-content">
<div class="heardImg">
<img class="img_show" src="asset/img/code.png" >
<input type="file" class="service-file" id="file" />
</div>
<input type="button" class="btn" name="" id="" value="提交" />
<div class="ui-shade">
<div id="clipArea" class="file-clip">
</div>
<div id="clipBtn">完成</div>
</div>
</div>
</div>
<script src="asset/photoClip/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="asset/photoClip/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="asset/photoClip/hammer.js" type="text/javascript" charset="utf-8"></script>
<script src="asset/photoClip/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="asset/photoClip/jquery.photoClip.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(() => {
$("#file").change(function(){
$(".ui-shade").css("display","flex")
})
$("#clipArea").photoClip({
size: [150, 150],
file: "#file",
ok: "#clipBtn",
clipFinish: function(dataURL) {
$(".img_show").attr("src",dataURL);
$(".ui-shade").css("display","none")
}
});
})
</script>
</body>
</html>
防抖节流
为甚要使用防抖、节流？
开发中经常遇到一些需要频繁触发的事件，例如window对象的视口大小改变、滚动(resize,scroll)、鼠标移动事件(mousedown,mousemove等)，表单标签的键盘按下弹起事件(keydown,keyup)等等；
我们通常事件触发后需处理一些逻辑，这样多频率的处理回调显然是不可取的，为了规避类似事件的频繁触发，我们可以使用防抖，节流。
防抖原理：
事件触发n秒后再去执行回调函数，若在n秒内事件再次触发，则时间重新计时，实质是闭包。结果就是将频繁触发的事件合并为一次，且在最后执行。
节流原理：
在频繁触发事件中，间隔n秒执行一次回调函数。
代码实现请参考：防抖与节流(小白学习防抖节流篇)
摸鱼写摸到这吧，后续更新，干正活了。