weixin_44166439的博客

原创 vscode插件及快捷键

vscode快捷键及插件

原创 原生js获取路径带的参数

原生js获取路径带的参数第一种方法function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"); var r = window.location.search.substr(1).match(reg); if (r!=null) return unescape(r[2]); return null; }第二种方法

原创 css实现水波纹效果

<style> .wave-content { height: 666px; width: 666px; left: 255px; top: 139px; position: relative; } .wave { position: absolute; left: 0px; top: 0px; height: 100%;

原创 css什么是重绘重排，哪些操作会造成重绘重排

一、重绘、重排1.1 什么是重绘重排当我们改变了一个元素的尺寸位置属性时，会重新进行样式计算（computed style）和布局(layout) 绘制(paint)以及后面的所有流程，这种行为称为重排。当改变了某个元素的颜色属性时不会重新触发布局，但还是会触发样式计算和绘制这就是重绘我们可以发现重排和重绘都会占用主线程，还有JS也会运行在主线程，所以就会出现抢占执行时间的问题，如果你写了一个不断导致重排重绘的动画，浏览器则需要在第一帧都运行样式计算布局和绘制的操作。1.2 触发的一些因素a.

原创 css BFC是什么？触发BFC的条件是什么？有哪些应用场景？

概念BFC(Box Formatting context):box是css布局的对象和基本单位，bfc就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。块级格式化上下文布局规则内部的box会在垂直方向一个接一个的放置属于同一个bfc的两个相邻box的margin会重叠；不同bfc就不会是页面上一个隔离的独立容器，里面的元素不会影响到外面的元素；反之亦然；bfc的区域不会和float box重叠计算bfc的高度，浮动元素也参与计算触发条件a. 根元素b. f.

原创 TypeError: Cannot destructure property ‘config‘ of ‘cacheKeyOptions‘ as it is undefined.

“unit”: “jest --config test/unit/jest.conf.js”,执行npm run unit报错Test suite failed to run TypeError: Cannot destructure property 'config' of 'cacheKeyOptions' as it is undefined. at Object.getCacheKey (node_modules/babel-jest/build/index.js:19

原创 vue面试 写出页面渲染值，并解释为什么？

<template> <div>{{a.b}}</div></template><script>export default { data() { return { a: {} } }, created() { this.a.b = 1 }, mounted() { this.a.b = 2 }}</script>vue3之前1vue3 2解析涉及到两个知识点，一个是vue响应式原

原创 javascript 介绍下promise的特性、优缺点，内部是如何实现的，动手实现Promise

Promise基本特性1）Promise有三种状态： pending(进行中)、fulfilled(已成功)、rejected(已失败)2）Promise对象接受一个回调函数作为参数，该回调函数接受两个参数，分别是成功时的回调resolve和失败的时候回调reject,另外resove的参数除了正常值以外，还可能是一个Promise对象的实例；reject的参通常是一个Error对象的实例3）then方法返回一个新的Promise实例，并接收两个参数onResolved(fulfilled状态的回调.

原创 javascript 说一下事件循环机制（node、浏览器）

一、为什么会有Event LoopJavaScript 的任务分为两种同步和异步，它们的处理方式也各自不同，同步任务是直接放在主线程上排队依次执行，异步任务会入任务队列中，若有多个异步任务则需要在任务队列中排队等待，任务队列类似于缓冲区，任务下一步会被移到调用栈然后主线程执行调用栈的任务。调用栈：调用栈是一个栈结构，函数调用会形成一个栈帧，帧中包含了当前执行函数的参数和局部变量等上下文信息，函数执行完后，它的执行上下文会从栈中弹出。Javascript 是单线程的，单线程是指js引擎中解析和执行js代

原创 javascript 类数组和数组的区别，dom的类数组如何转换成数组

定义数组是一个特殊对象，与常规对象的区别：a. 当由新元素添加到列表中时，自动更新length属性b. 设置length属性，可以截断数组c. 从Array.protoype中继承了方法d. 属性为’Array’类数组是一个拥有length属性，并且他属性为非负整数的普通对象，类数组不能直接调用数组方法。区别本质：类数组是简单对象，它的原型关系与数组不同let arrayLike = { length: 10,}console.log(arrayLike instanceof A.

原创 javascript面试-实现链式调用

链式调用的核心就在于调用完的方法将自身实例返回。1）示例一function Class1(){ console.log('初始化')}Class1.prototype.method = function(param){ console.log(param) return this}let c1 = new Class1()c.method('第一次调用').method('第二次调用')2)示例二var obj = { a: function(){ console.log('

原创 javascript面试-实现add(1)(2)(3)

考点：函数柯里化函数柯里化概念：柯里化是把接受多个参数的函数转变为接受一个单一参数的函数，并且返回接受余下的参数且返回结果的新函数的技术1）粗暴版function add (a) { return function (b){ return function (c) { return a+b+c; } }}console.log(add(1)(2)(3))2)柯里化解决方案a.参数长度固定const curry = (fn)=>( judge = (..args)=

原创 javascript面试-实现lodash的\_.get

在js中经常会出现嵌套调用这种情况，如a.b.c.d.e，但是这么写很容易抛出异常，你需要这么写 a&&a.b&&a.b.c&&a.b.c.d&&a.b.c.d.e但是显得有些啰嗦与冗长了。特别是在graphql中，这种嵌套调用更是难以避免。这里就需要一个get函数，使用get(a, ‘b.c.d.e’)简单清晰，并且容错性提高了很多。代码实现function get(source, path, defaultValue=undefi

原创 javascript面试-闭包原理以及应用场景

什么是闭包函数执行后返回结果是一个内部函数，并被外部变量所引用，如果内部函数持有被执行函数作用域的变量，即形成了闭包。可以在内部函数访问到外部函数作用域。使用闭包，一可以读取函数中的变量，二可以将函数中的变量存储在内存中，保护变量不被污染。而正因闭包会把函数中的变量值存储在内存中，会对内存有消耗，所以不能滥用闭包，否则会影响网页性能，造成内存泄漏。当不需要使用闭包时，要及时释放内存，可将内层函数对象的变量赋值为null闭包原理函数执行分成两个阶段（预编译阶段和执行阶段）。a. 在预编译阶段，如果.

原创 javascript面试-介绍防抖节流原理、区别以及应用，并用javascript进行实现

防抖原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。适用场景：a. 按钮提交场景：防止多次提交按钮，只执行最后提交的一次b. 搜索框联想场景：防止搜索发送请求，只发送最后一次输入简易版实现：function debounce( func, wait ) { let timeout; return function() { const context = this; const args = arguments; clearTimeout(timeout.

原创 vue2迁移vue3

vue2: v-on="$listeners"vue3:v-bind="$attrs"代替过滤器vue2: <p class="font-26 gray">金额{{ detail.money | currency('', 2) }}</p> import * as filters from './util/filter' Object.keys(filters).forEach((k) => Vue.filter(k, filters[k]))vue3.

原创 vue 父子组件生命周期执行顺序

加载渲染过程父beforeCreate|父created|父beforeMount|子beforeCreate|子created|子beforeMount|子mounted|父mounted子组件更新过程父beforeUpdate|子beforeUpdate|子updated|父updated销毁过程父beforeDestroy|子beforeDestroy|子destroyed|父destroyed...

原创 vue 访问 public 路径里面的内容怎么访问

原创 vue3 setup emit 不生效 子组件中的值回传给父组件

父组件<Input v-model="val"/>子组件<input v-model="input" /> props: { modelValue: { tppe: [ String | Number], default: '', }, }, setup() { const input = ref('') const clearVal = () => { input.value = '' emit('

原创 typescript 中 any 和 unknow 区别

let value: any;value = true; //okvalue = 1;//okvalue = “Hello”;//okvalue = Symbol(“type”);//okvalue = {};//okvalue = [];//okvalue.foo.bar;//okvalue();//ok [[call]]new value();//ok [[structor]]value(0)[1];//oklet value: unknow;value = true; //ok

原创 vue :src 引入图片的变量不生效怎么解决？

把图片地址里的@/ 拿出来和后面的拼接就可以生效注意图片地址 @/要去掉

原创 vue3在style标签里css用js里的变量

原创 git删除分支

git 删除分支删除本地分支git branch -D successResult删除远程分支git push origin -D successResult

原创 vue中写svg组件svg图片加载不出来

首先要安装3个插件：svg-sprite-loader，svgo，svgo-loader"devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "babel-eslint": "^10.1.0", "eslin.

原创 javascript event loop 事件循环机制 面试例子

宏任务包括：setTimeout，setInterval，setImmediate(node独有)，requestAnimationFrame(浏览器独有)，UI rendering(浏览器独有)，I/O，微任务：process.nextTick(node独有，在微任务中是最先执行的)，Promise.then()，Object.observe，MutationObserver注意：Promise构造函数里的代码是同步执行的一个函数执行栈，一个事件队列，一个微任务队列宏任务队列一

原创 vue双向绑定原理

原理view的变化能实时让model发生变化，而model的变化也能实时更新到view。vue采用数据劫持&发布-订阅模式的方式，通过es5提供Object.defineProperty()方法来劫持（监控）各属性的getter、setter，并在数据（对象）发生变动时通知订阅者，触发相应的监听回调。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。要实现vue中的双向数据绑定，大致可以划分三个模块：Observer、Compile、W.

原创 vue面试之vuex与localStorage 的区别

最重要的区别a. vuex 存储在内存b. localStorage 则以文件的方式存储在本地，只能存储字符串类型的数据，存储对象需要JSON的stringify和parse方法进行处理。c. 读取内存比读取硬盘速度要快应用场景a. Vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 。vuex用于组件之间的传值。b. localstorage 是本地存储。是将数据存储到浏览器的方法。一般是在跨页.

原创 npm publish 400 maintainers error

npm pushlish 报错首先检查是否登录npm loginnamepwd检查源是否正确还是没有解决报错 400 Bad Request - PUT https://registry-npm.xxx.com/@xxx-ui - maintainers error解决方法：npm --version 自己是7点多的版本，降级6.x。结果成功了！！！...

原创 vue+Ant Design 中的table想修改单元格中的样式

tmColumns: [ { title: '申请日期', dataIndex: 'applyDate', key: 'applyDate', ellipsis: true, }, { title: '申请人', dataIndex: 'applyPerson', key: 'applyPerson',

原创 vue+elementui Table组件splice删除表格总是删除最后一行

原因是没有给table下面的row加key,才导致的问题解决方法：在 el-table 标签里 加一个 row-key 属性<el-table :data="tableData" @cell-dblclick="tableDbEdit" :row-key="getRowKey" style="width: 100%" border> <el-table-column prop="number" label="服务件数"> </el-tabl

原创 redux

redux 是什么？1.1 redux 是一个独立专门用于做状态管理的JS库（不是react插件库）1.2 它可以用在react,angular,vue等项目中，但基于与react配合使用1.3 作用：集中式管理react应用中多个组件共享的状态dispatch什么情况下需要使用redux2.1 总体原则：能不用就不用，如果不用比较吃力才考虑使用2.2 某个组件的状态，需要共享2.3 某个状态需要在任何地方都可以拿到2.4 一个组件需要改变全局状态2.5 一个组件需要改变另一个组件的状.

原创 react 常用的ui库有哪些

国外：material-ui国内：ant-design 蚂蚁金服pc官网：https://ant.design/index-cn移动官网：https://mobile.ant.design/index-cn

原创 react-router

官方网址：https://reactrouter.com/web/guides/quick-start安装方法：npm i --save react-router-dom web版本组件 history 模式，h5之后的实现 hash 模式，h5之前的实现 路由 重定向 路由链接 导航路由链接 切换其它a. history 对象 push replaceb. match 对象c. withRouter 函数...

原创 react 组件之间传值的方式

方式一：通过props传递1.1 共同的数据放在父组件上，特有的数据放在自己组件内部1.2 通过 props 可以传递一般数据和函数数据，只能一层一层传递1.3 一般数据 --> 父组件传递数据给子组件 --> 子组件读取数据1.4 函数数据 --> 子组件传递数据给父组件 --> 子组件调用函数方式二：使用消息订阅(subscribe,相当于绑定监听)-发布(publish,相当于触发事件)机制1.1 工具库： PubSubJS1.2 下载：npm install .

原创 css 内容超出显示一行和多行省略号...

overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

原创 ant-design-vue怎么把分页器的英文Go to 改成中文的跳至

ant-design-vue目前的默认方案是英文，如果需要使用其他语言，可以参考下面的方案LocaleProviderant-design-vue提供了一个Vue组件LocalProvider用于全局配置国际化方案import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'data () { return { locale: zhCN, } }<a-config-provider :locale="l

原创 react 路由的理解

什么是路由？a. 一个路由就是一个映射关系(key:value)b. key 为路由路径， value 可能是function/component路由分类a. 后台路由: node服务器端路由，value是function,用来处理客户端提交的请求并返回一个响应数据b.前台路由：浏览器端路由，value是component,当请求的是路由path时，浏览器前端没有发送http请求，但界面会更新显示对应的组件后台路由a. 注册路由：router.get(path, function(req,r.

原创 css 修改原生select placheloder

<template> <div id="app"> <select required> <option value="" disabled selected hidden>Select your option</option> <option value="M">Male</option> <option value="F">Female</op.

原创 css 屏幕鼠标事件 pointer-events:none 划到空白区域不进行触发

pointer-events:none; 屏蔽鼠标事件opacity:value; filter:alpha(opacity=value)透明，内容会跟着透明如果不想内容透明解决方案？1.把background用rgba实现 2. 用定位实现，背景和内容单独出来，用定位使其叠加在一起只有划到红框内才触发hover事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> .

原创 react高效的原因

虚拟DOM,不总是直接操作DOMDOM diff算法，最小化页面重绘