- 博客(66)
- 收藏
- 关注
RSS订阅原创 常见的JavaScript设计模式（一）
常见的JavaScript设计模式包括==模块模式==、`在这里插入代码片`==单例模式==、==工厂模式==、==观察者模式==、策略模式、装饰者模式等。每种设计模式都有其特定的和应用场景和解决方案，可以根据具体的需求选择合适的设计模式来提高代码的质量和可维护性。
2024-05-27 22:59:51
513
原创 前端：防止重复请求的方案
如果在error中有更多的逻辑处理，会导致整个程序的异常；若两个请求来自同一个页面（一个页面里面的两个组件都需要调用同一个接口时），后调的接口的组件无法拿到正确的数据。延续方案二的思路，对于相同的请求我们先给它挂起，等到最先发出的请求拿回结果后，把成功或失败的结果共享到后面到来的相同的请求。通过使用 axios拦截器，在请求拦截器中开启全屏Loading，然后再响应拦截器中关闭。缺点：全屏Loading不适合所有请求，不美观。1.判断什么样的请求属于相同的请求？2、对于挂起的请求，一定要。
2024-04-21 11:19:13
652
原创 ES6: set和map数据结构以及使用场景
D3.js:D3.js是一个数据可视化库，它使用 Set 来管理数据的唯一性，以及使用 Map 来存储数据映射关系，例如数据和图形元素之间的对应关系。Map是一种键值对的集合，其中键和值可以是任意类型的。它的使用场景包括需要存储键值对并需要快速查找的场景，比如存储对象之间的关联关系、缓存数据等。Set是一组唯一值的集合，适用于需要存储唯一值并需要快速查找的场景，比如数据去重、存储一组唯一的用户标识等。Set 中的值是不重复的，重复的值将被自动去重。的集合，它的值可以是任何类型。Set 是一种有序且。
2024-04-13 14:03:25
1534
原创 ES6: promise对象与回调地狱
为了解决回调地狱，ES6提供了一个新的API----Promise。Promise能够将回调函数嵌套改为then方法的链式操作，从而提高代码的可读性和可维护性。1、Promise是一个构造函数，可以new一个对象。2、Promise本身不是异步的，只是在回调函数中经常执行异步操作。3、Promise，会创建一个容器，在该容器中自动执行一个异步操作。该异步操作程序会产能生两种结果：成功（resolved）或者失败（rejected）。4.Promise基本使用方法;
2024-04-13 11:28:04
510
原创 ES6基础语法
/定义对象的简洁方式：在声明对象时，值的变量名和属性相同时，可以只写属性而不写值；const name = '许愿';name,age,type//{ name: '许愿', age: 30, type: 'gold' }
2024-04-13 10:48:14
758
原创 TypeScript基础知识
TypeScript 是 JavaScript 的类型的超集，支持ES6语法，支持面向对象编程的概念，如类、接口、继承、泛型等。安全兼容JavaScript，是JavaScript的超集；引入类型系统，可以尽早定位错误位置，帮助提升开发效率；先进的JavaScript，支持JavaScript的最新特性；TypeScript在社区的流行度越来越高，他非常适用于一些大型项目，也非常适用于一些基础库，极大地帮助我们提升了开发效率和体验。demo(2)
2024-04-05 11:16:28
958
原创 TypeScript:class类
/ 类中主要包含两个部分：属性&方法// 定义实例属性name:string="张三";// 使用static关键字定义的属性（静态属性|类属性），即不用通过new实例可以直接访问的属性// readonly:表示一个只读的属性// 只读静态属性// 定义实例方法sayHi(){alert('你好');
2024-04-05 09:13:47
462
原创 Vue3选项式api和组合式api
①代码风格： data 选项写数据， methods 选项写函数，一个功能l逻辑的代码分散；②优点：易于学习和使用，新手上手简单；③缺点：代码组织性差，相似代码逻辑不好复用，逻辑复杂代码也不好阅读；虽然提供了 mixins用来封装逻辑，但出现数据函数覆盖的概率大，不好维护。
2024-03-12 21:48:23
309
原创 vue-router
to:字符串/对象；replace:设置成replace属性的话，当点击时，会调用router.replace(),而不是router.push();active-class:设置激活a元素后应用的class，默认是route-link-active;exact-active-class:链接精准激活时，应用于渲染的< a >的class,默认是route-link-exact-active;一共7个钩子函数，除了afterEach。
2024-03-12 15:41:48
1468
原创 字符串常用的属性和方法
一、字符串的简介String是5种基本数据类型(String，Number，Boolean，Null，Undefined)之一。定义的方式：var str = '字符串';//最常用var objStr = new String('字符串');所以，字符串也是对象。二、字符串的属性1. length: 返回字符串的长度;var str="abc";console.log(str....
2024-03-12 14:49:03
990
1
原创 Vue3 官推的状态管理 Pinia
在Vue2中一般采用Vuex进行状态管理，在Vue3中推荐使用Pinia,这Vue3中推荐使用Pinia，这是最新一代轻量级状态管理插件。推荐使用Pinia。actions:适合处理修改逻辑复杂的数据，可以在actions中定义好函数，然后在组件中调用，是state数据相关的业务逻辑，需求不同，逻辑不同。演示在全局路由守卫中获取状态值。实际开发中，路由切换时，可能需要从全局状态中获取token等信息，判断是否能进入下一页面。注：无论是pinia还是vuex，通过解构的方式获取状态，会导致状态失去响应性。
2023-11-22 19:35:15
1279
原创 请求服务器数据API
用来请求服务器数据发起的是HTTPS请求，同时它需要在微信公众平台配置HTTPS服务器域名,一个月可申请三次修改，否则无法使用wx.request请求服务器数据。WebSocket会话，文件上传下载服务器域名都是如此。
2023-11-06 16:18:52
417
原创 Vue3搭建&启动
vue开发过程中，习惯使用@代替src,vite默认不识别。1.project-name 输入项目名vue3-vite。在根目录下添加编辑器配置文件： .editorconfig。2.select a framework 选择框架。3.select a variant 选择语言。可以在alias中给常用的目录定义其他别名。初始化Eslint配置。
2023-07-29 23:39:07
4949
原创 【面试题-Vue】常见问题二、组件类
组件之间数据传递，子组件是否可以修改父组件的prop,父子组件生命周期执行，keep-alive,扩展一个组件
2022-11-18 00:00:22
293
1
原创 【面试题-浏览器】请描述 cookies , sessionStorage 和 localStorage 的区别？
请描述 cookies , sessionStorage 和 localStorage 的区别？
2022-11-16 23:56:49
125
原创 vue2：mixin混入
官网定义:混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。本人简单粗暴的理解：1.一个可以存储公共数据、公共方法的js文件，那个组件使用那个组件就引入；2.分为全局混入，局部混入；3.使用时注意变量不要重名。全局混入的使用1.定义：mixin_global.jsexport default { data() { return {
2021-06-24 00:15:04
275
原创 高频面试题二：数组去重
const arr = [1, 2, 1, ‘1’, 17, true, true, false, ‘true’, ‘a’, {}, ‘a’, {}, ];=》[1, 2, “1”, 17, true, false, “true”, “a”, {}, {}]方法一：利用Array.from(new Set()) console.log(Array.from(new Set(arr)), '利用Array.from(new Set())');方法二：两层for循环+spliceunique: .
2021-05-28 22:51:28
160
原创 高频面试题一：数组扁平化
数组扁平化是指将一个多维数组变为一维数组。 const arr = [1, [2, [3, 4], 5], 6]; // 方法一：使用flat(Infinity) console.log(arr.flat(Infinity), 'es6的多维数组拉平的方法flat(Infinity)'); // [1, 2, 3, 4, 5, 6] "es6的多维数组拉平的方法flat(Infinity)" // 方法二：利用正则 const reg = /\[|\]|,/g;
2021-05-28 22:14:47
193
原创 js:获取URL参数并转换成对象
获取URL参数并转换成对象 getUrlParams:function() { const result = {}; let url = window.location.search; const reg = /[?&][^?&]+=[^?&]+/g; const arr = url.match(reg); if (arr) { arr.forEach(v => { let
2021-05-16 19:33:53
360
原创 ajax请求的函数封装
/* 函数功能:ajax请求发送数据 参数(对象):method:请求方式,字符串; url:请求的地址,字符串; datas:要传递的参数,对象结构,可选参数; success:响应成功后要执行的函数; error:响应失败后要执行的函数; */ function ajax(options) { //1.参数处理:设置参数的默认值; var method=options.meth
2020-10-24 16:07:41
278
原创 递归：函数自己调用自己
一、什么是递归？程序调用自身的编程技巧成为递归。（函数自己调用自己）一般来说，递归需要有边界条件，递归前进段，递归返回段。二、递归的作用：大大较少了程序的代码量。三、经典递归的使用场景1.深拷贝// 深拷贝function deepClone(obj) { // 判断是否是数组 let newobj=Array.isArray(obj)?[]:{}; // 判断是否为简单数值类型 if (typeof obj != 'Object') { return newobj=
2020-10-24 12:08:45
4348
原创 闭包：函数作为函数的返回值
一、什么是闭包？闭包就是函数作为函数的返回值，延长函数内部变量的生命周期function fu1() { var a=1; return function fu2() { console.log(a) }}fu1()();二、闭包有啥作用？1.可以在函数外部读取函数内部变量；2.让函数内成员始终存活在内存中（延长局部变量的生命周期）；**缺点：**闭包会延长局部变量的生命周期，若以后不再操作时，局部变量依然存活在内存中，占据内存空间，浪费内存三、典型的应用场景jq发
2020-10-24 11:10:51
868
原创 前段开发的心得
一、代码类的1.变量名和方法名不要重复；2.处理后台数据时注意判断返回的数据为null，“”，[],{}的情况；二、排查bug1.打印日志；2.分批注释排查；
2020-08-20 00:37:48
149
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人