qq_43456781的博客

原创 JavaScript（七）（Navigator/Screen/Cookie/XMLHttpRequest/CORS）

JavaScript（七）（Navigator/Screen/Cookie/XMLHttpRequest/CORS）文章目录JavaScript（七）（Navigator/Screen/Cookie/XMLHttpRequest/CORS）56. Navigator 对象，Screen 对象。56.1 Navigator 对象的属性56.1.1 Navigator.userAgent56.1.2 Navigator.plugins56.1.3 Navigator.platform56.1.4 Naviga

原创 JavaScript（三）（面向对象编程(new this Object)、异步操作(setTimeout Promise)）

JavaScript（三）（面向对象编程、异步操作）文章目录JavaScript（三）（面向对象编程、异步操作）五、面向对象编程25. 实例对象与 new 命令25.1 对象是什么25.2 构造函数25.3 new 命令25.3.1 基本用法25.3.2 new 命令的原理25.3.3 new.target25.4 Object.create() 创建实例对象26. this 关键字26.1 涵义26.2 实质26.3 使用场合**（1）全局环境****（2）构造函数****（3）对象的方法**26.4

原创 保姆级教程：Markdown神器——Typora下载安装及基本语法

目录一、前言二、下载和安装三、创建.md文件五、Typora基本功能1.大纲+标题2.字体3.引用4.分割线5.图片6.超链接7.列表8.表格9.代码片六、Typora小技巧1.主题选择2.偏好设置七、感谢一、前言Typora是一款轻量级的本地文本编辑器，功能强大，十分简洁，并且免费！二、下载和安装首先点击官网链接，界面如下：将滚轮往下翻，出现下述页面，点击右上角的Download:随后选择自己的操作系统，就比如我的Windows：安装双击安装包，随后点Next安装在合适的文件夹

原创 Vite（六）配置 Vite

Vite（六）配置 Vite文章目录Vite（六）配置 Vite1. 配置 Vite#配置文件#配置文件解析#配置智能提示#情景配置#共享配置#root#base#mode#define#plugins#publicDir#resolve.alias#resolve.dedupe#resolve.conditions#resolve.mainFields#resolve.extensions#css.modules#css.postcss#css.preprocessorOptions#json.name

原创 Vite（五）插件API（钩子hook）、HMR API、JavaScript API

Vite（五）插件API（钩子hook）、HMR API、JavaScript API文章目录Vite（五）插件API（钩子hook）、HMR API、JavaScript API1. 插件 API约定简单示例引入一个虚拟文件转换自定义文件类型通用钩子Vite 独有钩子`config``configResolved``configureServer``transformIndexHtml``handleHotUpdate`插件顺序Rollup 插件兼容性路径规范化2. HMR API必需的条件守卫`hot

原创 Vite（四）后端集成、比较Snowpack、从 v1 迁移、Awesome Vite.js

Vite（四）后端集成、比较Snowpack、从 v1 迁移、Awesome Vite.js文章目录Vite（四）后端集成、比较Snowpack、从 v1 迁移、Awesome Vite.js1. 后端集成2. 比较SnowpackWMR@web/dev-server3. 从 v1 迁移配置项变化别名用法变化Vue Support自定义块转换React 支持HMR API 变化Manifest 格式变化写给插件作者4. Awesome Vite.js#Resources#Official Resource

原创 Vite（三）部署静态站点（wordpress与hugo与Vercel、CI/CD、Travis CI、GitLab CI）、环境变量与模式、服务端渲染（SSR）

Vite（三）部署静态站点（wordpress与hugo与Vercel、CI/CD、Travis CI、GitLab CI）、环境变量与模式、服务端渲染（SSR）文章目录Vite（三）部署静态站点（wordpress与hugo与Vercel、CI/CD、Travis CI、GitLab CI）、环境变量与模式、服务端渲染（SSR）1. 部署静态站点构建应用本地测试应用GitHub PagesGitHub Pages 配合 Travis CIGitLab Pages 配合 GitLab CINetlifyG

原创 Vite（二）依赖预构建、静态资源处理、构建生产版本

Vite（二）依赖预构建、静态资源处理、构建生产版本文章目录Vite（二）依赖预构建、静态资源处理、构建生产版本1. 依赖预构建原因自动依赖搜寻Monorepo 和链接依赖自定义行为缓存文件系统缓存浏览器缓存2. 静态资源处理将资源引入为 URL显式 URL 引入将资源引入为字符串导入脚本作为 Worker`public` 目录3. 构建生产版本浏览器兼容性公共基础路径自定义构建多页面应用模式库模式网址：https://vitejs.cn/guide/why.html1. 依赖预构建当你首次

原创 Vite（一）为什么选 Vite、开始、功能（NPM依赖解析和预构建、HMR、CSS、构建优化）

Vite（一）为什么选 Vite、开始、功能（NPM依赖解析和预构建、HMR、CSS、构建优化）文章目录Vite（一）为什么选 Vite、开始、功能（NPM依赖解析和预构建、HMR、CSS、构建优化）1. 为什么选 Vite现实问题缓慢的服务器启动缓慢的更新为什么生产环境仍需打包为何不用 ESBuild 打包？Vite 与 X 的区别是？2. 开始总览浏览器支持搭建第一个 Vite 项目社区模板`index.html` 与项目根目录指定替代根目录命令行界面使用未发布的功能社区3. 功能NPM 依赖解析和预

原创 TypeScript（八）代码检查（AlloyTeam 的 ESLint、Prettier）、编译选项（allowJs、allowSyntheticDefaultImports）

TypeScript（八）代码检查（AlloyTeam 的 ESLint、Prettier）、编译选项（allowJs、allowSyntheticDefaultImports）文章目录TypeScript（八）代码检查（AlloyTeam 的 ESLint、Prettier）、编译选项（allowJs、allowSyntheticDefaultImports）1. 代码检查什么是代码检查为什么需要代码检查在 TypeScript 中使用 ESLint安装 ESLint创建配置文件检查一个 ts 文件检查

原创 TypeScript（七）泛型、声明合并、扩展阅读

TypeScript（七）泛型、声明合并、扩展阅读文章目录TypeScript（七）泛型、声明合并、扩展阅读1. 泛型简单的例子多个类型参数泛型约束泛型接口泛型类泛型参数的默认类型参考2. 声明合并函数的合并接口的合并类的合并参考3. 扩展阅读网址：https://ts.xcatliu.com/1. 泛型泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。简单的例子首先，我们来实现一个函数 createArray，它可以创建一

原创 TypeScript（六）类、类与接口

TypeScript（六）类、类与接口文章目录TypeScript（六）类、类与接口1. 类类的概念ES6 中类的用法属性和方法类的继承存取器静态方法ES7 中类的用法实例属性静态属性TypeScript 中类的用法public private 和 protected参数属性readonly抽象类类的类型参考2. 类与接口类实现接口接口继承接口接口继承类参考网址：https://ts.xcatliu.com/1. 类传统方法中，JavaScript 通过构造函数实现类的概念，通过原型链实现继

原创 TypeScript（五）枚举、元组、内置对象、类型别名、字符串字面量类型

TypeScript（五）枚举、元组、内置对象、类型别名、字符串字面量类型文章目录TypeScript（五）枚举、元组、内置对象、类型别名、字符串字面量类型1. 内置对象ECMAScript 的内置对象DOM 和 BOM 的内置对象TypeScript 核心库的定义文件用 TypeScript 写 Node.js参考2. 类型别名简单的例子参考3. 字符串字面量类型简单的例子参考4. 元组简单的例子越界的元素参考5. 枚举简单的例子手动赋值常数项和计算所得项常数枚举外部枚举参考网址：https://

原创 MHT 思维图

原创 TypeScript（四）声明文件、全局变量（三斜线指令）、npm包、UMD库、发布声明文件

TypeScript（四）声明文件、全局变量（三斜线指令）、npm包、UMD库、发布声明文件文章目录TypeScript（四）声明文件、全局变量（三斜线指令）、npm包、UMD库、发布声明文件1. 声明文件新语法索引什么是声明语句什么是声明文件第三方声明文件书写声明文件全局变量npm 包UMD 库直接扩展全局变量在 npm 包或 UMD 库中扩展全局变量模块插件声明文件中的依赖（三斜线指令-适用于全局变量引用）**三斜线指令****书写一个全局变量的声明文件****依赖一个全局变量的声明文件**自动生成声

原创 TypeScript（三）类型断言、数组的类型、函数的类型

TypeScript（三）类型断言、数组的类型、函数的类型文章目录TypeScript（三）类型断言、数组的类型、函数的类型1. 数组的类型「类型 + 方括号」表示法数组泛型用接口表示数组类数组any 在数组中的应用参考2. 函数的类型函数声明函数表达式用接口定义函数的形状可选参数参数默认值剩余参数重载参考3. 类型断言语法类型断言的用途将一个联合类型断言为其中一个类型将一个父类断言为更加具体的子类将任何一个类型断言为 `any`将 `any` 断言为一个具体的类型类型断言的限制双重断言类型断言 vs

原创 TypeScript（二）数据类型、任意值、类型推论、联合类型、接口（Interfaces、可选属性?:、任意属性、只读属性）

TypeScript（二）数据类型、任意值、类型推论、联合类型、接口（Interfaces、可选属性?:、任意属性、只读属性）文章目录TypeScript（二）数据类型、任意值、类型推论、联合类型、接口（Interfaces、可选属性?:、任意属性、只读属性）1. 原始数据类型布尔值数值字符串空值Null 和 Undefined参考2. 任意值什么是任意值类型任意值的属性和方法未声明类型的变量3. 类型推论什么是类型推论参考4. 联合类型简单的例子访问联合类型的属性或方法参考5. 对象的类型——接口（I

原创 TypeScript（一）TypeScript 的特性（静态类型、弱类型）、编译时报错、安装

TypeScript（一）TypeScript 的特性（静态类型、弱类型）、编译时报错、安装文章目录TypeScript（一）TypeScript 的特性（静态类型、弱类型）、编译时报错、安装1. 什么是 TypeScriptTypeScript 的特性类型系统TypeScript 是静态类型TypeScript 是弱类型适用于任何规模与标准同步发展总结2. 安装 TypeScript编辑器3. Hello TypeScript网址：https://ts.xcatliu.com/1. 什么是

原创 VueX （五）热重载、TypeScript 支持、从 3.x 迁移到 4.0

VueX （五）热重载、TypeScript 支持、从 3.x 迁移到 4.0文章目录VueX （五）热重载、TypeScript 支持、从 3.x 迁移到 4.01. 热重载动态模块热重载2. TypeScript 支持Vue 组件中 `$store` 属性的类型声明`useStore` 组合式函数类型声明简化 `useStore` 用法3. 从 3.x 迁移到 4.0非兼容性变更安装过程TypeScript 支持打包产物已经与 Vue 3 配套“createLogger”函数从核心模块导出新特性全新的

原创 VueX （四）表单处理、测试

VueX （四）表单处理、测试文章目录VueX （四）表单处理、测试1. 表单处理双向绑定的计算属性2. 测试测试 Mutation测试 Action测试 Getter执行测试在 Node 中执行测试在浏览器中测试使用 Karma + karma-webpack 在浏览器中执行测试1. 表单处理当在严格模式中使用 Vuex 时，在属于 Vuex 的 state 上使用 v-model 会比较棘手：<input v-model="obj.message">假设这里的 obj 是在计算属

原创 VueX （三）项目结构、组合式API、插件、严格模式

VueX （三）项目结构、组合式API、插件、严格模式文章目录VueX （三）项目结构、组合式API、插件、严格模式1. 项目结构2. 组合式API访问 State 和 Getter访问 Mutation 和 Action示例3. 插件在插件内提交 Mutation生成 State 快照内置 Logger 插件4. 严格模式开发环境与发布环境1. 项目结构Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：应用层级的状态应该集中到单个 store 对象中。提交 mutation 是

原创 VueX （二）Action（ES5参数解构）、Module

VueX （二）Action（ES5参数解构）、Module文章目录VueX （二）Action（ES5参数解构）、Module1. Action（ES5参数解构）分发 Action在组件中分发 Action组合 Action2. Module模块的局部状态命名空间在带命名空间的模块内访问全局内容（Global Assets）在带命名空间的模块注册全局 action带命名空间的绑定函数给插件开发者的注意事项模块动态注册保留 state模块重用1. Action（ES5参数解构）Action 类似于 m

原创 VueX （一）安装、Store、State、Getter、Mutation

VueX （一）安装、Store、State、Getter、Mutation文章目录VueX （一）安装、Store、State、Getter、Mutation1. Vuex 是什么？什么是“状态管理模式”？什么情况下我应该使用 Vuex？2. 安装直接下载 / CDN 引用npmYarn自己构建3. 开始最简单的 Store4. State单一状态树在 Vue 组件中获得 Vuex 状态`mapState` 辅助函数对象展开运算符组件仍然保有局部状态5. Getter通过属性访问通过方法访问`mapGe

原创 Vue Router 官方文档（二）导航守卫（`router.beforeEach`、完整的导航解析流程 ）、路由懒加载(Promise)、路由元信息( `meta` )、过渡动效(` ＜router

Vue Router 官方文档（二）导航守卫（router.beforeEach、完整的导航解析流程 ）、路由懒加载(Promise)、路由元信息( meta )、过渡动效(<router-view> )、数据获取、滚动行为(scrollBehavior)、导航故障文章目录Vue Router 官方文档（二）导航守卫（`router.beforeEach`、完整的导航解析流程 ）、路由懒加载(Promise)、路由元信息( `meta` )、过渡动效(` ` )、数据获取、滚动行为(`scro

原创 Vue Router 官方文档（一）==起步==、动态路由匹配、嵌套路由、编程式的导航（history）、命名路由、命名视图（`router-view`）、重定向和别名、路由组件传参（prop解耦）、

Vue Router 官方文档（一）起步、动态路由匹配、嵌套路由、编程式的导航（history）、命名路由、命名视图（router-view）、重定向和别名、路由组件传参（prop解耦）、HTML5 History 模式（ mode: ‘history’）文章目录Vue Router 官方文档（一）==起步==、动态路由匹配、嵌套路由、编程式的导航（history）、命名路由、命名视图（`router-view`）、重定向和别名、路由组件传参（prop解耦）、HTML5 History 模式（ mode:

原创 Vue CLI 官方文档（三）模式和环境变量（--mode，.env）、构建目标（--target）、部署

Vue CLI 官方文档（三）模式和环境变量（–mode，.env）、构建目标（–target）、部署文章目录Vue CLI 官方文档（三）模式和环境变量（--mode，.env）、构建目标（--target）、部署1. 模式和环境变量模式环境变量示例：Staging 模式在客户端侧代码中使用环境变量只在本地有效的变量2. 构建目标应用库Vue vs. JS/TS 入口文件Web Components 组件注册多个 Web Components 组件的包异步 Web Components 组件在构建时使用

原创 Vue CLI 官方文档（二）浏览器Polyfill（打补丁）、HTML 和静态资源、CSS 相关、webpack 相关

Vue CLI 官方文档（二）浏览器Polyfill（打补丁）、HTML 和静态资源、CSS 相关、webpack 相关文章目录Vue CLI 官方文档（二）浏览器Polyfill（打补丁）、HTML 和静态资源、CSS 相关、webpack 相关1. 浏览器兼容性browserslistPolyfilluseBuiltIns: 'usage'构建库或是 Web Component 时的 Polyfills现代模式2. HTML 和静态资源HTMLIndex 文件插值PreloadPrefetch不生成

原创 Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset

Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset文章目录Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset1. 介绍该系统的组件CLICLI 服务CLI 插件2. 安装升级项目依赖3. 基础-快速原型开发vue servevue build4. 基础-创建一个项目vue create使用图形化界面拉取 2.x 模板 (旧版本)5. 基础-插件和 Preset插件在现有的项目中安装插件项目本地的插件Pr

原创 7. vue3.0 中为什么要使用 Proxy，它相比以前的实现方式有什么改进

7. vue3.0 中为什么要使用 Proxy，它相比以前的实现方式有什么改进7.1 原回答Vue2.x通过给每个对象添加getter setter属性去改变对象,实现对数据的观测,Vue3.x通过Proxy代理目标对象,且一开始只代理最外层对象,嵌套对象lazy by default ,性能会更好支持数组索引修改,对象属性的增加,删除7.2 查阅补充（1）ProxyProxy 是一个对象，它包装了另一个对象，并允许你拦截对该对象的任何交互。Proxy 可以理解成，在目标对象之前架设

原创 6. css盒模型+画一条0.5px的线

6. css盒模型+画一条0.5px的线（1）说一下css盒模型简介：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。box-sizing(有3个值哦)：border-box,padding-box,content-box.标准盒子模型：IE盒子模型：区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+

原创 Vue3官网-无障碍（二十一）基础、语义（表单、标签、aria-label、aria-labelledby、aria-describedby、按钮）、标准、资源

Vue3官网-无障碍（二十一）基础、语义（表单、标签、aria-label、aria-labelledby、aria-describedby、按钮）、标准、资源文章目录Vue3官网-无障碍（二十一）基础、语义（表单、标签、aria-label、aria-labelledby、aria-describedby、按钮）、标准、资源1. 基础跳过链接组织内容标题地标2. 语义表单标签占位符用法说明隐藏内容aria-hidden="true"按钮功能图像3. 标准网络内容无障碍指南 (WCAG)WCAG 2.1

原创 Vue3官网-规模化（二十）Vue Router路由、Vuex状态管理模式、服务端渲染（SSR指南）、安全

Vue3官网-规模化（二十）Vue Router路由、Vuex状态管理模式、服务端渲染（SSR指南）、安全文章目录Vue3官网-规模化（二十）Vue Router路由、Vuex状态管理模式、服务端渲染（SSR指南）、安全1. 路由（vue-router）官方 Router从零开始简单的路由整合第三方路由2. 状态管理（Vuex）类 Flux 状态管理的官方实现给 React 开发者的参考信息从零打造简单状态管理3. 服务端渲染SSR 完全指南Nuxt.jsQuasar Framework SSR + PW

原创 Vue3官网-工具（十九）TypeScript 支持（Vue CLI）、生产环境部署

Vue3官网-工具（十九）TypeScript 支持（Vue CLI）文章目录Vue3官网-工具（十九）TypeScript 支持（Vue CLI）1. TypeScript 支持NPM 包中的官方声明推荐配置Webpack 配置开发工具项目创建编辑器支持定义 Vue 组件与 Options API 一起使用为 `globalProperties` 扩充类型注解返回类型注解 Props注解 emit与组合式 API 一起使用类型声明 `refs`为模板引用定义类型类型声明 `reactive`类型声明 `

原创 Vue3官网-工具（十八）单文件组件、（SFC）、测试（Jest）、移动端

Vue3官网-工具（十八）单文件组件、（SFC）、测试（Jest）、移动端文章目录Vue3官网-工具（十八）单文件组件、（SFC）、测试（Jest）、移动端1. 单文件组件介绍工作原理为什么要使用 SFC关注点分离怎么样？2. 测试介绍单元测试介绍选择框架框架组件测试介绍选择框架推荐端到端 (E2E) 测试介绍选择框架推荐3. 移动端介绍混合应用开发CapacitorNativeScript总结：1. 单文件组件介绍Vue 单文件组件（又名 *.vue 文件，缩写为 SFC）是一种特殊的文件格

原创 MHT代码阅读（4）

MHT代码阅读（4）4. generateGlobalHypothesis4.1 论文内容形成多个轨迹假设来表示场景中的多个目标。假设被定义为一组一致（兼容）的轨道，因为在给定假设中没有两条轨道共享观察结果。理论上，一个假设中可以有任意数量的轨道。假设形成的一种相对简单的广度优先方法从定义单轨假设（一个且只有一个轨有效）开始搜索过程，并通过向现有假设添加新轨来扩展假设。假设扩展时的假设不能与现有假设中的任何轨道共享观察。这可以直接完成，因为每个轨道都有一个不兼容列表，因此可以为整个假设推断

原创 Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrack、onTrigger、onInvalidate、副作用的刷新时机、`watch` 、pre）

Vue3官网-高级指南（十七）响应式计算computed和侦听watchEffect（onTrack、onTrigger、onInvalidate、副作用的刷新时机、watch 、pre）、渲染机制和优化、Vue 2 中的更改检测警告文章目录Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrack、onTrigger、onInvalidate、副作用的刷新时机、`watch` 、pre）、渲染机制和优化、Vue 2 中的更改检测警告1. 响应式计算和侦听

原创 Vue3官网-高级指南（十六）vue响应式原理\步骤\本质（副作用effect、响应式状态reactive、响应式原始值ref(解包)、构造响应值toRefs）、proxy(代理、this)

Vue3官网-高级指南（二）vue响应式原理\步骤\本质（副作用effect、响应式状态reactive、响应式原始值ref(解包)、构造响应值toRefs）、proxy(代理、this)文章目录Vue3官网-高级指南（二）vue响应式原理\步骤\本质（副作用effect、响应式状态reactive、响应式原始值ref(解包)、构造响应值toRefs）、proxy(代理、this)1. 深入响应性原理什么是响应性Vue 如何知道哪些代码在执行Vue 如何跟踪变化被代理的对象Proxy vs 原始标识如何让

原创 Vue3官网-高级指南（十五）Vue 与 Web Components

Vue3官网-高级指南（一）Vue 与 Web Components文章目录Vue3官网-高级指南（一）Vue 与 Web Components1. Vue 与 Web Components在 Vue 中使用自定义元素跳过组件的解析传递 DOM Property使用 Vue 构建自定义元素defineCustomElement将 SFC 作为自定义元素Vue 自定义元素库的提示对比 Web Components 与 Vue 组件总结：补充Vue (读音 /vjuː/，类似于 view) 是

原创 Vue3官网-可复用&组合式API（十四）实例 property（\$slots，\$attrs）、渲染函数render(虚拟节点VNode，h() 参数，使用JavaScript代替模板功能)，插件

Vue3官网-可复用&组合式API（四）实例 property（$slots，$attrs）、渲染函数render(虚拟节点VNode，h() 参数，使用JavaScript代替模板功能)，插件（编写，创建插件）文章目录Vue3官网-可复用&组合式API（四）实例 property（\$slots，\$attrs）、渲染函数render(虚拟节点VNode，`h()` 参数，使用JavaScript代替模板功能)，插件（编写，创建插件）1. 实例 property$data$props$e

原创 Vue3官网-可复用&组合式API（十三）Mixin（不如组合式API）、自定义指令（app.directive、el，binding，动态指令参数，函数简写）、Teleport(传送)

Vue3官网-可复用&组合式API（三）Mixin（不如组合式API）、自定义指令（app.directive、el，binding，动态指令参数，函数简写）、Teleport(传送)文章目录Vue3官网-可复用&组合式API（三）Mixin（不如组合式API）、自定义指令（app.directive、el，binding，动态指令参数，函数简写）、Teleport(传送)1. Mixin基础选项合并全局 mixin自定义选项合并策略不足2. 自定义指令2.1 官网应用API补充direc