隨著Web應(yīng)用程序的不斷發(fā)展和更新，對于一些經(jīng)常使用且具有復(fù)雜性的JavaScript函數(shù)的需求越來越重要。

這時候，封裝公共的JavaScript函數(shù)即變得非常重要。封裝公共js是一個十分好的實踐，它可以讓代碼復(fù)雜性減少，代碼風(fēng)格統(tǒng)一化，代碼維護性變得更加方便。

尤其是，在Vue框架中，我們可以把一些經(jīng)常性的組件實現(xiàn)抽離成公共函數(shù)，然后在整個應(yīng)用中都可以使用，這使得Vue應(yīng)用開發(fā)和維護更加方便。

下面，我們就來介紹具體如何 Vue 封裝公共js 函數(shù)。

首先，我們需要定義一個公共函數(shù)，并將它封裝在一個具有表現(xiàn)力的名字空間中?？梢允褂脤ο笞置嬷抵貥?gòu)代碼，使之變得更加整潔。

function myCommonFunction(){
// some custom behavior
}
var myCustomFunctionality = {
// resuable functionality goes here
};

現(xiàn)在，在Vue應(yīng)用的任何組件中，我們都可以使用該公共函數(shù)的本地名稱。

import myCommonFunction from './script/location/file';
myCommonFunction();

除了單獨的函數(shù)之外，Vue組件庫也可以被封裝。我們只需要將它們定義為全局組件，以便我們在應(yīng)用程序的任何地方都可以使用它們。

Vue.component('list-render',{
props: ['items'],
render(h){
return h('ul', this.items.map(function(item){
return h('li',item);
}));
}
});
new Vue({
el : '#app',
data : {
list : ['one','two','three'],
},
render : function(createElement){
return createElement('list-render',{
props : {
items : this.list,
}
})
}
});

最后，我們還可以在mixins中封裝一些通用功能代碼。

const CommonMixin = {
methods: {
submit: function () {
console.log("submitting")
},
cancel: function () {
console.log("cancelling")
}
}
};
// 組件定義部分
Vue.component('my-form', {
mixins: [CommonMixin]
});

總之，在 Vue 應(yīng)用程序中，使用公共函數(shù)可以讓代碼更加清晰，易于維護，并且可以在不同的組件中重復(fù)使用。 我們只需封裝一次，就可以在應(yīng)用程序的其他部分隨處使用，這對于程序員來說是一種極大的時間和代碼管理的便利。