javascript
A丶Pure
这个作者很懒,什么都没留下…
展开
-
Vue3底层响应式原理 二 代理Object
上节说完了响应式系统怎么实现的一些基本远离,并且也实现了一个最基本的响应式系统,接下来就研究一下Vue3中的非基本类型是怎么实现其响应式的。包括如何拦截Object中的in以及for in 操作。还有如何对数组进行代理,对集合类型(Map、Set、WeakMap、WeakSet等)如何进行代理。我们先来讨论对Object的拦截。原创 2022-08-21 16:46:18 · 4059 阅读 · 1 评论 -
Vue3底层响应式原理 一(基础篇)
Vue3底层响应式原理的实现。这一篇我们先了解一下响应式系统的一些基本概念以及怎么去实现一个比较简单响应式系统。原创 2022-08-14 19:39:27 · 1626 阅读 · 0 评论 -
LeetCode-Javascript第一题:两数之和
最近在B站上观看JS老毕的LeetCode解题,从第一题开始每日跟着练习一题。在CSDN上记录一下解题的思路。方便以后复习。原创 2022-08-13 11:28:06 · 241 阅读 · 0 评论 -
前端笔记2022-01-05
2022-01-05跨域解决方案一、JSONP解决跨域JSONP是利用script中的src无跨域限制来实现,需要后端的支持,并且只能进行get请求。1、动态创建一个script标签let script = document.createElement('script);2、设置script标签中的src属性,将要请求的地址以及回调函数赋值给srcscript.src = 'http://www.xxx.com/home/callback=callbackName';let callbac原创 2022-01-05 14:17:08 · 321 阅读 · 0 评论 -
前端H5中做移动端适配的方法
前端笔记1、html中的head标签中有那些标签,作用是什么?title:文档的标题base:不同框架之间代码的整合link:引入外部文件meta:charset属性:规定文档的字符编码使用那种。content:规定文本的格式name:viewport移动端适配content:width:device-width :宽度是设备屏幕的宽度initical-scale: 1.0 :表示初始时候页面的缩放大小为1.0倍maximum-scale: 1.0 :表示允原创 2021-09-02 22:02:44 · 527 阅读 · 0 评论 -
盒模型是什么?
盒模型是什么?一个盒子的盒模型包括margin、border、padding、content四部分。盒模型有分为标准盒模型与IE盒模型,标准盒模型是指当我们设置width时候,它指的就是content的宽,IE盒模型设置的宽是指border、padding、content三部分的总宽。在css中可以通过box-sizing属性来设置使用哪种盒模型,content-box是指设置为标准盒模型;border-box指设置为IE盒模型,inherit指的是继承父盒子的box-sizing属性。...原创 2021-08-25 21:55:45 · 150 阅读 · 0 评论 -
ES6新特性-Map
ES6新特性-Map、WeakMap、Set、WeakSetMap是一种新的集合类型,是一种键值对存储机制。Map一、基本APIconst m = new Map;const m1 = new Map([ ['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3']]);使用new关键字和Map构造函数可以创建一个空映射。初始化实例时可以给Map构造函数中传入一个可迭代对象,一个需要包含键值对的数组。1、si原创 2021-08-15 17:29:36 · 288 阅读 · 0 评论 -
JS中利用a标签实现下载文件功能
JS中利用a标签实现下载文件功能/** * 下载文件函数 模拟<a download></a>属性进行下载 * @param {String} path - 必传 - 下载地址/下载请求地址。 * @param {String} name - 非必传 */export function downloadFile(path, name) { const xhr = new XMLHttpRequest(); xhr.open("get", path);原创 2021-08-12 17:28:40 · 895 阅读 · 0 评论 -
JS中的深浅拷贝
JS中的深浅拷贝浅拷贝:拷贝前后对象的基本数据类型互补影响,引用数据类型共享同一个堆中的数据,会相互影响。浅拷贝的实现方式:Object.assign()…扩展运算符Array.prototype.concatArray.prototype.slice深拷贝:拷贝后会开辟新的内存来存放新的数据,互不影响。深拷贝的实现方式:JSON.parse(JSON.stringify())var deepClone = function(obj) { let cloneObj原创 2021-08-12 14:58:24 · 81 阅读 · 0 评论 -
前端笔记8-12
前端笔记typeof与instanceof的区别typeof可以确定任意变量的数据类型,对一个值使用typeof会返回下列字符串之一:‘undefined’ 表示值未定义‘boolean’ 表示值为布尔值‘string’ 表示值为字符串‘number’ 表示值为数值‘object’ 表示值为对象或者null‘function’ 表示值为函数‘symbol’ 表示值为符号instanceof可以知道一个引用类型得数据到底是什么类型的对象,该方法返回值为boolean。insta原创 2021-08-12 14:57:37 · 79 阅读 · 0 评论 -
JS垃圾回收机制
JS垃圾回收机制基本思路:确定哪个变量不在使用,然后释放它所在的内存。这个过程是周期性的,即垃圾回收程序是每隔一定时间就会自动执行。再浏览器的发展历史上,用到过两种主要的标记策略:标记清理和引用计数。标记清理原理:垃圾回收程序运行的时候,会标记内存中存储的所有变量(标记方法又很多)。然后,它会把存在于所有上下文中的变量以及上下文中变量中引用的变量的标记去掉。之后还有标记的变量就是待删除的了。随后,垃圾回收程序会销毁带标记的所有值并收回它们的内存。引用计数原理:声明变量并且给它赋值一个引用值得时候原创 2021-08-10 16:52:03 · 74 阅读 · 0 评论 -
JS中new的实现过程
JS中new的实现过程new的过程:1、在内存中创建一个新的对象;2 、这个新对象中的[[prototype]]被赋值为传进来的构造函数中的prototype属性;3、这个新对象中的this指向构造函数;4、执行构造函数中的代码、5、将这个新对象返回出去。代码实现(手写代码):function myNew(fun) { let newObj = { //第一步:创建一个新的对象 __proto__ = fun.prototype; //第二步:将构造函数中的原型对原创 2021-08-10 11:23:36 · 655 阅读 · 0 评论 -
js实现防抖与节流
防抖与节流防抖:当事件被触发的时候,设定一个周期,如果这个周期之内,这个事件又被触发了,那么就在设定一个周期,一直到这个周期内这个事件不在被触发,才会执行这个事件手写:function debounce (fun, delay) { //防抖函数需要传入2个参数,一个为事件函数,一个为周期时间 const _this = this; //先将this保存下来,保持this的指向相同 const timer = null; //设定一个定时器,当调用的时候西安清空定时器 retur原创 2021-08-10 10:53:24 · 177 阅读 · 2 评论 -
vue中对象的响应式原理
2021-7-26号笔记-Vue数据响应式原理对象的响应式原理1、 侦听数据2、 收集依赖3、 更新数据过程:1、在类Observer中,将vue中的data传入构造函数construstot中,进行保存2、 判断是数组还是对象,如果是对象,就调用walk方法,遍历对象中的key与value,并且传入defineReactive()方法中。将这些数据变成响应式数据,进行劫持数据。3、 defineReactive() 这个方法,首先会对上面遍历出来的val进行判断,如果还是对象,那么在new原创 2021-07-26 14:43:54 · 209 阅读 · 0 评论 -
2021-7-27号笔记-cookie的简单介绍
cookiecookiecookie是一种在客户端来保持HTTP状态的方案!cookie的原理在用户第一次访问页面的时候,web服务器会在HTTP响应头头中添加一个为set-cookie的响应字段,该字段的形式为key=value的方式。cookie 的属性name 与 value :名与值,用来标识。expires : 默认情况下,cookie为会话cookie(浏览器关闭cookie就删除了),该属性的值为一个日期:表示该cookie过期事件。 如果设置了该属性,则该cooki原创 2021-07-26 11:01:33 · 239 阅读 · 0 评论 -
浅谈Vue的生命周期
浅谈Vue生命周期首先,什么是生命周期?从new Vue 实例被创建再到销毁的整个过程,称为Vue的生命周期。我们先从官网上了解一下Vue的生命周期图示:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N3B5KllN-1626770096213)(https://v3.cn.vuejs.org/images/lifecycle.svg)]首先,从图上,我们可以了解到的过程为:首先是new Vue()实例化vue时,初始化事件与生命周期。这个过程分别调用了三原创 2021-07-20 16:36:22 · 105 阅读 · 0 评论 -
2021-07-13 前端知识笔记之JS-var、let、const
前端知识笔记之JS-var、let、const了解一下ES6之后新增的声明变量的方法与之前的var有什么区别一、var与let的区别二、const与let的区别了解一下ES6之后新增的声明变量的方法与之前的var有什么区别一、var与let的区别var是函数作用域,let为块级作用域;var在声明变量的时候会成为window的属性,而let则不会;var存在变量额声明提升,而let没有;在for循环中,var退出循环的时候,迭代变量保存的是退出循环的值,而用let时,后台的js引擎会为每个迭代循原创 2021-07-13 10:52:27 · 77 阅读 · 0 评论