色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue 提取公共js

傅智翔1年前8瀏覽0評論

在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項目中,我們需要充分利用這種技巧,以便在開發過程中可以更好地處理多個組件之間的代碼共享問題。