前端开发
文章平均质量分 63
椰卤工程师
这个作者很懒,什么都没留下…
展开
-
google超强插件助力提升网站可访问性,排名直线提升
对于我们几乎所有人来说,网络是日常生活中不可或缺的一部分。全世界,五分之一的人有残疾——视觉、听觉、运动或认知——这可能使他们难以或无法使用网站。过去,残疾人无法使用其网站的组织可以简单地提供替代方案,例如拨打电话号码。然而,今天,这已经不够了。创建一个包容性社会是一个全球关注的问题,无论是创建无障碍建筑、信息、教育、工作还是娱乐……这都是正确的。可感知——人们可以看到或听到内容可操作——人们可以通过打字或说话来访问内容可理解——使用的语言清晰简单健壮——人们可以使用各种辅助技术访问内容。原创 2023-02-07 11:40:13 · 512 阅读 · 0 评论 -
Threejs 导入动态模型 - 兔子岛
Threejs 3d动画兔子岛,兔年吉祥!原创 2023-01-19 10:42:04 · 1916 阅读 · 0 评论 -
mapbox地图动画一键飞行
最近,Mapbox GL JS 从 v2.9 开始支持将地图显示为 3D 地球。话不多说,马上看看效果怎么样:mapbox地图动画我们通过设置投影属性,即可将地图更改为地球。原创 2022-12-01 19:15:45 · 1211 阅读 · 0 评论 -
前端安全:CSRF、XSS该怎么防御?
XSS是后端的责任,后端应该在用户提交数据的接口对隐私敏感的数据进行转义。NO,这种说法不对所有插到页面的数据,都要进行过滤转移,当没有敏感字符的时候,就可以直接插到页面上显示了。NO,丝毫没有什么作用XSS攻击是页面被注入了恶意的代码,利用恶意脚本,攻击者可以获取用户的Cookie、SessionID等敏感信息。在HTML中内嵌的文本中,恶意内容通过script标签注入在内联的JS中,拼接的数据突破了原本的限制在标签属性中,恶意内容包含引导,从而突破属性值的限制。原创 2022-11-12 15:54:31 · 2421 阅读 · 0 评论 -
【避坑指“难”】React umi项目打包,服务器找不到资源目录,umi.[hash].js Not Found
homepage 的作用是设置应用的跟路径,我们的项目打包后是要运行在一个域名之下的,有时候可能是运行在跟域名下,也有可能运行在某个子域名下或或域名的某个目录下,这时候我们就需要让我们的应用知道去哪里加载资源,这时候就需要我们设置一个跟路径,而且有时候我们的资源会部署在 CDN 上,你必须告诉打包工具你的CDN地址是什么。中homepage属性时,build打包之后的文件资源默认路径是。原创 2022-10-11 11:21:07 · 1428 阅读 · 0 评论 -
前端鉴权的10种方式
鉴权(Authentication) 在信息安全领域是指对于一个声明者所声明的身份权利,对其所声明的真实性进行鉴别确认的过程。原创 2022-10-09 15:15:34 · 3670 阅读 · 1 评论 -
深受1px的困扰,如今终于解决了
移动端适配主要就分为两方面,一方面要适配不同机型的屏幕尺寸,一方面是对细节像素的处理过程。如果你在项目中直接写了 1px ,由于 dpr 的存在展示导致渲染偏粗,其实是不符合设计稿的要求。...原创 2022-08-31 10:36:34 · 1079 阅读 · 0 评论 -
通俗易懂,一文学会前端缓存
主要分为:浏览器缓存、http缓存其中http缓存是web缓存的核心,最难懂也是最重要的一部分。浏览器缓存,如localStorage,sessionStorage,cookie等等。这些功能主要用于缓存一些必要的数据,比如用户信息,需要携带给后端的参数。(一般只能保存5M左右的数据,多了不行)所以接下来,我们的重点将围绕http缓存展开。http缓存可以减少带宽流量,加快响应速度。...原创 2022-08-30 16:24:33 · 304 阅读 · 0 评论 -
又到了battle EventLoop的季节
Event Loop ,“事件循环”浏览器 or Node的一种解决JavaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理。执行一个宏任务(栈中没有就从事件队列中获取)执行过程遇到微任务,添加到微任务队列中宏任务执行完毕后,立即执行微任务队列的所有微任务当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)...原创 2022-08-29 16:40:45 · 263 阅读 · 0 评论 -
【知识总结】开发提效50%的Javascript常用函数
slice 也并不会修改原来的数组。原创 2022-08-23 10:20:57 · 382 阅读 · 0 评论 -
做好架构设计离不开SOLID五大原则
下面分享几个软件架构设计时可以遵循的原则,同时在进行功能模块设计也可以参考这些设计原则。原创 2022-07-22 10:26:40 · 352 阅读 · 0 评论 -
使用评估工具进行前端性能优化大赏
众所周知,Google一直关注web性能。早在2010年,Google就在一篇博文中指出,性能是影响网站自然搜索结果排名的一个重要因素。如果你运行的网站由内容驱动,且大部分流量来自搜索引擎,这就会让你停下来。好在Google有一个评估工具。Google PageSpeed Insights 会分析网站,并就如何改进其性能和用户体验给出提示。当PageSpeed Insights呈现分析时,它会执行两次:第一次使用移动用户代理,第二次使用桌面用户代理。它分析性能时考虑两个关键因素:内容加载所需时间,以及整个页原创 2022-06-14 19:56:14 · 271 阅读 · 1 评论 -
如何做好前端代码规范,让你的代码更丝滑
如何做好前端代码规范,让我的开发效率倍增,代码更丝滑~原创 2022-06-13 09:32:43 · 711 阅读 · 0 评论 -
性能优化:nginx静态压缩,网页速度倍级提升
随着项目的不断优化迭代,加入了许多高大上且卷的功能,是相当炫酷了。比方说:Antv 的L7、G2、G6、Echart,集众多优秀的组件于一身(它们真的很大,非常大),固然越走越沉重,是时候减负了!为什么要进行性能优化?这是优化前的一张资源加载图,从上图我们可以获取到那些信息呢?1.3M的资源,加载了9.06s,项目经理看了都流泪35个请求,共2.6M资源,传输无压缩,真是太实在了当然,资源的加载速度和网络带宽是密不可分的,需要运维同学去进行优化了,那我们能做些什么呢?nginx 资源动态原创 2022-05-30 11:51:00 · 1103 阅读 · 0 评论 -
【避坑指“难”】自定义AntV G2 Chart柱状图悬浮框信息
实现效果如下:官方配置如下:import { Chart } from '@antv/g2';const data = [ { time: '16 Q1', type: '移动游戏', value: 0 }, { time: '16 Q1', type: '移动购物', value: 17.8 }, { time: '16 Q1', type: '移动营销', value: 69.4 }, { time: '16 Q1', type: '共享单车', value: 12.8 },原创 2022-04-07 11:35:21 · 1025 阅读 · 0 评论 -
【避坑指“难”】Antd Cascader实现悬浮提示Tooltip功能
Antd文档看了几圈下来,没有给出直接配置悬浮提示Tooltip的入口,该功能和自定义新增功能差不多(【避坑指“难”】Antd Cascader实现自定义新增功能),需要重新修改下渲染逻辑。核心代码1、 对Cascader中的options进行遍历操作 options={handleCascaderTooltips(options)}handleCascaderTooltips()方法export const handleCascaderTooltips = (opt: any) => {原创 2022-03-14 15:10:40 · 1928 阅读 · 2 评论 -
【避坑指“难”】Antd Cascader实现自定义新增功能
效果图如下:可以自定义在某一层实现数据新增代码实现对Cascader中的options做处理 <Cascader allowClear expandTrigger="hover" options={customerOption} />const customerOption = handlecustomerOption(showoptions);const handlecustomer原创 2022-02-18 18:26:02 · 1742 阅读 · 3 评论 -
【避坑指“难”】Antd Form动态表单删减,默认显示第一行
默认是通过Button按钮实现From.item的添加。如果我们默认至少输入一条数据,即默认显示第一行输入框,可以这么配置: <Form.List initialValue={[{}]}> </Form.List>原创 2022-02-17 14:31:24 · 1121 阅读 · 0 评论 -
【数据可视化】AntV L7实现地图可视化,DrillDownLayer钻取异步获取数据,悬浮预警框
中国地图展示demo如下:一、钻取地图的使用钻取地图支持两种可视化类型填充图:在地图上显示每个区域,根据区域值设置区块填充颜色气泡图:每个区域用气泡显示,根据区域值设置气泡的颜色和大小1)构造函数scene L7 scene 对象option 行政区划配置项drillDepth number 下钻深度 0 | 1 | 2 1 市级 2,县级customTrigger 是否自定义下钻交互,默认 falsedrillDownTriggerEvent 向下钻取的触发事件 ⛔custom原创 2022-01-16 17:16:03 · 2707 阅读 · 2 评论 -
【避坑指“难”】Antd Tree半选状态halfCheckedKeys渲染问题
一、复现问题Antd的Tree树形组件,勾选后,如果父节点下的所有子节点没有被勾选(半选状态),传值的时候是不会传父节点的,只有在勾选了所有子节点的时候(全选状态)才会传父节点的值。二、解决方案1)在半选的状态下,也要将父节点传值给后端const [checkedKeys, setCheckedKeys] = useState<number[]>([]);const [treeData, setTreeDate] = useState([]); const [paramsList,原创 2022-01-13 17:28:20 · 6474 阅读 · 0 评论 -
每天都在使用编辑器,language-service-protocol的工作原理到底是什么?
language-service-protocol是什么身为开发工程师,我们每天使用的最多的工具就是编辑器。在使用的过程中,有一些特定的功能,比如:为编程语言添加自动完成、转到定义、悬停文档等。传统上,必须为每个独立的开发工具重复这项工作,因为每个工具都提供不同的API来实现相同的功能。language-service是为了提供特定语言智慧和通信协议,使进程间通信开发工具沟通。language-service-protocol(后文都简称“LSP”)的目的就是标准化此类服务器和开发工具如何通信的协议。原创 2021-12-01 15:00:22 · 8342 阅读 · 0 评论 -
GitHub clone时报错unexpected disconnect while reading sideband packet,early EOF
网上给出的解决方案如下:git config --global core.compression 0然后使用depth这个指令来下载最近一次提交git clone --depth 1 <repo_URI>然后获取完整库git fetch --unshallow 最后pull一下查看状态,问题解决git pull --all然而并不起作用,因为要clone的这个库实在是太大了,我只需要里面的一个文件夹下的内容,所以换一种方式会更快。进入gihub编辑模式downlo.原创 2021-11-25 14:43:40 · 8481 阅读 · 0 评论 -
初识docker,快速上手使用
Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源。Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口(类似 iPhone 的 app),更重要的是容器性能开销极低。基于MacOS安装macOS 我们可以使用 Homebrew 来安装 Docker。brew install --cask --appdir=/Appl.原创 2021-11-24 13:57:37 · 784 阅读 · 0 评论 -
Chrome DevTools的10个开发设计实用小技巧
Chrome DevTools 不只是开发者的工具,也是网页设计师的好帮手。下面来介绍十个非常实用的设计功能。设定自己熟悉的语言支持超过80种语言选择语言下拉菜单后,重新加载DevTools即可生效。下面进入正题拉~1、长度编辑工具单位:下拉式菜单数值:拖动鼠标长度:单击数值...原创 2021-11-16 15:21:36 · 444 阅读 · 0 评论 -
【知识总结】 关于Webpack Loader知多少
loader是什么?loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效模块。以供应用程序使用,以及被添加到依赖图中。loader 本质上是导出为函数的 JavaScript 模块。在 webpack 使用过程中,经常会出现以下两种形式:在 webpack.config.js 配置文件中,去根据文件匹配信息,去配置 loader 相关信息;是在 loader / plugin 中去修改、替换、生成的行内 loader 信息。// webpack.config.js原创 2021-10-10 16:14:32 · 351 阅读 · 0 评论 -
【避坑指“难”】React实现阿里云oss上传文件代码示例
在utils中封装下列方法oss基础配置export const ossConfig = () => { return { OSSAccessKeyId: '你的OSSAccessKeyId', AccessKeySecret: '你的AccessKeySecret', expire: 87600 //过期时间 }上传文件的方法export const uploadFile=(file:any)=>{ const OSSAccessKeyId = o原创 2021-10-10 15:02:07 · 790 阅读 · 0 评论 -
【知识总结】有关前端安全的面试题总结
你了解哪些前端安全相关的知识?或者名词?xsscsrfhttpscsp:内容安全策略,可以禁止加载外域代码,禁止外域提交等等hsts:强制客户端使用https与服务端建立连接x-frame-options:控制当前页面是否可以被嵌入到iframe中referrer-policy:控制referer的携带策略能稍微详细的聊一下xss吗cross-site scripting,跨站脚本,通常简称为xss。说白了就是攻击者想尽一切办法将可执行代码注入到网页中,而恶意代码未经过过滤,与网站正原创 2021-09-21 00:46:53 · 2258 阅读 · 0 评论 -
【知识总结】前端高频微信小程序面试题合集
如何避免微信小程序中app.js中onShow事件的n次出发问题在开发中,遇到一个一个小难题,就是app.js中onShow事件会因调用其他API而触发,比如,wx.chooseImage、wx.makePhoneCall、wx.previewImage。小程序热启动确实是一个坑,因为通过扫码或者分享进入也会热启动,一般开发者都只在onLaunch处理扫码进入的相关逻辑,热启动时就出bug了。目前比较好的办法就是onShow中通过首个参数option时下的scene判断进入的场景,根据场景处理相关逻辑原创 2021-09-20 20:33:34 · 803 阅读 · 0 评论 -
【知识总结】前端高频Vue面试题合集
v-if 和v-show的区别共同点都能控制元素的显示和隐藏不同点v-show:通过css的display:none控制隐藏,只会编译一次v-if:动态的向DOM树添加或者删除DOM元素,若初始值为false,就不会编译了v-if不停的销毁和创建比较消耗性能。所以如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大);如果不需要频繁的切换某节点使用就使用v-if(初始渲染开心较小,切换开销较大)v-if和v-for的优先级v-for优先于v-if被解析。如果同时出原创 2021-09-20 18:45:47 · 345 阅读 · 0 评论 -
【知识总结】前端高频React面试题合集
React中keys的作用是什么?keys是react用于追踪哪些元素被修改、 被添加、被移除的辅助标示。render(){ return( <ul> { this.state.list.map(({item,key})=>{ return <li key={key}> {item} </li> }) } </ul> )}在开发过程中,我们需要保证某个元素的key在其同级元素中具有唯一性。原创 2021-09-18 23:31:57 · 619 阅读 · 0 评论 -
【知识总结】十个面试官九个会问到的webpack问题都汇总到这一篇啦
webpack 的常用插件html-webpack-plugin: 将一个页面模版打包到dist目录下,默认都是自动引入js 和 cssconst HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { plugins: [ new HtmlWebpackPlugin({ template: './index.html', // 以咱们本地的index.html文件为基原创 2021-09-17 11:17:06 · 343 阅读 · 0 评论 -
通过tracking.js、陀螺仪 和 three.js 实现裸眼3d效果
体验地址:https://threejs-3d.vercel.app/github地址:https://github.com/lqq-code/threejs-3dthree.js是一款webGL框架以简单、直观的方式封装了3D图形编程中常用的对象是一个跨浏览器的脚本,使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形。1、创建场景三要素:场景 + 相机 + 渲染器构造函数PerspectiveCamera(fov, aspect, ne原创 2021-09-13 17:54:35 · 1620 阅读 · 0 评论 -
【避坑指“难”】js通过输入身份证号,自动填充出生年月和性别信息
<Form form={form} name="validate_other" onFinish={onFinish} style={{ position: 'relative' }} initialValues={{ applyType: 1, }} > <Form.Item name="applyName" label="代理人" rules=原创 2021-08-26 10:41:34 · 895 阅读 · 0 评论 -
【避坑指“难”】小程序canvas绘制矩形圆角边框
ctx:canvas上下文x:圆角矩形选区的左上角 x坐标y:圆角矩形选区的左上角 y坐标w:圆角矩形选区的宽度h:圆角矩形选区的高度r:圆角的半径 getArcCanvas(ctx, x, y, w, h, r) { ctx.beginPath() ctx.setFillStyle('#fff') ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5) ctx.moveTo(x + r, y) ctx.li.原创 2021-08-11 16:12:02 · 579 阅读 · 0 评论 -
【避坑指“难”】小程序自定义分享好友,Modal框从底部升起,支持图片转发好友、保存本地
微信官方给的分享转发功能有三种直接转发给好友 wx.showShareImageMenu转发给好友or朋友圈 wx.showShareMenu自定义菜单 wx.showActionSheet第三种方式扩展性比较好,但是界面就比较惨淡所以,为了更好的体验效果,接下来我们自定义Modal实现转发、本地保存功能一、效果展示二、代码实现1) 写代码送icon2) index.wxml<view class="cu-bar foot share-item grid ">原创 2021-08-06 17:55:08 · 806 阅读 · 1 评论 -
【避坑指“难”】小程序wx.navigateTo带参数路由跳转,跳转后获取参数
当进行页面跳转的时候,要将一些基本信息一起带到跳转后的详情页,这时候我们就得把参数添加到路由跳转链接上index.js<cover-view wx:if="{{isPicture}}" data-id="{{picUrl}}" bindtap="handleJumpto" class='jump-item' ></cover-view>data-id 绑定参数为picUrl(这里指的是图片链接) handleJumpto(e){ consolo.log('e原创 2021-08-06 17:05:10 · 683 阅读 · 0 评论 -
【避坑指“难”】小程序支付功能,最详细的数据签名加密,坑都给你排完了,还不能致富吗?
官方给出的支付api :wx.requestPayment(Object object)官方demo看起来是有点迷糊的,网上很多实例也只是把demo包装了一下,没有讲到支付功能的核心,比方说看下面的例子????wx.requestPayment({ timeStamp: '', nonceStr: '', package: '', signType: 'MD5', paySign: '', success (res) { }, fail (res) { }})time原创 2021-08-04 22:08:28 · 869 阅读 · 0 评论 -
【避坑指“难”】小程序接入客服功能,无需第三方,代码量个位数
小程序普遍都有联系客服的功能,其实这个实现方式特别简单,只需一个button就能触发操作。注意:View上绑定bindtap事件是不会唤起客服功能的哟,一定要用button <button open-type="contact" class="contact-btn">联系客服</button>点击立即唤起客服聊天界面需要去微信小程序后台添加客服人员的微信号客服人员可以通过后台、或者手机收到最新消息...原创 2021-08-04 21:30:02 · 979 阅读 · 0 评论 -
客户端检测把不同浏览器之间存在的差异都摸清楚了
跨平台的浏览器尽管版本相同,但总会存在不同的问题,作为一名合格的前端开发,我们需要面向最大公约数来设计,就得使用各种方法来检测客户端,以克服或避免这些缺陷。我们的宗旨是:第一,绝对不意气用事;第二,绝对不漏过任何一个浏览器;第三,绝对保证浏览器公正漂亮。任何时候,只要有更普适的方案可选,都应该毫不犹豫地选择。首先要设计最常用的方案,然后再考虑为特定的浏览器进行补救。能力检测能力检测(又称特性检测)即在 JavaScript 运行时中使用一套简单的检测逻辑,测试浏览器是否支持某种特性。if原创 2021-05-24 16:08:05 · 645 阅读 · 0 评论 -
网站性能优化利器:LightHouse全面检查各项指标,多种优化方案可选
检查网站性能过程全局安装 lighthousenpm install -g lighthouse然后输入你的页面lighthouse https://example.comlighthouse 会自动生成 HTML 报告,你也可以使用 JSON 格式。生成报告如下:解读各项指标含义:FCP (First Contentful Paint):渲染第一个元素(文本、图片、canvas…)的时间点SI (Speed Index):首屏展现时间LCP (Largest Contentfu原创 2021-05-10 11:27:37 · 1863 阅读 · 0 评论