---

移动适配方案之 --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();

}