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:

  1. Complete the return logic required by the type Object;
  2. 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!