- 博客(20)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Vue3中的defineProps、defineEmits、defineExpose
Vue3中的defineProps、defineEmits、defineExpose
2022-06-21 15:36:19
5144
1
原创 利用自定义组件实现svg自由——vite-plugin-svg-icons
利用自定义组件实现svg自由——vite-plugin-svg-icons
2022-06-20 15:11:23
3134
1
原创 D3.js踩坑记录——关于d3.zoom更改transform无效
D3.js的最新v4版提供了d3.zoom模块，用它可以给svg图形增加缩放/移动的特性，但通过非鼠标/触控的方式改变图形的位置和缩放比例后，d3.zoom的行为就变得不正常了。本文给出一个解决方法。我们一般设置拖动窗口的代码如下 this.svg.call( d3.zoom().on('zoom', ({ transform }) => { this.g.attr('transform', transform) }) )这样我们就可以拖动
2021-12-21 16:47:46
3154
8
原创 继承的几种方式
1.对象冒充继承 function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } Person.prototype.eat = function () { console.log("干饭人"); } //员工 function Employee(eId, name, age, sex) { // this 员工对象 //把this传入到
2021-12-20 22:44:51
343
原创 一个合格前端工程师需要掌握的知识（算法\js事件）持续更新中~
目录1.冒泡排序2.快速排序1.冒泡排序const arr = [1, 5, 50, 10, 8, 4] function bubbleSort(arr) { for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr.length - i - 1; j++) { if (arr[j] > arr[j + 1]) { [arr[j], arr[
2021-12-08 17:30:53
604
原创 http,websocket和socket详解
一,HTTP 1,概念:http是目前应用最广泛的一个网络传输协议,是属于网络应用层的面向对象的协议. 1.1,HTTP1.1解决TCP3次握手4次挥手耗性能问题:如果有大量的连接,每次在连接,关闭时都要经历3次握手,4次挥手,这很显然会造成性能低下.因此,HTTP1.1开始,默认采用持久连接,使用了一种叫做keepalive connections 的机制,它可以在传输数据后仍然保持连接,当客户端再次获取数据时,直接使用刚刚空闲下来的连接,而无需再次握手.低...
2021-12-03 10:58:46
1663
1
原创 Webpack5之babel缓存以及文件资源缓存
要说文件资源缓存那就得先了解一下浏览器的缓存机制浏览器大概可以分为强制缓存（强缓存）和协商缓存浏览器每次与服务器通信的方式为应答模式，即：浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中，简单的过程图如下：由上图我们可以知道： 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识 浏览器每次拿到返回的请求结果都会将该结
2021-11-25 16:46:18
1956
原创 Webpack5学习—ESlint
ESLintESLint是一个静态代码分析工具(Static program analysis，可以在没有任何程序执行的情况下，对代码进行分析)ESLint可以帮助我们在项目中建立统一的团队代码规范，保持正确、统一的代码风格，提高代码的可读性、可维护 性ESLint的规则是可配置的，我们可以自定义属于自己的规则ESLint在分析的时候，是依赖JS编译器的，通过JS编辑器，ESLint将我们编写的代码进行词法分析和语法分析生成对应的AST树，ESLint通过遍历AST树对代码进行合法性校验
2021-11-16 14:52:17
1341
原创 Webpack5中对css样式兼容性的处理postcss-loader和postcss-preset-env
对我们的css样式兼容性处理我们需要postcss-loader和postcss-preset-envpostcss-loader：对我们的css文件进行兼容性处理postcss-preset-env：帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式我们需要优先使用postcss-loader在css-loader之前而在我们的新版本中postcss-loader的书写格式发生了一小小变化，大家就要注意了不然一不小心就会报错
2021-11-11 17:03:46
1279
原创 Webpack打包字体图标资源
开发中，除了图片资源，可能还会有其它的资源需要打包，比如说字体文件。如果我们需要使用某些特殊的字体或字体图标，就会引入很多字体相关的文件，对于这些文件的处理也可以用Asset Modules type来做。在webpack 5之前，我们可以用file-loader或url-loader处理这些字体文件，但在webpack5中，我们已经没有必要再去安装对应的loader了，因为我们可以使用AssetModules来处理这些文件。而且，像这些字体文件，我们一般不会对它进行...
2021-11-09 15:24:01
1677
原创 Webpack打包生成多余图片的解决方案和Webpack5正确打包图片姿势
最近在学习webpack打包图片资源（background-image）时出现了一些问题一般来说使用webpack进行对图片的打包处理需要下载两个依赖，file-loader和url-loaderurl-loader是依赖于file-loader的基础上的扩展，其可以将设置的limit大小的图片转化为base64格式，这样可以减少http的请求次数，减轻服务器的压力。但是在我使用url-loader进行打包时却发现我的每张图片资源都打包了两次，而且有一张不能显示，打开不显示的图片二进制后内容是：
2021-11-08 10:17:29
2372
4
原创 不同组件之间的切换（动态组件component /:v-bind components /v-if v-else）
当我们在vue的页面开发中经常会碰到类似这样的组件。我们有3种方法可以去实现这样的效果。一：v-if / v-else (最简单) 当我们点击的按钮是Posts时，展示相应的组件，否则展示Archive组件。二：:v-bind components 如果点击所对应的组件都是类似一个模板的话，我们可以通过components的方式，通过点击后用watch动态监听传递给子组件的值去进行一个动态响应。三：动态组件component ...
2021-10-14 11:15:57
1066
转载 （建议收藏）Vue3 对比 Vue2.x 差异性、注意点、整体梳理，与React hook比又如何？（面试热点）
前言前不久 Vue3的RC 版本终于发布，一直没时间研究，这篇文章我将以下面的结构，为大家整体梳理下Vue3，顺便对比下vue2.x和react hook结合着带大家看看，可能有些长，耐心看完相信会有收获（面试热点）。一、为什么重写vue2.X?提示：首先我们先了解下，是什么让尤雨溪决定重写vue，这将也是Vue2.x与Vue3的差异性对比，vue的一次重大升级。（面试热点）1.1背景如今的前端 Vue - React - Angular 三足鼎立，彼此之间相互牵制，可谓明争暗斗多年
2021-09-16 17:18:24
516
原创 浅谈Object.prototype.toString.call()方法
在JavaScript里使用typeof判断数据类型，只能区分基本类型，即：number、string、undefined、boolean、object。对于null、array、function、object来说，使用typeof都会统一返回object字符串。要想区分对象、数组、函数、单纯使用typeof是不行的。在JS中，可以通过Object.prototype.toString方法，判断某个对象之属于哪种内置类型。分为null、string、boolean、number、undefined、a
2021-09-08 14:49:18
256
原创 CSS columns分栏布局和break-inside属性
Multiple-column布局，也称多列布局、多栏布局，我自己喜欢叫做分栏布局，这种布局可以讲内容布局到一组列框，类似于报纸上的排版。分栏布局非常特殊，有别于传统布局方法，它将包括包括所有子元素在内的所有内容拆分为列，这与我们打印网页时候时页面内容分割成不同的页面的方式类似。分栏布局IE10+都可以使用，API稳定，移动端兼容性比flex布局要好，虽然设计初衷不一样，但很多布局都可以实现。甚至某些场景下，只能使用分栏布局才能实现。很有学习的必要。直接相关CSS属性（这里主要就说co.
2021-08-26 16:35:40
3933
转载 Vue中 scss不支持/deep/写法问题
在style有scoped属性时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如.conBox /deep/ .el-input__inner{ padding:0 10px;}如果/deep/报错，可采用::v-deep.conBox ::v-deep .el-input__inner{ padding:0 10px;}...
2021-07-20 10:04:08
1747
原创 cookie,session,token的区别(简单易懂)
cookie,session,token的区别(简单易懂)cookie浏览器与服务器进行会话时,产生一种本地存储技术sessionSession其实是利用Cookie进行信息处理的，当用户首先进行了请求后，服务端就在用户浏览器上创建了一个Cookie，当这个Session结束时，其实就是意味着这个Cookie就过期了。cookie和session的共同之处在于：cookie和session都是用来跟踪浏览器用户身份的会话方式。cookie 和session的区别是： cookie数据
2021-03-28 23:49:01
1365
原创 前端面试常见的问题（呕心沥血的总结）
直通金三银四，你学废了吗？1. JS的数据类型哪些?2. 变量的命名规则3.转换规则4. this的指向5.改变this指向的方式6.new操作符做什么?7.什么ajax,它的5个步骤8. get与post请求的区别?9. 什么cookie?10. cookie localStorage,sessionStorage 的区别?11. 闭包?12. 原型和原型链13. ES5 新增了哪些特性?14.es6有哪些新特性,你喜欢哪些特性? (重点的重点)15.什么是回调函数16.面向对象16.设计模式 GoF1
2021-03-22 15:30:14
4233
1
空空如也
Git push出现302错误 救！
2021-12-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人