wjnba的博客

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//安装指定版本，指定操作系统 ...

图片懒加载懒加载是一种网页性能优化的方式，它能极大的提升用户体验。图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以进入页面的时候，只请求可视区域的图片资源。 总结出来就是： 减少资源的加载，页面启动只加载首屏的图片，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。 防止并发加载的资源过多而阻塞 js 的加载，影响整个网站的启动，影响用户体验 浪费用户的流量，有些用户并不想全部看完，全部加载会耗费大量流量。 原理 图片懒加载的原理就是暂时不设置图片的 src 属性，而是将图片的 url 隐藏起来，比如先写在 src 里面，等当前图片是否到了可视区域再将图片真实的 url 放进 src 属性里面，从而实现图片的延迟加载。 通过监听 scroll 事件实现懒加载1234567891011121314151617function lazyload() { let viewHeight = document.body.clientHeight //获取可视区高度 ...

双层循环使用双层嵌套循环是最原始的方法： 1234567891011121314151617181920var array = ['a','b','a'];function unique(array) { // res用来存储结果 var res = []; for (var i = 0, arrayLen = array.length; i < arrayLen; i++) { for (var j = 0, resLen = res.length; j < resLen; j++ ) { if (array[i] === res[j]) { break; } } // 如果array[i]是唯一的，那么执行完循环，j等于resLen if (j === resLen) { ...