1、 Some current write front-end operations
1. Interface (or Type) A shuttle
type User = { nickname: string avatar?: string age: number } interface User { nickname: string avatar?: string age: number }
2. Type gymnastics whole flower activity
three hook The Infinite Myth of
four axios Intercept Dafa Okay
2、 We have some different front-end operations
-
Abstract: Everything can be abstracted into related classes and objects -
Object oriented: Object oriented design thinking with inheritance, encapsulation, polymorphism and other characteristics -
Section: Nothing can be solved by cutting with one knife. If one knife can't do it, then add more. -
Note: There are no constants that cannot be configured with notes, and there are no notes that can be avoided if you want to cut them -
Reflection: Nothing is violent and will fail. Even if it fails, there is no exception that cannot be thrown out -
Entity: nothing can not be abstracted to entity, everything is unique. -
Many: There are many more. The above description is subjective and casual.
1. Abstract and object-oriented
Service API request class
abstract class AbstractService{ //Implement an abstract attribute so that subclasses can implement abstract baseUrl!: string //Then implement some common network requests such as adding, deleting, modifying and querying // save() // getDetail() // deleteById() // select() // page() // disabled() // ...... } Entity Data Entity Base Class
abstract class AbstractBaseEntity<s extends abstractservice> { abstract service: AbstractService //Any data is a unique ID id!: number //Then implement some methods of updating and deleting data entities save(){ await service.save(this.toJson()) Notify. success } delete(){ service.deleteById(this.id) Notify. success } // ...... } -
Implementation of subclasses:)
class UserEntity extends AbstractUserEntity<userservice>{ service = new UserService() nickname!: string age!: number avatar?: string //Whether the user is an adult isAdult(): boolean{ return this.age >= 18 } } View View call
<template> <el-input v-model="user.nickname" /> <el button @ click="onUserSave()">Create a user</el button> </template> <script setup lang="ts"> const user = ref(new UserEntity()) async function onUserSave(){ await user.save() } </script> 2. Decorator/section/reflection
-
Data conversion through reflection >If the data returned by the back-end API is forcibly converted according to the data structure of the front-end, when the back-end data is returned in disorder, ensure that the front-end data will not have any problems in use, as shown in the following demo class UserEntity { @Type(String) phone!: string; @Type(RoleEntity) roleInfo!: RoleEntity: @Type(DeptEntity) @List @Default([]) deptInfoList!: DeptEntity[] @Type(Boolean) @Default(false) isDisabled!: boolean } -
Storage and reading configured through reflection >In yesterday's article, we talked about some aspects, such as configuration forms, tables, search boxes, permissions, etc
3. Re emphasize object-oriented
-
This is a society of competing for father >Once it is possible to reuse some general functions, you can consider and try to let its parent class implement them. If you need a child class to pass in some characteristic parameters, you can use abstract methods or abstract properties (which are not available in Java) to pass in the characteristic parameters required in the implementation of the parent class. -
Reasonable abstraction layering >Some features are combined and separated according to different abstract concepts to realize the function of each class as uncoupled as possible and realize the single responsibility of the class. If multiple inheritance exists, the interface can be abstracted in consideration of the implementation cost of the implementation class interface Medium. -
There are many more. Please list them again when you have time
4. Strict but interesting tsdoc
3、 Write at the end
