随笔分类 - javascript
原生js相关学习研究
摘要：当 nuxt 项目在生产环境运行时，如果服务端运行出错，比如 asyncData 方中出错时候，会抛出如下错误页面： 虽然官网提供了一个新增 /layouts/error.vue 页面组件的方法自定义错误页面。 但是此错误页面仅用于浏览器端错误抛出时候使用，比如代码在浏览器端报错时候会进入此页面，服
阅读全文
摘要：cypress 在 typescript 项目运行报错如下： An unexpected error occurred Cannot find module 'tslib' Require stack: C:\...\Cypress\resources\app\packages\reporter\l
阅读全文
摘要：如果你项目有如下几个巧合，大概率会发现一个 ajax 请求返回为 null 的 bug： 如果你的项目是移动端项目，刚好使用了 zepto.js。 还刚好使用了 $.ajax 发送 ajax 请求。 刚好又使用了 cy.route。 问题原因 对比正常 network 请求会发现少了好几个字段，少的
阅读全文
摘要：一般上传方式 const file = document.getElementById('js_resume_file').files[0]; const formData = new FormData(); formData.append('file', file); $.ajax({ type:
阅读全文
摘要：nuxt.js 生成的默认文件 components/Logo.vue 源码大概如下： 1 <template> 2 <svg 3 class="NuxtLogo" 4 > 5 </svg> 6 </template> 7 <style> 8 .NuxtLogo { 9 margin: auto;
阅读全文
摘要：去 github 搜索了一把，估计是我关键词不对，没找到比较牛逼的插件。然后去 nextjs 官方仓库搜索，发现了这个东东 https://github.com/vercel/next.js/tree/canary/examples/with-next-offline，瞄了一眼 package.js
阅读全文
摘要：Math.min 和 Math.max 方法常用来获取多个数值的最小值和最大值，比如： Math.min(10, 30, 40, 3); // 返回 3 Math.max(10, 30, 40, 3); // 返回 40 利用此特性，可以优化一些常见数字判断，尤其在方法传参时候，数字判断能有奇效。
阅读全文
摘要：如图： 图片加载失败了，在浏览器会默认显示一张破图。受各种网速、浏览器等因素影响，我们无法保证图片能够完全加载成功。加载失败时如何更友好的显示是前端要考虑的主要因素。 常见做法都是使用一张默认图代替加载失败的图片，比如一个 logo 、一张主题图片等。 做法一 使用 JS 懒加载图片，如果图片加载失
阅读全文
摘要：解析 <path> 标签应该算是 SVG 中最为强大的标签了，各种图形都可以用他绘制。本文使用 path 标签的贝塞尔曲线 Q 指令绘制弧线。 用法 <path d="M30 90 Q115 139 200 90"></path> <path> 标签常用指令： M = moveto L = line
阅读全文
摘要：平时使用animate只用于dom节点的动画，无意间发现JQuery内置的animate方法可实现数字动画，JQ还是挺强大的！ 动画效果为从0一步步跳到84，代码如下：
阅读全文
摘要：报错信息： ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema. 报错写法如下： 报错
阅读全文
摘要：坑爹的微信分享，设置图片链接必须要满足如下条件： 1. 微信分享图链接必须是绝对路径，写相对地址不行。 比如图片地址写成 './assets/images/share.jpg' 不行！！！ 必须写成 'http://www.xxxxx.com/assets/images/share.jpg' 2.
阅读全文
摘要：编辑器：网页不常用的功能，但却又是不可少的功能，如果要造个编辑器轮子，它可以把人玩死！！前端几大禁忌就有富文本， 为什么都说富文本编辑器是天坑? 下面记录一下常见的一些编辑器，该文随时更新： 富文本编辑器 Tinymce tinymce 是一家老牌做富文本的公司，它的产品经受了市场的认可，不管是文档
阅读全文
摘要：先说a + 1 < a 原理：valueOf第一次返回一个值，取过一次之后返回另一个值，这里用个变量判断也行，如下： 如果 a 加的数字小于 1，可以这么写 以上是a + 1 < a的解法再说(a ==1 && a== 2 && a==3)等于true的实现，其实跟上面逻辑差不多，如下：
阅读全文
摘要：本方法两种应用方式：一种使用canvas解析本站图片中的二维码，canvas有同源策略限制，只能处理本站图片。另一种处理文件选择中的图片二维码。 第一种使用场景可以换成像微信中一样，长按图片识别二维码。 引用了第三方的qrcode.js解码，但是这个文件并未在GitHub中找到，不知道出处。源码：
阅读全文
摘要：本文代码测试要求，最新的chrome浏览器(手机APP)，并且要允许chrome拍照录像权限，必须要HTTPS协议，http不支持。 原理：调用摄像头，将摄像头返回的媒体流渲染到视频标签中，再通过canvas绘制到画布上面，最后通过canvas分析二维码 兼容性只在手机中的chrome中测试通过，微
阅读全文
摘要：主要运用H5的媒体接口API，MDN文档： navigator.mediaDevices(新版API)，Navigator.getUserMedia(旧版API，不建议使用，但某些浏览器还支持)，本文使用新版API 这个API并不是所有浏览器都支持，本人只在最新的chrome中测试通过，并且需要HT
阅读全文
摘要：创建简单的marker地图不一定需要去百度地图申请key，简单代码实现marker地图，效果如图： html代码如下，代码中的baidu.api.js参考后面的隐藏代码： baidu.api.js window.BMAP_AUTHENTIC_KEY="";(function(){var l=l||{
阅读全文
摘要：国际化vue-i18n的使用： vuex获取属性常用方式： 我的目录结构 我的需求是要在router里面a.js获取vuex中保存的数据，并且设置i18n的语言。由于a.js里面并没有vue的this对象，调用方法和获取属性这就是个问题了，作为一个vue新手，百度一番之后还是没找到解决办法。最终自己
阅读全文
摘要：说一说自己粗心踩到的一个不算坑的坑： 项目是安卓webview嵌入SPA单页应用页面，涉及到JS调用原生安卓方法，但就是在调用安卓方法时死活一直报错xxx NPObject一堆错误。写了一个测试页面，调用一点问题没有，这也让安卓开发头疼不已，这破问题查了一两个小时，最终还是出在前端。问题原因：JS调
阅读全文
浙公网安备 33010602011771号