四种常见的JS内存泄漏
1、意外的全局变量未定义的变量会在全局对象创建一个新变量,如下。
123function foo(arg) { bar = "this is a hidden global variable";}
函数foo内部忘记使用var,实际上JS会把bar挂载到全局对象上,意外创建一个全局变量。
123function foo(arg) { window.bar = "this is an explicit global variable";}
另一个意外的全局变量可能由this创建。
1234567function foo() { this.variable = "potential accidental global";}// Foo 调用自己,this 指向了全局对象(window)// 而不是 undefinedfoo();
解决方法:
在 JavaScript 文件头部加上'use strict',使用严格模式避免意外的全局变 ...
Rollup构建TS项目 & webpack构建TS项目 & esbuild + swc
Rollup构建TS项目Rollup 打包很快,体积很小,学习一下
配置环境
npm init -y 生成 package.json
tsc --init 生成 tsconfig.json
创建 rollup.config.js
创建入口问题/src/index.ts文件和public/index.html文件
安装依赖
全局安装rollup npm install rollup-g
安装TypeScript npm install typescript -D
安装TypeScript 转换器 npm install rollup-plugin-typescript2 -D
安装代码压缩插件npm install rollup-plugin-terser -D
安装rollupWeb服务 npm install rollup-plugin-serve -D
安装热更新 npm install rollup-plugin-livereload -D
引入外部依赖 npm install rollup-plugin-node-resolve -D
安装配置环境变量用来区分本地和生 ...
TypeScrip-学习(七)命名空间、三斜线指令、声明文件、Mixins混入
命名空间 namespace在工作中无法避免全局变量造成的污染,TypeScript提供了namespace 避免这个问题出现
内部模块,主要用于组织代码,避免命名冲突。
命名空间内的类默认私有
通过 export 暴露
通过 namespace 关键字定义
TypeScript与ECMAScript 2015一样,任何包含顶级import或者export的文件都被当成一个模块。相反地,如果一个文件不带有顶级的import或者export声明,那么它的内容被视为全局可见的(因此对模块也是可见的)
实例
12345678910111213141516//命名空间中通过export将想要暴露的部分导出,否则无法读取其值namespace a { export const Time: number = 1000 export const fn = <T>(arg: T): T => { return arg } fn(Time)}namespace b { export ...
TypeScrip-学习(六)tsconfig.json配置
学习TS必须要对TS的配置有一定了解
生成tsconfig.json 文件 – tsc --init命令生成
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263"compilerOptions": { "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件,第二次编译会在第一次的基础上进行增量编译,可以提高编译的速度 "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置 "diagnostics": true, // 打印诊断信息 "target": "ES5", // 目标语言的版本 "module": "CommonJS ...
JavaScript 内存空间详解
引入我们先看下面简单的代码
1234function foo() { foo();}foo();
这样就会报错
某些情况下,调用堆栈中函数调用的数量超出了调用堆栈的实际大小,浏览器会抛出一个错误终止运行。上面的就是无限循环调用导致。
JavaScript 中执行上下文和执行栈
理解执行上下文 执行上下文是当前JavaScript代码被解析和执行时所在环境的抽象概念
执行上下文的类型执行上下文总共有三种类型
全局执行上下文:只有一个,浏览器中的全局对象就是 window 对象,this 指向这个全局对象。
函数执行上下文:存在无数个,只有在函数被调用的时候才会被创建,每次调用函数都会创建一个新的执行上下文。
Eval 函数执行上下文: 指的是运行在 eval 函数中的代码,很少用而且不建议使用
执行栈执行栈,也叫调用栈,具有LIFO(后进先出)结构,用于存储在代码执行期间创建的所有执行上下文。首次运行JS代码时,会创建一个全局执行上下文并Push到当前的执行栈中。每当发生函数调用,引擎都会为该函数创建一个新的函数执行上下文并Push到当前执行栈的栈顶。根据执行栈LIFO规则,当栈顶函数运行完成后,其对应的函数执行上下文将会从执行栈中Pop出,上下文控制权将移到当前执行栈的下一个执行上下文。
执行上下文的创建执行上下文的创建分两个阶段:创建阶段、执行阶段
创建阶段
确定 this 的值,也被称为 This Binding。
全局执行上下文中,this 的 ...
TypeScrip-学习(八)装饰器Decorator
装饰器 Decorator它是一项实验性特性,在未来的版本中可能会发生改变它们不仅增加了代码的可读性,清晰地表达了意图,而且提供一种方便的手段,增加或修改类的功能
启用实验性的装饰器特性,必须在命令行或tsconfig.json里启用编译器选项
1234567{//..."experimentalDecorators": true, "emitDecoratorMetadata": true, //...}
装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。学习点
类装饰器:ClassDecorator
方法装饰器:MethodDecorator
属性装饰器:PropertyDecorator
参数装饰器:ParameterDecorator
装饰器工厂
类装饰器定义一个类装饰器函数 他会把Http的构造函数传入你的Base函数当做第一个参数,注意是构造函数不是原型
优势:当原先的类有很多业务代码,无法全部理清,但是又需要添加新的方法或属性。因为迭代器返回的是构造函数,可以在回调方法 ...
TypeScrip-学习(五)泛型
泛型泛型在TypeScript 是很重要的东西,个人理解类似于类型入参
函数泛型
1234567891011121314151617181920212223//普通类型函数function num (a:number,b:number) : Array<number> { return [a ,b];}num(1,2)function str (a:string,b:string) : Array<string> { return [a ,b];}str('独孤','求败')// 函数优化function Add<T>(a: T, b: T): Array<T> { return [a,b]} Add<number>(1,2)Add<string>('独孤','求败')//也可以使用不同的泛型参数名,只要在数量上和使用方式上能对应上就可以function S ...
TypeScrip-学习(四)枚举 | Type | never | symbol
枚举在JavaScript中是没有枚举的概念的TS帮定义了枚举这个类型,定义通过enum关键字
数字枚举
123456789enum Types{ Red, Green, BLue}//简单的定义默认为数字枚举,那么什么是数字枚举呢,即:枚举值是数字,如果你不设置默认值,那么每一个组员默认都是从0开始的自增数console.log(Types.Red);//0console.log(Types.Green);//1console.log(Types.BLue);//2
增长枚举:细心的我们能发现数字枚举是会自增的,那么如果我们给上一个设置了一个默认值,下一个是自动增加
12345678enum Types{ Red = 1, Green, BLue}console.log(Types.Red);//1console.log(Types.Green);//2console.log(Types.BLue);//3
字符串枚举 字符串枚举的概念很简单。 在一个字符串枚举里,每个成员都必须用字符串字面量 ...
TypeScrip-学习(三) Class类
Class类定义类123456789101112class Person { //在TypeScript是不允许直接在constructor 定义变量的 需要在constructor上面先声明 name: string age: number constructor(name: string, age: number = 11) { //你如果了定义了变量不用 也会报错 通常是给个默认值 或者 进行赋值 this.name=name this.age=age; } run() { }}let item=new Person('张三')
类的修饰符
访问修饰符总共有三个 public、private、protected
public :公共的,没有访问限制
protected : 受保护的,只能自身和子类访问,实例不能访问
pravite :私人的,只能自身访问
只读修饰符 readonly
123456789class ...