System 发布的文章

2024-08-08

在jQuery中，可以使用input事件来监听文本框的值的变化。当用户在输入框内输入完成后，无论是通过键盘输入还是通过其他方式（如粘贴），都会触发这个事件。

以下是一个示例代码，展示了如何为input元素添加input事件的监听器，并在值变化时执行一个函数：




$(document).ready(function() {
    $('#myInput').on('input', function() {
        console.log('Input value changed to: ' + $(this).val());
        // 在这里写上你想要执行的代码
    });
});

在这个例子中，#myInput是你想要监听其值变化的input元素的ID。当这个元素的值发生变化时，控制台会输出新的值。你可以在函数内部替换为你自己的逻辑来响应值的变化。

- 阅读更多 -

jquery修改input的type

System

2024-08-08

所有,jquery

以下是多种不同的实现方法：

方法一：使用attr()方法




$("input").attr("type", "text");

方法二：使用prop()方法




$("input").prop("type", "text");

方法三：使用原生JavaScript方式




document.querySelector("input").type = "text";

方法四：通过遍历所有input元素并修改其type属性




$("input").each(function() {
  this.type = "text";
});

- 阅读更多 -

HTML简单总结

System

2024-08-08

所有,html

HTML（Hypertext Markup Language）是用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，它可以用来定义网页内容的结构。

HTML文档的基本结构如下：




<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

简要说明：

<!DOCTYPE html>：文档类型声明，用于通知浏览器使用HTML的哪个版本进行解析。
<html>：根元素，所有HTML内容都包含在其中。
<head>：包含了文档的元数据，如<title>、<meta>、样式链接和脚本链接等。
<title>：定义了网页的标题，显示在浏览器的标题栏上。
<body>：包含了用户可见的所有内容，如文本（<p>）、图片（<img>）、列表（<ul>）等。

HTML元素由开始标签、结束标签和内容组成。有些元素没有结束标签，如<br>（换行）、<img>（图片）等，它们被称为空元素。

HTML注释：




<!-- 这是一个注释，不会在页面上显示。 -->

HTML属性：

属性提供了元素的额外信息，例如<a href="https://www.example.com">链接</a>中的href属性。
属性通常包含一个值，该值在属性名后引号引起。

HTML标题（Headings）：




<h1>最大的标题</h1>
<h2>次大的标题</h2>
...
<h6>最小的标题</h6>

HTML段落（Paragraphs）：




<p>这是一个段落。</p>

HTML链接（Links）：




<a href="https://www.example.com">链接文本</a>

HTML图片（Images）：




<img src="image.jpg" alt="描述文本">

HTML列表：

无序列表：




<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

有序列表：




<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

HTML表格：




<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

HTML表单和输入：




<form action="submit_page.php" method="post">
    姓名：<input type="text" name="name"><br>
    密码：<input type="password" name="password"><br>
    <input type="submit" value="提交">
</form>

以上是HTML的基本概念和常用元素的简单示例。

System

2024-08-08

所有,typescript

class-validator是NestJS中用于数据验证的库，可以结合DTO（数据传输对象）和管道（Pipe）一起使用来验证和转换HTTP请求数据。如果在使用DTO、Pipe和class-validator时验证不生效，可能的原因有：

没有正确地在NestJS中使用管道（Pipe）装饰器。
没有为DTO的属性指定正确的验证装饰器。
没有在控制器的路由处理器方法中使用管道来传递验证。
控制器或者模块中没有全局开启验证。

解决方法：

确保在DTO的属性上使用了class-validator的验证装饰器，如@IsString(), @IsInt()等。
确保在控制器的处理方法中使用了@UsePipes(new ValidationPipe())装饰器。
如果是全局验证，确保在NestJS的主模块中配置了AppModule时使用了ValidationPipe，如app.useGlobalPipes(new ValidationPipe())。
检查是否有任何拦截器可能在验证之前修改了数据，导致验证失效。

示例代码：




// DTO
import { IsString, IsInt } from 'class-validator';
 
export class CreateItemDto {
  @IsString()
  readonly name: string;
 
  @IsInt()
  readonly age: number;
}
 
// 控制器
import { Controller, Post, Body, UsePipes, ValidationPipe } from '@nestjs/common';
 
@Controller('items')
export class ItemsController {
  @Post()
  @UsePipes(new ValidationPipe())
  create(@Body() createItemDto: CreateItemDto) {
    // 这里可以确保createItemDto是已经验证过的数据
  }
}

如果以上步骤都正确无误，但验证依然不生效，可能需要检查NestJS的版本兼容性或查看具体的错误日志来进一步诊断问题。

- 阅读更多 -

null、undefined、void、never

System

2024-08-08

所有,typescript

这些是JavaScript中的特殊值，它们有各自的用途和场景。

null - 表示无值或空值，通常用来初始化变量。




let value = null;

undefined - 表示变量已声明但还没有被赋值的值。




let value;
console.log(value); // 输出 undefined

void - 用于返回undefined，通常用于避免页面跳转。




function noOp(): void {
  // 这个函数不会返回任何值，所以我们用 void 类型声明这个函数
}

never - 表示的类型表示永远不会发生值，通常用于函数返回值。




// 这个函数永远不会返回任何值，所以我们用 never 类型声明这个函数
function error(): never {
  throw new Error('An error occurred');
}

注意：void 和 never 在 TypeScript 中主要用于表示无法达成的类型，但在JavaScript中，它们的行为略有不同，主要体现在TypeScript的类型系统中。

System

2024-08-08

所有,typescript

以下是一个简化的例子，展示如何用TypeScript编写一个ESLint插件，并发布到npm：

初始化npm项目并安装依赖：




mkdir my-eslint-plugin
cd my-eslint-plugin
npm init -y
npm install eslint @types/estree --save-dev
npm install typescript ts-node eslint-plugin-test --save-dev

创建tsconfig.json：




{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2017",
    "noImplicitReturns": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "types": ["estree"],
    "outDir": "dist"
  },
  "include": ["src/**/*.ts"]
}

创建src/index.ts并编写ESLint插件：




import { AST, ASTNode, ASTPlugin, ASTPluginFactory } from "eslint-plugin-test";
 
class MyPlugin implements ASTPlugin {
  setup(info: any): void {
    // 插件设置逻辑
  }
 
  apply(node: ASTNode, info: any): void {
    // 检查node并报告问题逻辑
  }
}
 
const factory: ASTPluginFactory = (context: any) => {
  return {
    name: "my-plugin",
    enter(node: ASTNode) {
      const plugin = new MyPlugin();
      plugin.setup(context);
      plugin.apply(node, context);
    }
  };
};
 
export = factory;

创建src/rules/no-unused-variables.ts并编写规则：




import { AST, ASTNode, ASTPlugin, ASTPluginFactory } from "eslint-plugin-test";
 
class NoUnusedVariables implements ASTPlugin {
  setup(info: any): void {
    // 设置逻辑
  }
 
  apply(node: ASTNode, info: any): void {
    // 检查并报告未使用的变量
  }
}
 
const factory: ASTPluginFactory = (context: any) => {
  return {
    name: "no-unused-variables",
    enter(node: ASTNode) {
      const plugin = new NoUnusedVariables();
      plugin.setup(context);
      plugin.apply(node, context);
    }
  };
};
 
export = factory;

编写package.json中的main字段指向入口文件：




{
  "name": "my-eslint-plugin",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc",
    "lint": "tslint --project ."
  },
  "devDependencies": {
    "eslint-plugin-test": "^1.0.0",
    "tslint": "^5.10.0",
    "typescript": "^2.9.2"
  },
  "peerDependencies": {
    "eslint": "^4.0.0",
    "@types/estree": "^0.0.46"
  },
  "keywords": ["eslint-plugin"],
  "author": "Your Name",
  "license": "MIT"
}

编译并测试插件：




npm run build

发布到npm：
确保你已在npm官网注册账号，并且在本地设置了npm的配置。




npm login
npm publish

以上步骤创建了一个简单的ESLint插件，并展示了如何将其编译并发布到npm。这个例子提供了一个框架，开发者可以在此基础上添加自

- 阅读更多 -

Ts中的泛型函数总结keyof

System

2024-08-08

所有,typescript

在TypeScript中，keyof是一个用来获取对象所有键的工具，它可以用来制作泛型函数。

以下是一些使用keyof的场景：

创建一个泛型函数，该函数接收一个对象并返回该对象的所有键。




function getKeys<T>(obj: T) : keyof T {
    return Object.keys(obj) as keyof T;
}
 
let obj = {
    name: 'John',
    age: 30
};
 
let keys = getKeys(obj);  // 'name' | 'age'

创建一个泛型函数，该函数接收一个对象和一个键，然后返回该键的值。




function getValue<T, K extends keyof T>(obj: T, key: K) : T[K] {
    return obj[key];
}
 
let obj = {
    name: 'John',
    age: 30
};
 
let name = getValue(obj, 'name');  // string
let age = getValue(obj, 'age');  // number

创建一个泛型函数，该函数接收一个对象和一个键，然后设置该键的值。




function setValue<T, K extends keyof T>(obj: T, key: K, value: T[K]) : void {
    obj[key] = value;
}
 
let obj = {
    name: 'John',
    age: 30
};
 
setValue(obj, 'name', 'Doe');
setValue(obj, 'age', 25);

创建一个泛型函数，该函数接收一个对象，然后返回该对象的所有值。




function getValues<T>(obj: T) : T[keyof T][] {
    return Object.keys(obj).map(key => obj[key as keyof T]);
}
 
let obj = {
    name: 'John',
    age: 30
};
 
let values = getValues(obj);  // (string | number)[]

以上就是一些使用keyof的场景和示例代码。

- 阅读更多 -

TypeScript基础知识模块和命名空间

System

2024-08-08

所有,typescript




// 定义一个模块
module Geometry {
    export module Primitives {
        export class Rectangle {
            constructor(public width: number, public height: number) { }
            getArea() {
                return this.width * this.height;
            }
        }
    }
}
 
// 使用模块
function createRectangle(): Geometry.Primitives.Rectangle {
    let rect = new Geometry.Primitives.Rectangle(10, 20);
    console.log("The area of the rectangle is: " + rect.getArea());
    return rect;
}
 
createRectangle();

这段代码定义了一个名为Geometry的模块，其中包含一个名为Primitives的子模块，以及一个Rectangle类。然后演示了如何创建和使用这个类的实例。这是一个简单的例子，展示了TypeScript中模块和命名空间的基本使用方法。

- 阅读更多 -

tsconfig编译属性isolatedModules的作用

System

2024-08-08

所有,typescript

isolatedModules 是 tsconfig 中的一个编译选项，它用于指示 TypeScript 编译器将每个文件作为完全独立的模块进行编译。

当 isolatedModules 设置为 true 时，TypeScript 编译器会对每个文件进行以下操作：

不允许一个文件引用同一编译单元中的另一个文件的声明。
不允许使用除了通过 import 方式外的任何方式引用全局变量。
不允许不同文件中有同名的导出变量或类。

这有助于在开发大型应用时保持代码的模块化，并避免不同模块之间的命名冲突。

例如，如果你有一个 tsconfig.json 文件，其中设置了 isolatedModules 为 true：




{
  "compilerOptions": {
    "module": "es2015",
    "target": "es5",
    "isolatedModules": true
  }
}

当你尝试在一个文件中引用另一个文件的变量时，TypeScript 编译器会报错，因为这违反了 isolatedModules 的规则。例如：

文件 a.ts:




export const x = 10;

文件 b.ts:




import { x } from './a';
console.log(x);
console.log(y); // Error: Cannot find name 'y'.

在这个例子中，b.ts 试图引用一个在其作用域之外声明的变量 y，这在使用 isolatedModules 时是不允许的，因此 TypeScript 编译器会报错。

- 阅读更多 -

nestJS前端项目包部署过程

System

2024-08-08

所有,typescript

在NestJS中部署前端项目通常涉及以下步骤：

构建前端项目：确保您的前端项目（如使用Angular、React或Vue）已经构建，生成静态文件。
打包NestJS应用：使用NestCLI工具执行打包命令。
```
npm run build
```
配置NestJS服务器：确保您的NestJS应用配置为生产环境，并且已经准备好必要的配置文件。
部署静态文件和NestJS应用：将构建的前端静态文件和NestJS打包后的文件上传到服务器。
配置Web服务器：设置Nginx或Apache等服务器，使其可以正确地提供静态文件和代理传递API请求到NestJS应用。

以下是一个简化版的Nginx配置示例，用于托管NestJS项目：




server {
    listen 80;
    server_name your-domain.com;
 
    location / {
        root /path/to/nestjs/dist/client; # 前端静态文件目录
        try_files $uri $uri/ /index.html; # 用于支持单页应用的HTML5 History模式
    }
 
    location /api {
        proxy_pass http://localhost:3000; # NestJS应用运行的端口
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

确保替换your-domain.com、/path/to/nestjs/dist/client和端口（如果NestJS应用运行在不同的端口）。

最后，重启Web服务器以应用配置。

注意：具体的部署步骤可能会根据您的服务器操作系统、使用的Web服务器、以及特定的安全和性能需求有所不同。

- 阅读更多 -