前端開(kāi)發(fā)小技巧（Vue、JS、CSS）
常用開(kāi)發(fā)小技巧
寫在前面
JavaScript 篇
1.格式化金錢
const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const money = ThousandNum(20190214);
// money => "20,190,214"
2.取整
代替正數(shù)的 Math.floor()忿墅，代替負(fù)數(shù)的 Math.ceil()
const num1 = ~~ 1.69;
const num2 = 1.69 | 0;
const num3 = 1.69 >> 0;
// num1 num2 num3 => 1 1 1
3.轉(zhuǎn)數(shù)值
只對(duì) null 右遭、"" 吮蛹、false 轿偎、數(shù)值字符串 有效
const num1 = +null;
const num2 = +"";
const num3 = +false;
const num4 = +"169";
// num1 num2 num3 num4 => 0 0 0 169
4.精確小數(shù)
const RoundNum = (num, decimal) => Math.round(num * 10 ** decimal) / 10 ** decimal;
const num = RoundNum(1.69, 1);
// num => 1.7
5.取最小最大值
const arr = [0, 1, 2];
const min = Math.min(...arr);
const max = Math.max(...arr);
// min max => 0 2
6.判斷數(shù)據(jù)類型
function DataType(tgt, type) {
? ? const dataType = Object.prototype.toString.call(tgt).replace(/\[object (\w+)\]/, "$1").toLowerCase();
? ? return type ? dataType === type : dataType;
}
DataType("young"); // "string"
DataType(20190214); // "number"
DataType(true); // "boolean"
DataType([], "array"); // true
DataType({}, "array"); // false
7.是否為空對(duì)象
const obj = {};
const flag = DataType(obj, "object") && !Object.keys(obj).length;
// flag => true
8.克隆數(shù)組
const _arr = [0, 1, 2];
const arr = [..._arr];
// arr => [0, 1, 2]
9.合并數(shù)組
const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const arr = [...arr1, ...arr2];
// arr => [0, 1, 2, 3, 4, 5];
10.去重?cái)?shù)組
const arr = [...new Set([0, 1, 1, null, null])];
// arr => [0, 1, null]
11.截?cái)鄶?shù)組
const arr = [0, 1, 2];
arr.length = 2;
// arr => [0, 1]
12.交換賦值
let a = 0;
let b = 1;
[a, b] = [b, a];
// a b => 1 0
13.創(chuàng)建指定長(zhǎng)度且值相等的數(shù)組
const arr = new Array(3).fill(0);
// arr => [0, 0, 0]
14.克隆對(duì)象
const _obj = { a: 0, b: 1, c: 2 }; // 以下方法任選一種
const obj = { ..._obj };
const obj = JSON.parse(JSON.stringify(_obj));
// obj => { a: 0, b: 1, c: 2 }
15.合并對(duì)象
const obj1 = { a: 0, b: 1, c: 2 };
const obj2 = { c: 3, d: 4, e: 5 };
const obj = { ...obj1, ...obj2 };
// obj => { a: 0, b: 1, c: 3, d: 4, e: 5 }
16.創(chuàng)建純空對(duì)象
const obj = Object.create(null);
Object.prototype.a = 0;
// obj => {}
17.優(yōu)雅處理 Async/Await 參數(shù)
function AsyncTo(promise) {
? ? return promise.then(data => [null, data]).catch(err => [err]);
}
const [err, res] = await AsyncTo(Func());
Vue 篇
1.路由懶加載
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
? routes: [
? ? {
? ? ? path: '/',
? ? ? component: () => import("xxx")
? ? }
]
})
2.頁(yè)面需要導(dǎo)入多個(gè)組件
原來(lái)的寫法
import titleCom from '@/components/home/titleCom'
import bannerCom from '@/components/home/bannerCom'
import cellCom from '@/components/home/cellCom'
components:{titleCom,bannerCom,cellCom}
利用 require.context 可以寫成
const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
? const name = path.basename(key, '.vue')
? modules[name] = files(key).default || files(key)
})
components:modules
API 說(shuō)明
實(shí)際上是 webpack 的方法,vue 工程一般基于 webpack,所以可以使用
require.context(directory,useSubdirectories,regExp) >
接收三個(gè)參數(shù):
directory：說(shuō)明需要檢索的目錄
useSubdirectories：是否檢索子目錄
regExp: 匹配文件的正則表達(dá)式,一般是文件名
3.動(dòng)態(tài)組件
做一個(gè) tab 切換時(shí)就會(huì)涉及到組件動(dòng)態(tài)加載
<component v-bind:is="currentTabComponent"></component>
但是這樣每次組件都會(huì)重新加載,會(huì)消耗大量性能,所以 <keep-alive> 就起到了作用
<keep-alive>
? <component v-bind:is="currentTabComponent"></component>
</keep-alive>
這樣切換效果沒(méi)有動(dòng)畫效果,這個(gè)也不用著急,可以利用內(nèi)置的 <transition>
<transition>
<keep-alive>
? <component v-bind:is="currentTabComponent"></component>
</keep-alive>
</transition>
4.mixins
有些組件有些重復(fù)的 js 邏輯,如校驗(yàn)手機(jī)驗(yàn)證碼,解析時(shí)間等,mixins 就可以實(shí)現(xiàn)這種混入
const mixin={
? ? created(){
? ? ? this.dealTime()
? ? },
? ? methods:{
? ? ? dealTime(){
? ? ? ? console.log('這是mixin的dealTime里面的方法');
? ? ? }
? }
}
export default{
? mixins:[mixin]
}
5.為路徑設(shè)置別名
在開(kāi)發(fā)過(guò)程中，我們經(jīng)常需要引入各種文件，如圖片责语、CSS炮障、JS 等，為了避免寫很長(zhǎng)的相對(duì)路徑（../）坤候，我們可以為不同的目錄配置一個(gè)別名
// vue-cli 2.x 配置
// 在 webpack.base.config.js中的 resolve 配置項(xiàng)胁赢，在其 alias 中增加別名
resolve: {
? ? extensions: ['.js', '.vue', '.json'],
? ? alias: {
? ? ? 'vue$': 'vue/dist/vue.esm.js',
? ? ? '@': resolve('src'),
? ? }
? },
// vue-cli 3.x 配置
// 在根目錄下創(chuàng)建vue.config.js
var path = require('path')
function resolve (dir) {
? console.log(__dirname)
? return path.join(__dirname, dir)
}
module.exports = {
? chainWebpack: config => {
? ? config.resolve.alias
? ? ? .set(key, value) // key,value自行定義，比如.set('@@', resolve('src/components'))
? }
}
6.img 加載失敗
有些時(shí)候后臺(tái)返回圖片地址不一定能打開(kāi),所以這個(gè)時(shí)候應(yīng)該加一張默認(rèn)圖片
// page 代碼
<img :src="imgUrl" @error="handleError" alt="">
<script>
export default{
? data(){
? ? return{
? ? ? imgUrl:''
? ? }
? },
? methods:{
? ? handleError(e){
? ? ? e.target.src=reqiure('圖片路徑')
? ? }
? }
}
</script>
7.頁(yè)面統(tǒng)一判斷
在開(kāi)發(fā)中經(jīng)常會(huì)遇到權(quán)限判斷的問(wèn)題白筹，我們又不可能在每一個(gè)頁(yè)面的生命周期中去判斷一下智末，那樣太消耗時(shí)間了，處理方式：
router.beforeEach((to, from, next) => {
? myAccess.checkhaveAccess(to.path) === true ? next() : next('/forbid')
})
8.路由的項(xiàng)目啟動(dòng)頁(yè)和 404 頁(yè)面
404 頁(yè)面指的是: 當(dāng)進(jìn)入一個(gè)沒(méi)有 聲明/沒(méi)有匹配 的路由頁(yè)面時(shí)就會(huì)跳轉(zhuǎn)到 404 頁(yè)面
export default new Router({
? routes: [
? ? {
? ? ? path: '/', // 項(xiàng)目啟動(dòng)頁(yè)
? ? ? redirect:'/login'? // 重定向到下方聲明的路由
? ? },
? ? {
? ? ? path: '*', // 404 頁(yè)面
? ? ? component: () => import('./notfind')
? ? },
? ]
})
CSS 篇
1.使用 text-align-last 對(duì)齊兩端文本
在線演示
<div class="bruce flex-ct-x">
? ? <ul class="justify-text">
? ? ? ? <li>賬號(hào)</li>
? ? ? ? <li>密碼</li>
? ? ? ? <li>電子郵件</li>
? ? ? ? <li>通訊地址</li>
? ? </ul>
</div>
.justify-text {
? ? li {
? ? ? ? margin-top: 5px;
? ? ? ? padding: 0 20px;
? ? ? ? width: 100px;
? ? ? ? height: 40px;
? ? ? ? background-color: #f66;
? ? ? ? line-height: 40px;
? ? ? ? text-align-last: justify;
? ? ? ? color: #fff;
? ? ? ? &:first-child {
? ? ? ? ? ? margin-top: 0;
? ? ? ? }
? ? }
}
2.使用 color 改變邊框顏色
border 沒(méi)有定義 border-color 時(shí)徒河，設(shè)置 color 后系馆，border-color 會(huì)被定義成 color
場(chǎng)景：邊框顏色與文字顏色相同
.elem {
? border: 1px solid;
? color: #f66;
}
3.黑白圖像
讓你的彩色照片顯示黑白照片
img.desaturate {
? ? filter: grayscale(100%);
? ? -webkit-filter: grayscale(100%);
? ? -moz-filter: grayscale(100%);
? ? -ms-filter: grayscale(100%);
? ? -o-filter: grayscale(100%);
}
4.將圖片作為背景
當(dāng)給頁(yè)面添加圖片時(shí)，尤其需要圖片是響應(yīng)式的時(shí)候顽照，最好使用 background 屬性來(lái)引入圖片由蘑，而不是 <img> 標(biāo)簽
這看起來(lái)使用圖片會(huì)更復(fù)雜，但實(shí)際上它會(huì)使設(shè)置圖片的樣式變得更加容易代兵。有了 background-size, background-position 和其它的屬性尼酿，保持或改變圖片原始尺寸和寬高比會(huì)更方便
background 引入圖片的一個(gè)缺點(diǎn)是頁(yè)面的 Web 可訪問(wèn)性會(huì)受到輕微的影響，因?yàn)槠聊婚喿x器和搜索引擎無(wú)法正確地獲取到圖像植影。這個(gè)問(wèn)題可以通過(guò) CSS object-fit 屬性解決裳擎，到目前為止除了 IE 瀏覽器其他的瀏覽器都可以使用 object-fit。
<section>
? ? <p>Img element</p>
? ? <img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="bicycle">
</section>
<section>
? ? <p>Div with background image</p>
? ? <div></div>
</section>
img {
? ? width: 300px;
? ? height: 200px;
}
div {
? ? width: 300px;
? ? height: 200px;
? ? background: url('https://tutorialzine.com/media/2016/08/bicycle.jpg');
? ? background-position: center center;
? ? background-size: cover;
}
section{
? ? float: left;
? ? margin: 15px;
}
5.保持選擇器的低權(quán)重
css 的選擇器并不都是平等的思币。當(dāng)初學(xué)習(xí) CSS 時(shí)鹿响，我總是認(rèn)為選擇器會(huì)覆蓋它上面的所有內(nèi)容。然而谷饿，情況并非如此
<a href='#' id='blue-btn' class="active">按鈕</a>
a{
? ? color: #fff;
? ? padding: 15px;
}
a#blue-btn {
? ? background-color: blue;
}
a.active {
? ? background-color: red;
}
我們希望.active類中設(shè)置的樣式會(huì)生效使按鈕變?yōu)榧t色惶我。但是它并不會(huì)起作用，因?yàn)榘粹o在上面有一個(gè)ID選擇器博投，它同樣設(shè)置了background-color指孤，ID選擇器具有更高的權(quán)重，所以按鈕的顏色是藍(lán)色的
權(quán)重也會(huì)疊加贬堵，于是a#button.active的權(quán)重要比a#button的高。一開(kāi)始就使用高權(quán)重的選擇器會(huì)導(dǎo)致你在后面的維護(hù)中不斷的使用更高權(quán)重的選擇器
6.使用rem進(jìn)行全局大小調(diào)整结洼；使用em進(jìn)行局部大小調(diào)整
在設(shè)置根目錄的基本字體大小后黎做，例如html字體大小：15px松忍；蒸殿，可以將包含元素的字體大小設(shè)置為rem
article {? ?
? ? font-size: 1.25rem;?
}? ?
aside {? ?
? ? font-size: .9rem;?
}
將文本元素的字體大小設(shè)置為em
h2 {? ?
? ? font-size: 2em;?
}? ?
p {? ?
? ? font-size: 1em;?
}
參考鏈接
靈活運(yùn)用 JS 開(kāi)發(fā)技巧
靈活運(yùn)用 CSS 開(kāi)發(fā)技巧
我在 vue 開(kāi)發(fā)中的小技巧
如何提升你的CSS技能，掌握這20個(gè)css技巧即可[完整版]
web進(jìn)階知識(shí)
相關(guān)推薦
vue: 防止按鈕重復(fù)點(diǎn)擊
閱讀 966
兩年經(jīng)驗(yàn)面試阿里前端開(kāi)發(fā)崗，已拿offer宏所，這些知識(shí)點(diǎn)該放出來(lái)了
閱讀 5309
CSS外邊距塌陷問(wèn)題
閱讀 95
ajax 工作原理
閱讀 43
給公司面試了100多個(gè)前端酥艳，心態(tài)差點(diǎn)給爺整崩了
閱讀 3409
