前言
作為一個前端,可能絕大多數的時間都是在寫的業務程式碼,時間一長,大家會覺得乏味、沒意思等等,但是其實就算只是寫業務程式碼,我們也依然能夠找到有興趣的點,說的簡單一點就是程式碼優化,不僅僅侷限在業務邏輯這塊,像是程式碼複用、效率等等都是我們可以加以改進的地方,學會在業務程式碼中找到不足,總結經驗,這樣日積月累,量變產生質變,必然我們的技術也是不斷再上升的。今天其實就是說下我自己在vue專案中進行的一些總結或者是經驗,如果有錯誤的地方也是歡迎大家指正。
1.相容IE11
用過vue的同學們應該都比較清楚,vue其實是可以相容ie9的,但是這種相容並不是說,你寫了一個專案,開啟ie9就能相容了,是需要用工具將程式碼進行轉換的。我之前也是這樣以為的,直到近期一個專案完成之後,開啟ie11,發現頁面顯示正常的,但是所有的http請求都是無效的,經過了一番查詢,才知道這個babel-polyfill的包的用處,當然知道的同學可以略過啦,不知道的話,跟著我繼續往下看
我們使用現代瀏覽器的話,很多像是es7、es8的語法,可能都是已經支援了,但是放在ie上,這些方法都是通通不認識的,因此我們就需要一個工具來將這些ie瀏覽器不認識的語法轉換成ie所認識的,那麼知道了這個babel的包,其實就很簡單了,我們直接這樣在vue中的main.js中引入這個包即可
import "babel-polyfill";
複製程式碼
但是這樣引入的話,在打包的時候,包可能會比較大,會影響到前端頁面的開啟速度,所以又出現了一種按需轉譯的用法,即當我們需要用到轉譯程式碼的時候,會替我們轉譯,並不是一次轉譯所有的程式碼,這種用法同學們應該也是非常熟悉了,就是所謂的“懶載入”,和vue的路由懶載入是一個道理,那麼如何使用呢,首先下載的是一個@babel/polyfill的包,這個包的話也是一個翻譯程式碼的作用,但是可以進行配置來實現按需載入
npm i @babel/polyfill -D
複製程式碼
然後我們需要在babel.config.js中進行按需載入的配置
presets: [
'@vue/app',
[
'@babel/preset-env',
{
'useBuiltIns': 'entry'
}
]
]
複製程式碼
注意這個@babel/preset-env是一個有關環境變數的包,這個包在你使用vue腳手架3.0建立專案時就會自帶這個包了,所以是不需要下載的,最後在main.js中引入我們之前下載的包就可以了。
import "@babel/polyfill";
複製程式碼
這樣就大功告成了,打包的話也可以看到打包體積變小了
2.按需打包元件
其實關於按需打包我們需要的元件,很多元件也介紹如何按需使用,ant-design-vue也提供了這些內容,想要詳細瞭解的同學可以點開連結檢視文件,這裡也是簡單說一下,首先需要下載babel-plugin-import的外掛,然後需要在babel.config.js中進行如下配置
plugins: [
[
"import",
{libraryName: "ant-design-vue",libraryDirectory: "es",style: true}
]
]
複製程式碼
之後的話,我們就不能全域性引入元件了,而是引入我們專案中所用到的一些元件,可以將這些引入的元件單獨放入一個js檔案中,這樣方便以後新增元件
//index.js
import Vue from 'vue';
import {
Button,
Row,
Col,
Layout,
Menu,
Icon,
Form,
Tag,
Input
} from 'ant-design-vue';
Vue.use(Button)
Vue.use(Row)
Vue.use(Col)
Vue.use(Layout)
Vue.use(Menu)
Vue.use(Icon)
Vue.use(Form)
Vue.use(Tag)
Vue.use(Input)
//也可以這樣寫,但是這樣寫比較麻煩
// Vue.component(Button.name,Button)
// Vue.component(Row.name,Row)
// Vue.component(Col.name,Col)
// Vue.component(Layout.name,Layout)
// Vue.component(Layout.Header.name,Layout.Header)
// Vue.component(Layout.Sider.name,Layout.Sider)
// Vue.component(Layout.Footer.name,Layout.Footer)
// Vue.component(Layout.Content.name,Layout.Content)
// Vue.component(Menu.name,Menu)
// Vue.component(Icon.name,Icon)
// Vue.component(Form.name,Form)
// Vue.component(Tag.name,Tag)
// Vue.component(Form.Item.name,Form.Item)
// Vue.component(Input.TextArea.name,Input.TextArea)
複製程式碼
然後我們再來打包看看此時的檔案大小
3.自定義元件的v-model指令
說完了如果優化打包,我們再來看看如何提高我們的程式碼質量。v-model這個指令相信大家也都用過,它雙向繫結的機制是不是非常省事呢,如果我們自己要實現一個v-model繫結又該如何做呢,比如我們需要監聽某個富文字編輯器內容的變化,獲取內容以及儲存富文字的內容,這個時候就剛好用上自定義的v-model
<template>
<div class="hello">
<editor :id="id" :min-height="500" width="100%" :content="editor"
@on-content-change="onContentChange"></editor>
</div>
</template>
<script>
export default {
name: 'kindeditor',
model: {
prop: 'editor',
event: 'content-change'
},
props: {
editor: String,
id: String
},
data () {
return {}
}
methods: {
onContentChange (val) {
this.$emit('content-change',val);
}
}
}
</script>
複製程式碼
其實關鍵就在model屬性上,定義了父元件傳過來的props,以及發生變化的事件名稱,需要注意的地方在於,當內容發生改變時,我們不能將改變後的值賦給props屬性,因為vue中預設是單向資料流,props的值只能是由父元件來改變,這樣的話,我們就能輕易的監聽這個富文字編輯器的值,而不用去用watch監聽或者是其他的方法來實現,這個實現的方法在vue的文件中也有提到,大家也可以去文件檢視詳情。
4.條件語句優化
在我們的專案中肯定是有無數的if條件語句的程式碼,如果條件巢狀不多的話,那沒什麼問題,如果巢狀過多過深,就會導致程式碼難以理解,維護困難,因此針對條件語句的優化也是勢在必行的,這裡也是參考了很多大佬們的文章,吸取他們的經驗,使用一些比較常用的方法來優化條件語句,比如錯誤優先處理return
this.form.validateFields((err,values) => {
if (err) {
this.$message.warning('驗證失敗,請重新輸入!');
return;
}
let fileId = values.fileId.map(item => {
return item.response.result
});
let params = Object.assign(values,{
govUserId: sessionStorage.getItem('userId'),
fileId: fileId.slice(-1)
})
this.resSubmit(params)
});
複製程式碼
這樣一個表單驗證的方法,當如果發生錯誤時,直接提示錯誤資訊,然後退出驗證,少了一個else的程式碼塊,程式碼更少一些,而且也很容易理解
另外比較常用的就是利用三目運算子,以及短路操作符“&&”和“||”,比如
this.panes.length > 1 && this.$store.commit('DELETE_TAB',key);
//或者是
this.panes.length > 1 ? this.$store.commit('DELETE_TAB',key) : '';
複製程式碼
除此還有上面文章中提到的更復雜的條件判斷,使用新的資料結構Map來進行判斷,而所有這些條件語句,都是我們程式碼當中需要優化的地方。
5.解構賦值以及函式預設值的應用
解構賦值是ES6當中的內容,現在ES10都已經出來了,如果ES6還沒有用上的話,那就顯得我們前端太low啦,當然這只是開個玩笑,不過ES6所帶來的解構賦值以及函式預設值都是能夠簡化我們的程式碼,使程式碼更容易理解,所以既然我們學習ES6了,那麼就必須要學以致用。
//給引數新增預設值,當引數為undefined的時候,則使用預設的引數值
async getData(currentPage = 0,pageSize = 10) {
//將請求的結果賦值給一個物件,並且給物件中的每個屬性都取了一個名字,後面直接可以使用這個變數進行操作,而不需要用.語法
let {response,username,timeToken,govUserId} = await this.$store.dispatch('getSign'),
params = {
sign: response.result.sign,
username,
timeToken,
govUserId,
currentPage,
pageSize
}
}
複製程式碼
解構和函式預設值看起來好像比較複雜,但是用熟悉了以後,會發現少寫了很多程式碼,並且程式碼看起來也是一目瞭然,同時預設值還幫助我們省去了關於引數的判斷,是不是非常的方便的呢。
6.在vue中使用JSX
一直以來,我以為只有react中才能使用JSX,後來發現其實我們在vue中也能使用JSX,需要注意的是JSX在vue中和react中還是有一點區別的,這裡不會具體說這些區別,只是告訴大家,遇到一些複雜的元件,可以去嘗試使用JSX來寫,也是一種解決問題的方法
render () {
return (
<div class="apply_list">
<a-table columns={this.columns}
size="small"
dataSource={this.dataSource}
pagination={this.pagination}
loading={this.loading}
rowKey={(record,index) => index}
onChange={this.handleTableChange}
locale={{emptyText: '暫無資料'}}
>
</a-table>
</div>
)
}
複製程式碼
JSX在vue中,是寫在render()鉤子中的,直接返回return一個JSX物件就可以了,網上也有關於vue中的JSX怎麼使用,大家可以去搜搜。
寫在最後
很久很久沒有寫部落格了,不只是因為工作忙的原因,還有自己懶的因素在裡面,人如果在舒適區待太久的話,總會慢慢去的磨滅了自己的初衷,自己的目標,因此也是希望通過寫部落格來提醒自己,不斷學習,不斷積累,技術是沒有任何捷徑可走,而我走的已經比別人慢了很多,所以還需要繼續努力丫。
最後上面提到的程式碼,都在我的github上面,最近工作關係使用ant-design-vue的ui框架,然後就漸漸喜歡了這個框架,感覺它更加靈活好用,並且設計也比較漂亮,大家可以對照這我的專案和官方的文件來進行學習喲。