不练剑的温不胜

前言对于接触过Vue3的开发差不多都知道ES6添加了Proxy新特性,数据响应的技术就是运用了Proxy的代理拦截,但是和Proxy共生的还有Reflect(反射). 开始proxy Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。 下面是 Proxy 支持的拦截操作一览，一共 13 种-具体实例。 get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。 set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。 has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。 deleteProperty(target, prop ...

前言作为一个前端或多或少都知道发布订阅模式，那么他到底是什么呢？其实我们在日常开发早已用到了发布订阅模式例如addEventListener，Vue evnetBus 发布订阅模式又叫观察者模式，它定义了一种一对多的关系，让多个订阅者对象同时监听某一个发布者，或者叫主题对象，这个主题对象的状态发生变化时就会通知所有订阅自己的订阅者对象，使得它们能够自动更新自己。 举例：比如我们刷b站，关注了一个up主，他直播或者发新动向都会提醒呢，然后你就知道，我们关注就是订阅或者叫注册，当他有新动向的时候会提醒你，这就是发布，这里面有三个角色：发布者（up主）、订阅者（你自己）、调度者（平台）。 实现我们定义一个对象，对象有四个方法： on:订阅/监听 emit:发布/注册 once:只执行一次 off:解除绑定 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869//定义类接口inter ...

前言使用cookie是可以设置有效期的，但localStorage本身是没有该机制的，只能手动删除，否则会一直存放在浏览器当中，我们可以把localStorage跟cookie一样设置一个有效期进行二次封装实现该方案。 在存储的时候设置一个过期时间，并且存储的数据进行格式化方便统一校验，在读取的时候获取当前时间进行判断是否过期，如果过期进行删除即可。 实现123456// /enum ts 定义枚举//字典 Dictionaries expire过期时间key permanent永久不过期export enum Dictionaries { expire = '__expire__', permanent = 'permanent'} 123456789101112131415161718192021//type ts 定义类型//expire 过期时间key //permanent 永久不过期import { Dictionaries } from "../enum ...

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项目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 安装配置环境变量用来区分本地和生 ...

命名空间 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 ...

学习TS必须要对TS的配置有一定了解 生成tsconfig.json 文件 – tsc --init命令生成 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263"compilerOptions": { "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度 "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置 "diagnostics": true, // 打印诊断信息 "target": "ES5", // 目标语言的版本 "module": "CommonJS ...

引入我们先看下面简单的代码 1234function foo() { foo();}foo(); 这样就会报错 某些情况下，调用堆栈中函数调用的数量超出了调用堆栈的实际大小，浏览器会抛出一个错误终止运行。上面的就是无限循环调用导致。

理解执行上下文 执行上下文是当前JavaScript代码被解析和执行时所在环境的抽象概念 执行上下文的类型执行上下文总共有三种类型 全局执行上下文：只有一个，浏览器中的全局对象就是 window 对象，this 指向这个全局对象。 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文。 Eval 函数执行上下文： 指的是运行在 eval 函数中的代码，很少用而且不建议使用 执行栈执行栈，也叫调用栈，具有LIFO（后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。首次运行JS代码时，会创建一个全局执行上下文并Push到当前的执行栈中。每当发生函数调用，引擎都会为该函数创建一个新的函数执行上下文并Push到当前执行栈的栈顶。根据执行栈LIFO规则，当栈顶函数运行完成后，其对应的函数执行上下文将会从执行栈中Pop出，上下文控制权将移到当前执行栈的下一个执行上下文。 执行上下文的创建执行上下文的创建分两个阶段:创建阶段、执行阶段 创建阶段 确定 this 的值，也被称为 This Binding。 全局执行上下文中，this 的 ...

装饰器 Decorator它是一项实验性特性，在未来的版本中可能会发生改变它们不仅增加了代码的可读性，清晰地表达了意图，而且提供一种方便的手段，增加或修改类的功能 启用实验性的装饰器特性，必须在命令行或tsconfig.json里启用编译器选项 1234567{//..."experimentalDecorators": true, "emitDecoratorMetadata": true, //...} 装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。学习点 类装饰器：ClassDecorator 方法装饰器：MethodDecorator 属性装饰器：PropertyDecorator 参数装饰器：ParameterDecorator 装饰器工厂 类装饰器定义一个类装饰器函数 他会把Http的构造函数传入你的Base函数当做第一个参数,注意是构造函数不是原型 优势：当原先的类有很多业务代码，无法全部理清，但是又需要添加新的方法或属性。因为迭代器返回的是构造函数，可以在回调方法 ...