在Vue開發過程中,我們經常會遇到多個組件之間需要共享一些方法或屬性的情況。這時候,可以利用提取公共的JS文件來實現這個目的。
//common.js export function formatDate(date) { //格式化日期方法 } export function throttle(fn, delay = 500) { //節流方法 } export const baseUrl = "https://www.example.com";
上面的代碼定義了三個常用的方法,供多個組件使用。其中包括了格式化日期的方法和節流方法,這些方法可以在多個組件之間共享。
接下來,我們需要在維護這些公共方法的同時,避免它們被污染。因此,我們需要將這些方法放到一個單獨的JS文件中,并通過ES6的模塊導出和導入來引用這些方法。
//Component.vue import { formatDate, throttle, baseUrl } from '@/js/common.js'; export default { data() { return { message: "", lastSubmitTime: 0 }; }, methods: { handleSubmit() { if (new Date().getTime() - this.lastSubmitTime< 500) { throttle(() =>{ this.submitForm(); }); } else { this.submitForm(); this.lastSubmitTime = new Date().getTime(); } }, submitForm() { axios.post(baseUrl + "/some/url", { message: this.message }); } } };
在組件中,我們通過import引入了common.js中定義的常用方法和常量。假如我們想在多個組件中使用這些公共方法,我們可以重復這個過程,因為我們在common.js文件中定義了export命令,這些方法和常量可以在其他文件中被使用。
//AnotherComponent.vue import { formatDate, baseUrl } from '@/js/common.js'; export default { computed: { formattedDate() { return formatDate(new Date()); } }, created() { axios.get(baseUrl + "/some/other/url").then(res =>{ //代碼邏輯 }); } };
另一個組件也可以通過import導入這些公共方法和常量,從而避免了各種資源浪費。公共的JS文件常常包含了請求的URL地址或其它常量,因此方便多個組件共享這些數據。
除此之外,斷言方法也可以放到這個公共JS文件中。假如我們在多個組件中使用了同樣的工具函數和已封裝好的API,我們可以在測試代碼中使用這些方法來測試。
//common.test.js import { throttle, formatDate } from './../js/common.js'; describe('common.js', () =>{ describe('throttle', () =>{ it('should only call the provided function once', () =>{ jest.useFakeTimers(); const mockFn = jest.fn(); const throttledFn = throttle(mockFn); throttledFn(); throttledFn(); throttledFn(); jest.runAllTimers(); expect(mockFn.mock.calls.length).toBe(1); }); }); describe('formatDate', () =>{ it('should return a formatted date string', () =>{ const date = new Date('2022-01-01'); const formatted = formatDate(date); expect(formatted).toBe('2022-01-01'); }); }); });
測試文件也可以通過引入這些公共方法來共享測試資源。在測試中,我們可以自由地使用common.js中定義的常用方法和常量,從而提高了代碼復用率和測試效率。
總的來說,提取公共JS文件是一個很有價值的技巧,它能夠提高代碼的復用性和整體的開發效率。在Vue項目中,我們需要充分利用這種技巧,以便在開發過程中可以更好地處理多個組件之間的代碼共享問題。
上一篇vue 插件開發 架構