前端解决方案工具集
移动适配方案之 --postcss-px2rem + getRem多终端适配方案适配js
1、安装 npm install postcss-pxtorem -D
// 蓝湖上设计稿自定义为375px 测量值直接写入即可 若设计稿为750px 则rootValue: 32
2、项目根目录postcss.config.js
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue: 16, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
unitPrecision: 5, //保留rem小数点多少位
//selectorBlackList: ['.radius'], //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
replace: true, //这个真不知到干嘛用的。有知道的告诉我一下
mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
minPixelValue: 12, //px小于12的不会被转换
},
},
};
3、新建一个rem.js的文件，在main.js中引用
(function(){
window.onload = () =>{
getRem(375,100)
}
window.onresize = () =>{
getRem(375,100)
}
/**
*
代表设计稿的宽度，375/750/1920
* @param {*} desginWide
代表换算比例一般写100,100的话比较好换算，
比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem
* @param {*} pxRem
*/
const getRem = (desginWide,pxRem) =>{
// 获取设备的宽度
let clineWidth = document.body.clientWidth || document.documentElement.clientWidth;
//获取html根元素
let htmlDom = document.getElementsByName("html")[0];
htmlDom.style.fontSize = clineWidth / desginWide * pxRem + 'px'
}
})()
发送验证码封装
/**
*
* @param {*} e 要操作的dom
* @param {*} callBack 处理发送验证码的逻辑
* @param {*} num 几秒后可以重新获取
* @param {*} delay 多少秒掉一次
*/
export const sendCode = (e, callBack, num = 10, delay = 1000) => {
var target = e.target || e.srcElement;
let timer = null;
target.disabled = true;
target.innerHTML = `${num}秒后可重新获取`;
callBack();
timer = setInterval(() => {
num--;
if(num > 0) {
target.innerHTML = `${num}秒后可重新获取`;
}else{
clearInterval(timer);
target.disabled = false;
target.innerHTML = `点击发送验证码`;
num = num;
}
}, delay)
}
使用方式：
import { sendCode } from './utils.js'
<button @click="sendCodeBtn($event)">发送验证码</button>
methods: {
sendCodeBtn(e) {
sendCode(e, () => {
console.log('调用后台发送验证码的接口逻辑处理')
}, 20)
}
}
防抖节流，前端常见面试题
解决场景：短信验证码倒计时、浏览器缩放、减少请求等
1、函数防抖
function debounce(callback,waite){
let content = this;
let args = [...arguments];
let timeout;
return function(){
if(timeout) clearTimeout;
timeout = setTimeout(() =>{
callback.call(content,args);
},waite)
}
}
2、 函数节流，在一段时间内只执行一次函数,时间戳版本
function throlte(callback,delay){
let pre = Date.now();
return function(){
let args = arguments;
let content = this;
let now = Date.now();
if((now - pre) >= delay){
callback.applay(content,args);
}
pre = Date.now();
}
}
前端常见面试题
1、字符串反方向
/**
* 倒序遍历实现
* @param {*} str
* @returns
*/
function reverseStr(str){
let strs = "";
for(let i = str.length -1;i >= 0;i--){
strs += str[i];
}
return strs
}
2、判断是否是回文
/**
* 判断是否是回文
* @param {*} str
* @returns
*/
function isPalindrome2(str){
return str === str.split().reverse().join();
}
