- 博客(116)
- 收藏
- 关注
RSS订阅原创 JavaScript创建对象的8种方式
每个函数都要创建prototype属性（对象），就是通过调用构造函数创建的 象的原型。不必在构造函数中定义对象实例信息，而是可以将这些信息直接添加到原型对象中。重写prototype对象，最好保证constroctor的正确性，有限是该共享的共享，封装性不是很好。缺点：工厂模式虽然解决了创建多个相似对象的问题，但是没有解决对象识别问题，即不能知道一个对象的类型。优点：可以无数次调用这个工厂函数，每次都会返回一个包含两个属性和一个方法的对象。创建一个新的对象使用现有的对象作为新创建对象的原型。
2024-08-24 16:59:13
99
原创 JavaScript判断数据类型有哪些方法
所有对象都有constructor属性（使用Object.create（null）创建的对象除外）。在没有显式使用构造函数所有对象的情况下，创建的对象具有constructor，这个属性指向该对象的基本构造函数类型。constructor 判断方法跟instanceof相似,但是constructor检测Object与instanceof不一样,constructor还可以处理基本数据类型的检测,不仅仅是对象类型.这里的原型是指用户在JavaScript代码中定义的对象的内部定义。
2024-08-24 15:29:44
147
原创 JavaScript模块作用域
当前函数执行完成后，将栈顶的对象移除（出栈）。因为在函数执行过程中，JavaScript 会优先从当前的执行上下文中查找变量，由于变量提升的存在，当前的执行上下文中就包含了if(0)中的变量 name，其值是 undefined，所以获取到的 name 的值就是 undefined。在这段代码中，有两个地方都定义了变量 num，函数块的顶部和 if 的内部，由于 var 的作用范围是整个函数，所以在编译阶段只生成了一个变量 num，函数体内所有对 num 的赋值操作都会直接改变变量环境中的 num 的值。
2024-08-24 14:31:09
474
原创 v-if和v-for的优先级
如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环。在vue2 中，建议避免在同一元素上同时使用，因为会带来性能方面的浪费（每次渲染都会先循环再进行条件判断）。如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项。中，在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。中，v-if 总是优先于 v-for 生效。
2024-08-24 10:52:52
33
原创 Vuex和localStorage的区别
会随着页面刷新 更新状态。由于数据存储在内存中，Vuex 存储的值会丢失。这使得 Vuex 更适合管理应用的瞬时状态。，通常在跨页面传递数据时使用。它提供了一种简单而有效的方法，用于不同界面间数据共享。适合存储用户设置和持久化数据的选择。
2024-08-23 23:49:02
202
原创 Vue是如何实现数据双向绑定的
vue2是通过替换状态对象属性的getter和setter来实现的,vue3则通过proxy进行。改为proxy后,可以突破vue当前的限制,解决之前vue2的无法监听新增属性,还能提供更好的性能表现。Object.defineProperty只能遍历对象属性进行劫持。
2024-08-23 23:41:11
534
原创 vue中的$set
官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hello，ningzaichun’）在我们使用vue进行开发中，可能会碰到一种情况，当已经生成vue实例后，再次去给数据赋值或者添加数据，并不能同步更新到数据上面去。：当发现你给对象加了一个属性，在控制台中能打印出来，但是却没有更新到视图上时。key 要更改的具体数据 （索引）
2024-08-23 23:11:53
54
原创 浅拷贝和深拷贝
JavaScript中存在两大数据类型：基本类型（栈内存中）和引用类型（堆内存）。引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中。
2024-08-23 23:01:55
449
原创 路由懒加载
第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。直接将组件引入的方式，import是ES6的一个语法标准，如果需要浏览器兼容，需要转化成es5的语法。上面声明导入，下面直接使用。- vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，此时一个组件会生成一个js文件。懒加载则可以将页面进行划分，需要的时候记载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
2024-08-23 22:24:11
135
原创 Vue插槽
在父组件中，需要使用template，在template模板中，指定slot在子组件中的name值。第三种：使用 es6 解构赋值的方法，直接将对象数据解构为数组，然后进行 v-for 的遍历。让父组件向子组件指定位置插入html结构，也是一种组件通信方式，适用于父组件=>子组件插值。如果数据在子组件，可以在子组件中直接使用数据，但根据数据生成的结构需要组件的使用者来决定。在slot中，不仅可以填充问题，可以填充图片、视频、HTML结构等。此时已经使用了slot，在子组件中占了一个坑，但是没有填充内容。
2024-08-23 22:09:15
189
原创 vue中的$attrs和$listeners
当给子组件绑定点击事件时，是不会触发点击事件的，可以使用 .native 修饰符进行绑定成功 或者通过 $listeners 进行接收所有方法的绑定。它是一个对象，里面包含了作用在这个组件上的所有事件监听器，相当于子组件继承了父组件的事件。使用：v-bind=“$attrs” 将所有非props属性绑定到相应标签，也可以用于组件。使用：v-on="$listeners"将所有方法又绑定到组件相应标签，也可以用于组件.总结：组件标签上传入的属性如果子组件没有接收会跑到子组件标签最外层。
2024-08-23 21:35:01
191
原创 Vue .sync修饰符
Vue中规定，子组件通过props接受外部数据后只有使用该数据的权利，但没有修改该属性的权利。因为，如果子组件修改了外部传来的数据，数据不好控制。若其想要改变，就必须通知该数据的真正拥有者改变，也就是使用该组件的父文件。不是event原有的事件处理函数的演变，而是Vue自己定义的一种修饰符，如上述的修饰符分类中也将.sync分类自定义事件的修饰符，那么这个自定义事件是什么？渲染函数 JSX：使用JavaScript代替模板功能>事件&按键修饰符。事件处理：事件修饰符和按键修饰符。.sync的用法规则。
2024-08-23 20:59:03
122
原创 Nginx反向代理
（中介服务器的地址是确定的），再由中介服务器将请求代理到真正部署有实力的服务器上。但在客户端眼里，服务器只有唯一的一台，就是代理服务器。以百度为例，百度的后台肯定不止一台服务器，但是我们在访问百度的啥时候，只需要输入百度的地址，就会被分配到一个服务器上，以获得服务。而我们访问的是哪台服务器并不知道，只管访问www.baidu.com，后面的事都会有相应的机制帮我们实现。隐藏服务器信息，用于保证内网的安全，通常将反向 代理作为公网访问地址，web服务器是内网，即通过nginx配置外网访问web服务器内网。
2024-08-23 20:05:09
220
原创 Vue自定义插件
事件add的监听与广播，均是在一个Vue组件中，事实上在不同的组件中也可以。对于那些不适合污染全局对象的组件，每次都先import再调用Vue.use(xx)是一件很麻烦的事。原理：简单的 js 对象而已，公开属性install(需要对外暴露，参数1是 Vue 构造器，参数2是可选的对象)。通过Vue.extend扩展出自定义组件的构造器，然后在运行时创建组件，并通过document.appendChild添加进渲染列表中。Vue.use()会自动阻止多次注册相同插件，多次调用也只会注册一次该插件。
2024-08-23 17:42:11
193
原创 Vue 图片懒加载
当页面中国存在大量的图片时，如果一次性全部加载会影响页面加载的速度，用户可能需要等很长时间才能看到完整的页面内容。注意上面的offsetTop和后面的scrollTop+clientHeight是针对不同的元素哦，前者是图片，后者是文档对象。提高页面加载的速度：只有当图片即将显示在用户的屏幕上时才加载图片，可以减少页面初始加载时间和提高页面加载性能。节省带宽：只有在需要图片加载图片时才向用户发送图片数据，可以节省带宽和流量，降低用户的网络费用。一个图片元素的位置的顶部可以用 offsetTop 属性获得。
2024-08-23 16:34:42
226
原创 Vue导航守卫
beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问组件实例this。next：涉及到next参数的钩子函数，必须调用next()方法来resolve这个钩子，否则路由会中断在这，不会继续往下执行。beforeRouteUpdadte：在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于配置路由的组件添加的生命周期钩子函数。守卫就是路由跳转过程中的一些钩子函数，路由跳转的过程分为前中后等细小的过程。
2024-08-23 11:17:05
511
原创 验证码功能
如果对安全性有要求，同时也考虑用户体验的话，建议使用行为验证，平时看的比较多的是滑动验证。如果前端不进行任何的数据检查，直接把数据发送给后端，让后端来进行检查打的话，就会带来这样的问题：太浪费网络，对于网站本身来说就是在浪费流量，增加不必要的服务器压力。而实际上，对于一些很简单的校验，完全可以在用户浏览器上完成，没必要专门让服务器去校验。的数据校验，这种校验不带有任何的业务逻辑层面的校验，只是简单的数据合法性校验。必须在后端校验的：唯一性验证，验证码，敏感词，出错概率高的要做异步校验。后端校验分为哪几类？
2024-08-23 10:29:49
390
原创 删除选中全部产品
没有一次删除很多产品的接口，但是有通过ID可以删除产品接口。如何在仓库中多次调用单个Id的请求函数？Promise.all([p1,p2,p3]).如果有一个Promise失败，返回失败。
2024-08-23 09:17:55
47
原创 POST和GET的区别
get请求会附在URL之后，而post方法提交的数据则放置再HTTP报文实体，所以post比get安全。GET请求参数是通过URL传递的，多个参数以&连接，POST请求放在request body中。：POST比GET安全，GET请求在浏览器回退时是无害的，而POST会再次请求。：GET请求参数会被完整保留在浏览历史记录里，而POST中的参数不会被保留。：GET请求只能进行url编码，而POST支持多种编码方式。GET请求会被缓存，而POST请求不会，除非手动设置。：GET请求支持，POST请求不支持。
2024-08-22 23:06:17
122
原创 HTTP不同版本的区别
随着Web功能越来越复杂，每个页面产生的请求数也越来越多，导致消耗在头部的流量越来越多，尤其是每次都要传输UserAgent、Cookie这类不会频繁变动的内容，完全是一种浪费。在HTTP1.0中主要使用header里的If-Modified-Since,Expires来做为缓存判断的标准，HTTP1.1则引入了更多的缓存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等更多可供选择的缓存头来控制缓存策略。** 服务端推送**
2024-08-22 22:44:59
375
原创 HTTP请求方法
如果资源不存在，则创建新的资源。与POST不同，PUT通常是幂等的，即多次执行相同的PUT请求不会产生不同的结果。用于检查服务器支持的哪些请求方法，通常用于跨域资源共享（CORS）的预检请求。HTTP请求方法定义了客户端和服务端之间的通信方式，根据HTTP标准，HTTP请求可以使用多种请求方法。发送的数据包含请求体中。建立一个服务器的隧道，通常用于HTTPS连接。类似于GET，但服务器只返回响应的头部，不返回实际数据。用于检查资源的元数据。回显服务器收到的请求，主要用于诊断。从服务器删除指定的资源。
2024-08-22 22:02:53
221
原创 JS forEach、every和some
遍历数组，筛选出满足条件的项，将满足条件的项放到新数组中，并且返回。返回值：返回存放了满足条件的项的新数组，如果发现回调函数，返回了true，就将当前的value放到新数组中。evary()用来检测该数组中每一个元素是否都满足指定函数的条件，返回的布尔值如果给定是一个空数组，则返回true。从头到尾的遍历的数组，可以改变数组的值。遍历数组，判断是否有满足条件的元素，如果有返回true，没有返回false查找数组唯一的元素。map() 生成一个新数组 其结果是该数组每一个元素 调用指定函数的返回值。
2024-08-22 21:48:52
84
原创 Vue UUID 唯一身份标识
UUID通用识别码的缩写，是一种软件建构的标准，是让分布式系统中的所有元素，都能有唯一的辨识信息，而不需要通过中央控制端来做辨识信息的指定。//如果有，清除 sessionStorage 中的 uuid。打开页面，如果没有UUID则生成一个存入sessionStorage，如果有则直接读取sessionStorage的UUID。场景：向服务器发请求获取购物车数据时，获取不到购物车的数据，因为服务器不知道是谁的uuid。打开页面/标签，即生成一个UUID，页面刷新UUID不会变。
2024-08-22 21:32:15
92
原创 滚动行为 缓存之前的位置
未传入参数时，默认值为：{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}很多情况下，由于列表页的组件已经被销毁，所以我们返回到列表页面会置顶，不得不重新下拉查看列表，这样就做了很多没有必要的操作，也是不符合用户的预期。当页面数据需要请求加载延迟的情况下，页面如果直接滚动，会出现滚动后，页面数据请求回来，DOM重新渲染，滚动失效。场景1 在用前端路由，当切换到新路由时，想要页面滚动到顶部，或者保持原先滚动位置，就像重新加载页面那样。
2024-08-22 21:08:09
359
原创 数组去重的12重方法
创建一个空Map数据结构，遍历需要去重的数组，把数组的每个元素作为key存到Map重。由于Map中不会出现相同的值，所以最终得到的就是去重后的结果。创建一个空的结果数组，for循环原数组，判断结果数组是否在当前元素，如果有相同的值则跳过，不相同则push进新数组。这种去重的方法代码最少。这种方法无法去掉{}空对象，后面的高阶方法会添加去重复{}的方法。利用sort()方法，然后根据排序后的结果进行遍历及相邻元素比对。双层循环，外层循环元素，内存循环比较值。值相同时，则删除这个值。
2024-08-22 19:38:15
239
原创 Cookie、LocalStorage和SessionStorage
如果服务器需要这些数据，那么Cookie可能更适合，因为LocalStorage和SessionStorage需要以某种方式（Ajax或隐藏的表单字段等）转发数据。但是SessionStorage的数据在浏览器会话结束时会被清除，也就是说，当个用户关闭浏览器标签或窗口时，SessionStorage中的数据就会被删除。大多数现代浏览器支持、数据直接存储在浏览器中，且持久保存、同源规则适用于LocalStorage的数据、不会随每个HTTP请求发送、每个域名有5MB的存储空间。同LocalStorage。
2024-08-22 16:46:10
307
原创 watch+$nextTick
Vue生命周期的created（）钩子函数进行的DOM操作一定要放在Vue.nextTick（）的回调函数中，原因是在created()钩子函数执行的时候DOM其实并未进行任何渲染，此时i进行DOM操作无用。这个时候数据还没驱动视图变化，只是缓存在了同一事件循环中，这个时候如果要根据这个数据渲染出的DOM元素进行某些操作的时候，往往就需要watch中使用$nextTick()。vue中watch来监视data数据的变化，当被监视的数据发生变化watch中定义的相关方法便会调用，也可以监听异步操作。
2024-08-22 15:49:15
588
原创 Vues-watch监听热风和reactive数据的五种情况
注意：若修改的是ref定义的对象中属性，newValue和oldValue都是新值，因为它们是同一对象。监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视。结论：监视的要是对象里的属性，那么最好写成函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。*** 4.监视ref或reactive定义的对象类型数据中的某个属性***监视的是对象的地址值，若想监视对象内部的数据，要手动改开启深度监视。
2024-08-22 14:04:54
412
原创 Vue组件Watch监听器
watch是一个对象，这个对象的键是需要观察的表达式，值可以是饥饿值方法、方法名、包含选项的对象等的，Vue实例会在实例化的时候调用$watch()，遍历watch对象的每一个属性高，并且观察。值得一提的是，watch对象中，有时候可以省略，用键的名字直接用作为回调函数的名称，同样能正常观察到表达式的变化。Watch对象中的回调函数不应该用箭头函数进行定义，它将导致上下文的混乱，this将指向错误的上下文。注意，本文不会阐述watch对象的具体实现源码，只是介绍watch对象键值的五种使用方式。
2024-08-22 11:37:36
240
原创 前端插件swiper
swiper-wrapper是一个按照一定顺序排泄的所有轮播图的集合，在默认情况下是从左到右的排列；swiper-slid：每一张轮播图。swiper-pagination是分页器导航，也就是下图所有显示的原点。swiper-button-prev swiper-button-next插件默认的按钮左右箭头；第一个参数：Swiper容器的css选择器，可以把.swiper-container换成任何你自定义的名字。swiper是一款功能强大、开源、免费的前端轮播图插件。（是以一个对象的形式传参的）
2024-08-22 10:59:43
170
原创 Mock模拟数据
用于生成js随机数，拦截Ajax请求。作用：减少开发成本；剥离前后端开发时的耦合性；减少前后端对接的时间。mock数据只会在前端，不会发送给后端。
2024-08-22 10:39:14
184
原创 合并params和query参数
场景：三级分类只有query参数，搜索框使用params参数。如何当点击联动框时跳转到search路由，同时带着点击组件搜到的query参数，然后在搜索框中搜索词条，词条转为params参数也要带着，即现在$route中既要有query参数又要有params参数。route中本来就有query属性时保留这个query属性，当route中本来就有params属性保留这个params属性。当带着params属性点击联动框可以保留这个params属性，但带着query属性进行搜索时反而收不到的params属性。
2024-08-22 09:59:20
83
原创 CSS 过渡动画效果
transition属性是CSS3中用于定义元素从一种样式状态平滑过渡另一种状态的动画状态。当元素的指定样式属性发生变化时，transition会自动为其添加一个过渡动画。.element {transition属性组成部分property： 指定参与过渡动画的CSS属性。可以是单个属性名，也可以是多个属性名组成的列表。/* 单个属性 */} /* 多个属性 */duration：定义过渡动画的持续时间，以秒（s）或毫秒（ms）为单位。
2024-08-22 09:36:12
174
原创 Vue项目-三级联动的路由跳转与传参
比如说，鼠标点击事件，本来页面上有很多的鼠标点击事件，需要一个个的去写实现函数，但是如果你把鼠标点击事件交给上司来完成，那么就是鼠标点击那里的时候，就相当于上司找对应的下属来完成此事件，而不像前面一个个的去找实现函数。第二个问题：即使能确定点击的是a标签，如何区分点击的是一级、二级、三级的a标签？原因：router-link是一个组件，当服务器的数据返回后，循环出很多router-link组件创建实例1000+，创建组件实例的时候，一瞬间创建很多组件很耗内存，因此出现卡顿现象。，其余的子节点是没有的；
2024-08-21 23:18:56
856
原创 Vue动态设置背景颜色
的类名，并给他设定一个白色的背景颜色。然后，在Vue模版中，通过使用v-bind指令将“active”类名绑定到元素上，这样就能实现动态绑定的背景颜色。当isActive为false时，“active”类名将不会被应用，背景颜色还原为默认颜色。:style***后面的值是一个JavaScript对象，对象的属性名是CSS属性名，属性值是对应的CSS属性值。可以使用Vue的动态绑定语法来设置元素的样式。一种方案是使用类名的方式动态绑定背景颜色。在上述代码中，使用Vue的动态绑定语法***:style。
2024-08-21 22:17:11
362
原创 Vue页面加载进度条nprogress的使用
来实现浏览器顶部的进度条，它是轻量级的进度条组件，使用简便，可以很方便集成到应用中。客户在访问网页的室友想要看到网页加载的进度，所以使用。
2024-08-21 22:00:13
159
原创 解决：当浏览器窗口缩小时，文本内容被“挤”下来的问题
在编写代码时没有包裹文本的父盒子设置宽度，导致浏览器页面缩小到一定程度时（即父盒子缩小到一定程度），文本内容因为父盒子宽度不够而被挤到下一行排列显示。：给包裹文本的父盒子设置宽度。
2024-08-21 21:49:14
115
原创 CSS:display和visiblity
内联元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var。块级元素，显示已经隐藏的元素，如果有空间，其他的元素下移。也可以用在表单中，将其剩于部分隐藏。
2024-08-21 21:24:17
212
原创 前端跨域2
react中子组件想要修改父组件中的状态，也是传递一个回调函数给父组件，这个思想和JSONP的思想是一致的。三种：window.name / document.domin / location.hash。子页面B http://school.github.cn/B.html。父页面A http://www.github.cn/A.html。** 6. 基于 iframe 的跨域解决方案**** 7. WebSocket 协议跨域**修改：webpack.config.js。
2024-08-21 16:44:42
461
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人