- 博客(93)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 WebSocket(简单体验版)
Web Socket(套接字)：就是通过一个长时连接实现与服务器全双工、双向的通信。Web Socket使用的并不是HTTP协议而是自定义的协议，所以如果我们使用Web Socket的时候，URL不再是或，而是或(但是，实际上是看红宝书才想着玩一下下，在开发中还没试过用这个来开发的)主要特点：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。要创建一个新的Web Socket，首先需要实例化一个对象。我们实例化WebSocket对象时，传的参数应该是一个绝对，同源策略不适用于WebSocke
2022-06-27 20:56:56
654
2
原创 Webpack搭建简单的TypeScript脚手架
虽然我们也可以在TypeScript中文网的练习平台写，直接看对比编译出来的JS代码，但是实际看代码运行结果还是需要点击运行按钮，去到新页面，再打开控制台。所以为了很方便地学习TS，搭建一个简单的TypeScript脚手架很有必要：对项目进行初始化操作对包进行管理。(会生成默认的文件)添加目录，后续的代码在目录下进行编写添加Webpack配置文件，设置入口文件、出口文件地址。初次测试编写一下文件，测试一下前面的配置是否正确。执行命令执行编译生成的文件，能得到正确的结果就表示前面的步骤正确了。上面我
2022-06-23 09:27:06
445
原创 element-plus 下拉框实现全选功能
实习确实能学到不少东西，但是学到的东西果然还是需要沉淀下来，不然后面立马又忘记了。使用方法还是比较简单的首先需要使用到和，就是下拉框，所以需要使用双向绑定数据。而就是下拉框的选项。需求：下拉框选项中有全选以及其他项，需要实现点击全选后不能选择其他项，选中了其他项同样不能选择全选。先来简单了解下下拉框的多选。理论上来说，是只需要给添加上就能实现多选，但是效果不太好。选中的会挤在一起。这个时候，我们可以添加属性，这样子，这样子就只会显示一个选项，没显示的以数量的形式在后面。再添加属性，还能实现，悬浮在上方时
2022-06-09 11:48:51
6137
2
原创 el-upload上传文件
公司和学校项目都用到了上传文件的功能，记录一下。如果需要使用，自行查阅用法，也可以到本人博客中查看简单教程。解释下上面的属性：：请求URL：是否展文件列表(如果没上传成功，则会闪现一下，再消失)：文件上传成功钩子：文件上传失败钩子接下来，去后端设置的路径去看看有没有成功保存上传的文件。这个比较简单，因为也封装好了，只需要使用属性，去设置请求头即可有时候并不是直接上传就可以的，比如一开始并没有上传路径，需要调用获取签名接口来获取上传路径。这个时候就可以使用我们的上传文件之前的钩子。在上传前调用获取签名的
2022-06-09 11:48:07
17382
1
原创 代理与反射(二)
使用代理模式可以实现一些有用的功能。通过添加对应捕获器，就可以捕获、、等操作，可以监控这个对象何时在何处被访问过，并且能在访问、修改前干想干的事，并通过反射重新实现原功能。这里有一个需要小小注意的点：通过代理对象的操作才会被捕获，而直接操作目标对象的操作不会被捕获。因为代理的内部实现对于外部的代码来说是不可见的，所以想要隐藏目标对象上的属性也很容易实现。我们上面说过，需要通过反射来实现原功能，但是我们也可以不实现原功能，而是返回其他值。从上图，我们可以知道，直接访问目标对象、目标对象属性以及访问代理对
2022-06-09 11:46:59
80
原创 代理与反射(一)
ES6新增的代理与反射提供了拦截，并且能够增加其他行为。实际上，就有点像ES6之前的。用法就是，通过构造函数给目标对象定义一个关联的代理对象，还可以添加捕获器，之后这个代理对象就能够作为抽象的目标对象来使用，而在操作影响到目标对象之前，会被定义的捕获器劫持。所有捕获器都可以访问到相应的参数，基于这些参数可以重新执行被捕获方法的原始行为。捕获器会接收到目标对象、要查询的属性和代理对象三个参数。反射的简单使用从上面的例子中，我们已经知道可以通过捕获器的参数重建原始行为，但是重建原始行为比较麻烦......
2022-06-04 11:26:44
110
原创 CSS隐藏元素的几种方式
CSS隐藏元素的几种方式前言开始之前，先来了解一下回流和重绘的概念。(经小伙伴评论提醒，后来加的内容)回流：当我们修改元素的几何位置属性，如宽度、高度时，浏览器会重新布局，这个过程就叫回流重绘：当我们修改元素的绘制属性，如背景色、颜色等，浏览器不会重新布局，但是需要重新进入绘制阶段，这个过程就是重绘。可以通过css triggers网站查询元素是否会导致回流、重绘。回流一定会触发重绘，重绘不一定会触发回流display: none最常见的隐藏元素的方法，不会渲染该元素，所以该元素不会占位置，
2022-05-28 11:53:02
522
原创 Element Plus修改表格行、单元格样式
Element Plus修改表格行、单元格样式前言实习工作需要根据表格的状态字段来设置行的样式，记录一波。先来一下基础配置。(Vue3)<template> <el-table :data="tableData" border style="width: 400px"> <el-table-column prop="name" label="姓名" width="100" /> <el-table-column prop="age" la
2022-05-27 10:27:56
4534
原创 创建对象的几种方式(二)
创建对象的几种方式(二)看红宝书+查资料，重新梳理JavaScript的知识。原型模式原型的知识不会过多赘述，可以查看我之前写的文章，或者自己找资料。每个函数都会创建一个prototype属性，它就是原型对象，在它上面定义的属性和方法可以被对象实例共享。所以在构造函数中赋值给对象的值，可以变成赋值给它们的原型。function Person() { }Person.prototype.name = 'clz';Person.prototype.age = 21;Person.proto
2022-05-26 11:44:16
101
原创 创建对象的几种方式(一)
创建对象的几种方式(一)看红宝书+查资料，重新梳理JavaScript的知识。工厂模式首先需要一个函数(工厂)，然后在函数中创建具体对象。这种模式可以抽象创建具体对象的过程，这样子，我们想要创建对象，只需要调用函数，让属性值进厂即可。function createPerson(name, age) { const o = new Object() o.name = name; o.age = age; o.listen = function () {
2022-05-26 11:43:29
91
原创 JavaScript之对象(二)
JavaScript之对象(二)看红宝书+查资料，重新梳理JavaScript的知识。合并对象 Object.assign() Object.assign()可以用来将原对象的属性合并到目标对象上，而且这个方法还会返回合并后的目标对象。它会使用源对象上的[[Get]]取得属性的值，然后使用目标对象上的[[Set]]设置属性的值。let target = { name: 'clz'};let source = { age: 21};let result = null;
2022-05-25 10:02:55
2724
原创 JavaScript之对象(一)
JavaScript之对象(一)看红宝书+查资料，重新梳理JavaScript的知识。对象的属性数据属性数据属性有四个特性。通过特性，可以设置属性。如通过[[Enumerable]]为false就能不让该属性被枚举。另外，为了区别是不是特殊的属性，规范会用两个中括号将特性的名称括起来，如[[Writable]]。[[Configurable]]: 表示属性是否可以被设置。如被delete，以及能否修改特性等。[[Enumerable]]: 表示属性是不是可被枚举的。[[Writable]
2022-05-25 10:02:23
69
原创 JavaScript之函数(二) 函数内部三个不常见的属性
JavaScript之函数(二) 函数内部三个不常见的属性看红宝书+查资料，重新梳理JavaScript的知识。arguments.calleearguments就不多说了，但是arguments有一个callee属性，是一个指向arguments对象所在函数的指针。先来一下阶乘函数看看function factorial(num) { if (num <= 1) { return 1 } else { return num * facto
2022-05-24 09:51:47
99
原创 JavaScript之函数(一)
JavaScript之函数(一)看红宝书+查资料，重新梳理JavaScript的知识。默认参数值在ES6之前，我们想要实现默认参数的话，需要先检测某个参数是否等于undefined，如果是的话，证明此时并没有传这个参数，那就给它一个默认值。function mytest(name) { name = typeof name === 'undefined' ? 'clz' : name return name}console.log(mytest('赤蓝紫')) // 赤
2022-05-24 09:51:02
85
原创 JavaScript之生成器
JavaScript之生成器看红宝书+查资料，重新梳理JavaScript的知识。生成器是一个函数的形式，通过在函数名称前加一个星号(*)就表示它是一个生成器。所以只要是可以定义函数的地方，就可以定义生成器function* gFn() { }const gFn = function* () { }const o = { * gFn() { }}箭头函数不能用来定义生成器函数，因为生成器函数使用** function*语法**编写。那为啥上面的第三个例子可以不使用 func
2022-05-22 11:00:12
805
原创 JavaScript之迭代器
JavaScript之迭代器看红宝书+查资料，重新梳理JavaScript的知识。迭代就是指可以从一个数据集中按照一定的顺序，不断取出数据的过程。那么迭代和遍历有啥子区别呢？迭代强调依次取数据的过程，不保证把所有的数据都取完遍历强调的是要把所有的数据依次全部取出在JavaScript中，迭代器是能调用 next方法实现迭代的一个对象，该方法返回一个具有两个属性的对象。 value：可迭代对象的下一个值 done：表示是否已经取出所有的数据了。 false表示还有数据， true表示
2022-05-22 10:58:39
6181
1
原创 Array.from的食用指南
Array.from的食用指南看红宝书+查资料，重新梳理JavaScript的知识。将伪数组转换成数组伪数组：有若干索引属性的任意对象以及一个length属性const fakeArr = { 0: 'red', b: 'blue', 2: 'purple', w: 'white', length: 4}console.log(Array.from(fakeArr)) // ['red', undefined, 'purple', undefined]伪数组的属性
2022-05-21 10:58:55
133
原创 JavaScript冷门知识
JavaScript冷门知识看红宝书，重新梳理JavaScript的知识。这部分主要是梳理冷门的知识点(对个人来说是冷门的)组成ECMAScript(核心)：提供核心功能。每门语言的根本，大同小异，会有一些特殊的地方，比如JS有变量提升。DOM(文档对象模型)：提供与网页内容交互的方法和接口。主要就是操作DOM元素，包括样式修改、新增节点、删除节点等。BOM(浏览器对象模型)：提供与浏览器交互的方法和接口。比如 location对象可以获取或设置窗口的URL等。script元素首先，学习过
2022-05-19 21:17:32
573
2
原创 CSS布局(二)
CSS布局(二)等高布局等高布局，顾名思义，就是指子元素在父元素中高度相等的布局。开始之前，先看一个情境。html代码<main> <div class="left"> <p> 《绝园的暴风雨》（绝园のテンペスト）是城平京原作、左有秀构成、彩崎廉作画的日本漫画。 漫画单行本日文版由史克威尔艾尼克斯（SQUARE ENIX）出版发行，繁体中文版分别由中国台湾的尖端出版社和中国香港的玉皇朝代理发行 该作讲述了日本突然开
2022-05-18 20:09:27
661
1
原创 CSS布局(一)
CSS布局(一)看面试题，看到两个没听说过的布局圣杯布局、双飞翼布局。这就来学习一波CSS布局。单列布局只需要让header，footer充满整个屏幕，header的内容区、foooter的内容区，content设置一样的宽度，然后都设置 margin: 0 auto实现居中即可。<style> html, body { margin: 0; padding: 0; } header, footer { width: 100%;
2022-05-15 09:10:31
313
原创 var、let和const之间的区别
var、let和const之间的区别作用域不同 var是函数作用域， let、const是块级作用域函数作用域就是在函数中声明了 var变量，那么这个变量在整个函数里都是有效的。块级作用域则是在块里是有效的。块级作用域就是用{}包住的区域，常用的有for，while，if等，只是有 {}包住也是块级作用域{ var a = 111 let b = 222 const c = 333 console.log(a) // 111 console.log(b)// 2
2022-05-13 14:06:22
318
原创 重学预编译
重学预编译前言：原本打算彻底放弃CSDN，进军掘金的，但是看到陆续还有小伙伴关注，最后决定多花一点时间，同步更新。如果这篇文章对你有帮助，请不要吝啬你的赞。😃前情回顾参加掘金日新计划时，在群里看到的问题(改造了下)var a;if (true) { console.log(a) a = 111 function a() { } a = 222 console.log(a)}console.log(a)基础知识回顾变量提升实际上，变量的提升其实算是JS的诟病了
2022-05-12 20:30:10
247
2
原创 CSS画圆、三角形、品字、骰子
CSS画圆、三角形、品字、骰子前言：这篇文章主要是本人正在看面试题，面试题当成八股文来背，太难了。所以，通过写笔记，并自己实践来加深印象。如果这篇文章对你有帮助，请不要吝啬你的赞。圆让 border-radius属性的值等于盒子高度的一半就行(当然，盒子得是正方形才能得到圆，否则便不是圆)<style> .circle { width: 200px; height: 200px; border-radius: 50%; background-col
2022-04-04 14:26:45
442
原创 Vue源码之虚拟DOM和diff算法(二) 手写diff算法
Vue源码之虚拟DOM和diff算法(二) 手写diff算法个人练习结果仓库(持续更新)：Vue源码解析patch函数简要流程新旧节点不是同一个虚拟节点(新节点内容是 text)不做过多解释了，代码中已经把每一步都解释了src \ mysnabbdom \ patch.jsimport vnode from './vnode.js'import createElement from './createElement.js'export default function (oldV
2022-04-04 14:08:26
1009
1
原创 Vue源码之虚拟DOM和diff算法(一) 使用snabbdom
Vue源码之虚拟DOM和diff算法(一) 使用snabbdom什么是虚拟DOM和diff算法diff算法简介要把左图装修成右图的样子。(哪里不同？仔细找)有两种方案。方案一：拆掉重建(效率低，代价大)方案二：diff(精细化比对，最小量更新)怎么看都应该会选择方案二。那么在Vue中使用 diff的情景呢?上图就是在Vue中使用 diff的情景(比如左图中，有一些元素的 v-if为false，所以不显示，而右图中， v-if为 true)虚拟DOM简介虚拟DOM：用来描
2022-04-03 14:51:00
1112
原创 清除浮动的四种方式
清除浮动的四种方式浮动是什么CSS 的 Float（浮动），会使元素向左或向右移动，直到外边缘碰到包含框或另一个浮动元素位置。浮动元素的特征：浮动的元素会脱离文档流浮动的元素会紧挨在一起浮动元素具有类似行内块元素的特性。所以行内元素有了浮动，不再需要转换为块级或行内块级元素元素收缩。浮动的元素，如果没有设置width，会自动收缩为内容的宽度。比如块级盒子，如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，会收缩成内容的宽度<style> div[clas
2022-03-30 21:09:05
531
原创 居中对齐的几种方法
居中对齐的几种方法看面试题，自己总结了下，顺便写了对应例子，加深印象。水平居中给div设置一个宽度，再添加margin: 0 auto必须要添加宽度，只对块级元素有效<style> .container { width: 400px; height: 400px; background-color: pink; color: #fff; } .box { width: 100px; height: 100px; ba
2022-03-25 18:38:03
3096
原创 Vue源码之mustache模板引擎(一)
Vue源码之mustache模板引擎(一)个人练习结果仓库(持续更新)：Vue源码解析抽空把之前学的东西写成笔记。学习视频链接：【尚硅谷】Vue源码解析之mustache模板引擎模板引擎是什么模板引擎是将数据变为视图最优雅的解决方案。其中，Vue中的列表渲染指令v-for就是一种模板引擎。而**插值表达式{{}}**便是本次要研究的mustache模板引擎的语法将数据变为视图的方法纯DOM法很笨拙。需要频繁创建节点，添加数据，添加节点。const arr = [ { '
2022-03-24 18:37:07
1111
原创 自定义工具函数库(三)
自定义工具函数库(三)最终仓库：utils: 自定义工具库1. 自定义instanceof语法: myInstanceOf(obj, Type)功能: 判断obj是否是Type类型的实例实现: Type的原型对象是否是obj的原型链上的某个对象, 如果是返回true, 否则返回false之前的笔记：详解原型链// 自定义instanceoffunction myInstanceof(obj, fn) { let prototype = fn.prototype // 获取函数
2022-03-22 13:38:15
1266
原创 自定义工具函数库(二) 数组相关
自定义工具函数库(二) 数组相关最终仓库：utils: 自定义工具库以前的笔记：JS数组常用的方法1. 数组声明式系列方法1.1 map函数封装实现map()方法创建一个新数组，其结果是该数组中的每个元素各自调用一次提供的函数后的返回值循环，数组的每个元素都调用一次函数，并把每次循环得到的返回值都存好，循环结束后，把存好的数组返回。// map函数的封装实现function map(arr, callback) { let ret = [] for (let i = 0; i
2022-03-20 21:02:23
376
原创 自定义工具函数库(一) 函数相关
自定义工具函数库(一) 函数相关最终仓库：utils: 自定义工具库之前在哔哩哔哩看的视频的笔记。整理了一下。1.1 call 函数封装实现原理：为传入的obj添加临时方法，然后去调用这个临时方法，这样子，这个方法的this就会指向调用它的对象了，最后还需要把临时方法删除掉。// call函数封装实现function call(fn, obj, ...args) { if (obj === undefined || obj === null) { // 如果call
2022-03-19 11:39:23
794
原创 JavaScript实现继承的六种方式
JavaScript实现继承的六种方式父类function Person(name) { this.name = name this.say = function () { console.log('1 + 1 = 2') }}Person.prototype.listen = function () { console.log('エウテルペ')}1. 原型链继承将父类的实例作为子类的原型function Person(name) { this.name
2022-03-17 17:03:54
948
原创 详解原型与原型链
详解原型与原型链其实，刚开始学JavaScript时，就有学过原型与原型链的相关知识了，只是当时还没有养成写笔记的习惯，导致现在已经忘的七七八八了。这边文章真是花了很多心思，写了两天，看了很多篇篇博文，其中有小参考的，有解决一点疑惑的，但是最后只标注了一篇帮助最大的。构造函数实例的构造函数属性(constructor)指向其构造函数function Person(name) { this.name = name}const person = new Person('clz')cons
2022-03-16 18:05:16
4810
原创 Vue Router深入学习(二)
Vue Router深入学习(二)通过阅读文档，自己写一些demo来加深自己的理解。(主要针对Vue3)上一篇：Vue Router深入学习(一)1. 路由元信息
2022-03-15 16:41:19
2543
原创 详解JavaScript 执行机制
详解JavaScript 执行机制热身/* 先打印1， 3， 2s后打印2 */console.log(1)setTimeout(() => { console.log(2)}, 1000)console.log(3)/* 先打印1， 3， 后打印2 */console.log(1)setTimeout(() => { console.log(2)}, 0)console.log(3)第一个例子的话不难理解，定时器函数就是1s后才调用回调函数.而第二个例子
2022-03-14 12:27:14
1132
原创 CSS实现渐变字
CSS实现渐变字先来下前置知识。如果想速通，也可指直接到渐变字实现什么是渐变CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。渐变类型渐变主要有三种类型：线性渐变(linear-gradient)、径向渐变(radial-gradient)、圆
2022-03-13 11:49:12
10869
原创 Vue Router深入学习(一)
Vue Router深入学习(一)之前的笔记：Vue路由通过阅读文档，自己写一些demo来加深自己的理解。(主要针对Vue3)1. 动态路由匹配1.1 捕获所有路由(404路由)const routes = [// 将匹配所有内容并将其放在 `$route.params.pathMatch` 下{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },// 将匹配以 `/user-` 开头的所有内容，并将其放在
2022-03-12 11:38:38
817
原创 axios笔记(二) 深入了解axios
axios笔记(二) 使用及深入了解1. 介绍前端最流行的ajax请求库react / vue官方推荐使用axios发送ajax请求axios仓库2. axios特点基于promise的异步ajax请求库浏览器端 / node端都可以使用支持请求 / 响应拦截器支持请求取消请求 / 响应数据转换批量发送多个请求3. axios常用语法axios(config)：最本质的能发任何类型请求的方式axios.get(url, config)：发get请求ax
2022-03-10 23:24:38
251
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人