- 博客(40)
- 收藏
- 关注
RSS订阅原创 常见兼容性问题
解决：使用 -webkit-overflow-scrolling: touch;解决：使用标准 CSS 或重置样式表（如 normalize.css）。解决：设置合理的点击区域（如最小 40x40 px）。解决：改用 transform 实现固定效果。使用 dpr 检测设备像素比，加载合适的资源。使用弹性布局或媒体查询适配不同屏幕宽度。解决：清除默认样式，设置统一样式。使用 viewport 配置视口。压缩 CSS、JS 和图片资源。使用懒加载（如图片懒加载）。比如按钮、输入框的样式。
2025-01-14 17:17:41
174
原创 你不知道的async/await
然后，我们使用 requestAnimationFrame() 函数等待下一帧，并将其封装在一个 Promise 中，以便在下一帧完成时恢复函数的执行。然后，我们使用 map() 方法将每个响应解析为 JSON 数据，并将这些数据存储在一个新的数组中。注意，在 try 代码块中使用了 await 关键字，这告诉 JavaScript 引擎等待该行代码的结果，然后继续执行接下来的代码。然后，我们使用 map() 方法将每个 URL 转换为一个 fetch() 方法调用，并将这些调用存储在一个新的数组中。
2024-08-13 11:46:25
389
原创 部分性能探索
React是目前最流行的前端框架之一，但是在大型应用中，组件数量庞大，每次渲染都会造成很大的性能压力。Vue是另一种流行的前端框架，与React类似，在大型应用中也需要考虑性能问题。
2024-08-13 11:39:35
305
原创 数组去重-简洁版
它首先将数组映射为键值对相同的 Map，由于 Map 键的唯一性，重复的数组元素会被自动忽略。该方法利用 filter() 遍历数组，对于每个元素，通过 indexOf() 查找其在原数组中的第一个索引。如果当前元素的索引与正在遍历的索引相同，说明这是该元素在数组中的首次出现，保留该元素；这种方法简洁高效，利用 ES6 的 Set 数据结构自动去除重复元素的特性，再通过扩展运算符将 Set 转换回数组。Set 是一种特殊的集合，不允许重复元素存在，因此插入过程会自动过滤重复项。reduce() 方法。
2024-08-13 11:34:24
481
原创 vue中的12种设计模式
学习 Vue 设计模式，就像学习一门新的语言，能够让你更深入地理解 Vue 的工作原理，写出更健壮、更灵活、更可扩展的代码。遵循“属性向下，事件向上”的原则，这些组件确保数据流清晰、可预测，使其易于重用、测试和维护。Vue 中的控制器组件弥合了 UI（谦逊组件）和业务逻辑（可组合函数）之间的差距。将整个对象传递给组件，而不是单个属性，可以简化组件并使其更具未来可扩展性。长组件原则鼓励创建自文档化、命名清晰的组件，提高代码质量和可理解性。这可以简化父组件，并将迭代逻辑封装在专门的列表组件中，保持整洁。
2024-07-08 16:29:12
548
原创 关于闭包及其闭包应用
由于在JavaScript语言中，只有函数内部的子函数才能读取局部变量，闭包就是能够读取其他函数内部变量的函数。柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并返回接收余下参数并返回结果的新函数的技术。在实际业务中遇到一些固定的操作，需要复用的数据，或为函数扩展功能时，就可以考虑使用柯里化函数。当在函数内部使用函数包装器的时候，此时函数包装器就是一个闭包，有权访问父作用域的所有变量。高阶函数是对其他函数进行操作的函数，可以将它们作为参数或返回它们。
2023-11-06 14:07:52
189
原创 JWT登录校验
通俗地说，JWT的本质就是一个字符串，它是将用户信息保存到一个Json字符串中，然后进行编码后得到一个JWT token，并且这个JWT token带有签名信息，接收后可以校验是否被篡改，所以可以用于在各方之间安全地将信息作为Json对象传输。2、后端核对用户名和密码成功后，将包含用户信息的数据作为JWT的Payload，将其与JWT Header分别进行Base64编码拼接后签名，形成一个JWT Token，形成的JWT Token就是一个如同lll.zzz.xxx的字符串。
2023-11-06 13:38:30
383
原创 utf-8
Unicode 列表中的第一个占用 1 个字节，最后一个最多占用 4 个字节，如果处理的是英文文件，大多数字符可能只占用 1 个字节，与 ASCII 中的相同。计算机在读取 UTF-8 中以 0 开头的内容时，就知道只需要读取一个字节并显示 Unicode 中 0-127 范围内的正确字符即可。如果遇到两个 1，就需要读取 2 个字节，范围为128-2047，3 个 1 在一起表示需要读取三个字节。下面来详细看看 UTF-8 是如何工作的，以及为什么它会根据被编码的字符具有不同的长度。
2023-11-06 13:14:16
157
原创 connect-history-api-fallback原理
connect-history-api-fallback是一个用于处理前端路由的中间件，它的原理是在服务器接收到请求时，检查请求的路径是否匹配到静态文件（如HTML、CSS、JS等），如果不匹配，则将请求重定向到前端的入口文件，通常是 index.html。需要注意的是，不同的服务器可能有不同的配置方式来使用 connect-history-api-fallback，例如在Express服务器中使用 app.use(history()) 进行中间件的注册。具体的配置方式请参考相关服务器和中间件的文档。
2023-11-05 17:42:40
571
原创 Hash模式与History模式
因为现在我们开启了路由的history模式，而该模式是通过HTML5中的history中的api来完成路由的操作的，也就是当我们单击菜单的时候，是通过history.pushState( ) 方法来修改地址栏中的地址，实现组件的切换，而且还会把地址保存的历史记录中（也就是可以单击浏览器中后退按钮，实现后退等操作），但是它并不会向服务器发送请求。上图的含义就是，当单击浏览器中的刷新按钮的时候，会向服务器发送请求，要求node服务器处理这个地址，但是服务器并没有处理该地址，所以服务器会返回404。
2023-11-05 17:28:40
401
原创 vite和webpack的区别
Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。将script标签设置type=“module” 加载模块 import引入方式。
2023-11-03 16:01:33
433
原创 CA证书与服务器证书
使用CA证书可以确保颁发证书的机构的合法性和可信度，从而建立起网络通信的信任链。服务器证书和CA证书的合理运用能有效提升网络通信的安全性和可靠性，为用户提供更加安全可靠的网络服务。在验证服务器证书时，客户端需要使用CA证书来验证服务器证书的合法性。如果CA证书无效或者未通过验证，客户端将无法信任任何由该CA机构颁发的证书。服务器证书和CA证书是网络通信中使用的两种重要的证书。服务器证书是用于验证服务器身份的证书，而CA证书是用于验证证书颁发机构(Certificate Authority)身份的证书。
2023-11-01 20:30:00
1372
原创 redis是什么
和Memcached类似，它支持存储的value类型相对更多，包括string(字符串)、list(链表)、set(集合)和zset(有序集合)。区别的是redis会周期性的把更新的数据写入磁盘或者把修改操作写入追加的记录文件，并且在此基础上实现了master-slave(主从)同步。增量请求文件则是把内存中的数据序列化为操作请求，用于读取文件进行replay得到数据，序列化的操作包括SET、RPUSH、SADD、ZADD。值得一说的是它的独家功能：存储列表和集合，这是它与mc之流相比更有竞争力的地方。
2023-11-01 16:01:30
273
原创 PDF转图片 + 分页
本文需要的依赖是pdf.js pdf.worker.js jquery.js 当然在git上都可以找到。PDF转图片 有两种方式，一种是请求所有分页后合成一张图片，一种是分页加载。本文推荐后者，前者在实操中 pdf页码过大时 转换超时导致失败。也可以使用本文上传的资源依赖，在这篇文章的上方下载。
2023-07-19 16:00:21
973
原创 vue懒加载图片懒加载
main.js中：main.js中：1,npm install vue-lazyload --save-dev;import VueLazyload from ‘vue-lazyload’;2,Vue.use(VueLazyload, {//预加载高度preLoad: 1.3,//错误时显示的图片error: ‘static/about111.jpg’,//图片加载中显示的图片loading: ‘static/img/loading.gif’,//尝试加载次数attempt: 1}
2020-07-07 10:20:55
192
原创 vue瀑布流（图片+摘要）
产品需求，pc端添加图片瀑布流。废话少说直接上干货。简介：我使用的是vue-waterfall2+vue-lazyload两个插件。特点：使用简单，自定义样式修改灵活方便。Use：npm install vue-waterfall2@latest --savenpm install vue-lazyload --save首先在mian.js中直接引入：import waterfall...
2020-04-24 17:37:35
880
原创 前端面试题个人小结
1，的title和alt有什么区别：Alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示，读屏器阅读图片。title 可提高图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。鼠标滑过时显示的文字提示，用户体验上很重要。当然不必要所有的img标签都加此属性，比方说logo这样比较重要或者说用户会体验到的图片内容建议一定要加此属性。2，前端需要注意哪些SE...
2020-03-24 21:36:45
192
原创 uniapp展示在h5端的seo关键词与摘要
首先引入html，并修改h5配置。html内容为：<!DOCTYPE html><html lang="zh-CN"> <head> <title>好故事</title> <meta name="keywords" content="" /> <meta ...
2019-12-19 16:25:01
5507
3
原创 vue父子组件、兄弟组件通信
在官网和许多博客、帖子中已经有详尽的父子组件通信的流程，在本文着重讲解和配置兄弟组件通信。关于 兄弟组件通信，具体过程：一：借助第三者文件（这里我起名为：eventBus.js），**新建一个eventBus.js**文件二：文件内容： import Vue from 'vue'; export default new Vue(); ” @scroll=“scroll”>...
2019-11-29 18:14:58
681
原创 微信页面兼容性问题
最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。出现原因分析：通常我们习...
2019-10-25 17:18:48
873
原创 vue导出excel表格（基于vuecli3.0）
一，首先是依赖的安装（一共有两个）：1， npm install -S file-saver xlsx2，npm install -D script-loader二，新建目录：在src下新建一个文件夹export，新建两个js文件（后附js代码）三，在需要的.vue文件中操作：引入import { export_json_to_excel } from ‘@/export/Export...
2019-09-25 18:47:15
2382
1
原创 京东AI接口调试（neuhub，CryptoJS，MD5）
1，京东AI接口首先neuhub注册账号会生成一个只属于自己的SecretKey。2，接口中sign参数是对象（官网文档说是string），但是，经过实际趟坑后发现，加密后生成string的sign会提示报错信息：sign不生效这是本人根据文档说明，提取信息，看到sign是MD5加密，so，自己CryptoJS加密后得到（神奇的成功了）：可以看到，sign并不是一个string，但是成...
2019-09-10 18:18:28
838
3
原创 微信小程序多选复选框checkbox。微信小程序官方文档bug
由于个人从事微信小程序开发相关工作，在查询相关文档时（微信官方文档-小程序-表单组件-checkbox），发现示例代码中的一处错误。问题出现原因：根据文档示例代码提示，设置本人本地代码，却发现下图红框代码无论是“true”or“false”，页面展现效果都是一样的（都会选中“中国”一项），误导本人纠结片刻，冷静思考后，恍然大悟，下图红框处不应该是字符串类型（也就是不应该使用单引号），直接填写b...
2019-07-26 17:41:25
1239
原创 微信小程序wx.showToast字数限制不能换行的问题
看了很多帖子，自6..6.0版本以后wx.showToast有字数限制了，有人说不能折行，字数过多就会显示“...”，还希望官网做出优化，我个人本着对技术的“执着追求”（其实是项目要求！），我必须做出探索，所以经过不懈努力，终于解决了问题。看了很多帖子都没有明确的解决方案，在这里我把我的解决方案和效果图拿上，仅供大家参考。方案：wx.showToast({icon: 'none',...
2019-07-26 17:04:22
17486
8
原创 关于判断是否安装flash
//是否安装了flash function flashChecker() { var hasFlash = 0; //是否安装了flash var flashVersion = 0; //flash版本 if (document.all) { var swf = new ActiveXObject('ShockwaveFlash...
2019-05-16 10:36:39
272
原创 关于uni-app的一些坑（日后再做补充）
1，关于标签：input与小程序不同，是闭合2，一个class 不用{} 遍历需要[index]3优点 小程序中不允许this.setdata({ that.isSelecte[index].selected = !that.isSelecte[index].selected;})这种带‘.’操作但是uni-app就可以了。4,类名绑定与小程序不同，同样方式小程序生效 但...
2019-04-28 18:41:52
13596
4
原创 微信小程序多项选择与删除功能
废话不多数直接上代码！这是你们希望看到的吧，其实我也是懒，懒得想去说什么了。wxml代码：<view class="report-reason-list" ><text wx:for = "{{items}}" wx:key="{{index}}" data-selected="{{index}}" class="{{isSelecte[index].selec...
2019-04-17 19:13:22
3442
原创 css文本多行溢出后显示省略号代替
大家都会说起因，那我是不是不说会不随潮流啊？ 诶 ， 那我就不说了 哈哈哈 直接说重点。超出后用省略号有两种方式，看具体需求：一，设置一行超出后省略号代替。代码如下：overflow：hidden； //代表的是超出后隐藏white-space: nowrap; //禁止换行text-overflow：ellipsis；//超出后省略号二，设置多行超出后省略号代...
2019-04-03 17:24:45
598
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人