- 博客(109)
- 收藏
- 关注
RSS订阅原创 防抖节流的hook封装
在页面中很多情况需要用到防抖和节流来优化系统性能，避免了函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。使用的时候只需要传入提前定好的类fn和所需延迟时间delay即可。只需窗口调整完成后，计算窗口大小。搜索框搜索输入，手机号、邮箱验证输入检测。使用时只需要传来定义的类和触发时间即可。滚动加载，加载更多或滚到底部监听，防止。主要是利用定时器来实现这两个功能。
2023-11-02 17:29:23
252
原创 js实现数组扁平化的几种方式
数组的扁平化就是将一个嵌套多层的数组转换为只有一层的数组，扁平化也是面试中常见的考题。先用数组的 some 方法把数组中仍然是组数的项过滤出来，然后执行 concat 操作，利用 ES6 的展开运算符，将其拼接到原数组中，最后返回原数组。flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。像上述能实现扁平化的flatDeep函数实现方式有好几种，下面就尝试这几种方式实现一个flatDeep函数吧。
2023-11-02 17:06:11
192
原创 vue（javaScript） 操作字符串的常用方法
该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。：该方法会返回指定索引位置字符的 Unicode 值，返回值是 0 - 65535 之间的整数，表示给定索引处的 UTF-16 代码单元，如果指定位置没有字符，将返回。上面说了，如果start是负数，则该参数规定的是从字符串的尾部开始算起的位置。该方法和indexOf()类似，只是查找的顺序不一样，indexOf()是正序查找，lastIndexOf()是逆序查找。否则，它只替换第一个匹配子串。
2023-11-01 22:32:47
3908
2
原创 虚拟DOM和真实DOM的区别
一切为了减弱频繁的大面积重绘引发的性能问题，不同框架不一定需要虚拟DOM，关键看框架是否频繁会引发大面积的DOM操作。虚拟DOM是由js实现的避免DOM树频繁更新，通过js的对象模拟DOM中的节点，然后通过特定的render方法将它渲染成真实的节点，数据更新时，渲染得到新的 Virtual DOM，与上一次得到的 Virtual DOM 进行 diff，得到所有需要在 DOM 上进行的变更，然后在 patch 过程中应用到 DOM 上实现UI的同步更新.
2023-11-01 19:40:58
143
原创 js贪心算法问题解析
如果你找零50元2张，1元1张，找零钱币为3张，并非最少的找零钱币数量，所以这种选择并不是最优选择。一个问题的整体最优解可通过一系列局部的最优解的选择达到，并且每次的选择可以依赖以前作出的选择，但不依赖于后面要作出的选择。假设你是一个商店老板，你需要给顾客找零 n 元钱，你手上钱的面值为：100元，50元，20元，10元，5元，2元，1元。假设现在有1元，2元，5元，10元，20元，50元，100元的纸币。例如：你需要找零126元，则所需钱币数量最少的方案为100元1张，20元1张，5元1张，1元1张。
2023-10-31 21:53:51
71
原创 webpack使用详解
这里，webpack 做了一个模块化 CSS 的尝试，真正意思上的「模块化」，即 CSS 类不会泄露到全局环境中，而只会定义在 UI 模块内 – 比如 react.js 这类模块，或者 web components。上一步里，我们 import 到 JavaScript 文件中的 CSS 文件中的 CSS 类打包时是 export 到全局环境的，也就是说，我们只是换了种加载 CSS 的方式，在书写 CSS 的时候，还是需要注意使用命名规范，比如 BEM，否则全局环境 CSS 类的冲突等问题不会消失。
2023-10-31 21:45:43
141
原创 小程序发布流程
到这里我们开发代码这块就完工了，剩下的就是去微信小程序平台发布了。输入微信号，设置权限，点击确认添加，手机扫描二维码，确认添加。2.1.进入【版本管理】找到开发版本，点击‘提交审核’微信，打开小程序，搜索 2002画板。在代码编写完毕后，在他顶部的导航条上找到【上传】首次提交审核，会弹出如下提示，点击前往填写。开发者，体验成员，各最多添加15人。输入版本号，项目备注,点击上传。弹出二维码，手机扫描，点击发布。5.再次点击提交审核。
2023-10-16 20:43:08
172
原创 小程序微信支付流程（商城余额支付，优惠券支付，积分抵消，微信支付）
我们知道在微信平台中，同一个公众号的openID都是不同的，它是用户身份识别的id，也就是说，我们通过openID来区分不同的用户，这个有微信开发基础的应该都很熟悉。为了知道谁在支付，我们需要先获取当前用户的openid，那么openID应该怎么获取呢？返回的数据是一个json对象，我门通过使用json_decode(JSON,true)解析为数组，数据包括用户的openID以及session_key，获取到了后我们应该将openID存入数据库中，它代表着用户的身份，那么令牌应该怎么生成呢。
2023-10-16 20:33:38
1165
原创 微信小程序授权登陆
小程序wx.login官方文档https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html。登录---->检测是否注册—>没有注册先获取用户信息进行注册（写入公司数据库）—>进行登录。wx.login—>wx.request—>后端—>小程序(腾讯)服务器。token是前端鉴权的一种方式，token由后端生成， 是有时效性的。我们在项目中，登录，授权页面，都必须要传递token值。首先封装好请求接口文件。
2023-10-16 20:25:11
102
原创 小程序如何使用vant
以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。去除，小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。引入组件后，可以在 wxml 中直接使用组件。中的"style": "v2"
2023-10-16 20:13:53
120
原创 微信小程序本地存储的异步同步用法详解
/ 获取当前 storage 中所有的 key。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。// 清除所有的key。// 清除所有的key。
2023-10-16 20:09:45
170
原创 微信小程序上拉加载更多
无论是微信小程序还是其他前端框架，都会遇到上拉加载（）和下拉刷新这种问题。其实理清楚什么时候请求数据、请求返回的几种情况，那么做这个懒加载就很简单了。
2023-10-16 20:00:55
567
原创 小程序生命周期钩子函数
当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。
2023-10-16 19:56:40
408
原创 使用promise封装wx.request()
引入fetch中封装好的promise请求，封装基础的get\post\put\upload等请求方法，设置请求体，带上token和异常处理等；在全局app.js中导入http,注册到根组件。在api.js中统一管理，请求的url地址。在http.js，根据当前环境，设置相应的。对wx.request()进行封装。在具体页面导入,并使用；在fetch.js中用。设置对应的方法并导出；
2023-10-16 19:46:50
42
原创 微信小程序双向数据绑定,父子传参
双向绑定同样可以使用在自定义组件上自定义组件的js文件，接收父组件传递的数据myValue父组件中使用自定义组件custom-component当输入框的值变更时，自定义组件的myValue属性会同时变更，父组件页面的 this.data.pageValue也会同时变更，页面 WXML 中所有绑定了 pageValue的位置也会被一同更新。},methods: {// 更新 myValue})})父组件传参到子组件当自定义组件（子组件）使用 setData更新 myValue。
2023-10-16 19:37:26
294
原创 什么是RESTful API？
网络应用程序，分为前端和后端两个部分。当前的发展趋势，就是前端设备层出不穷（手机、平板、桌面电脑、其他专用设备…）。因此，必须有一种统一的机制，方便不同的前端设备与后端进行通信。这导致API构架的流行，RESTfulAPI是目前比较成熟的一套互联网应用程序的API设计理论。
2023-10-13 09:37:42
35
原创 TCP连接中三次握手和四次挥手详解
服务器第一次收到客户端的 SYN 之后，就会处于 SYN_RCVD 状态，此时双方还没有完全建立其连接，服务器会把此种状态下请求连接放在一个队列里，我们把这种队列称之为半连接队列。当然还有一个全连接队列，就是已经完成三次握手，建立起连接的就会放在全连接队列中。如果队列满了就有可能会出现丢包现象。这里在补充一点关于SYN-ACK 重传次数的问题：服务器发送完SYN-ACK包，如果未收到客户确认包，服务器进行首次重传，等待一段时间仍未收到客户确认包，进行第二次重传。
2023-10-12 20:52:25
145
原创 get与post区别
get 和 post是HTTP中请求数据的方法；与form表单是HTTP中传输文件的类型，所以要了解其中的区别，要先了解HTTP 协议格式 和 HTTPHeader。
2023-10-12 20:41:07
27
原创 web安全及防护(XSS、CSRF、sql注入)
sql注入原理就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。sql注入防范1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。
2023-10-12 20:37:15
57
原创 Vue3+ts组件传值（父子组件和兄弟组件）
组件传值，以删除功能为例子，父子组件主要用到。借助imtt 通过emit传值。借助imtt 通过emit传值。来引入组件，在页面中使用。在main文件中挂载。
2023-10-11 07:00:00
929
原创 必要的注释利人利己
写了这么久代码，见到了各式各样、形形色色的代码，也看到了大家对待注释的态度，可以说是又爱又恨又双标……不论时我还是旁边的人，大部分都是看别人的代码恨不得每一行都加上注释，尤其是对于那些刚到公司的小白，可是轮到自己写代码的时候，却是随心所欲，能省就省。渐渐的，我比较倾向于给代码加必要的注释，自己写的时候也会在一些地方专门加上注释，因为对于比较大型的项目，尤其是团队合作的项目，加上注释是绝对是利人利己的。不然自己回头看代码时，会被很多很多的组件、命名弄得晕头转向。
2023-10-10 22:09:37
37
原创 vue中的provide和inject
这里就是我们说的provide，向下提供信息，这里提供的是当前的vue实例，相当于给了后代一个接口。这样在任何的后代组件中，都可以使用inject选项来接收指定的我们想要添加在这个实例上的属性。子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这样做的好处，相当于给了一个捷径，不用使用$parent一级一级的访问。提供依赖``是一个对象，或者是一个返回对象的函数。from表示在可用的注入内容中搜索用的 key，default当然就是默认值。
2023-10-10 20:16:53
470
1
原创 vue3.0双向数据绑定Proxy
接收三个参数，第一个参数target为代理的目标对象，第二个参数prop是代理的目标对象的属性，第三个参数是Proxy或者继承Proxy的对象，通常是proxy本身。上述代码表示当访问proxy的属性时，进行拦截判断，该属性是否是目标对象的属性，如果是那么就将其值返回出来，否则就返回0。是一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理。包装的对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）当对proxy上的属性进行重写时，将重写的该属性赋值为666。
2023-10-10 19:27:42
69
原创 Vue3生命周期钩子函数
1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method。8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；2、onBeforeMount() : 组件挂载到节点上之前执行的函数；4、onBeforeUpdate(): 组件更新之前执行的函数；
2023-10-10 18:42:41
776
原创 pinia和vuex区别
这两个都是vue.js的状态管理库,但是他们在一些方面有所不同相比之下，Pinia是一个轻量级的状态管理库，它专注于提供一个简单的API来管理应用程序的状态。相比之下，Vuex是一个更完整的状态管理库，它提供了更多的功能，比如模块化、插件和严格模式等。Pinia是基于Vue 3的Composition API构建的，这使得它更加灵活和可组合。而Vuex则是基于Vue 2的Options API构建的，因此在某些方面可能会受到限制。
2023-10-10 17:05:29
438
原创 js之继承
继承在js中占有非常重要的地位，那么在js中有很多中继承的方式，不过每一种继承方式都有优缺点。下面就列举几种继承的方式。实现继承首先需要一个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已//属性//实例方法console.log(this.name + '正在睡觉')//原型方法console.log(this.name + '正在吃：' + food);
2023-10-10 11:51:49
98
原创 null和undefined区别
1）定义了形参，没有传实参，显示undefined2）对象属性名不存在时，显示undefined3）函数没有写返回值，即没有写return，拿到的是undefined4）写了return，但没有赋值，拿到的是undefined。
2023-10-10 11:02:55
16
原创 for···in和for···of的区别
for···in和for···of的区别：首先一句话：(for···in取key，for··of取value)
2023-10-10 10:58:58
26
原创 el-form实现表单和图片手动上传和校验
这里主要是多了图片的手动上传，el-upload组件默认会自动上传提交的文件。这里要求图片不允许自动上传，需要和信息一起在提交的时候进行传递。
2023-10-07 22:11:26
1774
原创 小程序支付流程
我们知道在微信平台中，同一个公众号的openID都是不同的，它是用户身份识别的id，也就是说，我们通过openID来区分不同的用户，这个有微信开发基础的应该都很熟悉。为了知道谁在支付，我们需要先获取当前用户的openid，那么openID应该怎么获取呢？返回的数据是一个json对象，我门通过使用json_decode(JSON,true)解析为数组，数据包括用户的openID以及session_key，获取到了后我们应该将openID存入数据库中，它代表着用户的身份，那么令牌应该怎么生成呢。
2023-10-07 21:53:56
771
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人