- 博客(100)
- 资源 (7)
- 收藏
- 关注
RSS订阅原创 IP地址组成
IP地址由四段组成，每个字段是一个字节，即4个字节、 每个字节有8位，最大值是255(=256：0~255)，是全世界范围是唯一的 32 位（4个字节 * 8位）的标识符。 IP地址由两部分组成，即网络地址和主机地址，二者是主从关系：1、网络号 net-id，它标志主机（或路由器）所连接到的网络，网络地址表示其属于互联网的哪一个网络2、主机号 host-id，它标志该主机（或路由器），主机地址表示其属于该网络中的哪一台主机。
2024-01-22 21:54:49
1511
原创 Chrome扩展之通信
由于inject-script和content-script内均可获取到原始页面的window对象，故可通过。双方通信直接发送的都是JSON对象，不是JSON字符串，所以无需解析，很方便（当然也可以直接发送字符串）一次性请求类似于HTTP请求，包含一次请求和一次返回，且如果接收方不在线，就会出现请求失败；该方法还可规避跨域的限制,可以在任意页面之间进行通信。扩展程序和web页面之间建立长连接，只需要从一端建立就可以了。，建立连接后会一直保持，双方可以随时互发消息。接口用于扩展间通信，与。
2024-01-22 21:45:37
1531
原创 vue组件间通信
vue2可以通过构造一个vue实例对象，通过调用vue.$emit派发事件，$on监听事件来实现兄弟组件的通讯，$off解除事件绑定。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。父组件可以通过props给子组件传递变量。子组件可以通过emit派发自定义事件，使父组件可以获得事件函数传递过来的形参。来获取子组件实例来获取子组件的属性和方法。获取子组件，从而获取子组件的属性和方法。parent来获取父组件的属性和方法。
2024-01-21 23:45:29
986
原创 vue组件扩展
结论: 1.mixins执行的顺序为mixins>mixinTwo>created(vue实例的生命周期钩子);2.选项中数据属性如data,methods,后面执行的回覆盖前面的,而生命周期钩子都会执行。结论: 1.extends执行顺序为:extends>mixins>mixinTwo>created 2.定义的属性覆盖规则和mixins一致。extends用法和mixins很相似,只不过接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件。
2024-01-21 23:43:47
572
原创 Vue2的双向数据绑定
Dep：订阅管理器，连接Observer和Watcher的桥梁，每一个Observer对应一个Dep，它内部维护一个数组，保存与该Observer相关的Watcher。Observer：观察者，这里的主要工作是递归地监听对象上的所有属性，在属性值改变的时候，触发相应的watcher。Watcher：订阅者，当监听的数据值修改时，执行响应的回调函数（Vue里面的更新模板内容）。
2024-01-20 21:09:00
502
原创 vue3数据劫持proxy
vue2利用Object.defineProperty来劫持data数据的getter和setter操作，遇到数组和对象必须循环遍历所有的域值才能劫持每一个属性。缺点：1、 无法检测到对象属性的新增或删除 ，需要使用 set 等其他方法。
2024-01-20 21:05:02
1097
原创 添加dns解析缓存
windows系统的hosts文件的位置如下：C:\Windows\System32\drivers\etc\hosts。mac/linux系统的hosts文件的位置如下：/etc/hosts。例如需要加速访问github.com，打开网站。最好把文件粘贴到桌面修改，在覆盖到对应文件夹。找到对应的IP地址在命令行Ping通。
2024-01-19 23:22:06
464
原创 vue和react的hooks
直译“钩子”，在程序中代表，系统运行在某一时期时，会调用注册在该时机的回调函数。例如浏览器提供的onload或addEventListener能注册在浏览器各种时机调用的方法。Hook。
2024-01-19 23:20:17
856
原创 v-if和v-for哪个优先级更高?
vue2输出的渲染函数是先执行循环，在看条件判断，如果将v-if和v-for写在一个标签内，哪怕只渲染列表中的一小部分，也要重新遍历整个列表，无形造成资源浪费。vue3中则相反，v-if优先级高于v-for，所以两者写在一个标签内，如果v-if使用了v-for循环出来的变量，则会有变量不存在的异常。1、通过compute返回过滤后的列表。2、避免渲染本应该被隐藏的列表。分开v-for和v-if。1、过滤列表中的项目。
2024-01-18 20:50:08
593
原创 vue中data和props的区别
在组件 initProps 方法的时候，会对props进行defineReactive操作，传入的第四个参数是自定义的set函数，该函数会在触发props的set方法时执行，当props修改了，就会运行这里传入的第四个参数，然后进行判断，如果不是root根组件，并且不是更新子组件，那么说明更新的是props，所以会警告。这种情况下，你是无法修改父组件的数据源的， 因为基础类型赋值时是值拷贝。，为了保证数据的单向流动，便于对数据的追踪，出现了错误可以更加迅速的定位到错误发生的位置。需要用户（开发者）传值。
2024-01-18 20:47:58
847
原创 原型和原型链
每个函数对象都有一个prototype 属性，这个属性指向的是该函数的原型对象。原型对象的属性不是实例对象自身的属性。当实例对象本身没有某个属性或方法的时候，它会到原型对象去寻找该属性或方法。这就是原型对象的特殊之处。如果实例对象自身就有某个属性或方法，它就不会再去原型对象寻找这个属性或方法。现在再来看一下什么是原型链，所有对象的原型最终都可以上溯到Object.prototype，这就是所有对象都有valueIf和toString方法的原因，因为这是从Object.prototype继承的。
2024-01-17 22:40:50
971
原创 try catch 能捕获到哪些 JS 异常
js线程执行进入了try catch，并在try catch未执行完前，抛出的异常都可以被捕获。js线程执行进入了try catch，发现a未定义，所以报错，此时满足条件，异常能被捕获。
2024-01-15 18:51:21
864
原创 this的指向
this是js中的关键字，是一个指针，总是指向调用它的对象，一般是函数被调用时才发生的绑定，没有明确的调用对象的时候，则默认绑定全局对象。
2024-01-15 18:50:01
1168
原创 Map、WeakMap和set、WeakSet
weakMap是一个键名只能为对象引用的键值对集合，键名对象的引用也只是弱引用，若外部没有这个对象的强引用，那么这个对象随时有可能会被垃圾回收，所以weakMap不可枚举，不可清空，也没有size属性。map是一个键名和键值可以是任意类型的键值对集合，它按照键值对的插入顺序来排列，如果给同一个键名插入键值，后者会覆盖前者。不重复的类数组集合，成员可以是任何类型并且是唯一的。不重复集合，成员只能是对象的引用，也属于弱引用，特性基本与weakMap相同。
2024-01-14 20:14:56
577
原创 event bus
实现一个观察者类Observer，具有on、emit、remove方法。WeakMap用于生成键值对的集合，与Map不同的是，WeakMap只接受对象作为键名。
2024-01-14 20:04:10
458
原创 Cookie的属性
Max-age也是Cookie的有效期，但它的单位为秒，即多少秒之后失效，若Max-age设置为0，则立刻失效，设置为负数，则在页面关闭时失效。Path是Cookie的有效路径，和Domain类似，也对子路径生效，如Cookie1和Cookie2的Domain均为a.com，但Path不同，Cookie1的Path为 /b/,而Cookie的Path为 /b/c/,则在a.com/b页面时只可以访问Cookie1，在a.com/b/c页面时，可访问Cookie1和Cookie2。
2024-01-13 20:57:00
961
原创 css垂直水平居中的几种实现方式
设置父元素的position为相对定位，子元素绝对定位，并在 top 和 left 方向上移动父元素50%的距离。但这个时候，是子元素的上边框和左边框距离父元素150px，整体向右下角偏了一些，所以还需要再用 margin 调整至中心位置，数值分别是高度和宽度的一半。同样是使用绝对定位，但四个方向的偏移量全都为0，之后设置 margin:auto 分配剩余空间，令元素的均匀拖拽至父元素的中心位置。在子元素上设置，transform: translate(-50%, -50%);
2024-01-13 20:55:32
984
原创 通过CSS实现渐变色边框
*缺点：**需要多嵌套一层父元素，并且还需要设置。这种方式虽然简单但有个明显的缺陷，不支持设置。，外框想设置成圆角需要加。优点: 内容背景可以透明。
2024-01-11 10:48:52
1293
原创 margin合并和塌陷
普通文档流中父子块级元素，如果父元素没有设置上内边距或上边框，子元素的上边距就会和父元素的上边距重合，以他们两个中间最大上边距为准，与距离他们最近的盒子隔开。普通文档流中块级元素的垂直外边距会互相合并，以他们之间外边距大的为准。/* 定位 + margin-top + margin-left *//* 定位 + margin-top + margin-left */1、设置父元素BFC，display 为inline-blocks。1、设置一方的外边距为两者原来预设外边距之和。
2024-01-11 10:43:26
466
原创 css三大特性
不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。创建的 DOM 动态生成的内容不受 scoped 样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式。想要覆盖组件库组件样式，实现我们自己的样式时，可以使用/deep/深度作用选择器。样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用。属性时，它的 CSS 只作用于当前组件中的元素。：中文或者字母之间的间距。
2024-01-10 22:32:12
472
原创 github生成ssh和git token
在cmd输入命令行：ssh-keygen -t rsa -C “你的邮箱”，输入后一路回车即可,即会生成你的ssh key。找到划红线的目录，打开文件并复制内容。添加到自己git中的SSH and GPG keys中。
2024-01-10 22:26:00
536
原创 重绘和回流
1、重绘Repaint：元素样式的改变2、回流Reflow：元素大小，位置的改变，触发了重新布局，导致渲染树重新计算布局和渲染第一次渲染页面的时候：触发一次回流和重绘。
2024-01-09 10:09:53
580
原创 git常用指令及应用案例
然后如果有冲突，解决冲突，然后重新commit，push到远程分支，这时远程仓库会多了一个commit，而原来想要撤销的那条commit记录还在，但是最终代码，也就是最新的commit，已经把不要的代码移除了，此时达到了我们的目的。在使用本命令后，本地的修改并不会消失，而是回到了如（一）所示的状态。继续用（一）中的操作，就可以放弃本地的修改。场景：自己self分支的代码想要合并到master主分支，但是有一个read.me文件与主分支的read.me文件不一样，但是又不想合并到read.me文件。
2024-01-09 10:03:17
1178
原创 Cross-Site-Request-Forgery
攻击者诱使用户访问一个包含恶意请求的网页，当用户浏览该网页时，该请求会利用用户在目标网站上的认证信息（如Cookies）来伪装用户进行操作。CSRF（Cross-site request forgery）是一种网络攻击方法，中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。看到这里，你也许会说：“如果我不满足以上两个条件中的一个，我就不会受到CSRF的攻击”。例如，我在自己的文章里放一段代码，接口假设是关注的GET接口。
2024-01-08 10:48:32
989
原创 http的tcp连接
如果只有两次握手，客户端第一次握手，发送报文时，延迟超时触发了客户端重发机制，使报文失效并重发一条新的报文，客户端只想建立一条tcp连接，而服务端接收到了延迟超时失效的报文和正常报文，无法区分，直接会建立两条tcp连接。3、客户端接收到了服务端的确认建立tcp连接报文，知道了服务端接收和发送信息正常，但此时服务端不知道客户端是否接收信息正常，为了让服务端确认客户端接收信息正常，发送第三次握手，告诉服务端，客服端接收到了服务端发起的确认建立tcp连接的报文。1、客户端第一次发起握手，请求建立tcp连接。
2024-01-08 09:46:26
653
原创 http缓存
未保证文件尽量是最新的，缓存时间一般不会太长，但是又不排除资源会很长时间才更新，因此引入资源的Last-Modified。在第一次请求拉取资源后，浏览器会存下每个资源请求响应的Last-Modified字段，在Expires过期后，浏览器发起请求重新拉取的资源，此时请求header会带上资源最新修改时间作为If-Modifies-Since属性的值，如果发现拉取资源的Last-Modified和If-Modifies-Since一样，便不再读取资源，让浏览器继续读缓存，又称协商缓存。
2024-01-07 22:01:12
811
原创 https
此时若有第三方自己生成了一对公钥私钥，在第二步把服务器给客户端的公钥拦截替换成第三方的公钥，此时在第三步客户端就会使用第三方的公钥加密对称加密密钥，在返回密钥给服务器时，第三方又拦截了，用自己的私钥就可以解析出数据，再用之前拦截的服务器公钥进行加密还给服务器。然后在服务器配置好CA证书，每次请求就会把CA证书返回给客户端。3、客户端收到数字证书，把浏览器中内置的CA公钥校验证书合法性，并解析出服务端公钥，客户端随机生产了对称加密的密钥，用服务器公钥加密后发送服务端。2、服务端返回公钥给客户端。
2024-01-07 21:59:21
572
原创 http1.0、http1.1、http2.0
4、缓存通过expires、if-modifies-since、last-modifies，expires是绝对时间，对比本地时间是否过去，但本地时间是可修改的，last-modifies是文件最后修改时间，如果内容没变，最后修改时间变了，也会重新拉去文件。1、每次请求都会和服务器建立一个tcp连接，完成请求后就立即断开tcp连接、请求回来的页面文件如果包含img、js、css，会在此后再次请求。4、服务器推送，请求的页面中的img、js、css会缓存在服务器上，会直接取缓存不需要再次发送request。
2024-01-06 23:12:19
569
原创 image之间的间隙、button和input之间的间隙
块级元素包含内联元素如图片文字等时，内联元素默认是和父级元素的baseline（基线）对齐的，而baseline又和父级元素底边有一定的距离（这个距离和font有关，不一定是5px），所以不同div之间有间隙，这是因为图片与父元素的底边有距离。但这也引发了新的问题，在父对像中的文字都无法显示。就算文字部分被子对像括起来，设置子对像文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。内联元素是当做字体来处理的，字体之间是存在间隔的，所以内联元素之间也会有间隔。
2024-01-06 22:47:44
415
原创 JS的垃圾回收机制
把回收任务分成一小步一小步的，执行完一小步再把主线程交给js，这样交替增量执行完一次标记任务，但可能会出现执行任务程序时内存中标记好的对象引用关系被修改的问题，所以需要引入。JS的垃圾回收机制都是由js引擎实现的，大部分浏览器都有自己的js引擎，所以各自实现的垃圾回收机制都略有不同。），随后清理使用区剩余未标记的垃圾，此时使用区变成空闲区，空闲区变成使用区。在内存充足情况先优先执行js代码，主线程空闲时才清理垃圾，无需一次去清理完未标记的对象，逐一清理，配合增量标记使用。2、循环引用无法回收。
2024-01-05 10:39:27
1190
原创 whistle+SwitchyOmega前端api代理调试
whistle官网whistle主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器，功能很强大。
2024-01-04 10:01:42
638
原创 字符集编码
字符集说明ASCII美国信息交换标准代码, 包含字母、数字和一些特殊符号GB2312收录了汉字以及拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母。其中收录汉字6763个，其他文字符号682个。BIG5又称大五码或五大码，宏碁(Acer)、神通(MiTAC)、佳佳、零壹 (Zero One)、大众 (FIC)创立，故称大五码。是台湾发明的，繁体字符集。GBKGBK字符集就是在GB2312的基础上，对它收录的字符做了一个扩充，共收录21886。
2024-01-03 10:29:17
969
原创 V8引擎-隐藏类
虽然创建时的对象属性一样，但是它们初始化的顺序不一样，这也会导致形状不同，所以它们会有不同的隐藏类，所以我们要尽量避免这种情况。2，尽量一次性使用字面量初始化对象的属性，避免重复添加属性。3，避免使用delete方法，因为它破坏了对象的形状，导致重新生成隐藏类。
2024-01-02 09:58:40
964
原创 V8提升对象属性访问速度---快属性和慢属性
在 JavaScript 中，对象就像一个字典，可以使用字符串作为键名，任意对象作为键值。早期的实现方式是使用字典来存储对象的属性。字典是非线性的数据结构，查询效率会低于线性的数据结构，为了提高存储和查找的效率，V8 采用了一套复杂的存储策略。它将对象的属性分为常规属性（properties）和排序属性（elements）。
2023-12-29 11:34:59
974
原创 typora免费使用
第三步：在Typora上点右键，点权限选项，选择Administrtors，再把底下权限全部设置为拒绝即可。第一步：按Windows+R打开运行窗口，在输入框输入regedit，打开注册表管理器。计算机\HKEY_CURRENT_USER\Software\Typora。第二步：打开注册表，按以下路径展开。必须选择Administrtors。
2023-12-28 17:00:36
504
mooc-master.zip
2019-09-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人