在vue.js中抽出公共代碼的方法示例

前言

當(dāng)我們?cè)谑褂胿ue構(gòu)建中大型項(xiàng)目時(shí)，通常會(huì)遇到某些經(jīng)常用的方法以及屬性，比如說(shuō)搭建一個(gè)員工管理系統(tǒng)，請(qǐng)求的url需要一個(gè)共同的前綴，或者在某幾個(gè)view中需要用到時(shí)間，這個(gè)時(shí)間是通過(guò)某方法格式化之后的等等，如果每次用到都寫(xiě)共同的代碼，那樣如果之后有變動(dòng)的話維護(hù)起來(lái)會(huì)非常麻煩。

所以我們就得想辦法抽出公共代碼，因?yàn)関ue是組件化開(kāi)發(fā)，我們就會(huì)很自然的與es6的module模塊化聯(lián)系到一起。其實(shí)當(dāng)我們?cè)诖罱?xiàng)目結(jié)構(gòu)時(shí)就應(yīng)該先提前埋下伏筆，有一個(gè)util文件夾，里面放的就是我們要寫(xiě)的公共代碼，其實(shí)很多vue的例子都是類似于這種結(jié)構(gòu)搭建的。

對(duì)于固定的配置參數(shù)我們可以放到config.js中，就像下面這樣。

const config = {
 request_prefix: 'http://localhost:10003',
 base_img: 'http://www.baidu.com',
 
}

const DingConf = function(data){
 xxxxxxxxx
}


export {config, DingConf}

對(duì)于常用的工具函數(shù)我們可以放到util.js中，結(jié)構(gòu)跟上面一樣。

然后為什么我要用export來(lái)導(dǎo)出，而不用export default呢？

因?yàn)榍罢吒鼮殪`活，因?yàn)閷?duì)于大中型項(xiàng)目來(lái)說(shuō)，我們的工具函數(shù)以及配置參數(shù)往往較多，如果我們使用export default導(dǎo)出的話，在組件中引入就會(huì)全部引入，但我們的需求是只在相應(yīng)的頁(yè)面中按需引入即可，所以在vue文件中，我們就可以這樣寫(xiě)

import {config} from 'src/util/config'      // 引入模塊
export default {
　　created(){
　　　　this.$http({
　　　　　　url: config.request_prefix + xxxxxxxxxxxxx  // 使用
　　　　})
　　}
}

這樣寫(xiě)的優(yōu)點(diǎn)是增強(qiáng)了可讀性并利于維護(hù)。如果有同學(xué)不太理解es6中的import，export，建議大家去看下阮一峰大神的es6入門教程，在這里我也簡(jiǎn)單的說(shuō)下吧，因?yàn)関ue是模塊化，所以就得導(dǎo)出某些東東，然后每個(gè)模塊只負(fù)責(zé)不同的業(yè)務(wù)，所以嘛我們最后就得export一下，因?yàn)閏onst是不變的常量，所以在配置項(xiàng)中盡可能用這個(gè)，在工具函數(shù)中用let聲明變量，然后import后面的{ ... }就是引入某個(gè)模塊的某些屬性或方法，from 'xxxx' 這里面是指引入哪個(gè)模塊。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)億速云的支持。