vue封裝一個函數(進階必學)

在生活中，重復的機械勞動會消耗我們的時間和精力，提高生產成本，降低工作效率。同樣，在代碼世界中，編寫重復的代碼會導致代碼的冗余，頁面性能的下降以及后期維護成本的增加。由此可見將重復的事情復用起來是提高生產效率、降低維護成本的不二之選。

 

在 Vue 項目中，每一個頁面都可以看作是由大大小小的模塊構成的，即便是一行代碼、一個函數、一個組件都可以看作是一個個自由的模塊。那么提高代碼的復用性的關鍵便在於編寫可復用的模塊，也就是編寫可復用的代碼、函數和組件等。

 

## 一個簡單的例子

let person = [];

for (let i = 0; i < data.obj.items.length; i++) {
    person.push({
        name: data.obj.items[i].name,
        age: data.obj.items[i].age
    });
}

不知道上方代碼給你的第一印象是什么？總之給我的印象是糟糕的，因為出現了重復性的代碼片段 `data.obj.items`，可能這樣的代碼在我們團隊開發中隨處可見，這也說明了重復編碼現象其實無處不在。

面對自己編寫的代碼，我們應該保持一顆去重的心，發現重復的地方就相當於找到了可以復用的模塊。在不復用的情況下，上述代碼一旦需要修改變量 `items` 為 `lists`，那么我們就得修改 3 處地方，不知不覺就增加了維護成本。而到時候往往修改你代碼的人並不是你自己，所以對自己好點，對他人也會好點。復用后的代碼如下：

let person = [];
let values = data.obj.items;

for (let i = 0; i < values.length; i++) {
    person.push({
        name: values[i].name,
        age: values[i].age
    });
}

我們通過將 data.obj.items 的值賦值給變量 values 來實現了復用，此時修改 `items` 為 `lists` 的話我們只需修改一處地方即可，不管是維護成本還是代碼可讀性上，復用的優勢都顯而易見。

 

## 封裝成一個函數

 

除了使用變量的賦值緩存使用來解決數據的重復讀取外，我們在開發過程中重復性更多的也許是功能點的重復，比如：

<tempalte>
    <div>
        <input type="text" v-model="str1">
        <input type="text" v-model="str2">
        <div>{{ str1.slice(1).toUpperCase() }}</div>
        <div>{{ str2.slice(1).toUpperCase() }}</div>
    </div>
</template>

上述代碼的重復功能點在於截取輸入框中第二個字符開始到最后的值並把它們轉化成大寫字母，像這樣很簡單的操作雖然重復使用也不會出現太大的問題，但是如果是代碼量較多的操作呢？重復書寫相同功能的代碼是一種不經過大腦思考的行為，我們需要對其進行優化，這里我們可以把功能點封裝成一個函數：

 

export default {
    methods: {
        sliceUpperCase(val) {
            return val.slice(1).toUpperCase()
        }
    }
}

如此我們只要在用到該方法的地方調用即可，將值傳入其中並返回新值。當然像在雙花括號插值和 v-bind 表達式中重復的功能點我們可以封裝成過濾器比較合適：

// 單文件組件注冊過濾器
export default {
filters: {
    sliceUpperCase(val) {
        return val.slice(1).toUpperCase()
    }
}
}

// 全局注冊過濾器
Vue.filter('sliceUpperCase', function (val) {
    return val.slice(1).toUpperCase()
})

然后在 html 中使用“管道”符進行過濾：

<div>{{ str1 | toUpperCase }}</div>
<div>{{ str2 | toUpperCase }}</div>

這樣我們就把重復的功能性代碼封裝成了函數，而不管是過濾器還是正常的方法封裝，其本質都是函數的封裝。