This is the 28th day of my participation in Gwen Challenge
Today I continue the refactoring of a “focus page” that WAS not completed yesterday:
Focus on page refactoring
Similarly, wrap our children with NConfigProvider to enable theme switching:
<n-config-provider
:theme="themeValue"
>
<FanlyCountdownClock
@finish="hideFocus"
/>
</n-config-provider>
Copy the code
The display looks like this, but we noticed that there was some extra blank space at the bottom.
Since we used document data before, it was vulnerable to the impact of page switching cache, so we changed the property of Window to obtain the height of the full screen: 900 (local machine) :
The effect is back:
The use of eslint
This project mainly uses ESLint for code specification checking:
"lint": "eslint . --ext js,ts,vue",
Copy the code
This will not cause us to submit the code to Github, but will inevitably result in many warnings:
/Users/yemeishu/Documents/code/codes/fanlymenu/packages/services/LunarService.ts 42:3 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types /Users/yemeishu/Documents/code/codes/fanlymenu/packages/services/TrayService.ts 6:17 warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any 32:11 warning Argument 'fn' should be typed with a non-any type @typescript-eslint/explicit-module-boundary-types 32:15 warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any /Users/yemeishu/Documents/code/codes/fanlymenu/packages/services/WeatherService.ts 6:3 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types 6:21 warning Argument 'location' should be typed with a non-any type @typescript-eslint/explicit-module-boundary-types 6:31 warning Unexpected Any. Specify a different type @typescript-eslint/no-explicit-any disk 53 problems (0 errors, 53 warnings)Copy the code
We found 53 such warnings. This is not a big deal, but the code will be much more readable if we follow the “spec”. Here’s an example:
/Users/yemeishu/Documents/code/codes/fanlymenu/packages/services/LunarService.ts
42:3 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
Copy the code
If I use any as the return type:
This is a cure-all, but you will still get a warning.
The best way to do this is to write a custom interface type:
export declare interface LunarServiceResult {
nongliString: string,
ganzhi: string[],
yangliString: string,
yi: string[],
ji: string[],
}
Copy the code
Then, make the return type LunarServiceResult.
Yarn Lint prompts without this warning.
We can do that with any problem like this.
Let’s move on to another question:
/Users/yemeishu/Documents/code/codes/fanlymenu/packages/renderer/src/components/DateViewSub.vue
101:5 warning Prop 'weather' requires default value to be set vue/require-default-prop
Copy the code
The problem with this is that our component’s properties require default values.
There are two main ways to solve this problem:
- Complete the return logic required by the type Object;
- Change Object to our custom constructor type.
Let’s take the first method as an example (the second method is similar to the above example).
// Objects with default values propE: {type: Object, // Object or array default values must be obtained from a factory function default() {return {message: 'hello'}}},Copy the code
With this in mind, we just need to bring in a default return factory function:
props: { weather: { type: Object, default() { return { weatherNow: { icon: '100', temp: '30', }, }; }},},Copy the code
The warning also disappeared
Same problem, same solution:
/Users/yemeishu/Documents/code/codes/fanlymenu/packages/renderer/src/components/DateViewSub.vue
101:5 warning Prop 'weather' requires default value to be set vue/require-default-prop
Copy the code
Let’s look at a similar question:
/Users/yemeishu/Documents/code/codes/fanlymenu/packages/renderer/src/components/SettingSub.vue
210:5 warning Prop 'location' requires default value to be set vue/require-default-prop
Copy the code
Increase the default latitude and longitude values:
Location: {type: Object, default() {return {longitude: 114.52, latitude: 38.02,}; }},Copy the code
Use Provide/Inject for reconstruction
We can Provide/Inject variables instead of Prop to Provide/Inject the weather variable.
Start of transformation:
// fullcalendarmain.vue setup() {// fullcalendarmain.vue setup() {const weather = ref({}); provide('weather', weather); return { weather, ... }; }, // The subcomponent gets weather by inject // fullcalendarsub.vue setup() {const weather = inject('weather'); const store = useStore(); const themeVars = ref(useThemeVars()); return { weather, darkTheme, store, themeVars, }; }, // WeatherSub.vue setup() { const weather = inject('weather', { weatherNow: { icon: '100', temp: '30', }, }); return { weather, }; },Copy the code
Ok, so we don’t have to worry about the Prop Object default.
summary
We constantly optimize our code, not only to ensure the quality and standardization of the code, but also to make our code stand the scrutiny and use of everyone.
To be continued!