- 博客(48)
- 收藏
- 关注
RSS订阅原创 cnpm adduser 报错 409 Conflict
踩坑日记 | npm登录一直失败，返回409 Conflict？本文记录了作者从发现到解决问题的完整心路历程，快跟着作者一步一步的解决它！
2023-03-01 12:59:27
919
原创 JS 指定元素滚动到屏幕中间
点击元素，使该元素滚动到屏幕中间<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"
2022-03-20 17:24:13
4017
原创 按照网上配置的 husky+lint-staged+prettier 为什么不生效
背景为了维护代码的统一性，引入了 eslint prettier 等一些格式化代码的工具。为了避免在代码提交时忘记格式化找到 husky+lint-staged 的解决方案。在网上很容易找到相关的文章，但是按照文章里的配置弄好后却不起作用。经过一番查询才知道最新版本的husky已经废弃了之前的设置方式。介绍一下husky@7.0.4一个git钩子工具，能够方便的帮助我们在一些 git 事件(add、commit…)触发前后做一些事情。我们主要使用pre-commit 钩子(执行 commit 前
2021-11-05 21:40:25
1940
原创 swiper 组件实现 滑动到最后一个 slide 后，再次滑动触发跳转事件
该代码只测试了移动端 其他端原理应该相同技术栈swiper 6.xvue 2.xts思路借助 swiper 提供的 touch 事件当用户按下屏幕时，通过 touchStart 记录起始的位置通过 touchMove 不断更新坐标点，并判定是否到达可执行操作的临界点用户松手触发 touchEnd 事件，在这里面通过（方向，是否是最后一个，是否到达临界点）这些条件判断是否执行用户代码段核心代码 /** * 是否到最后一个 slide 了 */ isEnd: .
2021-07-06 20:07:18
3893
1
原创 npm publish 400 maintainers
问题描述在使用 lerna publish 时, 出现如下错误，导致发包失败npm ERR! code E400npm ERR! 400 Bad Request - PUT http://registry.xxx.com.cn/xxx - maintainers error原因package.json 中缺少 maintainers 字段，需要将维护者用户名加入到该字段下解决方案 "maintainers": [ "xxx" ],...
2021-06-20 15:19:19
1087
1
原创 Vue did you register the component correctly? For recursive components,make sure to provide the name
问题截图组件嵌套App MyComponent ADifferentComponent MyComponent问题原因这里的问题是，MyComponent既是它自己的父组件，又是它自己的子组件。这将使Vue陷入一个循环，每个组件都依赖于另一个组件。解决方案 components:{ 'feed-item': ()=> import('./FeedItem.vue') }参考地址https://stackoverflow.com/question
2020-12-02 18:09:32
312
原创 JS 阻止浮层弹窗下滚动
1. 利用移动端的 touchmove 阻止默认行为 _preventEvent(e){ e.preventDefault(); } // 禁用 document.documentElement.addEventListener('touchmove', this._preventEvent, {passive: false}) // 解除禁用 document.documentElement.removeEventListener('touchmove', this._pre
2020-10-23 14:19:45
649
原创 【Jump】 js 控制页面的滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jump</title> <style> #box { background-color: pi
2020-10-22 11:38:44
1522
原创 三种主流的跨域解决方案（vue-cli3 package.json中配置跨域）
协议 - 域名 - 端口号 只要有一个不相同就是跨域，解决方案如下1. Http Proxy 代理在 vue-cli3 中取消了配置文件 vue.config.js，网上的跨域处理多为新建配置文件，对于有代码洁癖的我这样是不允许的，在读了一番文档后，结合网上的实现方案得到如下解决方案在 package.json 中加入 vue 字段（下面的代码段）如果请求的地址不是 /api，借助 pathRewrite 将 /api 替换我用的是 axios 进行网络请求，在封装 axios 时设置 base
2020-09-04 22:36:22
1452
3
原创 vue - symbol方式引入阿里巴巴字体库
官方链接找到想要使用的图标，添加入库添加到自己的项目（提前建好）进入项目5. 我的是vue项目，在 public - index.html 中添加复制的地址6. 在 App.vue 的 style 中写入样式.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}使用 并设置自己的样式
2020-08-22 22:47:39
662
1
原创 img标签加载错误403，浏览器地址栏能正常显示
描述在 img 标签加载其他网站的图片，一直返回错误 403解决这是比较常见的反盗链技术反盗链详情找到原因后我们就有解决方案了，在标签上添加 referrerpolicy="no-referrer<img src="xxx" alt="img" referrerpolicy="no-referrer">MDN...
2020-08-19 10:24:49
402
原创 JS 中的数据类型检测（含jquery源码es6实现）
数据类型检测typeof原理：直接在计算机底层基于类型的值（二进制）进行检测typeof null // objecttypeof /^1/ // objecttypeof new Date() // objecttypeof function(){} // function弊端：typeof 不能区别 普通对象/数组对象/正则对象/日期对象会错误的将 null 检测为 objectinstanceof原理： 检测当前实例是否属于这个类，只
2020-08-11 09:51:30
184
原创 关于数组/对象的遍历 for in for of
let arr = [3, 4, 5] let obj = { "a": "val_a", "b": "val_b", "c": "val_c" } for (let i in arr) { console.log(i); // 0 1 2 } for (let i of arr) { con...
2020-08-10 16:53:13
236
原创 前端中的二进制
ArrayBufferArrayBuffer：用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组，通常在其他语言中称为 byte arrayTypedArrayTypedArray ：它是一个指定特定元素类型（Int8Array）的统称，详情见 MDNlet buffer = new ArrayBuffer(8); // 8个字节的ArrayBufferconsole.log(buffer.byteLength); // 8字节const int8Array = new
2020-07-17 17:54:56
1542
1
原创 200行代码实现简易的 mvvm - vue
第一个知识点 - Object.defineProperty()说明： 直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。备注： 应当直接在 Object 构造器对象上调用此方法，而不是在任意一个 Object 类型的实例上调用。在这里我们需要了解 get 和 set 方法const data = {}let value = ''Object.defineProperty(this.data, "msg", { get(){ /
2020-07-17 16:04:40
281
原创 JS 中的 compose 函数 绘图分析函数执行过程
在函数式编程中，经常会出现多个函数组合，像这样： const add1 = (x) => x + 1 const mul3 = (x) => x * 3 const div2 = (x) => x / 2 add1(mul3(div2(add1(6)))) // 11.5这样虽然能够完成计算，但是可读性很差，所以我们需要构造一个函数完成上面的功能： function compose(...funcs) { if (funcs.le
2020-07-05 17:16:34
223
原创 canvas web 跟随鼠标绘制矩形框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>跟随鼠标绘制矩形框</title> <style> #canvas {
2020-06-30 15:30:08
2977
2
原创 js 手写 new、create 方法
let obj = {}let func = function() {}console.log('对象的 __proto__:', obj.__proto__);console.log('对象的 prototype', obj.prototype);// prototype 是函数所特有的属性console.log('函数的 __proto__:', func.__proto__);console.log('函数的 prototype:', func.prototype);functi
2020-06-26 15:33:10
614
原创 js 中 Array 常用方法原理
经常会忘记数组的方法，因此将常用的方法用js实现，通过实现原理来加深印象function deepCopy(target) { let result const type = typeof target if (type === 'object') { if (target === null) return target if (Array.isArray(target)) return target.map(item => deepCo.
2020-06-26 15:29:00
346
原创 TCP三次握手四次挥手总结
概念标志位ACK - 确认序号的标志，ACK=1表示确认号有效，ACK=0表示报文不含确认序号信息SYN - 连接请求序号标志，用于建立连接，SYN=1表示请求连接FIN - 结束标志，用于释放连接，为1表示关闭本方数据流序号 - 表示发送的数据字节流，确保TCP传输有序，对每个字节编号seq - x (123123123)ack - x+1 (123123124)三次握手第一次发送请求建立连接报文, SYN = 1，seq = x，等待服务端确认, 客户端进入 S
2020-06-24 10:35:27
187
原创 vue h5 video 多视频无缝切换
思路页面中创建两个 video 标签在组件加载时同时加载两个视频资源(autoplay)，暂时不播放的视频在 canplay 事件中调用暂停方法，使之实现预加载使用绝对定位将预加载的视频移出可视窗口第一个视频结束后，通过 ended 事件播放之前预加载的视频，同时将当前 src 切换为下一个需要播放的视频地址，完成缓存核心代码 <video ref="video" :class="{'video-hide':!playVideoTag}" autoplay @ended="onE
2020-06-17 20:23:13
5590
5
原创 vue router 路由跳转获取不到参数
问题：路由传参一直不能获取到参数, 未出现报错原因：混淆 query 和 params 的使用方法, 在使用 params 传参时错误的使用了 path 方法代码：错误写法 ... this.$router.push({ path: '/HealthDetectionChildNav', params: { title: item['name'], actionList: item['actionList'] }
2020-06-13 14:29:26
5173
5
原创 python安装nltk遇到的坑
错误描述错误1 ERROR: Command errored out with exit status 1: command: 'c:\users\administrator\appdata\local\programs\python\python35\python.exe' -u -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\pip-inst
2020-05-14 12:58:54
2095
原创 弹性布局 - Flex（Flexible Box）
弹性布局 - Flex（Flexible Box）1.原理给父盒子指定 display:flex 控制子盒子的位置和排列方式2.父项属性flex-direction：设置主轴的方向row ：x轴正方向（默认）row-reverse：x轴负方向column：y轴正方向column-reverse：y轴负方向justify-content：设置主轴上的子元素的排列方式（使用时...
2020-05-07 23:33:16
212
原创 JS性能优化之减少回流重绘次数
1. 重绘 - Repaint当render tree中的一部分元素的样式改变（宽高、大小、位置等不变）导致页面重建如：color backgroundColor visibility…每个页面至少需要一次回流，就是在页面第一次加载的时候2. 回流 - Reflow元素的大小或者位置发生了变化（当页面布局和几何信息发生变化的时候），触发了重新布局导致渲染树重新计算布局和渲染...
2020-05-01 10:45:25
670
原创 浏览器渲染原理
第1阶段 Request通过URL向服务器发送请求,web服务端返回html文本-代码字符串DNS解析TCP三次握手四次挥手HTTP/HTTPS/HTTP2第2阶段 Response拿到代码后，浏览器在内存中开辟一块栈内存，用来给代码提供执行环境；同时分配一个主线程去一行一行的执行代码第3阶段 执行代码执行方式取出一行代码，进栈执行 -> 执行完出栈当浏览器...
2020-04-27 22:30:58
134
原创 JavaScript高级程序设计（第三版）学习笔记第11章
DOM 扩展1. 选择符APISelectors API 使浏览器原生支持CSS查询querySelector // body元素 document.querySelector("body"); // 根据id document.querySelector("#content"); // 类名为bd的第一个元素 document.querySelector(".bd")...
2020-04-23 22:09:37
156
原创 JavaScript高级程序设计（第三版）学习笔记第10章
1. 节点层次节点关系操作节点- appendChild- insertBefore- replaceChild- removeChild- cloneNode(true) // 深克隆- cloneNode(false)
2020-04-23 21:00:23
141
原创 JavaScript高级程序设计（第三版）学习笔记8章
BOM(Browser Object Model)-浏览器对象模型1. window 对象window 对象扮演着 ECMAScript 中 Global对象的角色，因此全局声明的对象或者方法会变成 window对象的属性和方法窗口的可视区域大小 打开新窗口 window.open("http://www.baidu.com")定时器 // 超时调用 ...
2020-04-22 21:18:36
127
原创 javascript 闭包的理解
function fn(){ var y = 999; return function(){ console.log(y); // 999 return y; } } var f = fn(); f(); // 999ECStack Execution Context Sta...
2020-04-21 22:38:16
109
原创 JavaScript高级程序设计（第三版）学习笔记第7章
函数表达式1. 定义函数的方式 //函数声明 function functionName(){} // 函数表达式 var functionName = function(){}2. 递归3. 闭包闭包是指有权访问另一个函数作用域中的变量的函数定义一个变量声明变量（declare）创建值- 基本值 存在于栈中- 引用值 存在于堆中复制（d...
2020-04-21 21:50:39
162
原创 JavaScript高级程序设计（第三版）学习笔记第6章
面向对象的程序设计1.理解对象1.1 属性类型ECMAScript 中有两种属性：数据属性和访问器属性、1. 数据属性数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特性Configurable - 表示能否通过delete删除属性从而重新定义属性，能否修改属性的特征，或者能否把属性修改为访问器属性，默认值为trueEnumerable - ...
2020-04-19 21:37:50
172
原创 JavaScript高级程序设计（第三版）学习笔记5章
第5章 引用类型1. Obejct2. Array创建数组 var colors = new Array(3) // [,,] var colors = new Array("red") // ["red"] var colors = []数组的length属性不是只读的，可以通过这个属性向数组的末尾添加或删除项 var colors = ["red",...
2020-04-16 20:51:03
168
原创 JavaScript高级程序设计（第三版）学习笔记4章
第4章 作用域和内存1. 基本类型和引用类型基本类型：Undefined Null Boolean Number String引用类型：Object基本类型，可以对其进行赋值操作，而引用类型相当于是一个指针，可以添加方法、属性函数传参时基本类型会传递值，引用类型会传递指针，因此在函数内部修改引用类型的值其外部也会改变2. 没有块级作用域可以在函数外部访问到内部定义的变量的值...
2020-04-13 21:37:49
201
原创 JavaScript高级程序设计（第三版）学习笔记1-3章
第1章1. 简介JavaScript：专为网页交互设计的脚本语言，包含三部分ECMAScript - 提供核心语言功能欧洲计算机制造商协会（ECMA，European Computer Manufacturers Association）DOM - 文档对象模型，提供访问和操作网页内容的方法和接口BOM - 浏览器对象模型，提供与浏览器交互的方法和接口第2章1. <...
2020-04-11 19:11:10
179
原创 .eslintrc.js
module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, es6: true }, extends: ['plugin:vue/rec...
2019-12-03 18:38:48
296
原创 新建vue项目流程
安装全局脚手架 npm install vue-cli -g创建模板 vue init webpack APIShow对工程设置运行 cd APIShow npm run dev
2019-12-01 21:42:30
106
原创 c# winform vlcControl 播放视频列表
项目中用到vlcControl控件播放多个视频，但是该控件并没有这个特性，参考stackoverflow一位大佬代码。 // 首先构建一个视频路径的列表 List<string> playList = new List<string>(); string[] allFiles; allFiles = Directory.GetFiles(videoPat...
2019-11-26 20:22:50
2858
原创 call,apply,bind 用法及原理
改变js中函数内部的this指向示例： 使fn函数中的this指向obj对象注： apply 只能接收数组作为参数
2019-10-14 18:49:07
100
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人