javascript
文章平均质量分 61
业火之理
这个作者很懒,什么都没留下…
展开
-
【AntV】canvas表格s2完全封装手册
由于我们业务中有很多地方需要有纵向复制,刷选等操作,一般的传统表格并不支持。目前支持度较好的葡萄城表格与handsontable都需要收费,而s2作为一款轻量级开源表单较为符合我们的需求,但是由于s2仍然不够成熟,有非常多的功能需要自定义。我在公司对s2做了大量封装,对里面代码基本上算比较熟悉了。本篇结合我们业务中的需求,带大家看看s2可以做到什么地步,需要进行怎样的改动。本文写了s2常见的封装功能,目前暂时写这么多,以后有新的再补充。原创 2023-08-31 15:44:52 · 1303 阅读 · 0 评论 -
【chrome】iframe与Permissions
最近在做iframe嵌套页面时,遇到了需要剪切板权限的问题,提示:Disabled in this document by Feature Policy.为此特意去学习延伸了下这方面的资料。原创 2023-01-10 15:53:36 · 1715 阅读 · 0 评论 -
【rxjs】rxjs详细入门笔记
前言刚开始学前端时就知道有这玩意,差点因为这玩意把我劝退,这次好好学学。rxjs源码写的很棒,还有漂亮的注释让人了解如何去使用。主要api本文列举主要的api,其余自行点击文档查看。Operators由于操作符相当多,当你不知道用啥操作符时,可以试着使用操作符决策树这个功能:https://rxjs.dev/operator-decision-tree。它会告诉你你需要啥操作符。Creation Operatorshttps://rxjs.dev/guide/operators原创 2021-11-23 16:59:44 · 1076 阅读 · 0 评论 -
【javascript】同步的循环转换成异步循环
前言react在单线程上玩的越来越6,不禁产生这样的思考,如何将同步循环转换成异步循环。实际意义在单线程中,异步循环还是很有必要的,如果同步数据量过大,会造成浏览器卡死。思路一、递归js的异步无非那几个api,我以settimeout为例,套一个函数使用递归即可:const arr = [1,2,3,4,5,6,7]let count =0 const go= ()=>{ if(count < arr.length){ setTimeout(原创 2021-07-29 17:38:36 · 734 阅读 · 1 评论 -
【react】blockly结合react快速上手
前言最近玩了blockly,感觉太强大了,原来scratch也是blockly做的。文档blockly文档:https://developers.google.com/blockly/guides/overview?hl=enblockly开发工具:https://blockly-demo.appspot.com/static/demos/blockfactory/index.html快速上手首先安装blocklynpm i blocklyblockly 主要靠xml注入和原创 2021-07-21 11:36:09 · 1093 阅读 · 0 评论 -
【javascript】mouseup与iframe踩坑
复现最近写dooringx-lib时遇到了个巨大难题。我试着在编辑器的画布中使用iframe,然后iframe中做一个可以拖拽选择的效果,这时这个坑就出现了。也就是我在iframe中按住鼠标左键,然后移出iframe后松开鼠标左键,此时,父页面无法监听到mouseup事件。于是我还整了很多骚操作,一开始我觉得可能是preventdefault搞得鬼,把所有preventdefault都删了。发现不行。然后在iframe里用postmessage告诉父页面左键点击,让父页面dispatch一个假的原创 2021-07-19 21:41:18 · 1099 阅读 · 2 评论 -
【javascript】解决windows没有cp与rm命令
前言由于拿别人仓库,发现别人的package.json里写了cp rm的命令,但我是windows电脑,无法运行,于是就想着做个脚本替换这2命令。安装npm i -g mycp之后在 package.json 或者 cmd 执行 cp 或者 rm 会执行对应操作。仓库地址https://github.com/yehuozhili/mycprm如果有bug再说,一般基本能解决问题。...原创 2021-06-17 22:14:37 · 1388 阅读 · 0 评论 -
【javascript】单页活动页脚手架create-activity-script
create-activity-script制作初衷由于经常制作单页活动页,在活动越来越多后导致不好管理以及打包缓慢等缺点,所以使用该脚手架制作打包缓存,进行更新。使用说明安装:npm i create-activity-script -gCommands: create|c [options] <project-name> create project collect|co [options] collect all project an原创 2021-06-05 20:53:31 · 144 阅读 · 2 评论 -
【javascript】构建优化记录
前言最近在优化一个老项目,记录下优化过程。基本情况这个项目已经被人升级到vue-cli3,但是是多入口页面,所以打包时间相当相当长,在部署的机器上1c8g上打包一般需要8分钟-9分钟左右。优化记录首先需要smp(speed-measure-webpack-plugin)测速度,才能知道如何优化。发现一些无用loader 或者plugin直接去了。vue.config.js和smp有点冲突,只有在单页时smp.wrap configureWebpack才能拿到loader和plugin原创 2021-05-12 16:29:00 · 121 阅读 · 0 评论 -
【javascript】控制输入框光标或者富文本光标
前言最近看别人代码时发现别人使用selection操作光标,觉得很有意思,特别记录下。MDNselection-apirange-api调用说明selection实际是拖蓝,但也可以理解为光标,因为光标是间距为0的拖蓝。这个封装有点像vscode或者codemirror那种,实际range是个对象,控制selection需要传给其range对象。获取selection:const sel = window.getSelection();获取range:let rang原创 2021-03-24 13:54:50 · 1008 阅读 · 0 评论 -
【javascript】记录babel-plugin-import的坑
复现最近我在用antd做dooring-v2,打包时候发现babel-plugin-import只能生效一个配置,多个配置只能生效最后一个。在其文档上写着babel7以下配置项支持数组写法,不支持数组写法则需要多次载入设定不同的键。https://www.npmjs.com/package/babel-plugin-import由于项目需要按需加载antd以及antdicon,自然按文档说的配置了2个配置项。虽然编译没有报错提示,但是产物里确实只有最后那个生效,调换配置也一样。说明babel的原创 2021-03-14 13:23:06 · 812 阅读 · 0 评论 -
【javascript】反射Reflect
前言以前学习javascript反射api没懂为啥这个api叫Reflect?甚至这个api还相当好用,它可以返回布尔值表示正确执行没有。直到我最近学习了java,发现java也是有反射。后来查了下反射主要指的是在不清楚一个东西内部状态方法时可以枚举其状态或者方法。当然也有狭义上的理解,就是通过字符串来运行某东西内部状态和方法。所以在大量说js反射机制的文章里,基本就是把一个对象遍历下,然后说这就是js的反射机制。本篇的主角时Reflect的api,如果读者还没听过这个api,那真应该好好看看,原创 2021-02-27 10:55:25 · 1267 阅读 · 1 评论 -
【javascript】油猴脚本开发整理
前言油猴脚本有挺多用处,这玩意不用审核,可以做点效率工具。文档油猴官网油猴插件发布搜索商店油猴插件开发者文档谷歌防csp插件vercel用于部署api或者js开发开发简单的就直接上面写就行。复杂的就用前面文章的脚手架。在本地启服务后,把下面脚本复制进去即可开发调试:// ==UserScript==// @name MoveSearch// @namespace http://tampermonkey.net/// @version原创 2021-02-06 16:45:20 · 1741 阅读 · 0 评论 -
【javascript】wokoo脚手架搭建
前言支持下这位兄弟写的脚手架,这个脚手架是开发油猴脚本的。需要使用的直接去下wokoo-script 不用看下面的搭建。流程这是一个lerna项目,在lerna init 后,package.json增加:"workspaces": [ "packages/*"],创建2个子项目:lerna create wokoo-scriptslerna create wokoo-template一个用来做脚手架命令,一个用来存放模板。在script的bin目录下建www#原创 2021-02-06 11:03:01 · 399 阅读 · 0 评论 -
【vscode】vscode插件学习(五)
前言本篇主要写一下github登录,环境变量,codelens这几个功能。github登录vscode本身是可以进行github登录的,所以一般只要借助它已经拿到的账户信息去做就行了。翻阅文档,可以发现其本身自带2个账号登录,一个是github,一个是microsoft:Currently, there are only two authentication providers that are contributed from built in extensions to VS Code原创 2021-01-05 08:45:50 · 2022 阅读 · 0 评论 -
【javascript】使用react或者vue简易注入老旧项目
前言由于有些老旧项目是使用layui或者jquery那种html服务器渲染那种,所以有时候你需要使用你自己擅长的框架进行修改,否则就只能和它一样写layui那玩意。思路其实思路和微前端思路一模一样,但是微前端配起来还是有点麻烦,而且要以老旧项目为基座的话,为什么不提供个umd的引入呢,所以我们方式就是直接手动引入。另外,我们这种方式是不需要子应用进行部署的,只要把js文件丢过去即可。所以跟微前端适用性还是有些区别。流程我们模拟的老旧项目是网上找的一个html模板,它的tab页切原创 2020-12-18 10:29:35 · 369 阅读 · 0 评论 -
【vscode】vscode运行F5报错误码1解决方法
复现前面一直使用f5运行没啥问题,今天写插件运行时挂了,报错误码1。原因我是用yo code生成的项目,所以配置文件这些一般是不会写错的,后来发现错误提示里有运行yarn run watch报错,所以觉得应该是权限问题。然后直接调出vscode控制台,运行yarn run watch果然报错。vscode使用的是powershell而非cmd运行,所以会有权限问题:yarn : 无法加载文件 C:\Users\hqit\AppData\Roaming\npm\yarn.ps1,因为在此系统上原创 2020-12-14 10:03:21 · 3917 阅读 · 0 评论 -
【webrtc】websocket交换sdp实现ice链接
前言上一次进行了手动交换sdp成功进行了ice连接,但是正常情况下,不可能是让你手动交换,因为你能手动交换,说明你们之间已经有了传输通道,不然怎么获取对方的sdp。所以一般情况下,需要有个中间的服务器用来交换sdp,两个客户都通过中间服务器交换了sdp后实现ice连接。貌似这个过程的专业名词叫信令转发。服务器搭建首先初始化个npm项目,安装ws起个ws到8001const webSocket = require("ws");const wss = new webSocket.Server原创 2020-12-14 03:34:29 · 48702 阅读 · 1 评论 -
【vscode】vscode插件学习(三)
前言今天继续学习制作vscode插件本地读取文件本次制作本地看小说插件。就是本地txt文件在vscode里看小说。贡献点我们要在左侧出现个图标,这里我直接整了个reactapp的logo弄来。当点击图标后激活命令,在左侧获取文件列表,点击后查看文件。"activationEvents": [ "onView:myread-list" ], "main": "./dist/extension.js", "contributes": { "commands": [原创 2020-12-08 18:55:46 · 3710 阅读 · 0 评论 -
【antvl7】antvl7入门
前言最近玩玩antvl7,很多时候,都需要整个地图之类的,让人觉得系统高大上,所以这玩意也是没法避免不写的。申请账号官方说不支持独立引擎,需要引入第三方,推荐高德。那么就先注册高德。https://lbs.amap.com/api/javascript-api/guide/abc/preparel7-react和l7l7react是对l7封装的jsx,这个想法很好,可惜目前不成熟,特别是官网上文档还有很多没有,所以如果是简单用法可以用用,需要用复杂的用法建议直接放弃l7-react,使原创 2020-12-07 14:52:45 · 8015 阅读 · 2 评论 -
【vscode】vscode插件学习(二)
前言今日做另外几个插件,顺便学习去除console.log第一个插件,用来去除当前页的console.log。首先做一个正则匹配的函数function getAllLogStatements() { const editor = vscode.window.activeTextEditor; // 获取编辑器页面文本 let logStatements = []; if (editor) { const document = editor.document; const d原创 2020-12-03 17:50:46 · 775 阅读 · 2 评论 -
【vscode】vscode插件制作学习(一)
前言最近顺带玩玩制作vscode插件。学习资料官方文档:https://code.visualstudio.com/api官方示例仓库:https://github.com/microsoft/vscode-extension-samples微软官方插件制作文档还有视频,可以说相当6了。制作第一个扩展插件我们首先制作第一个插件玩玩,就是console.log。什么功能呢,就是右键会有个面板,按一下就能打出console.log,选中某个词,然后输入快捷键或者右键就能快速输出cons原创 2020-12-03 13:48:01 · 792 阅读 · 0 评论 -
【webrtc】ice链接代码梳理
前言这玩意我看了也是蒙B的,所幸找到了些资料,再基于官网进行理解。RTCPeerConnectionmdn:https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection一个基本的RTCPeerConnection使用需要协调本地机器以及远端机器的连接,它可以通过在两台机器间生成Session Description的数据交换协议来实现。呼叫方发送一个offer(请求),被呼叫方发出一个answer(应答)来回答请求。原创 2020-12-02 12:33:01 · 459 阅读 · 0 评论 -
【javascript】手写生成图片验证码
前言验证码也是个常用的功能,以后如果有类似需求可以直接复制粘贴节省时间。思路先做出基本实现再进行加工。比如场景是一个很常见的只在前端做验证码的情况。这样,我们会随机一个数字,传给生成图片的函数,得到图片给用户显示,等用户输入后,与存在内存的变量进行比对,如果相等就继续下一步逻辑。可以先确定一下有哪些字。一般情况下,字母加数字就差不多了。const allletters = [ "a", "b", "c", "d", "e", "f", "g", "h", "i", "原创 2020-11-07 21:18:46 · 644 阅读 · 1 评论 -
【javascript】浏览器调用摄像头扫二维码踩坑记录
前言最近做一个项目需要用浏览器调用摄像头,然后就踩了几个坑记录下。踩坑记录我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/library 与https://www.npmjs.com/package/@zxing/browserzxing/browser是最近才建立的,根据我的使用发现zxing/browser有bug,他目前没法像zxing/library一样使用stop或者clean来终止摄像头使用。在pc端使用zxing/原创 2020-10-30 20:59:37 · 3088 阅读 · 0 评论 -
【javascript】商品种类算法
前言有小伙伴群里问了个面试题:有这样一个数据const a = [ { id: "17", caption: "颜色", types: ["黑", "棕"] }, { id: "23", caption: "材质", types: ["牛皮"] }, { id: "24", caption: "尺码", types: ["40", "41", "42"] },];需要让你返回这样的结果:[ { '17': '黑', '23': '牛皮', '24': '40' }, {原创 2020-08-27 11:20:30 · 541 阅读 · 1 评论 -
【微信】微信登录踩坑记录
前言突然就想玩一下微信机器人了,于是去github上找了圈发现都在用wechaty。作者介绍也很nb啊,我就不说了。但这玩意还是有很多坑。登录一开始按照里面example写了段代码:import { Contact, Message, ScanStatus, Wechaty, log } from "wechaty";import { generate } from "qrcode-terminal";function onScan(qrcode: string, status: S原创 2020-08-26 08:22:40 · 267 阅读 · 0 评论 -
【javascript】前端监控学习笔记(二)
前言上一篇主要说了脚本错误捕获,资源加载错误捕获,和promise捕获。本篇记录下接口异常捕获、白屏监测、加载时间、性能指标,卡顿指标,pv。接口异常捕获原理重写xmlhttprequest的open和send方法,使其在上报前进行标记和计时,监听其load、error、about事件,当发生相应的事件进行上报。注意!open事件中进行标记xhr需要排除上报url,否则会发生无限循环。axios同理,可以进行自行封装。排除上报地址后,对应的计时监测和上报。export default原创 2020-06-17 00:25:10 · 504 阅读 · 0 评论 -
【javascript】前端监控学习笔记(一)
前言监控不会,线上嗝屁,赶紧记录下。埋点方案代码埋点嵌入代码形式进行埋点,比如点击事件,在点击时插入一段代码发给服务端,缺点工作量大。可视化埋点将业务代码和埋点代码分离,提供可视化交互页面,在业务代码中自定义增加埋点事件,最后输出的代码耦合了业务代码和埋点代码。缺点是灵活性低。无痕埋点前端任意事件都记录下来,进行上传。优点是采集全量数据,不会出现漏埋误埋。缺点是给数据增加传输和服务器压力。基础原理使用window.addeventListener监听error事件。原创 2020-06-15 19:32:45 · 285 阅读 · 1 评论 -
【javascript】实现一个封装请求ajax器
前言这个是群里朋友问的,感觉很有意思。要求是这样:1、限制一次同时发送的ajax请求数量2、timeout限制3、重试n次。给了段开头代码:const axios = require('axios')axios.post()另外说了这个限制数量的话,超出的要等待前面完成才行。分析首先这个超时axios里是有配置的,就算写XMLHttpRequest或者ie那个,也...原创 2020-05-08 01:11:46 · 288 阅读 · 0 评论 -
【javascript】关于bind的实现
听说bind有点特别啊,一开始初学不知道,以为那么简单的东西就绑成函数等待执行呗,后来发现这玩意实际还是比较复杂的。原创 2020-04-25 04:25:16 · 241 阅读 · 1 评论 -
【pwa】pwa学习笔记(一)
前言pwa这门技术不火的原因还是很明显的,但是这个技术好处也是非常明显的,知道的人越多,这个技术越繁荣,就有更多人“挨饿”。由于这技术主要还是谷歌推,国内访问不了谷歌,这就导致国内学习pwa技术有点麻烦。资料也比较少,恰好翻到些文章,总结学习下。安装首先最应该说的就是pwa的应用安装了。先看下显示条件:这个应用安装可以理解为网页的快捷入口,不过更像是应用而不是网页。原生应用就不用说了...原创 2020-04-02 21:43:37 · 1458 阅读 · 0 评论 -
【javascript】js动态生成keyframe的坑
前言有些稍微复杂的动画效果不能单单通过transition解决,需要使用animation。一般情况keyframe都是自己早在css写好的,那么如果需要动态写keyframe呢?解决方法大家都百度到了,在document.stylesSheets里,里面有很多CSSStyleSheet。其中的rules存放着用户定义的keyframes。但是坑在这,写项目很多用的别人的组件,你不知...原创 2020-03-07 17:55:03 · 3517 阅读 · 0 评论 -
【javascript】hash路由和browser路由原理
前言spa路由原理还是很有意思的,实际上是就是浏览器提供的api接口,但这个接口还有些缺陷,但是可以允许我们对其进行重新改写。hash路由哈希路由就是路由上面有个#,以前是用来做锚点的,很多人可能会想知道这个hash路由和锚点到底有啥区别?锚点实际上是通过#后面的东西来跳到对应相同id的元素。而哈希路由是监听这个哈希路由改变的事件,渲染相对应的页面元素。那么问题来了,2者是同时起...原创 2020-01-06 23:56:44 · 1436 阅读 · 0 评论 -
【javascript】常用正则分组捕获匹配
前言今天别人问了个正则问题把我问住了,匹配半天没匹配出来,最终到处找资料搞定了,因为js的正则匹配和其他语言有些区别,还有分组方面有些坑,特此记录下js正则常用捕获符必须先弄懂这个,基础就不说了,里面还有些坑。小括号就是分组,分组里面有这样几种:(?=) positive lookahead 正向前瞻型捕获(?!) negative lookahead 负向前瞻型捕获(?...原创 2019-12-27 16:04:58 · 1495 阅读 · 0 评论 -
【javascript】链式调用的几种模式套路总结
前言有很多经典的库都实现了链式调用,但实际他们采用的方法都不太一样。总结一下。一、原型对象链式调用代表就是jqueryfunction ClassA(){ this.prop1 = null; this.prop2 = null; this.prop3 = null; } ClassA.prototype = { method...原创 2019-12-24 00:53:22 · 1432 阅读 · 0 评论 -
【javascript】cookie session localStorage sessionStorage的区别
背景这个问的比较多,怕以后忘了,总结复习下。cookie由于http是认不得来访者的,所以就想出了cookie这个解决办法:就是你来我这,我给你办张卡,你下次来凭卡认你。这个cookie是存在浏览器上的,浏览器可以篡改,于是有人想了个办法,做签名,就是在本来的数据后面加一串加密后的码,如果你改了,后面的码和当前这个值不匹配,那么服务器就不认。这个只能相对安全一点。设置签名一般服...原创 2019-12-01 01:48:05 · 119 阅读 · 0 评论 -
【javascript】解决跨域的几种方式
背景这个写的人太多了,我觉得很多人少说了很多东西,导致一大部分人配置跨域都不明白或者直接失败,所以总结下。简单请求与复杂请求学习跨域前,需要先了解如何会产生跨域问题,以及简单请求和复杂请求。跨域是浏览器限制,浏览器发起请求才会有的,服务端对服务端之类是没有跨域限制的。跨域就是只要域名不同或者域名相同端口号不同就会有跨域。简单请求就是正常的get或者post请求,不设置额外请求头之...原创 2019-11-30 00:40:12 · 436 阅读 · 1 评论 -
【javascript】图片预加载
背景这个我今天才知道还有这玩意,虽然这个技术用的有点不多了。我一开始听感觉好像没什么卵用,后来发现特定地方可以用用。主要讲原理和应用,这个实现起来有很多方式。原理浏览器加载图片时请求会根据Img的src来请求图片,如果这个src事先已经请求过的,那么浏览器会直接拿缓存里的图片,而不会再次发起请求。所以有些地方图片src不变但图片换了个浏览器就不知道(比如用户多次上传图片),一般是u...原创 2019-11-28 02:10:22 · 115 阅读 · 0 评论 -
【jquery】用jquery手写个表单验证插件
背景这题刷题刷到的,感觉写起来挺有意思。思路直接挂到jquery原型上,然后进行调用即可。代码我写的这个验证上基本没啥bug了,包括了表单提交和验证后表单按钮的disabled。我这个各个功能逻辑写的比较分开,如果以后用到有啥问题也方便修改。就是没写css,css靠个人。验证写了邮箱,手机号,最大值,最小值,身份证号都是Input标签。如果需要绑提交按钮的,就传回调函数...原创 2019-11-26 05:23:53 · 196 阅读 · 0 评论