- 博客(49)
- 收藏
- 关注
RSS订阅原创 js+canvas实现劈腿关系图
原始数据只需要提供节点自身id 父点节id，劈腿关系图自动处理。【我愿称多对一 一对多关系为劈腿关系】【合并同一个目标点线路】【合并同一个出发点线路】【显示所有线路细节】
2023-06-06 12:02:40
154
原创 VirtualBox NAT 网络端口转发配置
主机就是本机，子系统就是目标虚拟机ｉｐ及端口，配置完成后，访问目标虚拟机，直接通过本机ｉｐ＋端口访问。连接方式NAT网络 界面名称就是刚才全局新建的NAT网络。１ 管理---> 全局设定---> 添加新NAT网络。之前忘了从哪看的，设置完好久没用差点忘了，记录一下；２ 目标虚拟机网络配置。
2023-03-22 09:40:30
2035
原创 配置 npm run-script 在 PowerShell 中运行
两种配置，一种是所有命令都将在PowerShell中执行，一种是本条命令在PowerShell中执行；1 第一种， 所有命令在PowerShell中执行，在项目根目录下创建配置文件 .npmrc，写入配置2 第二种， 临时配置结合hooks...
2022-06-26 23:01:47
642
原创 从零开始：JS实现CSS文本的选择器解析与HTML的节点解析
【需求】替除css 文件中失效的样式【实现分析】首先要找到失效的样式 什么样的样式是失效多余的
2021-07-23 00:14:54
648
2
原创 vue 项目 husky pre-commit 勾子不触发
背景：使用vue cli@vue/cli 4.5.12 创建的项目git 进行提交时可以正常的触发 pre-commit勾子，但是同样的包，同样的配置 放到另一个项目中时发现不执行。对之前的项目进行eslint 配置发现正常配完后不触发勾子，配置如下"gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{js,jsx,vue,ts,tsx}": [ "vue-cli-service lin.
2021-04-01 19:47:53
3458
4
原创 RxJS 应用场景2 —— 大量数据分批调用接口 + 重试
假如有这样一个场景，有上万条数据，需要分100条一批的分批次并行调用接口，假如接口返回失败，提示该批次失败并于2秒后重试，假如重试又失败，提示4秒后重试，如果还是失败则8秒后重试，当重试3次后依然失败那么停止重试。使用RxJS 简洁实现方式如下:import { _http } from '@/http.service';import { debounceTime, mergeMap, map, catchError, retryWhen, delayWhen,..
2021-02-04 17:48:58
1286
原创 Gitlab runner docker Could not resolve host
环境：gitlab-runner version: 13.3.1docker version: 19.03.2centOS7【报错】Gitlab runner docker Could not resolve host【问题】docker 容器内无法获取gitlab 仓库代码本地虚拟机gitlab runner运行没有问题，布署到线上服务器出现这个报错，各种尝试后并不能结决问题【解决方案】 参考 ：https://stackoverflow.com/questions/50325932/g.
2021-02-04 11:28:12
1233
原创 windows 平台 js 生成 CSV文件中文乱码解决方案
惯例：demo 地址 解决方法demoJS生成CSV文件 window 平台下会有中文乱码的问题，原因是windows 平台UTF-8文件头习惯加字节序标记0xEF 0xBB 0xBF，本身UTF-8编码不需要字节序标记 只是用来标记文件为 UTF-8编码方式，需要注意的是 0xEF 0xBB 0xBF 是文件的前三个字节中的值，字节和unicode字符要区分开，字件头加入\u00ef \u00bb \u00bf 是没有意义的。【思路】先生成csv 文件，通过Blob 创建，然后通过URL.cr
2020-11-29 23:31:20
992
1
原创 零行报错：0:0 error: Parsing error: Cannot read property ‘map‘ of undefined at xxx
项目 为 vue + ts ，eslint 零行报错,控制台零行报错的位置在 vue 单文件，导致项目启动报错，除此之外.ts 文件内便是定义的接口，没有调用map方法，依然eslint 报错 但不影响项目启动。经过分析发现是类型定义导致 ：interface xx { lngLat: [number,number]}function demo(data:{lngLat:[number,number]}){}改成 lngLat: number[] 的形式，可以正确启动.
2020-11-26 19:57:38
3942
原创 同一浏览器跨标签页跨域通信方案
假如一个需求需要A页和B页C页等进行相互通信，并且有第三个页打开时，接收之前的最后一条消息或是全部的历史消息，如何优雅的实现呢？【跨标签页通信方案】通过监听storage 事件 通过ShareWorker BroadcastChannel方案1：通过存储事件，会用多余的触发及清理消息的额外开销及存储极易被看到，个人感觉不是很理想方案2 ： 貌似还不错，处理历史消息极其方便，关闭标签页也不存在清理历史消息的问题，方案3： 这个API实现上极为方便，不足之处是浏览器支持不如前两个，safa
2020-06-01 23:56:47
1003
原创 JS 性能优化小记
【JS语法层面的性能优化】先看一个2万次的遍历性能开销图（Chrome 版本 83.0.4103.61（正式版本） （64 位））发现了什么？同样是forEach 执行效率截然不同，所以不能简单的对比 for for...of forEach 性能上的差异，理所当然的认为性能开销所差无几，建议使用for 循环 不建议使用forEach ,因为forEach在不同语境表现性能表现差异极大此外Array.prototype.includes() 方法明显的有性能问题，数据量大量时不建议使用，
2020-06-01 12:30:50
768
原创 高德地图 web 端 JS API 遇到的坑及性能优化
【JS API V2.0】本指望全面提升一下性能，结果发现一些硬伤，迫不得已转到1.4.15版本，先说一下最新的v2.0的问题。因为务业需要规划线路，但是这个版本中，规划线路，并且经过中间点时，部分window 7 旗舰 chrome 报错，报错信息:Uncaught Error: createProgram fail chrome 版本 81.0.4044.113（正式版本） （64 位） win7 64位即便是官方demo 也会报错，后来和提交工单，回复未复现，后来工期急就没跟踪，上线后有极少.
2020-05-28 00:39:36
12433
17
原创 RxJS 应用场景1——简化轮询逻辑（将琐碎的异步逻辑抽象为一个输入输出流）
RxJS 应用场景1——简化轮询逻辑从实际应用场景中抽出一段逻辑，作为说明。逻辑如下：调用生成接口，拿到key，5秒后调用进度条接口轮询进度（数据太多），UI渲染进度，当进100时停止轮询。所以要抽象出一个方法demoX，负责调用生成接口，并轮询进度条接口，最后返回接口响应信息（进度或，接口报错信息）。整理一下这个方法需要实现的功能：收集第一个接口和第二个接口的报错信息并返回 收集这...
2019-12-30 20:04:15
2402
1
原创 关于 RxJS redux-observable
问题1：这个东西有什么用，为什么要用它？redux-observable 作为redux 的一个中间件提供了action 异步处理的能力，并且它基于RxJS，RxJS 是一个强大的库，熟悉Angular 应该不会陌生。如果对RxJS 没有兴趣，那么redux-observable 也没必要去了解了。为什么要用它呢？个人认为：1 喜欢并熟悉RxJS，2 redux-observable 完全...
2019-12-07 14:04:03
334
原创 关于Proxy 对象代理Array时 Array.prototype.splice() 与Array.prototype.length 清空数组时的表现差异
当使用Proxy 代理数组 setter 时 代理对象调用 proxy.splice(0) 方法时，只会截获到代理对象length 属性的修改，但此时，原数组已被清空，值为undefined length 还在。所以使用Proxy 代理数组，需要清空时，直接proxy.lenght=0 进行清空操作，代码如下let list=[0,1];let componentList=[{se...
2019-03-28 14:06:41
5444
原创 typescript Type 'NodeListOf<any>' must have a '[Symbol.iterator]()' method that returns an iterato
Type 'NodeListOf<any>' must have a '[Symbol.iterator]()' method that returns an iterator.typscript 使用 for of 对节点list 进行遍历时报错：Type 'NodeListOf<any>' must have a '[Symbol.iterator]()...
2019-03-28 13:50:24
14663
原创 关于CORS 及 Ant Design Access-Control-Allow-Headers:x-requested-with
本地开发使用Ant Design ng 版上传图片时 跨域拦截，需要处理响应头，一般来说接口已经开启，但是一般接口服务不会加入这个头：Access-Control-Allow-Headers:x-requested-with先看一下三CORS 需要响应头的修改Access-Control-Allow-Credentials:true, 此项为true 时 origin 项必须指定请求的域...
2019-03-05 18:47:37
4723
原创 webpack 4.29.5 import() 动态加态报错
webpack 版本：4.29.5已经确认为一个BUG，地址见：https://github.com/webpack/webpack/issues/8656Module parse failed: 'import' and 'export' may only appear at the top level (85:8)You may need an appropriate loade...
2019-03-01 16:21:18
2436
7
原创 postcss-sprites: An error occurred while processing files - SOI not found
主要原因是 引入的样式文件包含非PNG格式图片，换掉就行
2019-01-31 13:59:32
513
原创 Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks sass打包未遂
Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks sass打包未遂问题描述：单页单入口文件sass 文件内容没有被导入进打包后以的文件类似 这个问题https://stackoverflow.com/questions/49410921/webpack-4-mini-css-extract-plugin-sass-...
2019-01-10 16:20:11
2645
原创 JS框架双向数据绑定原理及思考
本文章信息点双向数据绑定原理（vue） 如何设计搭建自己的框架 代码暂略，详见，github [地址]https://github.com/yyccmmkk/Bi-directionalDataBindingDemo什么是单向什么是双向？单向指是数据从model流向view双向是在单向的基础上数据再从view 流向model。双向数据绑定原理相信很多人看过很多双向数据绑定...
2018-12-27 18:19:06
940
原创 webpack rxjs 6+ 引入模块报错
环境webpack 4.14.0typescript 3.0.1rxjs 6.3.3 第一种引入方式var Observable = require('rxjs/Observable').Observable;// patch Observable with appropriate methods报错：Module not found: Error: Can't re...
2018-09-29 18:09:05
1458
原创 JS 拖拽对齐参考线+自动吸附+对齐到网格
具体代码参见：https://github.com/yyccmmkk/js-reference-line【需求】对一个元素进行拖拽时，生成这个组件和其它组件对齐的参考线，实现各组件间四条边及水平中心线及垂直中心线对齐。在拖动完成后实现自动吸附对齐。【解决思路】1 MAP记录所有需要对齐组件的视窗坐标点（左上，右上，左下，右下）2 P为当前拖拽对象实时的坐标点（左上，左下，...
2018-09-01 00:03:09
13251
5
原创 webpack typescript 加载 js 模块报错解决方案
环境webpack:4.10.2typescript:2.9.1ts-loader:4.3.0ts-node:6.1.0加载js文件情况这些ts 加载commonjs 模块ts 加载umd 库ts 加载全局库ts 加载ES6 模块参考文章 webpack中文网提供的文档1 使用typescript 配置webpack2 typescript webpack指南当然文档不细看也整不对，先说对应的解决...
2018-06-06 23:09:02
10278
2
原创 indexedDB + web worker 检索数据
前阵子做项目总结一下 indexedDB +web worker 开发中的问题，mdn 上有 indexedDB 和 webworker 的文档，但是总觉得demo和实际使用有点出入，项目中遇到的问题web worker 文档中提到的subworker chrome 并不支持，所以，不建议用， web worker 及indexedDB 文档demo有点简单，查询是最重要的资料最少...
2018-06-04 17:56:29
2596
2
原创 webpack typescript art-template 模块构建失败解决方案
环境webpack 版本：4.10.2, 非全局安装node :8.11.2typescript:2.9.1问题一 typescript 引入模块报错npm 安装art-template 后，typesrciprt 文件引入模块构建 报错import template= require('art-template');解决办法直接引入打包后的文件import template = require(...
2018-06-04 08:44:18
1523
原创 chrome 输入框光标残迹偶现解决
【问题】chrome 文本输入框失去焦点时，会有残迹，偶尔发生，【解决过程】开始怀疑是JS代码性能有问题，进行优化并不有效，对焦点重新获取等依然不行，【解决方案】对文本域进行CSS控制 对行高进行调整，有残迹是行高太小，行高设大以后光标残迹消失，【思考】一开始以为是浏览内部机制的原因，所以一直对JS代码进行排查，最后以CSS方式解决，HTML／CSS 进行黑
2017-12-28 13:22:41
448
原创 linux小白操作合集
１结束任务ps -aux然后看行尾的command（来源 就是软件的安装目录） 要是不知道软件安装在哪，那就搜索软件名，最后看行头pid kill -9 [pid]
2017-02-14 22:18:58
427
原创 centOS7安装nodejs 配置环境变量
1从nodejs官网下载对应的安装文件，选择的是 node-v6.9.5-linux-x64.tar.xz 文件2解压文件后直接进入bin文件夹 执行node -v 可以看到版本号，主要是配置环境变量全局执行网上搜到的命令：ln -s /home/XXX/Node-XXX/bin/node /usr/local/bin/nodeln -s /home/XXX/Node-XXX/
2017-02-14 21:47:06
4837
原创 移动端点击击穿与百度广告点击统计
利用移动端击穿的原理进行百度广告点击统计，实施很简单，在百度广告上方放置一透明层，当用户点击时发送统计日志，移动端击穿的原因，网上文章很多，大意是click事件会有相对于touch事件300毫秒的延迟触发(因需要判断双击还是单击),可以利用这一点当touch事件触发时隐藏浮层，click 事件应用时刚好点到广告;比如使用工具的tap事件,当然自己写原生也很简单，监听touchend事件，监听...
2017-01-18 15:02:25
1342
9
原创 移动端，JS判断滑到页面顶部下滑进行操作
和底部上滑操作，这个比较简单，原生无特效topPullDownDo:function(){ var sY,eY,_h,slideNum, UA =navigator.userAgent, isUC=UA.indexOf("UCBrowser")!=-1||UA.indexOf("Baidu")!=-1||UA.indexOf("MQQ
2017-01-13 10:54:43
2102
原创 iPhone safari浏览器，后退后页页不执行脚本
iPhone safari 后退后，页面不触发 ready事件（私以为DOMContentLoaded事件），后续脚本不执行。【解决方案】针对 safari body 注册 onpageshow 事件，判断如果是取的缓存，就刷新页面;可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回
2017-01-06 10:23:10
6789
1
原创 localstorage跨域解决方案
localstorage也存在 跨域的问题，【解决思路如下】在A域和B域下引入C域，所有的读写都由C域来完成，本地数据存在C域下;因此 A哉和B域的页面必定要引入C域的页面; 当然C域最好是主域，原因后面会提到(在localstorage 不方便的情况下使用cookie);【A域】【B域】需要读写时，通过postMessage 向【C域】发送跨哉消息，【C域】监听跨域消息，在接...
2016-11-22 20:02:48
38636
3
原创 那些不能用 F12 调试工具的问题
浏览器调试工具是排查问题的最好手段，然而有些问题遇到调试工具不再复现，1，IE8缓存问题 特定情况ajax请求缓存加时间戳也不好用， 一旦按下F12 调出工具，问题消失了，网上的说法是 打开调试具会在页面head加上一个禁缓存的标签,2
2016-09-28 17:15:31
3399
原创 手机UC禁止左右滑动切页
手机UC 左右滑动时会切换页面，禁止的方法其一为阻止【document】的 【touchmove】事件 的默认操作，代码如下：var xStart,xEnd,yStart,yEnd;document.addEventListener('touchmove',function(evt){ xEnd=evt.touches[0].pageX; yEnd=evt.touches
2016-07-07 19:47:49
3029
原创 移动端，JS判断滑到页面底部上滑进行操作
做项目的时候接到小发版以为很小的东西就没放心上，结果还是忽略了很多，造成一些困扰，1 【滚动区高度获取]document.documentElement.scrollHeight可以通过【scrollHeight】这个属性去获取，根据【js高性能的理论】像获取这样的属性时页面会再次重绘排版，也就是引起渲染,所以要尽可能的减少这个属性的读取，当然一开始可以获取它的值并保存在一个变量中
2016-06-16 21:18:56
13002
原创 js中的小数计算精度问题，修正计算精度
js 的精度问题这个网上比较多，进行加减乘除运算也难免，常见的比如：1）在控制台 输入：1.1+0.3 运算结果是：1.4000000000000001，根本原因也就是二进制和十进制转换的问题，具体源由参考网上相关文章，有一种解决办法：两个数分别剩10的N次方最后再除10的N次方，比如：（1.1*10+0.3*10）/10 ，貌似没有什么问题，但是还是有问题的，只是问题比较隐蔽2）...
2016-06-16 13:40:25
7240
原创 jQuery 事件机制源代码分析1——jQuery事件机制整体架构
之前在网上搜索过一些内容大多都是写的零散写出一些方法感觉不是很系统，要不就是文不对题，后来自己debug 一番大概搞清楚了，决定写个文章记录下来。需要说明的有以下几点：1 本文不会教你如何使用.on .off .trigger 等方法 2 基于源码分析基于自己见解，有错请指出3 因为整个事件机制过于复杂 计划分几篇写完，4 本文jQuery 库版本为1.11.2，可以下
2016-05-29 22:38:18
661
原创 JSONP伪同步请求及如何使用GBK 进行encodeURIComponet 编码
【jsonp同步请求】使用jQuery.ajax 发送jsonp 请求，其原理决定了它不可能同步请求，但可以换一种方式，我们可以利用浏览器的解析文档规则：浏览器在解析HTML文档时，遇到script 标签，会停下来解析并执行里面的代码，当script 请求的一个远程文件时，会等待这个文件加载完毕再往下执行，直到该文件加载失败，利用这一点虽然不能完全达到XHR同步效果，但可以在加载时实现
2016-05-27 18:44:21
1318
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人