From b5b3975dfc5e232c654862fb944866784a6285b0 Mon Sep 17 00:00:00 2001 From: javaswing Date: Thu, 24 Aug 2023 18:51:22 +0800 Subject: [PATCH 1/4] chore: add vscode setting --- .nvmrc | 1 - .vscode/settings.json | 63 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 .vscode/settings.json diff --git a/.nvmrc b/.nvmrc index 53d838a..e69de29 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +0,0 @@ -lts/gallium diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..104c70b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,63 @@ +{ + "typescript.tsdk": "./node_modules/typescript/lib", + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true + }, + "[javascriptreact]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true + }, + "[typescript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": false + }, + "[typescriptreact]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true + }, + "[json]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true + }, + "[css]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true + }, + "[less]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true + }, + "[scss]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true + }, + "[html]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true + }, + "[markdown]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true + }, + "eslint.validate": [ + "javascript", + "typescript", + "javascriptreact", + "typescriptreact" + ], + "cSpell.words": [ + "ahooks", + "antd", + "daygrid", + "echarts", + "fullcalendar", + "Sankey", + "sider", + "umijs", + "yigrowth" + ] +} From a0a726f5ac124c6945657130e3fb50f6ce22e235 Mon Sep 17 00:00:00 2001 From: javaswing Date: Thu, 24 Aug 2023 19:03:06 +0800 Subject: [PATCH 2/4] feat: add decorator code --- code/ES6/Decorator/index.ts | 14 ++++++++++++-- docs/zh/guide/ES6/Decorator.mdx | 1 + 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/code/ES6/Decorator/index.ts b/code/ES6/Decorator/index.ts index 06bc2ac..a1c12f0 100644 --- a/code/ES6/Decorator/index.ts +++ b/code/ES6/Decorator/index.ts @@ -5,11 +5,21 @@ class Person { this.name = name; } + @loggedMethod greet() { - console.log('LOG: Entering method.'); - console.log(`Hello, my name is ${this.name}.`); + } +} +function loggedMethod(originalMethod: any, _context: any) { + function replacementMethod(this: any, ...args: any[]) { + console.log('LOG: Entering method.'); + const result = originalMethod.call(this, args); console.log('LOG: Exiting method.'); + return result; } + return replacementMethod; } + +const p = new Person('Ron'); +p.greet(); diff --git a/docs/zh/guide/ES6/Decorator.mdx b/docs/zh/guide/ES6/Decorator.mdx index 856605e..e5ec229 100644 --- a/docs/zh/guide/ES6/Decorator.mdx +++ b/docs/zh/guide/ES6/Decorator.mdx @@ -19,3 +19,4 @@ 3. https://www.typescriptlang.org/docs/handbook/decorators.html 4. https://github.com/tc39/proposal-decorators 5. https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#decorators +6. https://mirone.me/zh-hans/a-complete-guide-to-typescript-decorator/ From 3a67141785fee80534bc9108a050120457b1b8bc Mon Sep 17 00:00:00 2001 From: javaswing Date: Mon, 28 Aug 2023 19:21:13 +0800 Subject: [PATCH 3/4] feat: add class Decorator --- code/ES6/Decorator/index.ts | 81 +++++++++++++++++++++++------- docs/zh/guide/ES6/Decorator.mdx | 87 ++++++++++++++++++++++++++++++++- 2 files changed, 150 insertions(+), 18 deletions(-) diff --git a/code/ES6/Decorator/index.ts b/code/ES6/Decorator/index.ts index a1c12f0..3bc8759 100644 --- a/code/ES6/Decorator/index.ts +++ b/code/ES6/Decorator/index.ts @@ -1,25 +1,72 @@ +/* eslint-disable @typescript-eslint/ban-types */ +// 1. 类装饰器 + +function ClassDecoratorService(params?: any): ClassDecorator { + return (target: Function) => { + console.log('ClassDecoratorService call on :', target); + console.log('ClassDecoratorService params: ', params); + }; +} + +@ClassDecoratorService({ log: 'test' }) +class ClassDecoratorExample {} // classDecorator call on : [Function: ClassDecoratorExample] + +// 1.1 类装饰器带参数 + +function ClassDecoratorWithParams(param1: number, param2: string) { + return function (target: Function) { + console.log('classDecoratorWithParams call on :', target, param1, param2); + }; +} + +@ClassDecoratorWithParams(1, '2') +class ClassDecoratorWithParamsExample {} + +// 2. 方法装饰器 + +function MethodDecorator( + target: object, + propertyKey: string | symbol, + descriptor: TypedPropertyDescriptor +) { + const originalMethod = descriptor.value; + descriptor.value = function (...args: unknown[]) { + console.log('methodDecorator call on :', target, propertyKey); + return originalMethod.call(this, ...args); + }; +} + class Person { + @MethodDecorator + sayHello() { + console.log('hello'); + } +} + +const p = new Person(); // methodDecorator call on : { sayHello: [Function (anonymous)] } sayHello +p.sayHello(); // hello + +// 3. 属性装饰器 +function PropertyDecorator(target: Object, propertyKey: string) { + console.log('propertyDecorator call on :', target, propertyKey); +} + +class Person2 { + @PropertyDecorator name: string; +} - constructor(name: string) { - this.name = name; - } +const p2 = new Person2(); - @loggedMethod - greet() { - console.log(`Hello, my name is ${this.name}.`); - } +// 4. 参数装饰器 +function ParameterDecorator(params: any) { + return (target: Object, propertyKey: string, index: number) => { + console.log('parameterDecorator call on :', target, propertyKey, index); + }; } -function loggedMethod(originalMethod: any, _context: any) { - function replacementMethod(this: any, ...args: any[]) { - console.log('LOG: Entering method.'); - const result = originalMethod.call(this, args); - console.log('LOG: Exiting method.'); - return result; +class Person3 { + eat(@ParameterDecorator('food') food: string) { + console.log(food); } - return replacementMethod; } - -const p = new Person('Ron'); -p.greet(); diff --git a/docs/zh/guide/ES6/Decorator.mdx b/docs/zh/guide/ES6/Decorator.mdx index e5ec229..64a04d9 100644 --- a/docs/zh/guide/ES6/Decorator.mdx +++ b/docs/zh/guide/ES6/Decorator.mdx @@ -6,11 +6,96 @@ 装饰器（Decorator）主要是用来增强JavaScript类（class）的功能，请多的面向对象语言都在类似的东西。 比如:Java中的[`Annotation`](https://www.cnblogs.com/ziph/p/13056092.html)、C#中的[`Attribute`](https://www.cnblogs.com/zuiyirenjian/p/3980608.html)等。 -注：目前的使用场景主要在`TypeScript`中使用。演示代码主要在为ts代码. +> 由于该特性是目前处于`Stage`阶段，想使用该功能，浏览器都没有支持。在开发中使用一般有两种方法： + +> 1. 通过Babel，进行编译通过，插件[@babel/plugin-proposal-decorators](https://babeljs.io/docs/babel-plugin-proposal-decorators) + 2. 使用`TypeScript`进行编译，（TypeScript在早期的时候本身已经支持`Decorator`，后来由于ECMAScript标准确认时，与早期的语法很有很大的差别。所以在使用时配置是不相同的，见下文） + +> 本文主要在`TypeScript`中使用。演示代码主要在为ts代码. ## 语法 +> 注：以[`TypeScript5.0`](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#decorators)版本为界限，在5.0之前TypeScript实现的是[`Stage 2`](https://mirone.me/zh-hans/a-complete-guide-to-typescript-decorator/)的装饰器标准， +而在5.0及之后是按照[`Satge 3`](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#decorators)进行实现的。这里以`Typescript5.0`的版本进行测试 + +### 配置 +在5.0之后的版本，`TypeScript`是默认支持。使用**传统的语法**则需要以下配置: + +```json +{ + "compilerOptions": { + "target": "ES5", + "experimentalDecorators": true + } +} +``` + +### 类型定义 +先看下在5.0版本中，对于装饰器的定义: + +```TypeScript +declare type ClassDecorator = (target: TFunction) => TFunction | void; +declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void; +declare type MethodDecorator = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor) => TypedPropertyDescriptor | void; +declare type ParameterDecorator = (target: Object, propertyKey: string | symbol | undefined, parameterIndex: number) => void; +``` +在该版本中，可以分为4种：类装饰器、属性装饰器，方法装饰器、参数装饰器。让我们快速认识一下他们 + +```ts +// 类装饰器 +@ClassDecorator +class Person { + + // 属性装饰器 + @PropertyDecorator + name: string; + + // 参数装饰器 + eat(@ParameterDecorator('food') food: string) { + console.log(food); + } + + // 方法装饰器 + @MethodDecorator + sayHello() { + console.log('hello'); + } +} +``` + + + + +### 类装饰器 + +```TypeScript +declare type ClassDecorator = (target: TFunction) => TFunction | void; +`` + +- 参数 + 1. `target`: 类的构造器 + +- 返回：空或者一个新的构造器函数 + 如果类装饰器返回了一个值，它将会被用来替代原来的类构造器的声明。 + +``` TypeScript +function ClassDecoratorService(params?: any): ClassDecorator { + return (target: Function) => { + console.log('ClassDecoratorService call on :', target); + console.log('ClassDecoratorService params: ', params); + }; +} + +@ClassDecoratorService({ log: 'test' }) +class ClassDecoratorExample {} +``` + +输出结果： +```shell +ClassDecoratorService call on : [Function: ClassDecoratorExample] +ClassDecoratorService params: { log: 'test' } +``` ## 参考 From 87a7da0b74f5a0e2be105e7fa0b865d179cd6a38 Mon Sep 17 00:00:00 2001 From: javaswing Date: Tue, 29 Aug 2023 10:22:08 +0800 Subject: [PATCH 4/4] chore: add baidu tongji --- modern.config.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/modern.config.ts b/modern.config.ts index 8cab38e..32219c8 100644 --- a/modern.config.ts +++ b/modern.config.ts @@ -58,7 +58,19 @@ export default defineConfig({ // https://modernjs.dev/doc-tools/zh/api/config/config-basic.html base: isProd() ? '/Front-End-Interview/' : '/', root: path.join(__dirname, 'docs'), - head: [], + head: [ + ` + + `, + ], // 默认语言 // Default language lang: 'zh',