不练剑的温不胜

前言为了加深我们对webpack的了解方便以后灵活运用webpack的技术,故以我们从零开始构建一个简单的webpack-vue项目. 一、项目结构123456789101112131415161718├─dist├─node_modules│ └─...├─src│ ├─components│ ├─assets│ ├─views│ ├─App.vue│ └─main.ts├─public│ └─index.html├─.babelrc├─.gitignore├─package-lock.json├─package.json├─tsconfig.json├─webpack.config.js└─README.md 二、命令配置12345678910# 配置项目文件npm init -ytsc --init#如果tsc没有则可以安装pnpm install typescript -D# 安装依赖 pnpm add webpack webpack-cli webpack-dev-server html-webpack-plugin typescript @vue/compil ...

前言 nodejs 并不是JavaScript应用，也不是编程语言，因为编程语言使用的JavaScript,nodejs 是 JavaScript的运行时环境。 Nodejs是构建在V8引擎之上的，V8引擎是由C/C++编写的，因此我们的JavaSCript代码需要由C/C++转化后再执行。 NodeJs使用异步 I/O 和事件驱动的设计理念，可以高效地处理大量并发请求，提供了非阻塞式 I/O 接口和事件循环机制，使得开发人员可以编写高性能、可扩展的应用程序,异步I/O最终都是由libuv 事件循环库去实现的。 NodeJs使用npm 作为包管理工具类似于python的pip，或者是java的Maven，目前npm拥有上百万个模块。https://www.npmjs.com/ nodejs适合干一些IO密集型应用，不适合CPU密集型应用，nodejsIO依靠libuv有很强的处理能力，而CPU因为nodejs单线程原因，容易造成CPU占用率高，如果非要做CPU密集型应用，可以使用C++插件编写 或者nodejs提供的cluster。(CPU密集型指的是图像的处理 或者音 ...

在浏览器输入URL并获取响应的过程，其实就是浏览器和该url对应的服务器的网络通信过程。 URL解析：判断是否是合法url、HSTS会强制判断是否是安全的协议、是否存在访问限制、检查本地是否有缓存 DNS解析：浏览器将解析得到的域名发送给DNS服务器，以获取对应的IP地址。DNS服务器会返回一个或多个IP地址，浏览器会选择其中一个作为目标服务器的IP地址。 建立TCP连接：浏览器使用HTTP协议与目标服务器建立TCP连接。这个过程涉及到三次握手，即客户端向服务器发送连接请求，服务器回复确认，最后客户端再次回复确认。 发送HTTP请求：建立TCP连接后，浏览器会向服务器发送HTTP请求。请求中包含了请求方法（如GET、POST）、请求头（如User-Agent、Cookie）和请求体（对于POST请求）等信息。 服务器处理请求：服务器接收到浏览器发送的HTTP请求后，会根据请求的内容进行处理。这可能涉及到读取文件、查询数据库或执行其他操作。 服务器发送HTTP响应：服务器处理完请求后，会生成一个HTTP响应。响应中包含了状态码（如200表示成功、404表示未找到）和响应内 ...

前言在我们ES5的开发过程中，我们很多时间都在使用array和object,数组的去重对象的遍历等等都是为手熟尔，在ES6又添加了Set和Map和弱类型weakSet和weakMap 详情1. Set集合是由一组无序且唯一(即不能重复)的项组成的，可以想象成集合是一个既没有重复元素，也没有顺序概念的数组操作方法： add(value)：添加某个值，返回 Set 结构本身。 delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 has(value)：返回一个布尔值，表示该值是否为 Set 的成员。 clear()：清除所有成员，无返回值。 size: 返回set数据结构的数据长度 123456789let setH=Set<number> =new Set([1,2,3,4]);setH.add(5);//Set(5) {1, 2, 3, 4, 5}setH.has(5) //truesetH.delete(5);//truesetH.size //4setH.clear(); //清除//去重操作let arr = [...ne ...

类型兼容所谓的类型兼容性，就是用于确定一个类型是否能赋值给其他的类型。TypeScript中的类型兼容性是基于结构类型的（也就是形状），如果A要兼容B 那么A至少具有B相同的属性。 协变123456789101112131415161718192021222324interface A { name: string, age: number, isMan: boolean}interface B { name: string, age: number}let a: A = { name: 'hale', age: 22, isMan: true}let b: B = { name: 'yzj', age: 20}// a=b; //异常 类型 "B" 中缺少属性 "isMan"，但类型 "A" 中需要该属性。b=a; A B 两个类型完全不同但是 ...

前言对于接触过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 安装配置环境变量用来区分本地和生 ...