wjnba的博客

Front-matterFront-matter 是 markdown 文件最上方以 —- 分隔的区域，用于指定个别档案的变数。 Page Front-matter 用于页面配置Post Front-matter 用于文章页配置 如果标注可选的参数，可根据自己需要添加，不用全部都写在markdown里 Page Front-matter123456789101112131415---title:date:updated:type:comments:description:keywords:top_img:mathjax:katex:aside:aplayer:highlight_shrink:--- 写法 解释 title 【必需】页面标题 date 【必需】页面创建日期 type 【必需】标籤、分类和友情链接三个页面需要配置 updated 【可选】页面更新日期 description 【可选】页面描述 keywords 【可选】页面关键字 comments 【可选】显示页面评论模块(默认 true) top_img 【可选】页面顶部 ...

键盘事件包含onkeypress onkeydown和onkeyup事件，其中onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于 键盘上的单键操作。onkeydown事件是在键盘上的某个键被按下时触发此事件的处理程序，一般用于快捷键的操作。onkeyup事件是在键盘上的某个键被按下后松开时触发此事件的处理程序，一般用于快捷键的操作。 字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 3 51 D 68 M 77 V 86 4 52 E 69 N 78 W 87 5 53 F 70 O 79 X 88 6 54 G 71 P 80 Y 89 7 55 H 72 Q 81 Z 90 8 56 I 73 R 82 0 48 9 57 数字键盘上的键的键码值(keyCode) 按键 键码 按键 键码 0 96 8 104 1 97 9 ...

TypeSprict — 泛型TS — 泛型什么是泛型 1.泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。 2.我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。 在像c#和java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。 ts函数定义1234// 首先看一下ts函数的定义function getData(value: string): string { // 传入值和返回值都限制了string类型 return 'str'} 当需要同时支持多个数类型的时候 这时怎么解决呢？ 用any类型 12345function getData (value: any):any { return value}// 用了any就代表着放弃了类型的检查，一般我 ...

TypeSprict — 函数JS — 函数的两种表现形式 我们熟知js有两种函数表现形式’函数声明’和’函数表达式’ 函数声明 1234// 函数声明（Function Declaration）function sum(x, y) { return x + y;} 函数的表达式1234// 函数表达式（Function Expression）let mySum = function (x, y) { return x + y;}; es6 箭头函数123const esExample = (name)=>{ console.log(name)} TS — 定义一个函数 将上面的三种写法依次推导成’ts‘的写法 TS — 函数声明 1.TS以函数的声明的形式，需要定义函数参数中的类型，以及返回类型。 ‘function 函数名(参数:类型):函数返回的类型{}’2.如果函数没有返回类型就是 void 123456789// 返回number类型的值function add(arg1:number, ...

TypeSprict — 类 JavaScript 通过构造函数实现类的概念，通过原型链实现继承。而在 ES6 中，我们终于迎来了 class。TypeScript 除了实现了所有 ES6 中的类的功能以外，还添加了一些新的用法。 TS — 类的概念 类(Class)：定义了一件事物的抽象特点，包含它的属性和方法 对象（Object）：类的实例，通过 new 生成 面向对象（OOP）的三大特性：封装、继承、多态 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性。 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。 存取器（getter & setter）：用以改变属性的读取和赋值行为 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象 ...

介绍接口：是一种类型，是一种规范，是一种规则，是一个能力，是一种约束。 TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口（interface）来定义对象的类型。接口是对象的状态(属性)和行为(方法)的抽象(描述) 可选属性接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 12345interface Idata { name: string; age: number; email?: string; } 带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 ? 符号。 可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。 12345const data: Idata = { name: 'zhangsan', age: 23, // email: '111@qq.com' // 可以没有} 只读属性一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 read ...

类型声明 类型声明是TS非常重要的一个特点。 通过类型声明可以指定TS中变量（参数、形参）的类型。 指定类型后，当为变量赋值时，TS编译器会自动检查是否复核类型声明，复核则赋值，否则报错。 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值。 语法： 1234567let 变量: 类型;let 变量: 类型 = 值;function fn(参数: 类型, 参数: 类型): 类型{ ...} 基本类型1、字符串: string1let str:string = 'hello word' 2、布尔值: boolean1let isShow:boolean = true 3、数字: number1let age: number = 23; 4、数组: array1let list: number[] = [1, 2, 3]; 5、元组: tuple元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同, 对应位置的类型需要相同。 12345let arr: [string, number];arr = [&q ...

什么是TypeScriptTypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript，主要提供了类型系统和对 ES6 的支持。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。 TypeScript的特点1、编译型语言直接编写的内容无法执行，需要通过编译工具编译成JavaScript。 2、强类型的语言JavaScript是动态类型的编程语言，所谓的动态类型，就是在编译时候时候才知道其数据类型是Number 还是String，它是弱类型语言；而TypeScript是静态类型的编程语言，所谓的静态类型就是编写的时候就知道其数据类型是什么，它是强类型语言。例如： 1let str:string = 'hello word' str这个变量从头到尾只能是string类型，如果将其他类型的值赋值给他就会抛出异常。 3、真正面向对象的语言面向对象：想进行执行某个事件，就去找事件对应的对象，把事情落实到对象身上 在程序中一切皆是对象， ...

介绍wangEditor4 —— 轻量级 web 富文本编辑器，配置方便，使用简单。 官网：www.wangeditor.com 文档：www.wangeditor.com/v4 源码：github.com/wangeditor-team/wangEditor 浏览器兼容性兼容常见的 PC 浏览器：Chrome，Firefox，Safari，Edge，QQ 浏览器，IE11。 不支持移动端。 封装wangEditor组件一、引入wangeditor1npm i wangeditor@4.7.15 --save 二、使用简单使用在components文件夹下新建文件夹WangEditor，再在WangEditor文件夹下新建config.js文件，用来存放默认配置，写入以下代码： 123456789101112131415161718192021222324252627282930313233343536373839404142const defaultConfig = { menus: [ 'head', // 标题 'bo ...

前言很多情况下，为了适应工作、学习我们需要在一个电脑里使用不同版本的node，在切换使用频繁的情况下，就会陷入卸载 ↔ 安装的怪圈，这时候你需要一个趁手的版本管理工具。 安装nvm 首先需要卸载已安装的node.js，卸载完成后，请检查环境变量，如果还有node.js，请去掉，保证系统已经无任何node.js残留。 下载地址： https://github.com/coreybutler/nvm-windows/releases nvm-setup.zip：安装版（推荐），傻瓜式安装 安装时有两个路径选择（尽量不要出现中文）： nvm-noinstall.zip：绿色免安装，但需要环境变量配置 nvm 基本命令使用 命令行工具输入命令即可 版本查看，安装完成后，执行该命令，查看安装版本123nvm v//或nvm version 查看所有可安装 Node 版本号1nvm list available node 安装12345678// 安装最新版本nvm install node//安装指定版本（推荐）nvm install 14.8.0//安装指定版本，指定操作系统 ...