前端备忘
何日成熟
胖子减肥中,前端学习中
展开
-
记一次解决埋点代码的 jQuery 与客户网站版本冲突(noConflict 也无效, 与 jQuery-ui 有关)
文章目录背景解决过程:背景公司提供埋点代码给客户网站上埋点, 实现在线聊天/留言表单功能, 埋点代码中有 jQuery 代码, 客户网站也有 jQuery 代码, 客户说一埋上我们的代码控制台就报错控制台报错信息如下:jquery-ui.min.js:formatted:18 Uncaught TypeError: Cannot read properties of undefined (reading 'version')Uncaught TypeError: owl.owlCarousel i原创 2021-11-18 19:57:20 · 714 阅读 · 0 评论 -
第三方软件安装 Node 导致原有项目运行错误
第三方软件安装 Node 导致原有项目运行错误文章目录第三方软件安装 Node 导致原有项目运行错误背景环境解决过程背景安装一个软件时, 此软件自带 Node.js , 会安装它自带的 node , 安装后 node 版本升级导致现有项目运行不起来环境window10 x64原 node : 10.21.0第三方软件安装的 node : 14 (具体的忘了)解决过程系统 - 高级系统设置 - 环境变量 - 系统变量, 修改 Path , 将程序新加入的该软件安装的 node.js 路径移原创 2021-11-16 11:23:53 · 1277 阅读 · 0 评论 -
使用 width: 0 避免 flex: 1 元素宽度溢出
参考解决用flex布局时内容可能溢出的问题背景使用 flex 布局, 左右两边各一个元素, 中间 flex: 1, 中间结构为: 二行文字, 第一行不换行超长隐藏, 第二个最多支持换两行超长隐藏;结果设置文字不换行后, 中间元素溢出 flex: 1 范围解决上述参考文章, 有两种方案:中间元素 overflow: hidden但是这样会导致第二行文字不能"最多支持换两行";中间元素 width: 0成功解决...原创 2021-10-12 10:27:21 · 1218 阅读 · 0 评论 -
请求图片时, 图片默认打开方式是下载而不是预览
这与后端返回此文件时, http 响应头 Content-Disposition 属性有关;因为项目用的是七牛云存储的图片, 此时只需要在图片地址后面加上七牛的图片处理参数 ?imageView2/0 即可正常预览图片原创 2021-09-29 12:29:09 · 945 阅读 · 0 评论 -
踩坑:Notification 不显示
之前发现 Chrome (版本: 81) 浏览器不显示 Notification , 且 Notification.requestPermisson() 也没弹出请求框, 最后定位, 发现原因如下:http 链接, 不允许通知双显示屏 + 独立显示的调试窗口 + 调试窗口最大化第二点有点乱, 没总结出规律...原创 2021-09-29 12:28:34 · 2352 阅读 · 0 评论 -
pointer-events: none 属性让鼠标无法选中元素
如题, 在元素上设置此属性 pointer-events 可让鼠标穿透元素, 无法对元素做操作原创 2021-09-29 12:27:52 · 340 阅读 · 0 评论 -
让 echarts 柱状图 label 根据柱高度自适应显示在柱内/柱外
文章目录背景解决方法代码示例背景echarts 柱状图, label 默认显示在柱内, 当数据最大值和最小值相差过大时, 短柱放不下 label , 样式不美观解决方法传入数据时, 不传入实际数据, 而是传入 ${当前实际数据}.${数据最大值} (数据本身不能为小数)在 series.label.formatter 中, 拿到了之前传入的数据, .split('.') 得到实际数据和数据最大值设置 label.padding , top 为负数(自己试), 判断当前数据与数据最大值相差过大时原创 2021-09-29 12:27:33 · 3156 阅读 · 1 评论 -
文本中含有隐藏字符导致错误
文章目录背景unicode 8236 8237背景用户输入的数据未通过正则校验, 但是看起来完全符合要求, 最后复制该字符串逐个打印字符, 发现有一个"空格", 最终发现此问题unicode 8236 8237excel隐藏的空间UniCode 8236和8237 看着像空格(或者看不到), 但却不是空格, 导致错误...原创 2021-09-29 12:27:19 · 192 阅读 · 0 评论 -
webpack 打包不更新的静态资源为 dll 库文件
文章目录参考实际使用参考vue-cli3 DllPlugin 提取公用库利用DllPlugin分割你的第三方库实际使用我的用法是: 配合 webpack-bundle-analyzer 分析首页加载的 js , 把其中的部分静态资源分开到不同的文件, 减小单次请求体积(但相应地, 请求次数增加了, 总大小是没变的);打包产生的库文件可以放到 CDN , 加载更快;之后其他页面引用被打包的静态资源时也是请求库文件, 而不是打包到自身的 js , 节省资源...原创 2021-09-27 15:50:12 · 237 阅读 · 0 评论 -
echarts dataZoom 属性不生效解决办法
echarts 实例 options 对象的 dataZoom 属性修改之后, 先 echarts 实例 .clear() 清空实例, 再 .setOption 重新渲染原创 2021-09-27 15:47:31 · 5852 阅读 · 2 评论 -
sortable.js 相关
文章目录使用 sortable.js 时, 固定列表顶部和底部(不能修改顺序)原理代码使用 sortable.js 时, 固定列表顶部和底部(不能修改顺序)原理先设置顶部和底部的选项不可被拖动(通过 sortable.create 的参数 handle, filter 实现), 并记录中间可移动区域的 index 范围(上限, 下限)利用 sortable 配置的 onEnd 函数和 sortable 实例的 toArray 方法, 暂存移动前的顺序移动完成后, 若发现被移动项新位置超出了允许移原创 2021-09-27 15:45:40 · 1328 阅读 · 0 评论 -
使用 flat 函数平铺复杂数组
flat函数我的运用:展开复杂数组(可指定展开到多少层数停止)查看复杂数组中一共有多少项(会去掉空项)获取指定层所有元素(如果有 undefined 注意去掉)跟 slice(0) 一样 , flat(0) 复制数组(但是会去掉空项)...原创 2021-09-27 15:21:21 · 170 阅读 · 0 评论 -
常用正则及相关资源网站
文章目录资源网站常用正则邮箱校验电话校验纯数字/大/小写字母/键盘特殊符号非[键盘特殊字符|数字|空格]正则匹配非注释非console的中文正则小技巧webStorm 全局搜索显示全部匹配结果转载: [正则表达式匹配"非",以及"非"字符串的匹配](https://blog.csdn.net/xuyangxinlei/article/details/81359366)资源网站正则可视化网站这个网站可以将正则表达式显示成可视化的流程图, 方便自己查看正则是否写对, 也可以照着图给产品解释(有时候产品原创 2021-09-27 15:19:50 · 406 阅读 · 0 评论 -
使用 element-resize-detector 监控 div 的 resize
如题, 找"监控 div 的 resize 事件"方法时, 发现 iview 框架中也用了这个包直接 npm 安装使用就行, 详见 https://www.npmjs.com/package/element-resize-detector原创 2021-09-27 14:47:28 · 182 阅读 · 0 评论 -
ngrok 内网穿透
文章目录背景实操步骤背景想让 UI 在他自己的电脑上看到我这儿开发中还没上测试环境的界面, 于是想到了之前大学时候用过的这个工具实操步骤访问网站 ngrok.cc , 按着网站上的教程来,选择免费服务器,一般来说就可以了但是这次用的时候报错了Webpack 出现 Invalid Host header 错误 ,可将 webpack-dev-server disableHostCheck 设置为true直接在 webpack 配置文件中 module.exports 的对象中加上 d原创 2021-09-27 14:33:47 · 217 阅读 · 0 评论 -
JS 拖拽上传文件
文章目录参考参考DataTransfer拖拽献祭中的黑山羊-DataTransfer对象监控 drop 事件, 从 event.dataTransfer.files (或 event.dataTransfer.items) 中取文件注意:兼容性问题拖拽网页文件上传时, 要注意是否正确取到了文件...原创 2021-09-27 14:29:30 · 681 阅读 · 0 评论 -
JS操纵剪切板
文章目录文本文件(图片)文本如果是 textArea 或 input Text 之类的可以使用 select 方法选中文本的 DOM 元素DOM元素.select();if (document.execCommand('Copy')) { // 提示已经复制} else { // 提示不能复制}如果不是设置一个隐藏的可以 select() 的 DOM 元素,用户点击复制按钮或者其他操作时,动态把目标文字复制给隐藏 DOM 元素的 value ,随后同上.DO原创 2021-09-27 14:27:10 · 253 阅读 · 0 评论 -
JS文件操作
JS文件操作参考HTML5 进阶系列:文件上传下载如何用 JavaScript 下载文件vue+axios上传文件axios全攻略小tips: 纯前端JS读取与解析本地文本类文件上传通常思路隐藏掉很丑的 input type="file" ,在自定义的上传按钮上绑定点击事件,通过 id 调用这个 input ,然后 .click() ,在这个 input 的 change 事件内获取到 event.target.file 做各种操作axioslet param = new F原创 2021-09-27 14:24:03 · 669 阅读 · 0 评论 -
非 Vue 相关技术总结
如题原创 2021-04-28 11:28:56 · 340 阅读 · 0 评论 -
Vue的父组件到底是啥?
希望看到我回答的大家如果有答案一定要告诉我!!!万谢!!观点:我现在搞不懂,到底哪个想法是对的,暂且支持观点1:Vue.component里定义的template部分是子组件,HTML中组件标签为父组件。包裹组件的那个有Vue实例挂载的元素是父组件,HTML中组件标签为子组件。另外,没有写过组件内还有组件的代码,不过暂且直观地认为这种情况下两个组件为父子关系论证:Vue教程中Ctrl+F搜原创 2017-11-06 16:09:57 · 4004 阅读 · 1 评论 -
获取整个页面包括滚动条的宽度,获取滚动条宽度
原因想要做响应式设计,遇到——本来没有滚动条,缩小窗口时出现竖直滚动条,因为获取不到document+滚动条的宽度,所以可能莫名其妙的,没有在设置好的断点处达成相应效果。所以需要获取整个页面包括滚动条的宽度做判断。解决办法实时获取当前浏览所用浏览器的滚动条宽度//获取当前浏览器滚动条的宽度,原理是设置一个不可见的div,查看设置scorll前后的宽度差 function getScr原创 2017-08-29 11:30:46 · 38283 阅读 · 2 评论 -
freeCodeCamp题目:No repeats please(排列组合题)
fuckkkkkkkkk!同样的代码,在网站上运行就卡死,在chrome调试工具里sources里面运行就没事儿。忘了排列组合知识的我伤不起啊。做完题目再看官方提示更伤不起啊,看到下面一波波秀操作的高端玩家,觉得自己弱爆了。在这写一写,做个备忘记住这题。原创 2017-12-18 17:54:17 · 382 阅读 · 0 评论 -
npm 包解析 eml 文件
背景后台问我能不能前端直接解析 eml 文件,项目是 Vue , 首先想到能不能 npm 找个包解析过程首先上 npmjs 直接搜 eml , 找到了一个 eml-format 包了解 quoted-printable 编码,随后发现我从QQ邮箱导出的 eml 文件是 GB2312 编码,因为之前对编码不熟悉, JS 也没有直接对它解码的方法,想用 JS 原生的编解码方法也没弄...原创 2018-05-19 10:53:49 · 1908 阅读 · 2 评论 -
工作中对 Vue 和 iView/Element 的一些技术备忘总结
如题原创 2018-05-19 11:49:17 · 4945 阅读 · 1 评论 -
工作中遇到的技术问题备忘(一):JS文件操作
JS文件操作 此系列只写我在工作中使用到的操作/代码,不是系统概括 参考: HTML5 进阶系列:文件上传下载 如何用 JavaScript 下载文件 vue+axios上传文件 axios全攻略 小tips: 纯前端JS读取与解析本地文本类文件上传通常思路隐藏掉很丑的 input type="file" ...原创 2018-06-09 14:31:11 · 228 阅读 · 0 评论 -
工作中遇到的技术问题备忘(二):JS操纵剪切板
JS操纵剪切板 此系列只写我在工作中使用到的操作/代码,不是系统概括如果是 textArea 或 input Text 之类的可以使用 select 方法选中文本的 DOM 元素DOM元素.select();if (document.execCommand('Copy')) { // 提示已经复制} else { // 提示不能复制}如果不是设置一个隐藏...原创 2018-06-09 14:33:33 · 116 阅读 · 0 评论 -
工作中遇到的技术问题备忘(三): 让 JSON.parse 出错后继续执行
这里不是把项目代码复制过来之后有些地方修改了一下, 没运行, 不知道是否奏效/* 代码注解:* 1. 使用 promise 使得 JSON.parse 出错时程序能够继续运行* 2. 因为 then 中的函数是异步执行,可能导致原代码中想要 Object.assign 时 result 仍为属性未 parse 的状态,所以每次 parse 成功都调用一次 assign* 3. 本...原创 2018-08-05 14:00:33 · 911 阅读 · 0 评论 -
工作中遇到的技术问题备忘(四): ngrok 内网穿透让外网可以访问本地运行的测试项目
同事问我: 有没有办法让别人在外网看到我本地正在运行的测试项目? 随后我想起了我原来做学年设计时用过的 ngrok访问网站 ngrok.cc ,这个是我当初用的,现在也就把账号直接给同事用了,按着网站上面的教程来,选择免费服务器但是这次用的时候报错了Webpack 出现 Invalid Host header 错误, 网上说这种情况可将 webpack-dev-server 的...原创 2018-08-05 14:05:23 · 249 阅读 · 0 评论 -
工作中遇到的技术问题备忘(五): 两个 iFrame 标签包裹 Vue 项目互相传值
场景描述:两个 <iframe> 里包着同一个 Vue 项目的两个页面,在一个页面点击了,传递参数过去到另一个页面跳转方式: 通过 DOM 取到左边目录所有目录项的路径属性,检测到符合另一个页面的路径就属性手动 click 该目录项一下, 切换到另一个 <iframe >初步实现:通过 sessionStorage + 每次切换标签到这两个 Vue 页面就刷...原创 2018-08-05 14:08:54 · 883 阅读 · 0 评论 -
Iconfont+IcoMoon 升级 iview2 图标库到 iview3 (打造自己的图标库)
进入 IcoMoon , 导入 node_module 里装的 iview2 和 iview3 的 SVG 字体文件.IcoMoon 很简单, 不会弄可以自己上网查;同理, node_module 里找到 iview 文件夹了慢慢找 fonts 里的 svg 文件, 基本上看着文件夹名字就知道在哪儿了导入完成后, 先全选 3 版图标再全选 2 版图标, 选择导出, 导出时可以设置...原创 2018-12-10 21:52:19 · 1548 阅读 · 0 评论 -
两边自适应宽度文字不换行, 中间文字换行/省略号显示
<div class="Grid"> <div class="Grid-cell">前前前前</div> <!-- 直接用 div 包裹文字就是换行显示, 加上这些样式后就是省略号显示 --> <div style="overflow: hidden;"> <div ...原创 2019-07-01 17:28:06 · 1062 阅读 · 0 评论 -
vue的符号{{}}和handlebars的符号冲突问题解决
转载:vue的符号{{}}和handlebars的符合冲突 Handlebars官方文档说要输出 {{abdc}}这样的字符串有两种方法 1. 内联 只有一行的 直接在内容前面加 \ ,既\{{abdc}}; 2. 用raw包裹,想要输出{{abc}}{{wed}} 就 {{{{row}}}} {{abc}}{{wed}} {{{{/row}}}}转载 2017-10-25 10:24:21 · 2320 阅读 · 0 评论 -
廖雪峰老师JS教程读书笔记(三):attr()和prop()和is()
attr()和prop()的差别 简单来说,根本区别就是,attr操作HTML元素的属性,prop操作DOM元素的属性,因为DOM会解析某些HTML元素属性到自己身上,此时prop和attr都能操作这些属性。廖老师教程原文,获取节点信息那块prop()方法和attr()类似,但是HTML5规定有一种属性在DOM节点中可以没有值,只有出现与不出现两种,例如:<input id="test-rad原创 2017-09-05 14:26:03 · 398 阅读 · 0 评论 -
廖雪峰老师JS教程读书笔记(一):JS继承
真正理解prototype原型继承 核心思路:在子类原型链中加入父类的原型//定义父类构造函数function Student(props){ //传入参数为对象,这样的好处是不用按顺序传入参数 this.name=props.name||'UnNamed';}//在父类的原型对象上定义方法Student.prototype.hello=function(){ aler原创 2017-09-04 17:02:20 · 415 阅读 · 0 评论 -
廖雪峰老师JS教程读书笔记(二):原生AJAX与跨域总结
廖老师网站原文原生AJAX请求//创建一个XMLHttpRequest对象var request=new XMLHttpRequest();//readystate发生change时会执行的回调函数request.onreadystatechange=function(){ if(request.readystate===4){ //请求完成 if(request.st原创 2017-09-04 15:50:09 · 1682 阅读 · 0 评论 -
Git常用命令整理备忘
增删查改+远程增: 初始化git仓库: git init 设置用户名和用户邮箱: git config --global user.name "用户名" git config --global user.email "用户邮箱" --global表示设置为全局 添加文件到暂存区: git add 文件名称 提交改动到版本库: git comm原创 2017-07-04 23:03:04 · 393 阅读 · 0 评论 -
各种toString()
原文地址转载 2016-10-26 11:49:24 · 197 阅读 · 0 评论 -
hbuilder用ftp插件建立sftp连接到公司服务器编写页面
工具——>插件安装——>找到FTP插件并安装——>右键工作区的文件夹,选择“部署”——>“部署设置”——>填写信息,最后选择“从本机自动同步到远程站点”注意:不要多个人同时编写一个页面,可能相互矛盾, 写好了以后可以右键想要上传/下载的页面或文件夹,进行上传/下载原创 2016-07-21 14:24:45 · 30036 阅读 · 2 评论 -
真正理解prototype
Created with Raphaël 2.1.2构造函数构造函数实例对象实例对象prototype对象prototype对象Function.prototypeFunction.prototypeObject.protoTypeObject.protoTypenullnull创建原型链,对象上未发现请求的属性和方法则向prototype上溯寻找函数也是对象,所有函数的__proto__都指向F...原创 2017-09-01 17:59:50 · 438 阅读 · 0 评论 -
给div加focus和查看当前focus的元素
给div加focus: 设置div的tabindex查看当前焦点所在元素: document.activeElement原创 2017-08-29 13:28:20 · 1175 阅读 · 0 评论