![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
FE-阿阳
爱学习的程序猿
展开
-
部分文字高亮方案
部分文字高亮原创 2022-10-18 21:38:15 · 396 阅读 · 1 评论 -
下载图片按钮的实现
下载图片按钮的实现问题描述业务需求:点击按钮下载图片到本地解决方案方案一:直接使用 a 标签,利用 download 属性;<a href='https://xxxxx.png' download='download'><a/>download 属性指的是支持下载,赋值为下载名,但是这个方法只支持同源下的图片,遇到跨域的图片,会进行跳转;方案二:巧用 a 标签,用 js 实现,关键代码如下:<li onClick={downloadFile} classN原创 2021-07-14 16:31:48 · 422 阅读 · 0 评论 -
手写 Promise
const PENDING = 'pending'; // 等待const FULFILLED = 'fulfilled'; // 成功const REJECTED = 'rejected'; // 失败class MyPromise { constructor (executor) { try { executor(this.resolve, this.reject) } catch (e) { this.reject(e); } } /原创 2021-06-23 23:59:02 · 75 阅读 · 0 评论 -
函数柯里化
柯里化(currying)是什么?当一个函数有多个参数的时候先传递一部分参数调用它(这部分参数以后永远不会变);然后返回一个新的函数接收剩余的参数,返回结果// 柯里化演示function checkAge (age) { let min = 18 return age >= min}// 普通的纯函数function checkAge (min, age) { return age >= min}// 函数的柯里化function checkAg原创 2021-06-08 23:50:51 · 88 阅读 · 0 评论 -
高阶函数是什么
高阶函数(higher-order function)是什么?可以把函数作为参数传递给另一个函数// 高阶函数-函数作为参数function forEach (array, fn) { for (let i = 0; i < array.length; i++) { fn(array[i]) }}// 测试// let arr = [1, 3, 4, 7, 8]// forEach(arr, function (item) {// console.log(i原创 2021-06-07 23:55:12 · 218 阅读 · 0 评论 -
flexible.px2rem
需求场景:现在大部分M站的页面布局都是通过 flexible 的方案解决,flexible.js 里面提供了 px2rem 的函数方法,有些页面需要 js 中动态转换 px 为 rem 给元素设置样式,这时候就有两种方案:自己写一个函数方法,使用 flexible 提供的 px2rem;本着图省事的方案,采用直接找 flexible 的方法。但是竟然在 window 下没找到。问题排查过程:第一步,在 index.ejs 中找到了 flexible 的初始化代码,并且把 flexible原创 2021-06-06 17:04:19 · 334 阅读 · 0 评论 -
小米手机安装 Charles 证书
1、准备工作首先电脑安装 Charles(这个不教);准备一台小米手机(自备,不送);2、charles 设置代理端口打开 Charles 的 Proxy => Proxy Settings…;设置代理端口为:8888(一般都是。)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HDNzSU7o-1611141374406)(https://raw.githubusercontent.com/aYangLi/image-folder/master/csnd/原创 2021-01-20 19:17:38 · 20359 阅读 · 13 评论 -
项目新增commitLint 和 husky 步骤
第一步:安装依赖安装 commitlint 工具和规则集。npm install --save-dev @commitlint/cli @commitlint/config-conventional安装 husky 用于 git 拦截(如果安装失败需检查node版本,需要node10以上)npm i husky -D第二步:增加 commitlint 配置文件在根目录新增 commitlint.config.js 文件,并增加以下配置:module.exports = { e原创 2021-01-18 19:15:04 · 969 阅读 · 0 评论 -
安卓手机聚焦键盘挡住输入框
安卓手机聚焦键盘挡住输入框问题描述部分安卓手机聚焦,键盘会挡住输入框。以下是解决方案;解决方案<input class="item-input" v-model="cusTel" type="tel" @focus="focusScroll($event)" @input="limitInput($event, 'cusTel', 11)" placeholder="请输入您的手机号">// 输入框聚焦滑动focusScroll(e) { le原创 2021-01-17 17:42:23 · 250 阅读 · 0 评论 -
弹窗里面滚动穿透问题完美解决
弹窗里面滚动穿透问题完美解决问题描述在业务场景中经常会有页面有个弹窗操作,滑动弹窗滚动穿透到页面,页面在滚动,有些强迫症(难说话)的产品是不能接受的,就需要咱们研发想办法解决了。解决方案其实好多人都遇到这种问题,所以解决方案也比较多,但是那种方案是比较完美的呢。方案一:很多人第一思路是禁止滚动穿透去解决,在弹窗上面阻止滑动事件冒泡,这样的能解决弹窗文案少的场景,如果弹窗内本身需要滑动,比如:有 textarea 标签的输入需求,就会出问题了。方案二:下面代码完美解决:// css 设置 .原创 2020-05-29 15:20:15 · 2225 阅读 · 0 评论 -
H5 中调相机、多选等问题
H5 中调相机、多选等问题 详情描述type="file" accept="image/*" capture="camera">type="file" accept="video/*" capture="camcorder">type="file" accept="audio/*" capture="microphone">capture表示,可以捕获到系统默认的设备,比如原创 2018-02-06 08:29:04 · 948 阅读 · 0 评论 -
input 聚焦掉起键盘,并且只能输入数字
input 聚焦掉起键盘,并且只能输入数字问题描述 在实际项目开发中,会有需求为 input 聚焦掉起键盘,并且只能数字,开发者第一反应为 type 修改 number,但是 number 是允许输入 + - . e 四个字符的,以下是项目中的解决思路;解决方案1.方法一:<template> <input type=...原创 2018-03-08 17:17:43 · 2091 阅读 · 0 评论 -
ios 上浏览器返回上一页不会刷新页面问题,页面初始化的方法不执行
ios 上浏览器返回上一页不会刷新页面问题,页面初始化的方法不执行问题描述 在 ios 上浏览器返回上一页不会刷新页面问题,页面初始化的方法不执行,造成了很多意外情况,这个问题不能忍;解决方案方法一:hack方法,加入iframe强制刷新后,去除function(title){ var u = navigator.userAgent; var is原创 2018-02-07 08:23:04 · 4719 阅读 · 0 评论 -
自执行函数的使用
自执行函数的使用详情描述在模板中循环添加数据并返回;减少全局变量,最后用window.xxx=xxx;把方法暴露出去就可以(是模块化开发演变中的一个历程);自执行函数可以直接绑定在 onClick 上;比如:button onClick="(function(){alert('1')})()">执行button>原创 2018-01-30 09:12:37 · 448 阅读 · 0 评论 -
埋点时,hash 改变没出发 hashChange 事件
埋点时,hash 改变没出发 hashChange 事件 问题描述 个人中心埋点时,跳转路由没有触发 hashChange 事件解决方案vue 2.8.0 以上;vue 触发的 hash 改变,不会触发 hashchage 事件;主张在 路由钩子去完成想要进行的操作; 将 vue 回退到了2.6版本原创 2018-02-06 08:35:54 · 2853 阅读 · 2 评论 -
input 上传第二次不能选择同一文件
input 上传第二次不能选择同一文件 问题描述 在上传图片过程中,同一个 input 选择同一张图片 不会触发 onchange事件,在选择不同图片时,会多次触发onchange事件;刚开始在选择完成后,删除重新初始化一个input ,这个方法有点山炮!!! 解决方案不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的原创 2018-02-06 08:35:10 · 13593 阅读 · 4 评论 -
im 聊天中视频播放
im 聊天中视频播放 问题描述 在 im 聊天聊天消息为视频时,可以点击播放;ios 会有统一的样式,但是在 android 上,微信平台会自动接管全屏播放,但是在 M 站上样式一踏糊涂;解决方案解决思路: 在 video 播放时,将video 播放设置全屏//部分安卓机型(vivo x9;小米 note3)im聊天中播放发送的视频;先横屏,再点击播放,才正常原创 2018-02-06 08:34:24 · 519 阅读 · 0 评论 -
上传图片预览图片方向错误
上传图片预览图片方向错误 问题描述 ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。解决方案获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正。 利用exif.js读取照片的拍摄信息; 唯医骨科项目中用 canvas 把上传图片转为同等大小的图片显示并进行base64压缩上传;原创 2018-02-06 08:32:55 · 1982 阅读 · 0 评论 -
im 聊天输入框高度问题
im 聊天输入框高度问题 问题描述 输入框的高度随着字数增多而增高,但是超过一定高度后,不会增高,场景像微信的输入框一样;刚开始使用 autosize.js 控制 textarea ,但是在 ios11 有兼容问题,不断触发聚焦事件;解决方案舍弃 autosize.js ,用纯css + html 实现: 与textarea放一个平级的 pre 标签与 textare原创 2018-02-06 08:32:15 · 578 阅读 · 0 评论 -
FileReader 对象
FileReader 对象 详情描述HTML5文件操作的api,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader对象的方法: 1. readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。 2. readAsBinaryS原创 2018-02-06 08:31:20 · 553 阅读 · 0 评论 -
华为 mate8 拍照上传图片失败
华为 mate8 拍照上传图片失败问题描述 在上传图片时,华为 mate8 掉起相册可以正常上传,但是掉起相机拍照片时,上传失败(仅限于原生浏览器)。场景:咨询流程上传图片,上传检查检验解决方案通过 debugger ,发现,mate8 在原生浏览器拍照上传时,有一个小坑,拍完照获取的照片名字有两个 ‘.’ ,所以截取到的名字后台识别不了,错误名字实例为:xxxxx.xx...原创 2018-04-16 16:51:43 · 2187 阅读 · 0 评论 -
HTTP与HTTPS
HTTP与HTTPS 原文:http://www.mahaixiang.cn/internet/1233.html 一、HTTP协议 ...转载 2018-04-18 09:48:00 · 732 阅读 · 0 评论 -
select 默认选中问题
select 默认选中问题 问题描述 select 标签会默认选中第一个 option ;但是一般使用的时候不想要默认选中第一个,而是一个空白的选择框解决方案给select元素pretend一个 option disabled = "disabled">option>;给select元素pretend一个;option stype="disp原创 2018-01-31 10:26:56 · 942 阅读 · 1 评论 -
微信小程序设置超出行显示 ... 与展开更多按钮
微信小程序设置超出行显示 ... 与展开更多按钮问题描述业务开发中会有一些场景,超出一行显示 … 与展开更多按钮,展开更多按钮可以切换显示一行还是全部内容,少于一行正常显示;解决方案分析下问题: 一般这种需求不好实现的原因是,在移动端,每行显示的字数的有可能在不同机型会有差异,所以就使开发者无法知道这些内容是否超过一行,是否该显示展开更多按钮。绕开上述原因,曲线救国,我们在每次页面渲染完...原创 2019-04-11 22:17:06 · 17865 阅读 · 0 评论 -
微信小程序设置超出隐藏,点击加载更多实现动画效果
微信小程序设置超出隐藏,点击加载更多实现动画效果问题描述业务开发中经常会有一些场景,以商品订单场景为例,少于两个商品,不显示更多按钮,超过两个显示更多,点击展开,商品全部展示,并且有渐变动画效果解决方案Tips:先说下自己当时的误区的纠正:动画的发生需要满足以下条件:实现动画的元素 css 属性写上了 transition 属性,并且值设置正确(具体值代表什么,自行百度)元素需要实...原创 2019-04-10 23:42:27 · 4404 阅读 · 0 评论 -
audio 标签自动播放不起作用或者 play() 报错
audio 标签自动播放不起作用或者 play() 报错问题描述页面的 audio 标签设置了自动播放属性,进入页面自动播放不起作用,或者用 js 控制 play(),方法无效,报错!解决方案经过各种百度,谷歌,追踪到原因如下:页面必须进行交互才能进行对 audio 播放;声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布...原创 2018-12-06 22:42:47 · 25861 阅读 · 0 评论 -
window.__wxjs_environment 为 Undefined
window.__wxjs_environment 为 Undefined问题描述微信小程序的 webview 中在网页内可通过window.__wxjs_environment变量判断是否在小程序环境,但是在真实项目中发现有时 window.__wxjs_environment 为 undefined;解决方案这个全局变量建议在WeixinJSBridgeReady回调中使用,也可...原创 2018-12-14 00:23:10 · 3556 阅读 · 0 评论 -
padStart is not a function
padStart is not a function问题描述 微信小程序开发时,控制台padStart is not a function;解决方案不用这个方法了呗,或者自己重新在 String.prototype.padStart 中自己实现,毕竟是 es6 之后的方法,经测试,微信6.6.6版本不支持,6.6.10 版本支持,和版本也有一定的关系,期望以后的支持性...原创 2018-08-20 10:11:53 · 5754 阅读 · 0 评论 -
微信小程序分享开发
Page.onShareAppMessage(Object)在 Page 中定义 onShareAppMessage 事件处理函数,自定义该页面的转发内容。onShareAppMessage(Object)监听用户点击页面内转发按钮(&lt;button&gt; 组件 open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。注意:只有定义了此事件处理...转载 2018-08-08 15:12:01 · 2816 阅读 · 0 评论 -
微信小程序Push场景本地调试方法
公众号Push场景本地调试方法问题描述 开发公众号时,会出现正常进入没问题,但是通过 push 进入出现 bug 的场景,这时就尴尬,总不能每次为了测试 push 场景而去审核通过,以下是在本地调试 push 场景的方法;解决方案开发者工具添加编译模式,入口页面为需要调试的页面,启动参数都带上 扫码进入,然后关闭,第二次进入即为Push入口的场景。 从公众号 Push...原创 2018-08-02 10:09:52 · 1691 阅读 · 0 评论 -
webpack vue 打包优化
webpack vue 打包优化问题描述 在项目优化中,有一种方案,不经常更新的第三方包可以不打在 vendor.js 中,可以在 .html 模板中引入,然后在 webpack 中配置排除这些包,但是会遇到一个问题,就是开发环境中,如果排除掉 vue.js 不打入 vendor.js 中,则无法使用 vue devtools 进行调试,如果不排除 vue.js ,则又会和模板中引入的...原创 2018-07-16 10:42:23 · 1620 阅读 · 0 评论 -
wx.showToast() 在真机中闪烁一下消失
wx.showToast() 在真机中闪烁一下消失问题描述 在真实的业务场景下,请求接口需要调用 wx.showLoading(),接口请求结束调用 wx.hideLoading()。如果需要给用户提示错误信息,调用 wx.showToast(),在模拟器上没事,但是在真机上会出现提示信息闪烁一下,然后消失。解决方案这个问题出现的原因就是因为小程序的内部处理 wx.sho...原创 2018-05-28 14:05:33 · 13065 阅读 · 4 评论 -
按钮置灰不能点击的方法
按钮置灰不能点击的方法详情描述给button添加disabled的属性。注意,控制disabled为ture或者false才能起作用;给添加单独的类名显示不同的颜色,然后点击的时候判断return false;控制两个button,一个绑定事件,一个不绑定;通过控制验证字段是否通过来控制按钮的显示隐藏;原创 2018-01-29 20:19:49 · 13509 阅读 · 1 评论 -
给元素添加事件满足的条件
给元素添加事件满足的条件详情描述确保元素已经加载出来再添加; 利用事件委托的方式去添加事件(比较常用的一种方案);利用事件流的冒泡机制,可以给父元素委托事件;这样动态添加的子元素也会有事件;原创 2018-01-29 16:23:26 · 194 阅读 · 0 评论 -
canvas图画保存成本地图片的方法
canvas图画保存成本地图片的方法详情描述var oCanvas = document.getElementById("thecanvas");Canvas2Image.saveAsPNG(oCanvas); // 这将会提示用户保存PNG图片Canvas2Image.saveAsJPEG(oCanvas); // 这将会提示用户保存JPG图片Canvas2Image.sav原创 2018-02-01 08:17:46 · 3056 阅读 · 0 评论 -
json 的注意事项
json 的注意事项详情描述自己写的json字符串中必须用双引号。使用单引号无法转换成json对象;原创 2018-02-01 08:16:53 · 220 阅读 · 0 评论 -
input 输入框输入中文
input 输入框输入中文 问题描述 在input输入框输入中文时,需要即时查询出匹配输入内容的结果,一般我们会使用input事件监听用户输入事件,但是在输入汉语拼音时,也会触发input事件,前端就会不断发送请求,用户体验非常差劲。解决方案针对这种情况,给大家介绍一个简单易懂的好方法。代码如下:function in2 () { var cpLock原创 2018-02-01 08:16:14 · 3676 阅读 · 0 评论 -
输入框的事件的几种触发事件对比
输入框的事件的几种触发事件对比详情描述change事件 触发事件必须满足两个条件: 当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)当前对象失去焦点(onblur)keypress 恩,还好。。。。。就是能监听键盘事件,鼠标复制黏贴操作他就无能为力propertychange(ie)和input事件input是标准的浏览器事件,一般应用于input元素原创 2018-02-01 08:15:26 · 2174 阅读 · 0 评论 -
jQuery 中 data() 引发的错误
jQuery 中 data() 引发的错误详情描述jQuery 中 data()解释为可以获取、设置元素自定义的属性,但是尽量不用data()方法去获取元素的自定义属性;因为会引发一些隐形错误; 1. 只能获取到第一次赋值的属性,之后通过修改的值获取不到; 2. 如果值是string类型的数字,比如“123”,获取的时候会强转为number,123; 3. 所以建议还是使用 $(“d原创 2018-02-01 08:14:42 · 1016 阅读 · 0 评论 -
js打开新页面的几种方式
js打开新页面的几种方式详情描述window.location.href=goUrl;window.open(goUrl,”_self”);location.replace(goUrl);location.assign(goUrl);原创 2018-02-01 08:13:40 · 19576 阅读 · 1 评论