![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 68
格竹悟道
这个作者很懒,什么都没留下…
展开
-
js 复制粘贴板,当clipboardjs 不好使怎么办?
我一直觉得clipboardjs 这么常用的库应该不会有问题,应该是用法的问题,但因为本地的代理工具除了问题,无法抓包ios调试。经过几次调整尝试后仍然无法解决而且耽误较多的时间。于是转换思路,利用原生复制功能,双管齐下,但发现原生的navigator.clipboard 虽然是标准仍然有兼容性问题,安卓真机复制失败。我们这个复制按钮默认是隐藏的,用户操作之后才会出来,经过一番查询之后有文章指出,复制按钮初始化的时候元素必须存在,并且不能 "display:none"的方式隐藏。原创 2023-12-09 11:02:04 · 809 阅读 · 0 评论 -
ios系统元素悬浮滑动错乱,和ios页面无故刷新问题
ios 浏览器bug原创 2022-11-12 12:05:24 · 1319 阅读 · 0 评论 -
error in ./node_modules/@lit/reactive-element/decorators/state.jsModule parse failed: Unexpected
最近开发一个老项目,发现之前好好的项目现在运行起来报错了 ,各种切换npm 源和 node版本都不行,百度和谷歌都没找到相关信息,报错如下,看了下package.json里的版本号用的是^,意味着这个模块可以自动小版本升级。猜想应该是模块自动升级了,导致某些地方不兼容所以报错了,最后发现项目中配置了,babel解析,这个插件输入出的是es6代码,需要用bable编译一下。经过如下修改增加了新的解析路径,问题得到解决。发现是@lit这个模块下的文件报错,点开详情发现这里的是源文件,并不是es5语法。原创 2022-09-14 14:27:38 · 1294 阅读 · 0 评论 -
vue组件递归,A-A 递归和A-B递归
在我们平常的开发中组件递归很常见,一般情况下递归有两种类型,一种是自递归如:A->A->A,另一种是相互递归如:A->B->A。对于A->A单个组件自递归的情况,vue推荐使用name来解决,用法非常简单。// component A<template> <div> <componentA/> </div></template><script>export de原创 2021-09-18 12:27:16 · 467 阅读 · 0 评论 -
vue源码之 nextTick原理
关于vue的nextTick方法我们都用过,也都知道nextTick是干什么用的,因为vue数据改变之后,dom改变不是立马生效的,我们如果需要在数据改变之后获取dom就必须在将代码放到nextTick回调中去执行,那这个nextTick到底底层是如何实现的呢?下面通过阅读源码来揭开它的神秘面纱,我们能在vue项目中的vue\src\core\util\env.js文件中找到nextTick的方法定义。代码简化如下//vue\src\core\util\env.jsexpo const nextTic原创 2021-06-13 17:37:40 · 167 阅读 · 0 评论 -
搞懂js中 eventloop事件循环和Promise面试题
js事件循环中的异步队列有两种:macro(宏任务)队列和 micro(微任务)队列。常见的 macro-task 比如: setTimeout、setInterval、 setImmediate、script(整体代码)、 I/O 操作、UI 渲染等。常见的 micro-task 比如: process.nextTick、Promise、MutationObserver 等。循环过程我们先看一个完整的 Event Loop 过程。初始状态:micro 队列空,macro 队列里有且只有原创 2021-05-13 17:52:52 · 364 阅读 · 2 评论 -
vue dist中问什么有那么多版本?runtime是什么?
初看源码看到vue 源码中dist文件下有很多个版本的vue的时候,我们可能会一头雾水,为什么会有这么多版本?他们都是干啥的有什么区别?|-dist |-- vue.js |-- vue.common.js |-- vue.esm.js |-- vue.runtime.js |-- vue.runtime.common.js |-- vue.runtime.esm.js |-- vue.min.js |-- vue.runtime.min.j原创 2021-01-29 11:04:59 · 1081 阅读 · 0 评论 -
前端模块化( CommonJS、AMD、CMD、UMD、ES Module) 详解
1.CommonJSCommonJS是2009年社区提出的最早的模块标准Node.js采用的是CommonJS标准的一部分,并在此基础上做了一些变化。申明方式 modele.exports.name = 'hello word'; module.exports.sayHello = function() { console.log('Hello '); };exports 是与外界联系的桥梁不可以直接复制,以下为错误方式 module.exports = {原创 2021-01-29 11:01:30 · 739 阅读 · 0 评论 -
前端canvas图片压缩原理解析
前提概要:最近公司项目中,有个用户手机自己拍照上传的的需求,需要用户在wap页面中调起相机拍照上传。前端通过input[file]capture="camera" 成功的调起了摄像机,看起来好像一切都ok了,可是后来实际测试中发现,iphone X + 像素比较高,排出来的照片有的高达十几M,而接口控制最多上传5M,造成上传失败。很显然让用户自己去压缩是很不现实的,用户体验非常差。这个场景...原创 2019-12-14 15:55:38 · 3872 阅读 · 0 评论 -
js 原型链实例探究-原型链图
关于js原型链的问题,网上的文章有很多,但是大多数对于初学者来说晦涩难懂。没有结合实例,看起来总是没有什么概念,一下是我结合一个简单的例子,绘出的原型图,如有不对,欢迎指正。代码代码很简单,一个构造函数,一个通过构造函数new出来的对象实例,一个直接new的出来对象,和一个函数体function A(){ this.c=3; this.d=4; } var a = new A()...原创 2019-11-25 20:10:29 · 163 阅读 · 0 评论 -
原生js如何解决事件委派
前面写页面老用jquery的on方法来给动态添加的元素绑定事件,有一天有人问我原生怎么写,然后我自己测试了一下,终于知道了原生js是如何给动态的元素绑定的事件的。先把事件绑定在静态的祖先级元素上,当时间触发时在过滤元素,如果是指定的元素,就执行里面的方法,否则就过滤掉,代码如下:document.body.onclick=function(e){ if (e.target.cla...原创 2015-11-17 14:43:45 · 1114 阅读 · 0 评论 -
关于JQ对checkbox的click事件触发的一个坑
今天插件里的遇到一个坑困扰我很久,写了一个键盘事件触发input的click事件来改变选项值,一直不正确,测试了好久终于发先问题出在input点击时改变checked和执行click事件的顺序上。写一个小demo。html:写两个多选框初始状态:jQ:写法$("#cs2").click(function(){ $("#cs1").click原创 2016-03-11 17:10:24 · 67087 阅读 · 1 评论 -
ios下iframe内的加载更多为什么失效了?
最近做一个页面遇到ios下拉加载的功能失效的问题。查看页面后发现该页面是用iframe引的一个wap页,由于手机上不好测试,在经过n次alert后排查了原因。1.ios页面下拉的时候iframe的scroll事件未触发。 被iframe的子页面中,下拉加载是用scroll写的判断是否下拉到底部scrollTop>=$(document).height()-$(window).heig原创 2016-06-08 11:07:29 · 4053 阅读 · 0 评论 -
vue组件老虎机抽奖
最近过活动要做个老虎机效果,发现网上找的几乎都是以前的jq写的,找了一个后看了看代码,感觉写了的比较麻烦,然后自己写了一个简单的。主要是用css3来实现转动加速减速的效果。应为需要获取设置元素高度等问题,为了方便引入了jq,如果不依赖jq可吧用jq的地方改成原生js。```<template> <div> <div class="box"> <...原创 2018-06-19 20:15:37 · 3429 阅读 · 2 评论 -
ios中微信内iframe页面,长按图片不出识别二维码功能
2.ios中微信内iframe页面,长按图片不出识别二维码功能解决办法:用 postMessage处理两个页面的跨域问题:https://www.cnblogs.com/roam/p/7520433.html在长按iframe中的二维码图片时,在父级页面生成一个二维码盖在上面。iframe页面 $('#erweima').on('touchstart',function(){ ...原创 2019-04-01 18:45:00 · 6340 阅读 · 0 评论 -
nuxt生命周期
nuxt官方虽然有给出图,但是比较笼统,不够详细,现在通过官方的图,配合自己的理解画出一下流程图,供还没弄明白的同学参考。配合项目输出图示...原创 2019-07-02 17:33:54 · 13745 阅读 · 7 评论 -
sh: nuxt: command not found
在部署nuxt项目的时候npm install 之后 npm run build 报出sh: node: command not found的错误,发现,npm(cnpm) install的时候就报错了,好些模块装不下了,但是改项目在本地是没有问题的,后来发现node的版本不一致服务器node版本v7.0.1,最后装了个nvm(linux安装nvm),安装切换到v8.11.1重新npm inst...原创 2019-07-09 11:07:43 · 9149 阅读 · 0 评论