移動(dòng)適配方案之?--postcss-px2rem?+?getRem多終端適配方案適配js
1厚掷、安裝??npm?install?postcss-pxtorem?-D
?//?藍(lán)湖上設(shè)計(jì)稿自定義為375px?測量值直接寫入即可?若設(shè)計(jì)稿為750px?則rootValue:?32
2斩披、項(xiàng)目根目錄postcss.config.js???
module.exports?=?{
????plugins:?{
??????"postcss-pxtorem":?{
????????rootValue:?16,?//結(jié)果為：設(shè)計(jì)稿元素尺寸/16悼嫉，比如元素寬320px,最終頁面會(huì)換算成?20rem
????????propList:?["*"],?//是一個(gè)存儲(chǔ)哪些將被轉(zhuǎn)換的屬性列表，這里設(shè)置為['*']全部顾瞪，假設(shè)需要僅對(duì)邊框進(jìn)行設(shè)置边坤，可以寫['*',?'!border*']
????????unitPrecision:?5,?//保留rem小數(shù)點(diǎn)多少位
????????//selectorBlackList:?['.radius'],??//則是一個(gè)對(duì)css選擇器進(jìn)行過濾的數(shù)組，比如你設(shè)置為['fs']晰赞，那例如fs-xl類名，里面有關(guān)px的樣式將不被轉(zhuǎn)換选侨，這里也支持正則寫法掖鱼。
????????replace:?true,?//這個(gè)真不知到干嘛用的。有知道的告訴我一下
????????mediaQuery:?false,?//媒體查詢(?@media?screen?之類的)中不生效
????????minPixelValue:?12,?//px小于12的不會(huì)被轉(zhuǎn)換
??????},
????},
??};
3援制、新建一個(gè)rem.js的文件戏挡，在main.js中引用
(function(){
????window.onload?=?()?=>{
????????getRem(375,100)
????}
????window.onresize?=?()?=>{
????????getRem(375,100)
????}
????/**
?????*?
???????代表設(shè)計(jì)稿的寬度，375/750/1920
?????*?@param?{*}?desginWide?
???????代表換算比例一般寫100,100的話比較好換算晨仑，
???????比如增拥，你測量的一個(gè)寬度是100px,就可以寫為1rem,以及1px=0.01rem
?????*?@param?{*}?pxRem?
?????*/
????const?getRem?=?(desginWide,pxRem)?=>{
????????//?獲取設(shè)備的寬度
????????let?clineWidth?=?document.body.clientWidth?||?document.documentElement.clientWidth;
????????//獲取html根元素
????????let?htmlDom?=?document.getElementsByName("html")[0];
????????htmlDom.style.fontSize?=?clineWidth?/?desginWide?*?pxRem?+?'px'
????}
})()
發(fā)送驗(yàn)證碼封裝
/**
?*
?*?@param?{*}?e?要操作的dom
?*?@param?{*}?callBack?處理發(fā)送驗(yàn)證碼的邏輯
?*?@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?=?`點(diǎn)擊發(fā)送驗(yàn)證碼`;
????????????num?=?num;
????????}
????},?delay)
}
使用方式：
import?{?sendCode?}?from?'./utils.js'
<button?@click="sendCodeBtn($event)">發(fā)送驗(yàn)證碼</button>
methods:?{
????sendCodeBtn(e)?{
??????sendCode(e,?()?=>?{
????????console.log('調(diào)用后臺(tái)發(fā)送驗(yàn)證碼的接口邏輯處理')
??????},?20)
????}
??}
防抖節(jié)流，前端常見面試題
解決場景：短信驗(yàn)證碼倒計(jì)時(shí)寻歧、瀏覽器縮放、減少請(qǐng)求等
1秩仆、函數(shù)防抖
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码泛、 函數(shù)節(jié)流，在一段時(shí)間內(nèi)只執(zhí)行一次函數(shù),時(shí)間戳版本
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澄耍、字符串反方向
/**
?*?倒序遍歷實(shí)現(xiàn)
?*?@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();
}
