- 博客(47)
- 收藏
- 关注
RSS订阅原创 JS 常见的 6 种继承方式
明明只改变了 c1 的 play 属性，为什么 c2 也跟着变了呢？原因很简单，因为两个实例使用的是同一个原型对象。它们的内存空间是共享的，当一个发生变化的时候，另外一个也随之进行了变化，这就是使用原型链继承方式的一个缺点。原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针。上面的代码看似没有问题，虽然父类的方法和属性都能够访问，但其实有一个潜在的问题。
2023-07-27 16:59:23
106
原创 deep深度穿透
如果去掉scoped的话就会影响全局样式，但是加上scoped又不能在当前组件修改子组件的样式，这个时候就可以使用 /deep/ 了。这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值，从而避免父组件对子组件的样式的影响。设置了上述scoped的话，如果想要在父组件中修改子组件的样式时应该怎么样做呢？来避免父组件对子组件的影响，添加了之后只能修改当前组件的样式。css中通常会在 style 标签内添加。除了 /deep/ 以外，也可以实现同样的效果。
2023-07-26 11:27:27
201
原创 如何理解diff算法
diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。简单的说：diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。diff算法的本质是找出两个对象之间的差异，目的是尽可能做到节点复用。
2023-07-26 09:41:19
230
原创 meta 标签内属性及详解
属性值为content，content参数有all,index搜索引擎将索引此网页，follow继续通过此网页的链接索引；后面的分号是在秒数的前面和网址的后面；none将忽略此网页；nofollow搜索引擎不继续通过此网页的链接索引搜索其他的网页；13.Set-Cookie用于cookie的设定，如果网页过期，那么存盘的cookie将被删除；14.Window-target显示窗口的设定，强制页面在当前窗口以独立页面显示；15.content-Type显示字符集的设定，设定页面使用的字符集；
2023-07-26 09:40:47
192
原创 瀑布流原理
然后就是i>columns的逻辑，在这里面定义一个空变量为minHeight为最小高度，这个最小高度让他默认为0；在定义一个变量为Index为0；然后在写一个循环，循环内容就是每个上面存储每一项高度的数组，然后再通过if判断找出最小的高度值，逻辑就是如果当前循环的高度小于。5.最后一步就是把后面的元素插入到高度最小的元素下面，让循环的当前项的top值为最小高度，让他到这个元素的下面；上面定义的minHeight最小高度的话，就让minHeight等于这个高度，然后再让index等于这个元素的下标；
2023-07-26 09:40:25
89
原创 解构赋值.
解构赋值语法是一种Javascript表达式。通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。是Es6中的新语法，他的本质是模式匹配，就是只要等号两边的模式相同，左边的变量就会被赋予匹配的右边的值，要是匹配不成功变量的值就是undefined；他是针对数组或者对象进行模式匹配，然后对其中的变量进行赋值；他左边表示的是要解构的目标，右边表示解构源；解构赋值还是对赋值运算符的扩展；2.让函数中返回多个值，函数只能返回一个值，但用解构赋值的话可以返回是一个数组或者对象；4.提取json数据。
2023-07-26 09:40:09
47
原创 虚拟dom
用一个简单的对象去代替复杂的DOM对象，存储了对应DOM的一些重要参数，在改变DOM之前，会先比较相应虚拟DOM的数据，如果需要改变，才会将改变应用到真实DOM上。减少了对DOM的操作。页面中的数据和状态变化，都通过Vnode对比，只需要在比对完之后更新DOM，不需要频繁操作，提高了页面性能；虚拟DOM频繁修改，然后一次性对比差异并修改真实DOM，最后进行依次回流重绘，减少了真实DOM中多次回流重绘引起的性能损耗；虚拟DOM有效降低大面积的重绘与排版，因为是和真实DOM对比，更新差异部分，所以只渲染局部；
2023-07-26 09:39:42
44
原创 vue 自定义指令如何使用
很多时候我们需要直接操作 dom 元素，如果只是个别需要操作 dom 元素，我们可以通过 ref 获取当前 dom 元素，并对其进行操作，但是如果特别多的时候，我们不可能每次都去写一遍 ref 还有方法，所以这时候自定义指令就可以帮你轻松解决这个问题。**binding**: 一个对象，里面包含了几个属性：value:指令的绑定值，name:指令名等；**el**: 指令所绑定的元素，可以用来直接操作 DOM，就是放置指令的那个元素。**vnode**：Vue 编译生成的虚拟节点。
2023-07-25 09:26:05
56
原创 keep-alive 的作用
keep-alive是Vue中的内置组件，能在切换过程中把状态保留在内存中，防止重复渲染DOM包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。- exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。- include: 字符串或正则表达式。只有匹配的组件会被缓存。列表页面 =>点击进入详情页=> 后退到列表页 要缓存列表原来数据。Vue中前进刷新，后退缓存用户浏览数据。重新进入列表页面 => 获取最新的数据。
2023-07-25 09:25:27
50
原创 Object.defineProperty()方法有何作用
作用：Object.defineProperty方法会直接在对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。4.configurable描述符：设置是否可配置属性特性，默认为true。无法删除该属性，不能够修改属性值，也不能修改属性的属性描述符。2.writable描述符：设置属性的值是否可写，默认值为true。1.value描述符：设置属性值，默认值为undefined。参数解释：object：要定义属性的对象，返回的也是；descriptor：要定义或修改的属性描述符。
2023-07-25 09:25:11
136
原创 vue 中 key 的作用
在生成虚拟dom的过程中，相同的组件产生相同的dom结构，不同的组件产生不同的dom结构，同一层级的dom节点，他们可以通过唯一的id进行区分，这个id就是key。作用：高效的更新虚拟dom。
2023-07-25 09:24:54
63
原创 vuex 中 state,getters,mutations,actions,modules的用途和用法
需要注意的是modules模块中的state不能通过this.store.state获取，必须加上module的命名空间；mutation 唯一可以提交可以改变state的状态，也就是数据的属性值，他是通过直接改变状态的方式改变state，而且mutation必须同步执行，mutations相当于生成了修改全局变量的事件函数，所以触发的时候需要事件驱动。会对state中的变量进行过滤再保存，只要state中的变量发生了改变，它也会发生改变，不变化的时候，使用的是缓存。对象，或者自己定义新的方法或属性名；
2023-07-25 09:23:51
240
原创 vue 中数组中的某个对象的属性发生变化，视图不更新如何解决?
第一种是数组的值改变，在改变数组的值的时候使用索引值去更改某一项，这样视图不会实时更新，这种情况是因为直接通过索引去改变数组，vue对象监听不到他的变化，所以没有更新；使用vue的变异方法pop(),push(),shift(),unshift(),revese(),sort(),splice()等方法也会触发视图更新。1.利用vue.set(object,key,val)：例：vue.set(vm.obj,'k1','v1');2.利用Object.assign({},this.obj)创建新对象；
2023-07-25 09:23:24
2042
原创 vue 常用修饰符
passive：addEventListener中的第三个参数，表示 listener 永远不会调用 preventDefault().native：组件绑定当前组件的事件是不会触发的，需要用native才能触发。.self: 当事件发生在该元素本身而不是子元素的时候会触发。.lazy - 取代 input 监听 change 事件。.capture: 事件侦听，事件发生的时候会调用。.number - 输入字符串转为有效的数字。.prevent: 提交事件不再重载页面。.stop: 阻止单击事件冒泡。
2023-07-25 09:22:46
38
原创 Axios 拦截做过哪些?
可以在请求或响应被 then 或 catch 处理前拦截它们。可以为自定义 axios 实例添加拦截器；请求拦截可以用它做我们的loading 加载和数据的权限验证,包括我们所有的数据预加载也可以实现；Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。1.可以从浏览器中创建 XMLHttpRequests。2.从 node.js 创建 http 请求。3.支持 Promise API。5.转换请求数据和响应数据。响应拦截：axios 拦截可以配置公用地址。
2023-07-25 09:17:37
36
原创 input事件修饰符
如果想要将用户的输入，自动转换为 Number 类型（译注：如果转换结果为 NaN 则返回字符串类型的输入值），可以在。事件触发之后，将数据同步至 input 元素中。如果想要将用户的输入，自动过滤掉首尾空格，可以在。修饰符，从而转为在触发。
2023-07-25 09:16:52
143
原创 原型和原型链
函数原型：每个函数都有一个prototype对象，这个对象就是函数的原型，每个函数原型中都有一个constructor属性，就是构造函数本身，构造函数被实例化后，包含一个__proto__属性，这个属性就是函数的原型，new实例化后的对象没有prototype原型，有__proto__;代码实现：先定义一个函数，里面写一些属性；然后在这个函数的原型上设置一些属性；最后通过调用这个实例化出来的新函数来查找属性，就可以实现一个原型链；函数的原型有一个优点就是在原型中添加属性，所有的实例化对象都可以访问到。
2023-07-24 11:39:22
33
原创 闭包的优缺点
要了解闭包，先得了解变量的作用域，分为全局作用域和局部作用域，JS中函数内部可以访问函数外部的变量，但函数外部却无法访问函数内部的变量；：可以模仿块级作用域，把变量保存在内存中，防止全局变量污染，就是减少创建全局变量，减少传递给函数的参数量；：虽然说防止了全局变量污染，但是这样容易导致内存泄漏，会让使用过的变量无法回收，一直占着内存；闭包就是能够访问其他函数内部的变量的函数，闭包的本质就是把函数内部和外部连接起来；闭包有一个封闭性的特点：就是一旦形成闭包，那么外界就无法访问到闭包里面的数据。
2023-07-24 11:37:33
202
原创 SessionStorage，LocalStorage，Cookie 的区别
Cookie：生命周期只在设置的cookie过期时间之前有效,存放数据一般为4K左右，一般数量不能超过20个，cookie可以与服务端进行通信，但是使用cookie保存过多数据会带来性能问题。总之cookie就是一个存放数据的东西，存放客户端和应用设备上。SessionStorage:生命周期是只在当前浏览器窗口中有效，SessionStorage是在同源的窗口中始终存在的数据。方法：SessionStorage.getItem(),setItem(),removeItem(),clear();
2023-07-24 11:35:50
40
原创 什么是深拷贝和浅拷贝，如何实现
2.通过定义一个函数deep来实现，他的参数是一个obj对象，函数里面第一步先判断参数obj是否为一个对象，如果不是就返回return false；1.使用Object.assign({},obj)第一个参数是一个空对象，第二个参数是你要复制的对象；通过这个方法我们知道浅拷贝不能修改基础的数据类型，可以修改引用的数据类型；就是先将这个对象转换为字= 符串，再将字符串转换为一个对象，这样就实现了一个深拷贝的原理；随后在遍历obj,如果内容是一个对象的话就把循环的当前项添加到上面创建的新数组中；
2023-07-24 11:33:37
82
原创 promise是什么？有哪些状态和参数？如何使用？
从本质来说，Promise主要用来解决异步回调的回调嵌套过多，导致的地域回调问题，可以使用then链式方法捕获最后的结果，比如我们经常用的axios就是用的Promise方式处理异步请求；Promise是一个构造函数，所以我们在使用的时候是通过new Promise来实例化，它里面有两个默认的参数，resolve和reject是早就封装在构造函数里面的方法。Promise其实就是一个方法，一个JS甚至是一个页面的后续JS代码的执行，因为他们都依赖于异步返回的数据，基于这个数据进行操作；
2023-07-24 11:16:22
116
原创 Ajax是什么？以及如何创建Ajax?
url:'地址'，type:'get'请求方式，async: true,是否为异步，dataType:'json'数据的类型，success:(res)=>{成功之后的业务逻辑}，error:(error)=>{失败之后}2.提高web程序性能：传统模式是通过form表单，数据获取是通过页面刷新获取整页内容，ajax可以通过XMLHttpRequest对象向服务器请求数据；2.使用open方法初始化请求：xhr.open('get','地址') 他第一个参数是请求数据的方式，第二个参数是请求的url地址。
2023-07-24 11:12:34
44
原创 什么是跨域和解决跨域的方法
如果没有了同源策略，浏览器的一些正常功能可能都会受到影响，因为ajax是很灵活的，他可以发任何的请求，如果没有同源策略的限制，那么只要你构造好参数和请求路径你的请求想往哪发就往哪发，这样太不安全了，会导致各种数据泄露；再把changeorigin:true,设置为true开启反向代理，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端和服务端进行数据的交互就不会有跨域问题。同源策略是浏览器的一种约定，他是浏览器最核心也是最基本的安全功能，同源指的就是，同协议，同域名，同端口，
2023-07-24 10:25:54
27
原创 ES6有哪些新特性
而且引入模块和引入脚本是有区别的，前者更多的是按需引入加载，后者是无论使用还是不使用，全部一次性引入和加载，类似于通过script标签引入Jquery等，这些都是一次性引入的；Set对象他类似于数组，且成员的值都是唯一的。总结：箭头函数，最开始就是为了解决this指向问题，箭头函数里面的this是定义的时候确定的，this一旦确定无法改变，箭头函数最好的就是简洁；for in是es5的标准，用来遍历Key值，遍历对象和数组，for of是es6的标准，用来遍历value值，遍历数组，不能遍历普通对象；
2023-07-24 10:04:29
577
原创 HTTP状态码
该状态码是新加入HTTP 1.1中的。网站的http状态对于网站维护人员来说是相当重要的，当网站出现问题的时候，我们首先要诊断一下网站的http状态，从而进一步确认哪里出现的问题，下面IT百科就和大家分享一下一些HTTP状态码知识。如果你将用户转向到你的站点的其他页面，用 response.sendRedirect(response.encodeURL(url)) 的方式事先计划好会话跟踪(session tracking)要比只是调用 response.sendRedirect(url) 好的多。
2023-07-20 16:34:27
44
1
原创 webpack打包优化的方式
（1）、hash优化缓存css独立打包安装entry:{},output:{},resolve:{},module:{rules:[},plugins:[}),}):root {<head></head><body></body></html>//设置静态资源缓存1小时。
2023-07-19 17:26:35
52
原创 i18n中英文切换
"notebook":"知识小册","comments":"留言板","aticle":"文章","about":"关于","zh_CN":"中文","files":"归档","en_US":"英文"（3）、在index.ts中引入。（2）、在项目中使用。// 初始化i18n。
2023-07-19 16:14:34
400
原创 react解析富文本
1、安装2、使用3、带编辑的富文本（1）、安装（2）、使用render() {return (<MdEditor/></div>
2023-07-18 10:56:57
431
1
原创 下拉加载怎么实现
/ 创建观察者，配置回调函数 // 通过 isIntersecting 属性判断元素与视口是否相交。console.log('触发了滚动事件',scrollTop)// 获取要监测的元素。
2023-07-14 17:42:02
84
1
原创 mixin怎么使用
console.log('mixins中的点击事件',this)console.log('混入的生命周期',this)console.log('组件内生命周期')
2023-07-14 17:34:56
55
1
原创 Vue2和Vue3的区别
vue2是把数据放入data中，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造得时候触发。使用一下三个步骤来简=建立反应性数据： 1. 从vue引入reactive；使用reactive() 方法来声明数据为响应性数据；3. 使用setup()方法来返回我们得响应性数据，从而template可以获取这些响应性数据。8，从setup() 中返回得对象上得property 返回并可以在模板中被访问时，它将自动展开为内部值。setup函数只能是同步的不能是异步的。
2023-07-14 16:22:11
156
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人