- 博客(223)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 Vue原理-双向绑定
组件化基础数据驱动视图MVVMVue响应式proxyobject.defineproperyt双向绑定的实现准备data：监听对象属性：重新定义属性，监听：触发更新：object.definePrototype的缺点监听数组变化由于object.defineprototype无法监听数组重新定义数组原型当这个类型是数组是抓取重新操作：...
2021-08-22 17:34:12
78
原创 Vue基础知识-高级特性使用
vue高级特性自定义v-model子组件：父组件：$nextTick界面更新了 但是异步渲染导致获取的childNode长度是上一次的长度更新之后获取则长度正常了slotslot基本使用父组件子组件：作用域插槽（父组件使用子组件的内容）父组件：子组件：具名插槽父组件：子组件：动态组件然后记得在data中创建nexttickname变量来接收组件的名称异步组件keep-alive同时还有一个白名单一个黑名单一个自己的生命周期m
2021-08-21 20:01:18
95
原创 Vue基础知识-基础使用
computed与和watchcomputed与watch的区别computed：computed的缓存是指 data不变就不会重新计算computed一个v-model的值需要get和setwatch：监听引用类型要深度监听（deep：true）拿不到oldVal问题（指针都是指向一个地址，所以拿不到。oldVal和val一样）class和style动态使用class：style注意是驼峰写法：条件渲染v-show为display：nonev-if只有一个节点循环
2021-08-21 15:58:20
124
原创 浏览器的缓存机制
逻辑图缓存位置Service WorkerService Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。首先需要先注册 Service Worker，然后监听到 install 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。当 Service Worker 没有命中缓存的时候，我们需要去调用 fetch
2021-07-15 15:53:21
126
1
原创 javaScript-你不知道的类
类语法的定义基础就是对原型的操作声明和java差不多 class User { constructor(name) { this.name = name; } getName() { return this.name; } } let hd = new User("123"); console.log(hd.getName());类的内部工作机制就是原型操作类就是构造函数的语法糖实质为操作prototype而已对象属性的声
2021-07-06 21:08:41
213
4
原创 javaScript-原型链
什么是原型你没车，你爸有车，你借着开就是原型有些对象可以没有原型（Object.create(null,{})）如上创建的方法都没有据说Vue中创建对象都是这么创建的原型链调用方式a.__ proto __（当函数当作对象调用时）：自己用的b.prototype(函数实例化出来之后自动给新创建对象指定原型)：用来给别人的只有函数有简而言之，第一个是自己本身的，第二个是当他作为构造函数时候用的向军大叔的图：这里很重要所以自己跑一下demo let ABC = function
2021-07-01 22:11:15
318
1
原创 javaScript-对象
面向对象编程 let user = { name: "小孙吗", grade: [ { name: "js", score: 99 }, { name: "docker", score: 76 } ], average() { let total = this.grade.reduce((t, l) => t + l.score, 0); return `${this.name}的平均成绩是: ${total / th
2021-06-19 22:49:18
183
1
原创 javaScript-宏任务与微任务/事件轮询
宏任务与微任务javaScript是单线程语言（如果多线程dom会疯掉）所以在同一时间只能执行一个任务，称为主线程，用来执行同步任务同时还有两个任务列表用于存放异步任务，宏任务、微任务执行顺序为：主线程=>微任务=>宏任务有关定时器定时器模块⏲，到达时间点将其放入宏任务队列如果主线程没有任务则执行，如果有则等待执行完成后再继续执行如果有两个相同时间的定时器则上面的先执行下面的后执行如果两个时间不同的定时器则时间短的先执行时间长的后执行注意点：定时器的⏲是在定时器模
2021-06-14 21:45:21
5828
13
原创 javaScript-闭包与作用域
环境与作用域全局环境不会被回收任何位置都可以访问全局环境函数的作用域和环境函数执行后会每一次都会创建一块新的作用域父级函数可以访问子函数作用域延伸函数环境生命周期只要有人在用，环境就不会被清空，所以可以采用复制的方式 function sam() { let n = 1; return function sum(){ console.log(++n); }; // sum(); }; let sss
2021-06-13 17:15:48
174
3
原创 javaScript-函数
全局函数函数直接声明/用var声明会放到全局作用域中let声明不会放全局作用域中建议不要直接使用函数，将函数放在类/模块中再进行使用函数也可以提升（但仅限于匿名函数）立即执行函数与函数作用域冲突（function（参数）{}）（参数）—可以解决命名冲突问题{}也可以解决要记得函数默认值使用技巧函数一般可以接受任何参数，也可以作为参数arguments是函数接收的所有参数集合之前解析参数function(){[…arguments]}现在解析参数function（…a
2021-06-08 22:30:00
127
原创 vue的深度监听（对象数组同理）
昨天在做项目时遇到了一个问题在Vue中监听obj.name时新增了一个属性 但是发现属性并没有变化后来查询了官方文档发现Vue不允许动态添加prototype来执行深度监听如下：<template> <div class="about"> <h1>{{dataList.name}}</h1> <h1>{{dataList.id}}</h1> <h1>{{dataList.type}}&l
2021-04-13 14:11:58
372
原创 var let const（原创，精简）
语法方面需要注意：1.区分大小写2.每句后面加分号在某些情况下会提升性能（解析器会在合适的地方自动补分号来尝试修改错误）3.if的{}如果只有一句可以省略 单并不美观变量var需要注意的1.如果没有初始化会自动保存一个undefined2.将一个数字类型赋值成对象这样是不推荐但是有效的3.var是再一个函数中生效（函数退出失效）（函数外无效）4.函数内直接声明类似于直接声明一个全局变量5.一条语句同时定义多个变量中间用逗号隔开var a =1,b = 2, c = 36.var 存
2021-01-25 22:18:54
184
2
原创 前端单位的解读和换算px/%/em/rem/vh/vm/vim/vmax
px像素 固定单位%相对单位 相对于最近的父元素emem：大小相对于font-size例：font-size=100 10em =1000默认 1em=16px，自己有字号大小就相对于自己如果没有就往上找由于fontsize经常发生改动 所以项目中并不常用rem（root em）rem：相对于根元素（html）的字号大小默认 1rem=16px，依旧相对于像素所以需要找一个根据用户界面可变的单位vw（viewport width）vw：视口宽度，相对于窗口（视口）满屏
2020-11-06 17:35:34
2382
1
原创 前端角度解决跨域的三种方法（CORS、JSONP、接口代理）
跨域的概念：同源策略是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器 都会使用这个策略。所谓同源指的是：协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。①、http://www.123.com/index.html 调用 http://www.123.com/welcome.jsp 协议、域名、端口号都相同，同源。②、https://www.123.com/i
2020-11-02 20:57:05
3076
原创 搞定前端面试官-Vue的生命周期（包过）
生命周期概念：从创建到销毁的整个过程经历：开始创建、初始化数据、编译模板、挂载Dom、渲染、更新渲染、销毁。每一个组件或者实例都会经历一个完整的生命周期：初始化、运行中、销毁 。正餐：（为方便阅读已对重点进行加粗处理）1.实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作2.挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使
2020-10-15 14:06:33
528
原创 搞定前端面试官-Promise
promise特点1.所谓 Promise ，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。2.对象的状态不受外界影响。 Promise 对象代表一个异步操作，有三种状态： pending （进行中）、 fulfilled （已成功）和 rejected （已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。3.一旦状态改变，就不会再变，任何时候都可以得到这个结果。变成成功或者失败只要这两种情况发生，状态就凝固了，不会再变了，
2020-10-12 10:23:29
221
原创 小白前端开发笔记-前端面试必备--元素的水平垂直居中（超级全）
元素水平垂直居中本文对元素的水平垂直居中通过两方面来呈现，每一方面又分为元素宽高已知和未知，以上代码均通过测试，可直接使用，如有缺陷欢迎指正！相对于父元素（宽高已知）1.1 margin硬挤<style> .a1; border: 1px solid red;{ width: 600px; height: 600px solid red; } .a2 {
2020-08-31 16:57:50
227
原创 小白前端开发笔记-CSS清除浮动的8种方法原理及其优缺点（解决父元素塌陷的8种方法）
父元素塌陷：指父元素没有设置高度，子元素浮动后进入新的层级，父元素无法识别（找不到自己的孩子），故高度为0，解决办法如下。1.父级div定义height（不推荐）原理：手动定义height 即使无法识别子元素也仍有高度。优点：便于理解，代码量少。缺点：仅适合高度固定的布局，若高度与父元素不同则会产生问题。2.结尾处加空div标签 之后clear：both（不推荐）<style type="text/css"> .div1{background:#000080;border:1px
2020-08-19 10:54:59
324
原创 小白前端开发笔记-（行内元素、块级元素、行内块元素、之间的区别与特点）
小白前端开发笔记-（行内元素、块级元素、行内块元素、之间的区别与特点）行内元素(inline-level) 行内元素又称内联元素，不能独占一块区域，根据自身内容（文字/图片）大小来确定自身区域大小。所以通常不能设置宽高、对齐等属性，通常用于 控制页面文本内容。 **特点** 1.总是和相邻的行内元素从左到右排成一排。 2.设置宽高无效。水平方向的padding、margin可以设置但垂直方向的设置无效。*（想要垂直方向居中：内容大小=所在区域大小即可）* 3.默认宽度是其自身内容的宽度
2020-08-09 16:47:29
575
4
原创 JS中的定型数组与视图
定型数组了解定型数组前先复习一下基础知识：1byte（又称为字节） = 8bit(又称为比特、位)1kb = 1024byte;前言之所以要使用定型数组主要是因为WebGL的需求 因此在ES6中引入定型数组来解决这个问题，并提供更高性能的算术运算。所谓定型数组，就是将任何数字转换为一个包含数字比特的数组，随后就可以通过我们熟悉的JS数组方法来进一步处理用人话说就是 js存储数字是以64位浮点格式存储，而一个字节仅需要8位 所以浪费太多了 新弄出来一个数据类型叫定型数组 这个数组可以存储数据
2022-05-17 19:25:33
461
原创 ES-Module
简单来说就是浏览器及node.js不借助webpack等打包直接引用依赖包的方式Snowpack 、Vite 为代表的 bundless（随着用户使用加载） 都是使用浏览器的ESM功能使用方式(浏览器)script 标签上加 type=“module” 即可<script type="module">import { logger } from "./utils.js";logger("2333");</script>使用方式(node)-未尝试方法一：将文件
2022-05-05 22:20:46
138
原创 vscode+prettier配置保存自动格式化
安装prettier插件（应用商店中直接下载即可）-如图版本及以后均可 之前的版本不清楚可行否开始配置第一步，先打开vscode软件，左下角点击设置 》打开设置》唤出快速搜索条界面。第二步，接下来先设定自动保存文件，搜索框贴入files.autoSave筛出设置项，并把设置项属性选择为onFocuschange。第三步，设定编辑器默认代码格式化（美化）的插件为Prettier，同理在搜索设置框贴入editor.defaultFormatter，将配置项选择为Prettier。第四步，设定Pre.
2022-01-17 10:19:50
8389
原创 有关vite的别名配置后找不到模块的问题
下午折腾了下vite 到配置别名这里就一直过不去 报找不到import { defineConfig } from "vite";import path from "path";import vue from "@vitejs/plugin-vue";// https://vitejs.dev/config/export default defineConfig({ resolve: { alias: { "@": path.resolve(__dirname, "src
2022-01-16 16:17:06
3460
1
原创 如何打包浏览器的扩展程序
一、找到扩展程序安装位置输入chrome://version/找到安装位置如下：二、打包打包后crx文件即为打包好的文件加载点击加载程序将打包好的程序后缀改成XXX.rar然后解压 将文件夹导入即可...
2022-01-04 21:55:05
1106
原创 右键打开vscode（将vscode添加到注册表中）
由于在安装时没有勾选添加到注册表中 所以需要手动添加创建一个文件（什么都可以比如txt） 复制如下代码到文件中的内容网上已经有很多类似的介绍主要修改的就是在等号后面的内容比如我的安装就是C:\\Users\\SAM\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe对照着把你的地址替换掉即可Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\shell\VSCode]@
2021-12-26 12:16:55
1720
原创 CSS盒模型
CSS盒模型标准盒模型：宽高只包含元素的内容不包含padding border等怪异盒模型：宽高不光包含元素的内容还包含padding以及border部分
2021-12-21 21:16:20
111
原创 左侧固定，右侧自适应如何来写
左侧固定，右侧自适应如何来写利用BFC之方法由于在BFC中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此。创建了BFC的元素不能与浮动元素重叠。且当容器有足够的剩余空间容纳BFC的宽度时，所有浏览器都会将BFC放置在浮动元素所在行的剩余空间内。利用这些特性，就可以达到效果。.left{ float: left; width: 200px; height: 200px; back
2021-12-21 21:15:30
70
原创 有了async为什么还要promise
今天突然想到了一个面试问题，有了async为什么还要promise处理异步请求，当时想的答案是，promise是将任务异步处理，而async和await是将异步任务趋于同步任务，但是并不知道其原理，考虑了一下，大概有如下想法。原代码// wait() 是一个返回 promise 的函数async function test1 () { console.log(111) await wait(500) console.log(222) await wait(1000) console
2021-12-20 22:01:51
243
原创 Vue原理-vuex
Vuex原理store注入组件install方法Vue.use(Vuex); // vue的插件机制,安装vuex插件当ues(Vuex)时候，会调用vuex中的install方法，装在vuex!下面时install的核心源码：Vue.mixin({ beforeCreate() { if (this.$options && this.$options.store) { //找到根组件 main 上面挂一个$
2021-12-20 11:51:50
119
原创 flex易忘部分
flex-grow属性flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。flex-shrink属性flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shr
2021-12-19 21:53:52
82
原创 http和https
Http与Https的基本概念和他们的区别http的中文叫做超文本传输协议,它负责完成客户端到服务端的一系列操作,是专门用来传输注入HTML的超媒体文档等web内容的协议,它是基于传输层的TCP协议的应用层协议https:https是基于安全套接字的http协议,也可以理解为是http+ssl/tls(数字证书)的组合http和https的区别:HTTP 的 URL 以 http:// 开头，而 HTTPS 的 URL 以 https:// 开头HTTP 是不安全的，而 HTTPS 是安全的HT
2021-12-19 21:48:57
100
原创 父子组件传值的多种方法
props、emitparent和parent和parent和children获取父子组件参数$children[i].paramsthis.$parent.params兄弟之间传值===Vuex兄弟之间传值===eventBusprovide inject(用于层级很深的父子组件传参)//父组件示例<template> <div> <childCom></childCom> </div></templa
2021-12-19 19:05:29
349
原创 BFC是什么
什么是BFCBFC：块级格式化上下文（Block Formatting Context），是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者是一个独立的容器；可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。触发BFC的方式float不为noneposition：absolute、fixedoverflow部位visibledisplay：table-cell、inline-block所解决的问题父子组件margin重叠（给父元素属性
2021-12-19 18:43:49
79
原创 事件流是什么
事件流分为事件冒泡和事件捕获。事件流：就是事件的流向，先捕获，再到事件源，最后再冒泡，一共分三个阶段：捕获阶段，事件源，冒泡阶段。从上至下再出来事件冒泡：从事件源朝父级一直到根元素（HTML）。当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上；从具体的元素到不确定的元素。事件捕获：从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根元素的同类型事件，朝子一级触发，一直触发到事件源。...
2021-12-19 17:29:49
1817
原创 HTTP1.0和HTTP1.1和HTTP2.0的区别
HTTP1.0和HTTP1.1和HTTP2.0的区别http1.1》http1.0长连接(支持长连接无需每次都要重新创建链接)节约带宽（post请求先发送header 只有在返回100后才会重新请求）缓存处理（新增协商缓存）错误通知的管理（新增错误码）http2.0》http1.1多路复用（处理并发请求）头部数据压缩（压缩头部大小）服务器推送(允许服务器推送，有效利用空域网络资源)...
2021-12-19 17:23:04
63
js编写京东双十一抢货
2020-10-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人