- 博客(38)
- 收藏
- 关注
RSS订阅原创 Vue3.0 为什么采用 Proxy？
Object.defineProperty()作用：在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。1. 基本使用语法：Object.defineProperty(obj, prop, descriptor)参数：要添加属性的对象要定义或修改的属性的名称或 [Symbol]要定义或修改的属性描述符看一个简单的例子let person = {};let personName = 'Li';Object.defineProperty(person, 'name
2022-05-13 17:30:14
455
原创 6 种数组扁平化实现方式
方式1：使用最基础的递归遍历方式使用基础遍历的方式，然后遍历的item项是否为数组，如果是数组递归执行扁平化函数，并把执行的结果与之前concat，如果item项非数组，则直接将值push到最初定义的数组中。function flatten (array) { let result = []; for (const item of array) { if (Array.isArray(item)) { result = result.concat(
2022-05-10 13:52:56
463
原创 e.target 和 e.currentTarget 的区别
冒泡 & 捕获当触发一个元素的事件的时候，该事件从该元素的祖先元素传递下去，此过程为捕获，而到达此元素之后，又会向其祖先元素传播上去，此过程为冒泡。<div id="a"> <div id="b"> <div id="c"> <div id="d">哈哈哈哈哈</div> </div> </div></div>addEventListeneraddEven
2022-05-10 13:17:06
339
原创 如何渲染⼏万条数据并不卡住界⾯？
这道题考察了如何在不卡住⻚⾯的情况下渲染数据，也就是说不能⼀次性将⼏万条都渲染出来，⽽应该⼀次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来每 16 ms 刷新⼀次。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g
2022-05-07 17:04:48
238
原创 数组去重的方法总结
方法一：利用ES6 Set去重(ES6中最常用)let arr = [ 1, 1, 'true', 'true', true, true, undefined, undefined, null, null, NaN, NaN, {}, {}];function unique(arr) { return Array.from(new Set(arr)); // 等价于retu
2022-04-26 15:48:49
62
原创 Typescript
据官方描述：TypeScript 是 JavaScript 的超集，这意味着它可以完成 JavaScript 所做的所有事情，而且额外附带了一些能力。JavaScript 本身是一种动态类型语言，这意味着变量可以改变类型。使用 TypeScript 的主要原因是就是为了给 JavaScript 添加静态类型。静态类型意味着变量的类型在程序中的任何时候都不能改变。它可以防止很多bug。Typescript 值得学吗？下面是学习 Typescript 的几个理由：研究表明，TypeScript 可以发
2022-04-12 11:27:36
720
转载 JavaScript 和 Typescript 的区别
什么是JavaScript？JavaScript是世界上最流行的编程语言之一。让我们从头讲起。自90年代以来，JavaScript一直是网络应用的核心技术。它用来与HTML和CSS结合创建交互式网页。它是一种具有动态类型和JIT（Just-in-Time）编译器的高级语言。JavaScript是一种多范式语言，支持各种编程风格，如函数式编程、命令式编程和事件驱动式编程。它还支持编写服务器端。JavaScript是在ECMAScript（ES）标准的基础上形成的。在JavaScript中使用最广泛的ES
2022-04-11 11:18:05
766
原创 type 与 interface 的区别
类型别名type类型别名用来给一个类型起个新名字，使用type创建类型别名，类型别名不仅可以用来表示基本类型，还可以用来表示对象类型、联合类型、元祖和交集。让我们看一些例子：type userName = string;type userId = string | number;// type arr = number[];type arr = Array<number>;//对象类型type Person = { id: userId; name: userNam
2022-04-11 10:26:49
3076
原创 Vue3 Composition API
Composition API可以更方便的抽取共通逻辑，但是不要过于在意逻辑代码复用，以功能提取代码也是一种思路。setupsetup是组合Composition API中的入口函数，也是第一个要使用的函数。setup只在初始化时执行一次，所有的Composition API函数都在此使用。setup是在beforeCreate生命周期之前执行的，由此可以推断出setup执行的时候，组件对象还没有创建，组件实例对象this还不可用，此时this是undefined，不能通过this来访问data/c
2022-04-02 17:23:10
1276
原创 vue插槽 `slot`和`slot-scope`已被废弃
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即v-slot 指令)。它取代了slot 和slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。匿名插槽//子组件<template> <div> <slot></slot> </div></template><script>export default { name: 'children'}&.
2022-03-14 11:07:02
9054
1
翻译 number precious解决精度问题
问题描述安装npm install number-precision --save主要方法可以计算加减乘除（plus，minus，times, divides）以及求相近值（strip, round）NP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, n
2022-03-11 09:46:54
1278
原创 Echarts定制
整理最新部分echarts资料1、官网案例入口：https://echarts.apache.org/examples/zh/index.html2、官网api入口：https://echarts.apache.org/zh/api.html#echarts3、扩展入口：（1）扩展图形gallery （官方弃用）https://www.makeapie.com/explore.html#sort=ranktimeframe=allauthor=all（2）新扩展-私人，只能看代码，无法编辑测试
2022-02-24 11:39:28
365
原创 Vue高级-hook:beforeDestroy
vue中hook的两点使用在同一个组件中场景：在mounted中添加一个监听，需要在beforeDistroy中移除这个监听，如果不想再写个beforeDistroy去实现，可以使用hookmounted() { window.addEventListener('online', this.handleOnline); this.$once('hook:beforeDestroy', function() { window.removeEventListener('
2022-01-21 11:36:55
1006
原创 初始化项目结构
1.需要的工具nodejs、npmvue-cli脚手架webpackwebpack在vue中的作用1.vue是通过webpack实现的模块化，vue.js脚手架工具中就使用了webpack模板2.webpack会对项目中所有的资源做压缩等优化操作2.安装工具2.1 安装nodejs注:安装nodejs的同时，会把npm一起安装好了地址: https://nodejs.org/en/download/下载LTS版本，LTS(Long-Time-Support)长期支持稳定版本，Cu
2022-01-20 15:14:59
471
原创 路由重复点击报错
1.解决方案：解决方案有以下两种：1.避免重复点击2.可重复点击，并点击即可刷新页面2.实现第一种：避免重复点击；在 router 的配置文件里下添加一下代码import Router from 'vue-router'const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).c
2022-01-19 16:46:57
648
原创 vue 性能优化
目前想到的有 两 类：● 代码优化○ v-for 优化○ v-for / v-if 优化○ v-if / v-show 优化○ 长列表优化○ 事件销毁○ 变量本地化○ 嵌套数据优化○ 持久化数据优化○ 频繁更改组件共用数据对象优化○ indexedDB数据存储优化● 模块使用优化○ 1. 路由使用懒加载模式加载组件○ 2. 图片懒加载○ 3. 如果使用了组件库(vant/element-ui/iview)，按需加载，不要全局引用○ 4. 第三方库使用CDN方式引入○ 5.
2022-01-19 11:40:18
805
转载 「前端进阶」高性能渲染十万条数据(虚拟列表)
为什么需要使用虚拟列表?参考：https://github.com/chenqf/vue-virtual-listview假设我们的长列表需要展示10000条记录，我们同时将10000条记录渲染到页面中，先来看看需要花费多长时间：<button id="button">button</button><br><ul id="container"></ul> document.getElementById('button').addEv
2022-01-19 10:24:12
2938
2
原创 简单数组及对象数组取交集，差集，并集，补集的方法
1.简单数组（1）方法一const a = [1, 2, 3, 4, 5];const b = [2, 4, 6, 8, 10];// 交集let intersect = a.filter(item => b.includes(item));// 差集let minus = a.filter(item => !b.includes(item));// 并集let union = [...new Set(a.concat(b))];// 补集let complement =
2022-01-13 11:43:29
1470
原创 使用patch-package给node_modules包打补丁
1.安装 patch-packagenpm i patch-package --save-dev2.修改项目根目录下的 package.json 文件在 package.json 文件中的 scripts 中加入 “postinstall”: “patch-package”3.修改 node_modules 依赖包中的源码4.执行命令npx patch-package package-namenpx patch-package package-name其中命令中的 package-nam
2022-01-12 14:44:02
1508
原创 uView JS工具库
节流防抖节流throttle(func, wait = 500, immediate = true)规定时间内，只触发一次，可以通过设置immediate来决定触发的时机在这个时间的开始，还是结束的时候执行。func 触发回调执行的函数wait 时间间隔，单位msimmediate 在开始还是结束处触发，比如设置wait为1000ms，如果在一秒内进行了5次操作，只触发一次，如果immediate为true，那么就会在第一次操作 触发回调，如果为false，就会在第5次操作触发回调。
2021-11-18 16:18:11
2379
原创 uView JS网络请求
便捷工具：toast(title, duration = 1500)title toast的消息内容duration toast出现到消失的时间，单位ms，默认1500msthis.$u.toast('Hello uView!');os()此属性用于返回平台的名称，为小写的ios或androidconsole.log(this.$u.os());sys()此属性用于获取设备的信息，相当于uni.getSystemInfoSync()的效果console.log(thi
2021-11-18 10:52:25
7061
2
转载 vue中 静态文件引用注意事项
assets文件夹与static文件夹的区别assets文件是src下的，所以最后运行时需要进行打包，而static文件不需要打包就直接放在最终的文件中；assets中的文件在vue中的template/style下用…/这种相对路径的形式进行引入，在script下必须用@import的方式引入，而static下的文件在.vue中的任何地方都只要使用…/这种相对路径的方式引入总结:assets用来放置样式、静态图片，只要src下面的组件中用到的资源就放在assets中。static用来放没有
2021-11-09 19:18:58
800
原创 vue2.x与vue3.x的不同之处
vue2.x与vue3.x的不同之处1.初始化vue实例方式（main.js）vue2.ximport Vue from 'vue';import App from './app';import router from './lib/router';import store from './lib/store';import http from './lib/http';// 在vue原型上定义http，可供全局使用Vue.prototype.$http = http;// 实例化
2021-11-04 17:34:08
180
原创 vue3.x
VUE3.01 知识点1.1 createApp()vue.createApp(config) 用于创建应用程序实例，所有组件共享同一个应用程序实例。应用实例公开的大多数方法都返回同一个应用程序实例，因此允许链式操作。.mount(#根元素ID)不返回应用程序实例，返回根组件实例。2.1 setup组件选项2.1.1 官网参考https://v3.vuejs.org/guide/composition-api-introduction.html#standalone-computed-prope
2021-11-04 15:18:53
101
原创 动态组件 和 异步组件
动态组件 和 异步组件1 动态组件动态组件就是 component组件 ，组件身上可以绑定一个is属性， 用来表示某一个组件。通过使用保留的元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is=“组件名” 中的组件名去自动匹配组件，如果匹配不到则不显示。1.1 使用方式1.1.1 动态组件局部注册：// 方式一：<template> <component :is="myComponent"></c
2021-11-02 14:56:53
1272
原创 vue 性能优化
vue 性能优化目前想到的有五步：路由使用懒加载模式加载组件图片懒加载如果使用了组件库(vant/element-ui/iview)，按需加载，不要全局引用第三方库使用CDN方式引入webpack打包优化○ 打包去除Map文件○ 开启gZip压缩（ compression-webpack-plugin ）○ 压缩JS文件( uglifyjs-webpack-plugin )1 路由懒加载// 懒加载模式const routes = [ {path: '/home', comp
2021-11-02 11:41:27
98
原创 contentType 与 dataType
contentType 与 dataType1 contentType设置的是你发送给服务器的数据格式 。服务器通常是根据请求头(headers)中的content-type的值来获取请求中的消息主体的编码方式，再对主体进行相应的解析。1.1 application/x-www-form-urlencoded默认格式，提交给后台的数据会按照key1=val1&key2-val2的格式进行转换。1.2 application-json对提交给后台的数据会进行JSON序列化。1.3 m
2021-11-02 10:34:53
621
原创 目前主流的JavaScript模块化实现的技术有哪些?区别?
目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。一、 CommonJSCommonJS的出发点: JS没有完善的模块系统，标准库较少，缺少包管理工具。伴随着NodeJS的兴起，能让JS在任何地方运行，特别是服务端，也达到了具备开发大型项目的能力，所以CommonJS营运而生。Node.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持:moduleexpor tsr equireglobalmodule. exports定义当前
2021-04-22 23:54:39
582
原创 防抖、节流原理、区别以及应用
防抖原理:在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。适用场景:。按钮提交场景:防止多次提交按钮,只执行最后提交的一次。搜索框联想场景:防止联想发送请求，只发送最后一次输入简易版实现function debounce(func, wait) { let timeout; return function () { const context = this; const args = arguments; clea
2021-04-18 17:29:01
132
原创 单例模式、工厂模式，观察者模式
单例模式(Singleton)限制了类的实例化次数只能一次。从经典意义来将，单例模式，在实例不存在的时候，可以通过一个方法创建一个类来实现创建类的新实例;如果实例已经存在，他会简单返回该对象的引用。单例模式不同于静态类，可以推迟它们的初始化，这通常是因为我们需要一些信 息，而这些信息在初始化的时候可能无法获取到;对于没有擦觉到之前引用的代码，不会提供方便检索的方法优点:能够单独划分出一个命名空间，避免和别的内部变量发生冲突，所以单例可以分为简单单例和闭包单例。项目的实际用途:1.简单单例//判断实
2021-04-18 16:45:48
784
1
原创 var let const比较
理解js作用域在ES5中，js只有两种形式的作用域:全局作用域和的函数作用域。全局作用域:变量在程序中任意地方都可以访问到函数作用域:变量在函数内部可以访问到，在函数外部无法访问for(var i = 0; i < 10; i++) { var a = 'a'; let b = 'b';}console.log(a); //aconsole.log(b); //b is not defined上述代码中，变量a为全局变量function test() { var a = 'a
2021-04-13 17:49:14
108
原创 怎么做移动端适配？
前言。css像素:代码中使用的逻辑像素，衡量页面，上的内容大小。设备像素:即物理像素，控制设备显示的单位，与设备、硬件有关。设备独立像素:与设备无关的逻辑像素，不同于设备像素(物理像素)，不是真实存在的。。设备像素比: 定义设备像素与设备独立像素比的关系window.devicePixelRatio)设备像素比=物理像素/设备独立像素。分辨率:指的是屏幕.上垂直和水平的总物理像素移动端适配方案，总结如下:px + viewport适配rem布局。CSS3媒体查询适配。基于设计图的rem
2021-04-13 16:24:39
5766
原创 优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。...
2021-04-13 15:46:36
33
原创 [] == 0等于true?为什么?
该问题考察的知识点为：JavaScript隐式转换JavaScript中的ToPrimitive规则当对象类型和原始类型做相等比较时，对象类型会依照ToPrimitive规则转换为原始类型ToPrimitive指对象类型类型(如:对象、数组)转换为原始类型的操作。当对象类型需要被转为原始类型时，它会先查找对象的value0f方法，如果value0f 方法返回原始类型的值，则ToPrimitive的结果就是这个值如果value0f不存在或者value0f方法返回的不是原始类型的值，就会尝试调用对象
2021-04-13 15:34:59
1508
原创 vue SSR渲染原理?
优点:</>更利于SEO不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本(Google除外， 据说Googlebot可以运行JavaScript)。使用了Vue或者其它MVVM框架之后，页面大多数DOM元素都是在客户端根据js动态生成,可供爬虫抓取分析的内容大大减少。另外，浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML,网络爬中就可以抓取到完整页面的信息。</> 更利
2021-04-13 15:21:17
181
原创 xss攻击和csrf攻击?
什么是XSS攻击?XSS是跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets， CSS) 的缩写混淆，故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。XSS的危害?</> 1.窃取网页浏览中的cookie值在网页浏览中我们常常涉及到用户登录，登录完毕之后服务端会返回一个cookie值。这个co
2021-04-13 15:14:10
192
原创 浏览器缓存原理是什么？
什么是缓存?浏览器缓存(BrowerCaching)是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力http缓存机制主要在http响应头中设定，响应头中相关字段为Expires、Cache-Control、 Last-Modified、Etag。HTTP 1.0协议中的。简而言之，就是告诉浏览器在约定的这个时间前，可以直接从缓存中获取资源(representations)，而无需跑到服务器去获取。网站访问速度对一个网站来说是非常重要的，访问慢会流失
2021-04-13 15:02:33
281
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人