weixin_42353499的博客

转载 解决Nuxt3创建项目报错的问题

解决Nuxt3创建项目Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json问题

原创 前端项目git提交规范配置

为了使团队多人协作更加的规范，所以需要每次在 git 提交的时候，做一次硬性规范提交，规范 git 的提交信息。使用commitize、prettire、husky、lint-staged配合进行一些列配置达到效果

原创 Echart 制作未来7天天气预报图

从彩云天气获取数据，试用echarts绘制天气预报图表

原创 在浏览器中拍照、录制视频demo

【代码】在浏览器中拍照、录制视频demo。

原创 nginx的学习笔记

html 是正则匹配。可以再加个 * 表示不区分大小写 location ~* /ccc.location = /aaa 是精确匹配 /aaa 的路由。location ^~ /ddd 是前缀匹配，但是优先级更高。location /bbb 是前缀匹配 /bbb 的路由。

原创 记录一下vue3 最长子序列算法的注释

简单记录看了vue3源码中最长子序列算法的理解。

原创 Vite构建工具下Tinymce踩坑指南

该选项允许你控制TinyMCE是否够聪明，存储URL的原始值，默认情况URL会被自动转化，因为内置的浏览器逻辑以这样的方式工作，没有方法获 取真正的URL，除非你别处存储。如果该选项设为true，所有通过MCFileManager返回的URL都会与知道的document_base_url相关。该选项允许 MCFileManager 返回的URL的协议和主机部分被删除，该选项仅在 relative_urls 选项设为 false 时有用，该选项默认为 true。这些文件都是不需要编译的， 直接放在。

原创 ts实现代码雨

使用canvas实现代码雨效果

原创 Vue后管模板

记录github上的基于主流UI库实现的后管模板

原创 Access-Control-Expose-Headers

Access-Control-Expose-Headers

原创 js 创建一个二维数组

二维数组的实现，及使用过程中需要注意的点

原创 fix vue项目在Sources中无法定位到对应代码问题

修改vue.config.js配置module.exports = { chainWebpack: config => { // 配置devtool方便在浏览器调试代码 config.devtool(process.env.NODE_ENV == 'development' ? 'eval-source-map' : false) }}

原创 利用 terser-webpack-plugin 去除生产包中的console

使用terser-webpack-plugin去除代码中的console.log

转载 正则表达式?相关的解析

正则表达式?:、?=、?!、?<=、?<! 相关的解析

原创 前端面试知识点整理(持续更新)

DOMinput与change的区别input在输入框输入的时候会实时触发change只会在输入框失去焦点且值改变了的情况下才会触发CSS什么是伪类，什么是伪元素，两个的区别伪类： 伪类用于当已有的元素处于某个状态时，为其添加样式。这个状态时根据用户行为而动态变化的。伪元素： 伪元素用于创建一些不在文档树中的元素，并为其添加样式。两者的区别是：有没有创建一个文档树外的元素。伪类的操作对象是文档树中已有的元素，而伪元素则是创建了一个文档树外的元素。使用伪元素的优点能减

原创 css 同时设置min-width、width、max-width时是如何展示的

同时设置时，取的是两者中最小的值。同时设置时，取的是两者中最大的值。同时设置时，取的是两者中的最大值。

原创 vue3 写一个Tab组件

简易版Tab组件的实现代码效果Index.vueTab.vueTabItem.vue效果Index.vue<script lang='ts' setup> import {ref} from 'vue' import Tab from './Tab.vue' import TabItem from './TabItem.vue' const activeTab = ref('a') function handleClick(name) { // conso

原创 webpackChunkName 占位符[request]

官网说明import传送门webpackChunkName: 新 chunk 的名称。 从 webpack 2.6.0 开始，占位符 [index] 和 [request] 分别支持递增的数字或实际的解析文件名。使用例子const routes = routeOptions.map(route => { if (!route.component) { route = { ...route, component: () => import(/* we

原创 面试题：宏任务与微任务的执行顺序

function asyncCallByMutationObserver(callback) { const div = document.createElement('div') let count = 0 const observer = new MutationObserver(() => { callback && typeof callback === 'function' && callback.call(null) }) .

原创 ts+axios 返回的数据在vscode中会显示红色波浪线

新建shims-axios.d.ts文件import * as axios from 'axios'declare module 'axios' { interface AxiosInstance { (config: AxiosRequestConfig): Promise<any> }}

转载 vue3+ts vscode无法识别/@/ 路径

在tsconfig.json中添加下面的配置即可{ "compilerOptions": { "paths": { "/@/*": ["src/*"] } }}

原创 vue3.0 + Ts 使用.env

.env.development文件VITE_APP_BASE_URL = http://localhost:3000要使用.env里面的配置信息则需要在写一个.d.ts配置interface ImportMetaEnv { VITE_APP_BASE_URL: string}通过import.meta.env去调用console.log(import.meta.env.VITE_APP_BASE_URL)...

原创 vue3.0无法使用vue-devtools的解决方案

在main.js添加以下代码const app = createApp(App)if(process.env.NODE_ENV == 'development'){ if ('__VUE_DEVTOOLS_GLOBAL_HOOK__' in window){ window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app }}

原创 web开发兼容注意

原来safari浏览器不支持yyyy-MM-dd的时间格式，只能把返回前端的格式改成yyyy/MM/dd。

原创 继承内置类型

1. 继承内置类型有些内置类型的方法会返回新实例。默认情况下，返回实例的类型与原始实例的类型是一致的。如果想覆盖这个默认行为，则可以覆盖 Symbol.species 访问器，这个访问器决定在创建返回的 实例时使用的类class SuperArray extends Array { static get [Symbol.species]() { return Array; } } let a1 = new SuperArray(1, 2, 3, 4, 5); let a2

原创 js 抽象基类

1. 抽象基类有时候可能需要定义这样一个类，它可供其他类继承，但本身不会被实例化。虽然 ECMAScript 没 有专门支持这种类的语法 ，但通过 new.target 也很容易实现。new.target 保存通过 new 关键字调用的类或函数。通过在实例化时检测 new.target 是不是抽象基类，可以阻止对抽象基类的实例化// 抽象基类 class Vehicle { constructor() { console.log(new.target); if (new.

原创 js 类的继承实现

1. 原型链继承function SuperType(){ this.property = true}SuperType.prototype.getSuperValue = function(){ return this.property}function SubType(){ this.subProperty = false}// 继承SuperTypeSubType.prototype = new SuperType()let instance = new Sub

原创 js前端正则强密码校验

/** * 强弱密码校验 * 1、长度8-20位 * 2、必须包含数字 * 3、必须包含字母 * 4、最小连续位数为4：Abcd、abcd、1234不允许 * 5、可以包含常用特殊字符 * 6、键盘横向方向规则 * 7、键盘斜线方向规则 */export const validPwd = (pwd: string) => { let regex = /(?=.*[0-9])(?=.*[a-zA-Z]).{8,20}/ // 字母连续规则 let strReg = /(.

原创 面试题 (() =＞ 1).length === 0； // 输出什么

(() => 1).length === 0; // 输出什么函数是有length属性的，函数的length属性就是函数参数的个数

原创 面试题：将一个数组转成树

let list = [ {id:1,name:'部门 A',parentId:0}, {id:2,name:'部门 B',parentId:0}, {id:3,name:'部门 C',parentId:1}, {id:4,name:'部门 D',parentId:1}, {id:5,name:'部门 E',parentId:2}, {id:6,name:'部门 F',parentId:3}, {id:7,name:'部门 G',parentId:2}, {id:8,nam.

原创 面试题：var a = {n: 1}； var b = a；a.x = a = {n: 2}； console.log(a.x) console.log(b.x)的输出是什么

var a = {n: 1};var b = a;a.x = a = {n: 2};console.log(a.x)console.log(b.x)输出结果是undefined{n:2}解析首先，a 和 b 同时引用了{n:2}对象，接着执行到 a.x = a = {n：2}语句，尽管赋值 是从右到左的没错，但是.的优先级比=要高，所以这里首先执行 a.x，相当于为 a（或者 b）所指向的{n:1}对象新增了一个属性 x，即此时对象将变为 {n:1;x:undefined}。之.

原创 js ==判断的隐式转换

下面代码中 a 在什么情况下会打印 1？var a = ?;if(a == 1 && a == 2 && a == 3){ console.log(1);}答案var a = { i: 1, toString() { return a.i++; }}if( a == 1 && a == 2 && a == 3 ) { console.log(1);}== 判断会隐式调用toStrin

原创 js 几种数组扁平化的实现方法

vararr=[ [1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10]var newArr = Array.from(new Set(arr.flat(Infinity))).sort((a,b) => a-b)// newArr => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

原创 createDocumentFragment

原创 rn 使用webview访问本地静态网页（只适配android端）

1. 在页面放置webview组件import React, {Component} from 'react'import {WebView} from 'react-native-webview'export default class MyWeb extends Component { render() { return ( <WebView originWhitelist={['*']} source={{uri: 'file:

原创 CSS: :last-child 与 :first-child的坑

first-child伪类时一定要保证前面没有兄弟节点，last-child要保证后面没有兄弟节点

转载 js深浅拷贝

深度拷贝对象var newObj = JSON.parse(JSON.stringify(obj))

转载 script 标签中的 async defer

关于脚本阻塞问题，一般的处理方法是将脚本的放在</body>之前进行引入。这样脚本就会在HTML 解析完后加载了。现在有两种解决方法1. 在script标签添加async属性浏览器遇到async脚本时不会阻塞页面渲染，而是直接下载然后运行。这样脚本的运行次序就无法控制，只是脚本不会阻止剩余页面的显示。当页面的脚本之间彼此独立，且不依赖于本页面的其它任何脚本时，as...

原创 base64 编码与解码

MDN 给出了base64 编码与解码的函数atob('dGVzdA==') // test 解码btoa('test') // dGVzdA== 解码链接https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding...

转载 js 原型链继承的学习

首先知道一下几点1. new 操作符到底做了什么创建一个新对象，并且把this变量引用该对象，同时还继承该对象的原型 属性和方法被加入到this引用的对象中 新创建的对象由this所引用，并隐式返回thisvar a = new A()//new 做了一下动作var o = new Object()o.__proto__ = A.prototypeA.call(o)2...