- 博客(54)
- 收藏
- 关注
RSS订阅原创 package-lock.json文件详解
在执行npm install下载包的时候，我们会发现目录中会出现package.json和package-lock.json文件，刚好最近我也在研究package的一些东西，对lock文件里的一些字段有点生疏了，写篇文章记录一下lock文件的一些知识。
2023-05-17 18:49:01
4784
原创 Vue3响应系统的实现（二）
继上一篇文章，我们已经能够实现一个简单的响应系统了，但是仍然存在很多缺陷，本篇文章将具体叙述一下存在的缺陷以及如何解决，最后实现一个较为完善的响应式系统。
2022-11-16 18:09:45
607
原创 Vue3响应系统的实现（一）
所谓副作用函数指的是会产生副作用的函数：函数的执行会直接或间接影响其他函数的执行，换句话说就是当函数调用的时候会对外部产生影响let val=1//全局变量val=2//修改全局变量，产生副作用}上面的代码中，在effect函数里对全局变量val进行了修改，如果之后有其他函数也用到了该全局变量，那么用的是修改后的值。通过这种方式就影响了其他函数执行的结果比如，一个函数foo返回值是val的平方，那么foo函数在effect函数执行前执行得到的结果是1，而在effect函数执行后执行的结果为4。
2022-11-07 14:52:56
471
原创 JS实现数组去重的八种方法（实用）
js数组去重是比较常见的数组操作方式之一，网上有很多关于数组去重的博客文章，方法各式各样，但有些方法实用性很差，很容易造成不必要的麻烦，所以我们需要去其糟粕取其精华，下面我们就整理一些比较实用的数组去重方法。
2022-11-06 20:50:44
10836
原创 JS手写ES6的Object.create方法
Object.create() 方法用于创建一个新对象，使用现有的对象来作为新创建对象的原型（prototype）。Object.defineProperties()方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。Object.create 返回值：一个新对象，带着指定的原型对象及其属性。很多框架源码作者使用它来初始化一个新的对象，难道是最佳实践？通过Object.create(null)创建出来的对象，没有任何属性，显示No properties。
2022-10-31 18:33:16
623
原创 JS手写数组扁平化（flat）方法
数组扁平化方法也叫数组拍平、数组拉平、数组降维。Array.prototype.flat() 用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。
2022-10-31 18:05:08
6050
原创 JS之instanceof方法手写
语法：objectobject：某个实例对象constructor：某个构造函数简言之就是用来检测 constructor.prototype 是否存在于参数 object 的原型链上。，或则说左侧对象能否通过其隐式原型 **[[proto]]**在原型链上一层层向上查找到右侧函数的原型对象，即函数原型对象出现在实例对象的原型链上就返回 true。
2022-10-30 18:48:19
579
原创 Vue中过滤器定义及使用
vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变）过滤器分全局过滤器和局部过滤器，全局过滤器在项目中使用频率很高，要掌握过滤器可以用在两个地方：双花括号插值 或 v-bind表达式。
2022-10-29 17:59:10
354
原创 Vue中的混入mixin使用方法介绍
数据对象进行合并，其中的基本数据类型在和组件的数据发生冲突时以组件数据优先，组件中的数据会覆盖混入对象的数据。数据对象中如果有引用数据类型，引用数据类型会进行深参差的递归合并。生命周期钩子函数混合为一个数组，当使用组件时，组件的函数和混和的函数都执行，混入中的函数会先执行，组件的函数后执行。值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。一般混入都是在单组件内应用比较合适也可以进行全局注册。
2022-10-28 13:20:09
1823
原创 Vue实现组件间通信的七种方式
子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。
2022-10-27 13:46:34
6477
原创 Vue指令v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。如果只想页面加载时显示一次，后续不在因为数据信息的变动而变动时，就可以采取v-once实现。很有意思，当你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加v-onceattribute 以确保这些内容只计算一次然后缓存起来，这样就大大减小了性能开销。`})但是不要过度使用这个模式，尤其是该组件在未来有可能要进行数据更新的情况下不要使用；
2022-10-26 16:26:09
679
原创 浏览器本地存储的四种方式
localStorage的存储都是字符串，如果是存储对象，那么在存储时就需要调用JSON的stringify方法，并且在取值时用JSON.parse来解析成对象。来进行存储，但是当数据量较大，或符合一定的规范时，我们可以使用indexedDB数据库来进行数据的存储，indexedDB数据库存储理论上没有大小的限制。HTTP是一个无状态的协议，客户端向服务器发送请求，服务器返回响应，但是下一次发送请求时服务端就无法识别客户端的身份信息，故而产生了Cookie。
2022-10-25 19:43:13
7284
原创 HTTP2.0主要改动
HTTP2.0作为新版协议，改动细节必然很多，不过对应用开发者和服务提供商来说，影响较大的就几点。http1.x诞生的时候是明文协议，其格式由三部分组成：start line（request line或者status line），header，body。要识别这3部分就要做协议解析，http1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑http2.0的协议解析决定采用二进制格式，实现方便且健壮。
2022-10-24 17:56:22
1169
原创 JS原型之属性设置和屏蔽，你能想到吗？
如果属性名foo既出现在my0bject中也出现在my0bject的[[Prototype]]链上层，那么就会发生屏蔽。my0bject中包含的foo属性会屏蔽原型链上层的所有foo属性，因为myObject.foo总是会选择原型链中最底层的foo属性
2022-10-22 12:18:51
344
原创 字符串方法汇总（全面）
lastIndexOf()方法对大小写敏感，如果子字符串没有找到，返回-1。第二个参数表示从哪个下标开始查找，没有写则默认从最后一个字符处开始查找（从后往前找）。indexOf()方法对大小写敏感，如果子字符串没有找到，返回-1。第二个参数表示从哪个下标开始查找，没有写则默认从下标0开始查找。：如果index不在0-str.length(不包含str.length)之间，返回NaN。注意：如果没有指定length,返回从下标开始处结尾处的所有字符串。
2022-10-21 14:43:02
621
原创 JS原型之属性设置和屏蔽，你能想到吗？
如果属性名foo既出现在my0bject中也出现在my0bject的[[Prototype]]链上层，那么就会发生屏蔽。my0bject中包含的foo属性会屏蔽原型链上层的所有foo属性，因为myObject.foo总是会选择原型链中最底层的foo属性
2022-10-21 11:49:07
355
原创 JS获取对象属性API汇总（可/不可枚举、symbol）（建议收藏）
对象的每个属性都有一个描述对象（Descriptor），用来控制该属性的行为。方法可以获取该属性的描述对象。描述对象的enumerable属性，称为“可枚举性”，如果该属性为false，就表示某些操作会忽略当前属性。目前，有四个操作会忽略enumerable为false的属性。
2022-10-21 10:38:49
684
原创 深入了解JS中for...in和for...of的区别
无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。for...in语句以原始插入顺序迭代对象的可枚举属性。for...of语句遍历可迭代对象定义要迭代的数据（内建的可迭代对象定义要迭代的数据为键值，这个可迭代对象可以自己更改，不过如非必要最好不要这么做）。
2022-10-20 14:29:30
7834
原创 你了解浏览器原理吗？说说浏览器解析html的过程
html文件在没有写入html标签之前和txt文本是一个性质的，不含任何样式。只是单纯的文本预览文件。一旦加入了html标签，表示内容有了语义！浏览器的渲染引擎才会根据标签的语义开始解析。
2022-10-19 10:14:29
1943
原创 聊聊浏览器的标准模式和怪异模式
对于DOCTYPE这个词，相信大家都不陌生。。。在很久很久以前,那时候HTML和CSS还没有一个统一的标准,出现的现象就是,我用我的标准,你用你的标准,这导致了各家浏览器对于解析HTML和CSS的方式有很大的差别。
2022-10-18 20:21:32
1361
原创 从0到1了解同源策略
同源策略（same origin policy）是netScape（网景）提出的一个安全策略，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。具体表现为浏览器在执行脚本前，会判断脚本是否与打开的网页是同源的，判断协议、域名、端口是否都相同，相同则表示同源。其中一项不相同就表示跨域访问。会在控制台报一个CORS异常，目的是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出请求后请求回来的数据接收。
2022-10-18 19:24:32
698
原创 JavaScript事件循环剖析
现在我们对事件循环有了深入了解了，但是它们的执行过程还不是很清晰，我们再把执行过程弄清楚了以后就能游刃有余了。
2022-10-17 21:22:48
310
1
原创 你了解浏览器原理吗？浏览器的缓存机制及缓存策略是什么？
在前端开发中，我们追求性能和用户体验。对于一个网站，查看性能最简单的方式就是打开网站的速度。而一个好的缓存策略可以大大提升网站的性能，使得已经下载后的资源被重复利用，减少客户端和服务器之间的请求次数，减少带宽，减少网络负荷。缓存可以说是性能优化中简单高效的一种优化方式了。对于一个数据请求来说，可以分为三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。
2022-10-16 18:54:21
1207
原创 JavaScript之DOM常用属性及方法详解
自定义属性目的∶是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute ('属性〉获取。element.getAttribute('属性')//自己定义的element.setAttribute('属性','值')//主要针对自定义属性移除属性:removeAttribute('属性')但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性设置H5自定义属性。
2022-10-14 14:49:02
1959
原创 浏览器对象模型（BOM）常用属性及方法
概述：提供了而与的对象，其核心对象是window不像DOM那样是W3C的标准规范，兼容性较差，window包含document, location, navigation,screen, history，frames。
2022-10-13 16:26:58
621
原创 前端如何判断浏览器类型及版本？
在网站前端开发中，浏览器兼容性问题让我们手忙脚乱，浏览器兼容性是前端开发框架要解决的第一个问题，要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。JavaScript是前端开发的主要语言，我们可以通过编写JavaScript程序来判断浏览器的类型及版本。
2022-10-12 23:08:44
4124
原创 JavaScript核心技术之Ajax详解
Ajax 的核心是 XMLHttpRequest 对象。所有现代浏览器都支持 XMLHttpRequest 对象。XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。首先我们在控制台打印一下，看看。
2022-10-10 14:18:22
1192
原创 JavaScript核心技术之JSON详解
JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。它基于 ECMAScript（European Computer Manufacturers Association, 欧洲计算机协会制定的js规范）的一个子集，采用的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
2022-10-09 17:18:52
12206
原创 HTTP之Cookie详解
管理服务器与客户端之间状态的 Cookie ，虽然没有被编入标准化 HTTP /1.1的RFC2616中，但在 Web 网站方面得到了广泛的应用。。Web 网站为了管理用户的状态会通过 Web 浏览器，把一些数据临时写入用户的计算机内。接着当用户访问该 Web 网站时，可通过通信方式取回之前存放的 Cookie。调用 Cookie 时，由于可校验 Cookie 的有效期，以及发送方的域、路径、协议等信息，所以正规发布的 Cookie 内的数据不会因来目其他 Web 站点和攻击者的攻击们泄露。
2022-10-07 21:08:10
490
原创 充分了解Web语义化
如今互联网都到了web2.0的时代了，HTML语言在不断的进化并发挥着越来越重要的地位；而我们制作网页也从当初的table表格嵌套发展到了 div+css，这是进步的标志。然而，我们似乎看到了一个不太好的现象：整个网页大量的使用div标签进行分隔页面内容，有的甚至整个页面只有div一 种html标签存在。这种现象(使用习惯)非常的不好，滥用div现象使得网页制作似乎就只剩下了div。Web语义化，其实是伴随着Web前端的不断发展和完善，进而提出的概念。
2022-10-04 19:41:06
916
原创 前端如何处理跨域问题
postMessage是h5引入的一个新概念，现在也在进一步的推广和发展中，他进行了一系列的封装，我们可以通过window.postMessage的方式进行使用，并可以监听其发送的消息；
2022-09-30 14:53:28
9009
原创 http状态码说明（全）
当用户访问一个网页时，用户的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server）用以响应浏览器的请求。HTTP状态码的英文为HTTP Status Code。
2022-09-29 13:36:33
781
1
原创 如何使用JS拦截并禁止用户复制、剪切、粘贴、鼠标右键（含破解方法）
想必大家经常会遇到这样的需求，禁止用户复制、剪切、另存为、鼠标右键的操作等。今天一篇文章学会拦截并禁止用户特定操作及破解方法。正所谓道高一尺魔高一丈啊能禁止也能破解。
2022-09-28 17:35:43
8897
原创 JavaScript语言这独特的继承方式你都了解吗？
在这里我们可以看到 new 了一个空对象,这个空对象指向 Animal 并且 Cat.prototype 指向了这个空对象，这种就是基于原型链的继承。
2022-09-28 09:51:55
269
原创 cookie、session、token你都知道吗？（强烈推荐）
cookie、session、token是我们前端用于与后端通信的手段之一，了解他们对我们的帮助极大，强烈建议一定要认真看完。http协议是无状态协议，cookie、、token可以帮助服务器区分到底是谁在访问。
2022-09-27 12:34:28
467
原创 JS之location对象详解
location指示了其所连接对象的url位置。和对象中都有location属性，可以通过window.location和document.location访问。如果想要获得当前文档的完整url字符串，有四种方式以上方式均可以获得“”这样的字符串location在控制台输出结果为：（Chrome浏览器）
2022-09-26 17:54:11
7779
原创 原生JS之sort排序方法详解
sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字典升序。在不使用参数时，sort使用的是字典排序。字典序，又称 字母序，原意是表示英文单词在字典中的先后顺序，在计算机领域中扩展成两个任意字符串的大小关系。
2022-09-25 11:48:42
1431
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人