前端
文章平均质量分 56
前端进阶知识 持续更新中
杉菜酱子
这个作者很懒,什么都没留下…
展开
-
微前端初识
维基百科上对微服务的定义:**一种软件开发技术,面向服务的体系结构架构样式的一种变体,将应用程序构造为一组松散耦合的服务,并通过轻量级的通信协议组合起来。**具体来说,就是将一个单体应用按照一定的规则拆分为一组服务。这些服务,各自拥有自己的仓库,可以独立开发、独立部署,有独立的边界,可以由不同的团队进行管理,甚至可以使用不同的编程语言来编写。但对前端来说,仍然是一个完整的服务。面对越来越重的前端应用,可将微服务的思想照搬到前端,就有了微前端的概念。像微服务。原创 2023-08-08 11:38:38 · 452 阅读 · 0 评论 -
MutationObserver与IntersectionObserver
MutationObserver 和 IntersectionObserver原创 2023-02-21 11:31:32 · 1398 阅读 · 4 评论 -
手写diff算法
手写 diff 算法原创 2022-08-10 21:18:22 · 995 阅读 · 0 评论 -
在js中,0表示false,非0表示true
js 中,0表示false,非0表示true原创 2022-07-26 20:31:19 · 1426 阅读 · 1 评论 -
前端经典面试题汇总
前端经典面试题汇总原创 2022-07-13 17:55:07 · 838 阅读 · 0 评论 -
重绘和回流
重绘和回流原创 2022-06-30 18:01:00 · 334 阅读 · 0 评论 -
React底层实现原理
React原理解析原创 2022-06-25 22:14:42 · 682 阅读 · 0 评论 -
React 实现添加和删除评论功能(附完整代码)
React 实现添加和删除评论功能 demo原创 2022-06-17 16:05:14 · 981 阅读 · 4 评论 -
前端常用设计模式
前端 常用设计模式原创 2022-06-15 17:34:55 · 887 阅读 · 1 评论 -
手写Vue3组件库
手写Vue3 组件库原创 2022-06-14 16:36:36 · 979 阅读 · 0 评论 -
Vue的Object.defineProperty()方法
Vue Object.defineProperty()原创 2022-06-03 16:11:40 · 752 阅读 · 0 评论 -
深拷贝与浅拷贝的区别
深拷贝与浅拷贝是针对对象属性为对象的,因为基本数据类型在进行赋值操作时(也就是深拷贝(值拷贝)),是直接将值赋给了新的变量,也就是该变量是原变量的一个副本,这时,你修改两个中的任意一个都不会影响另一个;而对于对象或引用数据在进行浅拷贝时,只是将对象的引用复制了一份,也就是内存地址,即两个不同的变量指向了同一个内存地址,那么在改变任意一个变量的值都是改变内存地址所存储的值,因此两个变量的值都会改变。1. js中的深拷贝(值拷贝):js 中的基本数据类型:String,Number,Boolean,Nu.原创 2022-05-27 13:39:29 · 7728 阅读 · 2 评论 -
JS 线程机制与事件机制
一、进程与线程1. 进程程序的一次执行,它占有一片独有的内存空间可以通过windows任务管理器查看进程可以看出每个程序的内存空间是相互独立的。2. 线程概念:是进程内的一个独立执行单元是程序执行的一个完整流程是CPU的最小的调度单元3.进程与线程应用程序必须运行在某个进程的某个线程的上一个进程中至少有一个运行的线程:主线程 --> 进程启动后自动创建一个进程中也可以同时运行多个线程:此时我们会说这个程序是多线程运行的过个进程之间的数据是不能直接共享的 -原创 2022-05-25 21:55:27 · 514 阅读 · 0 评论 -
JS 面向对象高级
一、对象创建模式1. Object构造函数模式方式一:Object构造函数模式套路:先创建空Object对象,再动态添加属性、方法适用场景:起始时不确定对象内部数据问题:语句太多/*一个人: name:"Tom", age: 12*/// 先创建空Object对象 var p = new Object() p = {} //此时内部数据是不确定的 // 再动态添加属性/方法 p.name = 'Tom' p.age = 12 p.setName = function (name原创 2022-05-19 22:27:30 · 229 阅读 · 0 评论 -
JS 实现继承的七种方式
原型链继承借助构造函数来继承构造函数+原型链 组合继承寄生组合式继承原型式继承寄生式继承class+extends继承一、原型链继承核心:创建父类实例对象作为子类原型优点:可以访问父类原型上的方法或属性,实现了方法复用缺点:创建子类实例时,不能传父类的参数(比如name),子类实例共享了父类构造函数的属性值.<script> // 原型链继承: 将构造函数(子)的原型设置为另一个构造函数(父)的实例对象。 function Person(name) { .原创 2022-05-21 10:55:16 · 658 阅读 · 0 评论 -
JS 闭包详解
一、闭包预备知识1. 举个栗子分析执行上下文let a = 3function addTwo(x) { let ret = x + 2 return ret}let b = addTwo(a)console.log(b); // 5为了理解JavaScript是如何工作的,让我们详细分析一下:在第1行,我们在全局执行上下文中声明了一个新变量a,并将其赋值为3接下来,就变得棘手了,第2行到第5行实际上是在一起的,这里发生了什么?我们在全局执行上下文中声明了一个名为a原创 2022-05-18 22:46:27 · 2278 阅读 · 1 评论 -
JS 作用域与作用域链
一、作用域理解就是一块“地盘”,一个代码所在的区域它是静态的(相对于上下文对象),在编写代码时就确定了。分类全局作用域函数作用域没有块作用域(ES6有了)–> java 语言也有作用隔离变量,不同作用域下同名变量不会有冲突/* //没块作用域 if(true) { var c = 3 } console.log(c) */ var a = 10, b = 20 function fn(x) { var a = 100, c = 300原创 2022-05-18 15:31:19 · 233 阅读 · 0 评论 -
JS 执行上下文与执行上下文栈
当代码在JS中运行时,执行代码的环境非常重要,并将概括为以下几点:全局代码——第一次执行代码的默认环境。函数代码——当执行流进入函数体时。(…) —— 我们当作执行上下文,是当前代码执行的一个环境与范围。换句话说,当我们启动程序时,我们从全局执行上下文中开始。一些变量是在全局执行上下文中声明的。我们称之为全局变量。当一个程序调用函数时,会发生什么?以下几个步骤:js创建一个新的执行上下文,我们叫做本地执行上下文这个本地执行上下文将有它自己的一组变量,这些变量将是这个执行上下文的本地变量。.原创 2022-05-18 09:54:51 · 461 阅读 · 0 评论 -
JS 原型与原型链
先熟悉概念,对于JS原型与原型链 有个大致了解:原型:JS是一种通过原型实现继承的语言与别的高级语言是有区别的,像JAVA,C#是通过类型决定继承关系的,JS是动态的弱类型语言,总之,可以认为JS中所有都是对象,在JS中,原型也是一个对象,通过原型可以实现对象的属性继承,JS的对象中都包含了一个prototype内部属性,这个属性所对应的就是该对象的原型。prototype作为对象的内部属性,是不能被直接访问的。所以为了方便查看一个对象的原型,Firefox和Chrome内核的JS引擎中提供了prot原创 2022-05-18 08:30:41 · 543 阅读 · 0 评论 -
使用Vue封装一个checkbox、checkboxGroup组件
checkbox.vue 组件<template> <label class="one-checkbox" :class="{' is-checked':isChecked}"> <span class="one-check_input"> <span class="one-check_inner"></span> <input type="checkbox" .原创 2022-05-05 10:21:49 · 1221 阅读 · 0 评论 -
使用Vue封装一个radio组件、RadioGroup组件
一、封装radio组件radio组件基本框架和样式:<template> <label class="one-radio" :class="{'is-checked':label == value}"> <span class="one-radio_input"> <!-- <span class="one-radio_inner"> --> <input type="原创 2022-05-05 08:36:17 · 3769 阅读 · 1 评论 -
使用Vue封装一个switch组件
参数支持:一、switch组件基本框架和样式<template> <div> <span class="x_switch_core"> <span class="x_switch_btn"> </span> </span> <input type="checkbox" class="x-switch-input" :name="name"原创 2022-05-04 16:58:36 · 1382 阅读 · 0 评论 -
如何在npm快速发布一个包【简洁版】
注册并登录npm官网npm config get registry查看本地用的是否是官方的源,如果不是,请换成官网的源:npm config set registry https://registry.npmjs.org登录npm login 之后需要填写用户名、密码、邮箱、一次登录密码(会发邮箱里)。npm whoami 查看当前登录的npm用户是否正确在本地新建一个文件夹mkdir my-package-test进入该文件夹cd my-package-test进行初始化npm .原创 2022-04-23 10:45:47 · 241 阅读 · 0 评论 -
ts 函数实现重复 报错
在项目根目录运行:tsc --init之后根目录会生成一个json文件,文件名为:tsconfig.json在回来看ts文件中,报的“函数实现重复”红色警告消失。原创 2021-09-30 16:28:35 · 2428 阅读 · 2 评论 -
在uniapp中使用彩色图标
在uniapp中使用彩色图标原创 2021-09-06 10:42:04 · 715 阅读 · 0 评论 -
前端get请求接收后端传来的二进制文件流blob实现下载功能,解决下载文件打不开问题
解决方法:前端在请求下载文件接口时,要设置responseType为blob。前端代码:export function download(url, params) { return request({ url: url + '?' + qs.stringify(params, { indices: false }), method: 'get', responseType: 'blob' })}后端下载模板:控制器: @ApiOperation(value原创 2021-08-12 14:38:33 · 5029 阅读 · 0 评论 -
webpack 开发环境基本配置
webpack开发环境基本配置:webpack.config.jsconst { resolve } = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: './src/index.js', output: { filename: 'built.js', path: resolve(__dirname, 'b原创 2021-07-14 09:01:51 · 246 阅读 · 7 评论 -
vue中关闭eslint的方法
在webpack.base.conf.js中,注释掉下面红框的内容:之后,重启编辑器,不是重启项目呀,成功了!原创 2021-05-02 18:07:07 · 345 阅读 · 0 评论 -
电脑正运行前端项目,因内存较小而突然崩溃,之后node损坏(解决办法)
电脑 因内存较小 正运行着前端项目 突然崩溃 之后 node损坏解决办法:找到控制面板–> 程序和功能–> 搜索node点击“修复”完成。原创 2021-04-08 17:54:53 · 388 阅读 · 0 评论 -
前端下载二进制流文件 为 excel文件
需求: 前端请求后端接口,后端返回二进制流,前端需实现浏览器自动下载成excel文件。原理: 通过a标签的href属性将二进制数据转换为文件,再通过download属性将文件下载到本地。注意: 接口响应的数据类型要设置为blob类型// 下载导入用户的模板export function downloadTemplate() { return request({ url: 'api/users/excel', method: 'get', res原创 2021-04-05 11:29:28 · 2147 阅读 · 0 评论 -
vuex commit保存数据技巧
https://www.jb51.net/article/153386.htm转载 2021-03-27 08:29:49 · 327 阅读 · 2 评论 -
js如何删除元素 而不删除其子元素
方法一:var cnt = $(".remove-just-this").contents();$(".remove-just-this").replaceWith(cnt);方法二:与库无关的方法是,在删除元素之前,先将要删除的元素的所有子节点插入(从其旧位置隐式删除):while (nodeToBeRemoved.firstChild){ nodeToBeRemoved.parentNode.insertBefore(nodeToBeRemoved.firstChild,nodeToB原创 2021-03-26 21:33:25 · 542 阅读 · 0 评论 -
在vue中引入echarts
参考博客:https://www.jianshu.com/p/cf0a54374419转载 2021-03-17 15:54:22 · 146 阅读 · 0 评论 -
Vue warn]: Duplicate keys detected: ‘[object Object]‘. This may cause an update error. 解决办法
Vue warn]: Duplicate keys detected: ‘[object Object]’. This may cause an update error.把:key里 的值改成以下两种情况之一就可以了。原创 2021-03-14 15:40:52 · 3491 阅读 · 2 评论 -
修改element-ui组件样式失败的解决办法
可以使用css穿透写法:::v-deep示例:原创 2021-03-13 20:59:13 · 566 阅读 · 0 评论 -
vue-image-crop-upload 头像或图片上传组件
https://www.cnblogs.com/tangwei89/p/11653599.html转载 2021-03-10 11:10:13 · 471 阅读 · 0 评论 -
vue中使用echarts 简单demo
安装echarts(因为版本原因,有些时候会报错,因此查了这个4版本的不报错)npm install echarts@4.9.0main.js中引入echartsimport echarts from "echarts";子组件hello.vue<template> <!-- <div class="hello"> <div id="main" style="width: 600px; height: 400px"><.原创 2021-02-07 20:23:59 · 685 阅读 · 0 评论 -
本地vue版本如何从4降到3
卸载重装npm uninstall -g @vue/clinpm install -g @vue/cli@3.11.0原创 2021-02-05 09:46:10 · 7429 阅读 · 0 评论 -
jquery 轮播图实现(手动轮播+自动轮播)
html <div class="top"> <ul id="imgList"> <!-- <li class="lunbo_img01"><img src="/images/19.jpg" alt=""></li> <li class="lunbo_img02"><img src="/images/3a.png" alt=""></li&g原创 2021-01-19 22:43:55 · 840 阅读 · 0 评论 -
前端知识整理(一)
https://www.yuque.com/docs/share/291ba616-f2d9-4d20-b269-030346b8c2aa?#(密码:pc0u) 《前端知识整理(一)》原创 2021-01-17 08:55:31 · 122 阅读 · 0 评论