- 博客(26)
- 收藏
- 关注
RSS订阅原创 js 复制粘贴板，当clipboardjs 不好使怎么办？
我一直觉得clipboardjs 这么常用的库应该不会有问题，应该是用法的问题，但因为本地的代理工具除了问题，无法抓包ios调试。经过几次调整尝试后仍然无法解决而且耽误较多的时间。于是转换思路，利用原生复制功能，双管齐下，但发现原生的navigator.clipboard 虽然是标准仍然有兼容性问题，安卓真机复制失败。我们这个复制按钮默认是隐藏的，用户操作之后才会出来，经过一番查询之后有文章指出，复制按钮初始化的时候元素必须存在，并且不能 "display:none"的方式隐藏。
2023-12-09 11:02:04
648
原创 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
1221
原创 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
450
原创 线上bug快速定位小技巧 - chrome实时调试线上js代码
一般情况下线上出现bug我们常用的定位方式就是启动本地开发环境，在本地调试，但是由于开发环境和线上的环境数据还是有差距，偶尔会遇到本地复现不了的情况。这个时候就比较棘手，我们可以在线上代码里debug打断点一步步看变量,一般的简单的bug用这种方式可以处理。但是想看看复杂的业务状态下的页面展示，就没法满足，比如我要看的一个状态是接口给的，但是线上环境又不能随便改状态，这时候心里想如果能在线上直接调试代码修改返回的状态就好了！现在他来，接下来介绍两种直接在线上调试方法。1.chrome tools谷歌
2021-08-03 10:46:33
1801
原创 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
158
原创 搞懂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
359
2
原创 前端性能优化总结
前端性能优化，从一道经典面试题展开"从输入 URL 到页面加载完成，发生了什么？" ，从一个页面的呈现时间轴来整理一下性能优化的方向这里只整理大概的方向，不列细节 页面加载过程 详细描述 性能优化的点 具体操作 1.DNS 解析 1.查找本地DNS，如果没有再请求DNS服务器 2.解析成IP地址，访问对应IIP 1.DNS缓存 .
2021-05-13 13:50:25
92
原创 超简单! 一个标签搞定跑马灯，纯css制作跑马灯效果
在平时我们做跑马灯，一般是用gif图，或者是用DOM元素来制作，但是gif体积比较大，而且不太灵活，调整大小，速度，颜色，都需要重新切图，用DOM元素来实现，会让页面出现很多DOM不太友好，今天介绍一个用纯css制作的跑马灯效果。主要原理是利用css 属性 box-shadow 可以无限复制的特点来做周围的灯，通过css3 transition 属性让灯跑起来，话不多说，上代码<!DOCTYPE html><html lang="en"><head> &l
2021-04-04 19:03:26
2327
1
原创 火狐浏览器跨域请求头 origin 丢失问题
前两天遇到一个bug，在火狐浏览器中图片上传阿里云图片服务失败，谷歌上传正常，开来打开控制台发现，在火狐中报接口跨域了我们采用的是 服务端设置 access-control-allow-origin:xxx 来处理跨域 ，但是经过排查发现接口响应头上的 access-control-allow-origin 不是当前的host ，而是默认值 b经过和服务端沟通得知他们设置 access-control-allow-origin 的逻辑是取的请求头里的origin字段没取到就设置默认值，默认请求头的o
2021-02-04 17:11:27
3733
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
1053
原创 前端模块化（ 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
727
原创 前端canvas图片压缩原理解析
前提概要：最近公司项目中，有个用户手机自己拍照上传的的需求，需要用户在wap页面中调起相机拍照上传。前端通过input[file]capture="camera" 成功的调起了摄像机，看起来好像一切都ok了，可是后来实际测试中发现，iphone X + 像素比较高,排出来的照片有的高达十几M，而接口控制最多上传5M,造成上传失败。很显然让用户自己去压缩是很不现实的，用户体验非常差。这个场景...
2019-12-14 15:55:38
3759
原创 js 原型链实例探究-原型链图
关于js原型链的问题，网上的文章有很多，但是大多数对于初学者来说晦涩难懂。没有结合实例，看起来总是没有什么概念，一下是我结合一个简单的例子，绘出的原型图，如有不对，欢迎指正。代码代码很简单，一个构造函数，一个通过构造函数new出来的对象实例，一个直接new的出来对象，和一个函数体function A(){ this.c=3; this.d=4; } var a = new A()...
2019-11-25 20:10:29
161
原创 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
9022
原创 nuxt生命周期
nuxt官方虽然有给出图，但是比较笼统，不够详细，现在通过官方的图，配合自己的理解画出一下流程图，供还没弄明白的同学参考。配合项目输出图示...
2019-07-02 17:33:54
13387
7
原创 vue 组件之scope 属性，组件如何给slot组件传数据？
一个组件如何给当做插槽的组件传参？平时我们使用查槽都是这么用的。插槽的直接接受页面的数据。常规用法<template> <div> <father-compoent> <!--指定将子组件放到父组件中的name=list的slot标签的位置--> <child-component s...
2019-04-01 18:57:43
4749
原创 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
6249
原创 scoped 和 deep的用法深究
前言我们都知道在组件中给style标签添加scoped属性可以避免组件内样式对外界造成污染，scoped使得组件内的样式变成局域样式，只作用于当前组件。这个是怎么做到的呢？原理在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么久使得当前组件内的样式只会作用于当...
2018-12-12 19:12:08
4725
原创 vue组件老虎机抽奖
最近过活动要做个老虎机效果，发现网上找的几乎都是以前的jq写的，找了一个后看了看代码，感觉写了的比较麻烦，然后自己写了一个简单的。主要是用css3来实现转动加速减速的效果。应为需要获取设置元素高度等问题，为了方便引入了jq,如果不依赖jq可吧用jq的地方改成原生js。```<template> <div> <div class="box"> <...
2018-06-19 20:15:37
3374
2
原创 ios下iframe内的加载更多为什么失效了？
最近做一个页面遇到ios下拉加载的功能失效的问题。查看页面后发现该页面是用iframe引的一个wap页，由于手机上不好测试，在经过n次alert后排查了原因。1.ios页面下拉的时候iframe的scroll事件未触发。 被iframe的子页面中，下拉加载是用scroll写的判断是否下拉到底部scrollTop>=$(document).height()-$(window).heig
2016-06-08 11:07:29
4029
原创 关于display:flex用法
今天看到别人一个wap页面用到了display:flex属性，平时也没怎么见到过，于是就百度学习了一下，发现这个属性的确很好用，该组合属性可以让父级内部的的空间按照设定比例分配给子级元素。先来说说他的用法。css:.box{width:600px;display: flex;flex-flow:column;//此属性设置将内部空间是分配水平上的空间还是竖直上空间}.div1{flex
2016-04-18 16:08:09
9675
1
原创 关于JQ对checkbox的click事件触发的一个坑
今天插件里的遇到一个坑困扰我很久，写了一个键盘事件触发input的click事件来改变选项值，一直不正确，测试了好久终于发先问题出在input点击时改变checked和执行click事件的顺序上。写一个小demo。html:写两个多选框初始状态：jQ：写法$("#cs2").click(function(){ $("#cs1").click
2016-03-11 17:10:24
66676
1
原创 原生js如何解决事件委派
前面写页面老用jquery的on方法来给动态添加的元素绑定事件，有一天有人问我原生怎么写，然后我自己测试了一下，终于知道了原生js是如何给动态的元素绑定的事件的。先把事件绑定在静态的祖先级元素上，当时间触发时在过滤元素，如果是指定的元素，就执行里面的方法，否则就过滤掉，代码如下：document.body.onclick=function(e){ if (e.target.cla...
2015-11-17 14:43:45
1109
原创 公司用的git版本控制系统，记录下几个常用的命令和步骤
git常用命令：一天工作开始的流程1.更新本地库： a.法一：直接git pull b.法二：git pull origin (远程分支名)2.新建分支： a.法一：将远程的一个分支映射到本地：git checkout -b 本地分支名（自己取） origin/远程分支名//这个好使 b.法二：在远程建一个分支后下拉到本地：i.在本地新建一个和
2015-09-17 16:28:01
552
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人