11 2021 档案
摘要：运行时枚举 枚举在编译之后是一个真实存储的 对象, 所以可以在运行时使用 enum Gender { Male, Female } 将如上代码用 tsc 进行编译得到编译之后的源代码： tsc index.ts 编译之后的源代码内容如下，编译之后发现枚举代码雀实是存在的： 而像接口这种只是用来做 约
阅读全文
摘要：枚举成员类型 可以把 枚举成员 当做 类型 来使用 正确示例： enum Gender { Male, Female } interface TestInterface { age: Gender.Male } class Person implements TestInterface { age:
阅读全文
摘要：TS 中支持两种枚举, 一种是 数字枚举, 一种是 字符串枚举 数字枚举 默认情况下就是数字枚举 enum Gender { Male, Female } console.log(Gender.Male); console.log(Gender.Female); 数字枚举注意点 数字枚举的取值默认从
阅读全文
摘要：当我们定义了多个同名的接口时, 多个接口的内容会自动进行合并 interface TestInterface { name: string; } interface TestInterface { age: number; } 如上的代码内部自动会处理为如下形式： interface TestInt
阅读全文
摘要：定义泛型类和使用泛型类 不管三七二十一，直接上代码，代码如下： class CaChe<T> { arr: T[] = []; add(value: T): T { this.arr.push(value); return value; } all(): T[] { return this.arr;
阅读全文
摘要：类实现接口 只要实现的某一个接口, 那么就必须实现接口中所有的属性和方法 错误示例： interface PersonInterface { name: string; say(): void; } class Person implements PersonInterface { name: st
阅读全文
摘要：抽象类概述 抽象类是专门用于定义那些不希望被外界直接创建的类的 抽象类一般用于定义基类 抽象类和接口一样用于约束子类 首先来看看没有抽象类的实现写法，在 TypeScript-类方法修饰符 章节当中我已经编写过了，这里就不在编写了，就直接开始看抽象类即可 错误示例： abstract class P
阅读全文
摘要：存取器概述 通过 getters/setters 来截取对对象成员的访问 class Person { private _age: number = 0; set age(val: number) { console.log('进入了set age方法'); if (val < 0) { throw
阅读全文
摘要：可选属性 和接口中的可选属性一样, 可传可不传的属性 注意点 在 TS 中如果定义了实例属性, 那么就必须在构造函数中使用, 否则就会报错 错误示例： class Person { name: string; age: number; } 正确示例： class Person { name: str
阅读全文
摘要：类的方法修饰符和属性的修饰符一样，只不过方法的修饰符是没有 readonly 的 博主假设有这么一个需求: 有一个基类, 所有的子类都需要继承于这个基类, 但是我们不希望别人能够通过基类来创建对象： 错误示例： class Person { name: string; age: number; ge
阅读全文
摘要：public(公开的) 如果使用 public 来修饰属性, 那么表示这个属性是公开的 可以在类的内部使用, 也可以在子类中使用, 也可以在外部使用 默认情况下就是 public 的 class Person { public name: string; age: number; gender: s
阅读全文
摘要：TS 中的类和 ES6 中的类 几乎 一样 阅读本章节之前建议先阅读一下以下的文章： 66-JavaScript-ES6类和对象 67-JavaScript-ES6继承 TS 中的类 和 ES6 的区别, 需要先定义实例属性, 才能够使用实例属性 class Person { // 实例属性 nam
阅读全文
摘要：泛型约束概述 默认情况下我们可以指定泛型为任意类型 但是有些情况下我们需要指定的类型满足某些条件后才能指定 那么这个时候我们就可以使用 泛型约束 博主需求: 要求指定的泛型类型必须有 length 属性才可以指定该类型为泛型的类型： 指定有 length 属性的类型作为泛型类型 interface
阅读全文
摘要：在泛型约束中使用类型参数概述 一个泛型被另一个泛型约束, 就叫做 泛型约束中使用类型参数 博主需求: 定义一个函数用于根据指定的 key 获取对象的 value： let getProps = (obj: object, key: string): any => { return obj[key];
阅读全文
摘要：泛型概述 在编写代码的时候我们既要考虑代码的 健壮性, 又要考虑代码的 灵活性 和 可重用性 通过 TS 的静态检测能让我们编写的代码变得更加 健壮, 但是在变得健壮的同时却丢失了 灵活性 和 可重用性 所以为了解决这个问题 TS 推出了 泛型 的概念 通过 泛型 不仅可以让我们的代码变得更加 健壮
阅读全文
摘要：可选参数 假设这个时候我有一个需求: 要求定义一个函数可以实现 2 个数或者 3 个数的加法 这个时候就可以利用可选参数来进行实现 实现方式为，在需要进行可选的参数名称后面添加一个 ? 即可实现 function add(x: number, y: number, z?: number): numb
阅读全文
摘要：TS 函数完整格式 在 TS 中函数的完整格式应该是由函数的定义和实现两个部分组成的 定义一个函数 根据定义实现函数 let AddFun: (a: number, b: number) => number; AddFun = function (x: number, y: number): num
阅读全文
摘要：TS 中的函数大部分和 JS 相同 JS 当中的写法 命名函数 function say(name) { console.log(name); } 匿名函数 let say = function (name) { console.log(name); } 箭头函数 let say = (name)
阅读全文
摘要：TS 中的接口和 JS 中的类一样是可以继承的 interface LengthInterface { length: number } interface WidthInterface { width: number } interface HeightInterface { height: nu
阅读全文
摘要：函数接口 我们除了可以通过接口来限定对象以外, 我们还可以使用接口来限定函数 interface SumInterface { (a: number, b: number): number } let sum: SumInterface = function (x: number, y: numbe
阅读全文
摘要：索引签名概述 索引签名用于描述那些 “通过索引得到” 的类型，比如 arr[10] 或 obj["key"] 只要 key 和 value 满足索引签名的限定即可, 无论有多少个都无所谓 首先来看看 obj["key"] 的形式 interface FullName { [propName: str
阅读全文
摘要：本章节要介绍的内容为 TS 接口当中的可选属性和索引签名，如果要想先了解可选属性和索引签名之前首先要来介绍一下接口的注意点，接口的注意点就是如果你使用了接口类型来限定了函数的入参，限定了某个变量，这个时候你调用函数或者使用变量的时候就必须和接口里面的限定一模一样，例如之前我们接口当中有 firstN
阅读全文
摘要：和 ES6 一样, 移步 "ECMAScript" 05-JavaScript变量 26-JavaScript-变量作用域 34-JavaScript-数组解构赋值 40-JavaScript-函数扩展运算符 41-JavaScript-函数形参默认值 74-JavaScript-对象解构赋值
阅读全文
摘要：接口类型概述 和 number, string, boolean, enum 这些数据类型一样 接口也是一种类型, 也是用来约束使用者的 先来看看如果没有使用接口之前的弊端，如我现在有一个需求要求定义一个函数输出一个人完整的姓名, 这个人的姓必须是字符串, 这个人的名也必须是一个字符串： let o
阅读全文
摘要：类型断言概述 TS 中的类型断言和其它编程语言的 类型转换 很像，可以将一种类型强制转换成另外一种类型 类型断言就是告诉编译器, 你不要帮我们检查了, 相信我，我知道自己在干什么 例如：我们拿到了一个 any 类型的变量，但是我们明确的知道这个变量中保存的是 字符串 类型，此时我们就可以通过类型断言
阅读全文
摘要：Never 类型 表示的是那些永不存在的值的类型 一般用于抛出异常或根本不可能有返回值的函数 抛出异常 function demo(): never { throw new Error("报错了"); } demo(); 不可能有返回值的函数 function demo(): never { whi
阅读全文
摘要：any 类型 any 表示任意类型, 当我们不清楚某个值的具体类型的时候我们就可以使用 any 一般用于定义一些通用性比较强的变量, 或者用于保存从其它框架中获取的不确定类型的值 在 TS 中任何数据类型的值都可以赋值给 any 类型 let value: any; value = 123; val
阅读全文
摘要：枚举类型是 TS 为 JS 扩展的一种类型，在原生的 JS 中是没有枚举类型的，枚举用于表示固定的几个取值 例如：一年只有四季、人的性别只能是男或者女 定义枚举 enum Gender { Male, Female } 如上代码的含义为，定义了一个名称叫做 Gender 的枚举类型, 这个枚举类型的
阅读全文
摘要：数组类型 方式一 需求：要求定义一个数组, 这个数组中将来只能存储 数值 类型的数据： let val: Array<number>; val = [1, 3, 5]; console.log(val); 如上代码的含义为表示定义了一个名称叫做 val 的数组, 这个数组中将来只能够存储 数值 类型
阅读全文
摘要：TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的 枚举类型 方便我们使用 数值类型 let val: number; val = 123; console.log(val); 如上代码的含义定义了一个名称叫做 val 的变量, 这个变量中将来只能存储数值类型
阅读全文
摘要：初始化一个自动打包和自动加载最新 JS 代码的 webpack 项目，然后在通过 tsc --init 初始化 TypeScript 配置文件： 通过 npm install typescript ts-loader 安装对应 loader： npm install typescript ts-lo
阅读全文
摘要：区分开发环境和线上环境 开发阶段 在开发阶段我们为了提升运行效率以及调试效率, 一般会通过 dev-server 来打包, 在开发阶段我们为了提升打包效率, 不会对打包的内容进行压缩 上线阶段 在上线阶段我们需要拿到真实的打包文件, 所以不会通过 dev-server 来打包，在上线阶段我们为了提升
阅读全文
摘要：什么是 eslint ESLint 是一个插件化的 JavaScript 代码检测工具，它可以用于检查常见的 JavaScript 代码错误，也可以进行 "代码规范" 检查，在企业开发中项目负责人会定制一套 ESLint 规则，然后应用到所编写的项目上，从而实现辅助编码规范的执行，有效控制项目代码的
阅读全文
摘要：webpack 打包图片路径问题，webpack 打包之后给我们的都是 相对路径，但是正是因为是相对路径，所以会导致在 html 中使用的图片能够正常运行，在 css 中的图片不能正常运行 例如, 打包之后的路径是, images/BNTang.jpg, 那么在 html 中, 会去 html 文件
阅读全文
摘要：将打包之后的图片合成精灵图 过去为了减少网页请求的次数，我们需要 "UI设计师" 给我们提供精灵图, 并且在使用时还需要手动的去设置每张图片的位置, 但是有了 webpack 之后我们只需要让 "UI设计师" 给我们提供切割好的图片, 我们可以自己合成精灵图, 并且还不用手动去设置图片的位置 使用合
阅读全文
摘要：什么是 rem rem 就是 root em, 和 em 都是是前端开发中的一个动态单位 rem 和 em 的区别在于, rem 是一个相对于根元素字体大小的单位 例如: 根元素(html) font-size: 12px;, 那么 1rem 就等于 12px <!DOCTYPE html> <ht
阅读全文
摘要：什么是 em em 是前端开发中的一个动态单位, 是一个相对于 元素字体大小 的单位 例如：font-size: 12px;, 那么 1em 就等于 12px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
阅读全文
摘要：什么是百分比 百分比是前端开发中的一个动态单位, 永远都是以当前元素的父元素作为参考进行计算, 例如父元素宽高都是 200px, 设置子元素宽高是 50%, 那么子元素宽高就是 100px： <!DOCTYPE html> <html lang="en"> <head> <meta charset=
阅读全文
摘要：什么是像素(Pixel) 在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素, 例如 div 尺寸是 100 x 100, 那么水平方向就占用 100 个小方格, 垂直方向就占用 100 个小方格： <!DOCTYPE html> <html lang="en"> <
阅读全文
摘要：图片压缩和合并 在企业开发中为了提升网页的访问速度, 我们除了会压缩 HTML/CSS/JS 以外, 还可以对网页上的图片进行压缩和合并, 压缩可以减少网页体积, 合并可以减少请求次数，压缩打包之后的图片，每次在打包图片之前, 我们可以通过配置 webpack 对打包的图片进行压缩, 以较少打包之后
阅读全文
摘要：什么是 html-withimg-loader 我们通过 file-loader 或者 url-loader 已经可以将 JS 或者 CSS 中用到的图片打包到指定目录中了，但是 file-loader 或者 url-loader 并不能将 HTML 中用到的图片打包到指定目录中，所以此时我们就需要
阅读全文
摘要：该章节，主要的内容为介绍一下博主在使用 babel 的技巧就是在平时使用的过程当中遇到问题之后是如何解决的，首先博主故意写一些错误写法代码，代码如下： index.js class Person { a = 1; } let p1 = new Person(); console.log(p1.a);
阅读全文
摘要：直接在文件中导入 polyfill 模块的弊端, 直接导入 polyfill 的方式只适用于一般项目开发, 但是如果是在编写一些第三方模块的时候这种方式会出现一些问题，因为这种方式是通过全局变量的方式来注入代码, 会污染全局环境. 所以我们再来看一下 polyfill 的第二种配置方式 第二种配置方
阅读全文
摘要：利用 babel 实现低版本语法 对于有对应关系的语法而言, 经过之前的文章的配置就已经能够实现自动转换了 但是对于没有对应关系的语法而言, 经过之前的文章的配置还不能实现自动转换 什么叫有对应关系, 什么叫做没有对应关系： 有对应关系就是指 ES5 中有对应的概念, 例如: 箭头函数对应普通函数,
阅读全文
摘要：webpack-ES6 语法处理 在企业开发中为了兼容一些低级版本的浏览器, 我们需要将 ES678 高级语法转换为 ES5 低级语法，否则在低级版本浏览器中我们的程序无法正确执行，默认情况下 webpack 是不会将我们的代码转换成 ES5 低级语法的, 如果需要转换我们需要使用 babel 来转
阅读全文
摘要：JS 模块使用 HMR 注意点 import "./index.less" 对于 css 模块而言, 在 css-loader 中已经帮我们实现了热更新, 只要 css 代码被修改就会立即更新 import copy from "./test.js" 但是对于 js 模块而言, 系统默认并没有给我们
阅读全文
摘要：什么是 HMR 通过 webpack-dev-server 自动打包并没有真正的放到指定的目录中, 因为读写磁盘是非常耗时和消耗性能的, 所以为了提升性能 webpack-dev-server 将转换好的内容直接放到了内存中, 通过 webpack-dev-server 可以实现实时监听打包内容的变
阅读全文
摘要：前端跨域问题 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能 所谓同源是指: 协议，域名，端口都相同, 就是同源, 否则就是跨域 同源： http://127.0.0.1:8080 http://127.0.0.1:8080 跨域： http://12
阅读全文
摘要：什么是 webpack-dev-server webpack-dev-server 和 watch 一样可以监听文件变化 webpack-dev-server 可以将我们打包好的程序运行在一个服务器环境下 webpack-dev-server 可以解决企业开发中 "开发阶段" 的跨域问题 使用 we
阅读全文
摘要：什么是 watch webpack 可以监听打包文件变化，当它们修改后会重新编译打包, 那么如何监听打包文件变化呢? 使用 watch watch 与 watchOptions 相关配置 官方文档地址：https://www.webpackjs.com/configuration/watch/ wa
阅读全文
摘要：首先，先不直接上正题的内容，我们先来看一个情况，修改 webpack 的配置文件为生产模式 production： 然后进行打包，查看打包之后的 JS 代码发现是进行压缩处理过的，这个原理在之前的文章当中已经讲解过了，参考：https://www.cnblogs.com/BNTang/article
阅读全文
摘要：什么是 mini-css-extract-plugin mini-css-extract-plugin 是一个专门用于将打包的 CSS 内容提取到单独文件的插件，前面我们通过 style-loader 打包的 CSS 都是直接插入到 head 中的 使用 mini-css-extract-plugi
阅读全文
摘要：本章节的内容主要是介绍一下，我们一般在企业进行前端开发的时候整个工程的项目目录结构是怎样的如何进行分包和配置 webpack 的，首先像我们的代码一般都会放在一个 src 的文件夹当中，然后在 src 文件夹当中再次进行分包，例如创建 js 文件夹存放 .js 文件，css 文件夹存放 .css/.
阅读全文
摘要：什么是 copy-webpack-plugin 在打包项目的时候除了 JS/CSS/图片/字体图标等，需要打包以外, 可能还有一些相关的文档也需要打包，文档内容是固定不变的, 我们只需要将对应的文件拷贝到打包目录中即可，那么这个时候我们就可以使用 copy-plugin 来实现文件的拷贝 使用 co
阅读全文
摘要：什么是 clean-webpack-plugin webpack-clean-plugin 会在打包之前将我们指定的文件夹清空，应用场景每次打包前将 dist 目录清空, 然后再存放新打包的内容, 避免新老混淆问题，先来看看没有使用 clear-plugin 之前的效果，首先我使用 BNTang.j
阅读全文
摘要：Python2.x 下载地址：https://www.python.org/downloads/windows/ python2.x，和 python3.x 我都会安装后续可能会使用到 下载完毕之后，直接点击安装包进行安装： 当然你可以直接安装在 C 盘，我没有安装在 C 盘： 后面的步骤就是 ne
阅读全文
摘要：首先来看看没有使用 Ts 之前的写法其中会存在那些问题，注意点, 由于 JS 是弱类型的，所以只要定义了一个变量, 就可以往这个变量中存储任意类型的数据，也正是因为如此, 所以会给我们带来一个问题： let val; val = 123; val = "123"; val = true; val =
阅读全文
摘要：什么是 TypeScript(TS) TypeScript 简称 TS Ts 和 Js 之间的关系其实就是 Less/Sass 和 CSS 之间的关系 就像 Less/Sass 是对 CSS 进行扩展一样, TS 也是对 JS 进行扩展 就像 Less/Sass 最终会转换成 CSS 一样, 我们编
阅读全文
摘要：首先来编写一段代码就是利用 Jquery 来请求服务器的数据 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <script sr
阅读全文
摘要：优化一 在企业开发中通过 JSONP 来获取跨域的数据, 一般情况下服务器返回的都不会是一个变量, 而是一个函数的调用 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</tit
阅读全文
摘要：什么是 JSONP JSONP 让网页从别的地址（跨域的地址）那获取资料，即跨域读取数据 JSONP 实现跨域访问的原理 在同一界面中可以定义多个 script 标签 同一个界面中多个 script 标签中的数据可以相互访问 <!DOCTYPE html> <html lang="en"> <hea
阅读全文
摘要：什么是同源策略 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，所谓同源是指: 协议，域名，端口都相同, 就是同源, 否则就是跨域 例如：http://www.it6666.top:80/index.html 协议: http/https/... 一级
阅读全文
摘要：SessionStorage 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage 如下的内容我只是将官方文档当中的内容自行的进行实战了一遍，测试只需要自行去按照 SessionStorage 的生命周
阅读全文
摘要：什么是 SessionStorage 和 LocalStorage 和 Cookie 一样，SessionStorage 和 LocalStorage 也是用于存储网页中的数据的 Cookie、SessionStorage、LocalStorage 的区别 生命周期(同一浏览器下) Cookie生命
阅读全文
摘要：什么是插件(plugin) plugin: 用于扩展 webpack 的功能 当然 loader 也是变相的扩展了 webpack, 但是它只专注于转化文件这一个领域 而 plugin 的功能更加的丰富，而不仅局限于资源的加载 什么是 HtmlWebpackPlugin HtmlWebpackPlu
阅读全文
摘要：创建节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <script> let oSpan = document.createElement("sp
阅读全文
摘要：参考链接：https://www.cnblogs.com/TangXiaoHuiHui/articles/12298939.html 阅读密钥：303158131
阅读全文
摘要：之前的内容都是在 Linux 当中进行测试的，如下的将会是在 windows 进行监控，启动一个 springboot 项目，写一个 controller 进行测试即可，关于在 windows 启动 arthas 我就不在介绍了，自行查看之前的文章进行启动和链贴到对应的程序上： trace org.
阅读全文
摘要：作用 方法执行数据的时空隧道，记录下指定方法每次调用的入参和返回信息，并能对这些不同的时间下调用进行观测，watch 虽然很方便和灵活，但需要提前想清楚观察表达式的拼写，这对排查问题而言要求太高，因为很多时候我们并不清楚问题出自于何方，只能靠蛛丝马迹进行猜测。 tt -t demo.MathGame
阅读全文
摘要：作用 输出当前方法被调用的调用路径，很多时候我们都知道一个方法被执行，但这个方法被执行的路径非常多，或者你根本就不知道这个方法是从那里被执行了，此时你需要的是 stack 命令。 stack demo.MathGame run stack demo.MathGame primeFactors 'pa
阅读全文
摘要：作用 方法内部调用路径，并输出方法路径上的每个节点上耗时。 介绍 trace 命令能主动搜索 class-pattern ／ method-pattern 对应的方法调用路径，渲染和统计整个调用链路上的所有性能开销和追踪调用链路 观察表达式的构成主要由 ognl 表达式组成，所以你可以这样写 "{p
阅读全文
