- 博客(71)
- 收藏
- 关注
RSS订阅原创 peer dependencies 学习记录
文章目录内容来自本篇仅用作学习笔记，大部分是谷歌翻译加上自己的理解。如有错误欢迎指出～内容来自What are peer dependencies in a Node module?Types of dependenciesPeer Dependencies
2021-10-11 12:48:58
939
原创 navigator.mediadevices.enumeratedevices is not a function，本地 https 证书
文章目录问题描述解决办法1. 使用 mkcert 生成本地证书2. 找到 browser-sync 包的位置，替换 certs 文件夹下文件，如下3. 使用 https 启动问题描述需要其他电脑上调试本地项目。我是在开发电脑上启动本地项目，使用 browser-sync 代理，让其他电脑通过 IP 访问，例如：http://x.x.x.x:3001 。这样是可以在其他电脑上访问到我的本地项目，可是报错 navigator.mediadevices.enumeratedevices is not a
2021-07-26 13:49:49
1653
原创 一个正则导致浏览器页面卡死
参考正则表达式不要背JS正则表达式完整教程（略长）正则表达式是如何让你的网页卡住的问题描述使用正则校验文本框只能输入数字和英文逗号，但是加上正则页面就卡死了。把下面的内容复制到输入框：// 注意倒数第三行少了一个逗号1361561645243047937,1283568469996085249,1357502175307243521,1359626241765941249,1364219002896916481,136822608371922534510932103037
2021-04-27 18:12:33
2271
原创 从JavaScript内存回收看为什么闭包可以实现私有变量
文章目录回顾闭包词法作用域（静态作用域）和动态作用域垃圾回收 ♻️现在再来看为什么使用闭包可以定义私有变量回顾闭包关于闭包这篇详细写过：JavaScript 闭包先来看个闭包的 ????function f1() { var n = 0; // n是f1函数的局部变量 function f2() { // f2是f1函数的内部函数，是闭包 n += 1; // 内部函数f2中使用了外部函数f1中的变量n console.log(n);
2021-04-23 13:47:36
389
原创 NGINX 500 Internal Server Error
问题描述前端调一个 post 接口返回 nginx 重定向的 500.html，并且 后端没有收到请求。参数很大时才会出现这个情况，参数小时接口可以调用成功。问题排查第一步看浏览器的 Network 可以看到接口返回 500 并且返回内容是 nginx 重定向的 500.html。第二步查看 模块日志 没有打印任何信息。查看 nginx 日志看到 500 Internal Server Error，打开 debug 模式看到：# ...close http upstream connect
2021-04-12 14:50:54
927
原创 前端转后端学习路线整理
文章目录背景流程梳理前端后端ORM 是干什么的？学习路线解释路线特别建议背景本人是一名 Web 前端开发，技术栈是 Vue 和 React，不会 Node。之前学过，但是因为一些原因（比如没有使用场景，很多概念无法理解，学完就忘等）一直也没有掌握。因为在 CMS 部门耳濡目染时间久了，感觉不学点后端有点说不过去，而且学起来之后发现也挺有兴趣的。但是对于一名前端开发来说要学习的内容实在太多了，开始的困难在于理清各种技术都是干什么的以及它们之间的关系。现在刚刚有点眉目故记录一下，权当给需要的同学一些建议。
2021-04-12 12:03:24
5801
3
原创 ES6 中的类
ES6ES6 引入了 Class（类）这个概念作为对象的模版。通过 class 关键字可以定义类。基本上，ES6 中的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰，更像面向对象编程的语法而已。class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ',' + this.
2021-01-02 19:15:42
584
1
原创 JavaScript 中的类
前言整理 JavaScript 中类（包括 ES5、ES6 及 TypeScript）的实现方法， 以及相关知识。原封不动地记录了我觉得比较重要的概念，明白了这些概念也就理解了 JavaScript 中类的实现方式。内容主要来自：JavaScript 高级程序设计（第3版）ES6 标准入门（第3版）MDN本文仅整理、记录、学习。理解对象属性的类型（属性描述符）ECMA-262 第 5 版在定义只有在内部才用的特性（attribute）时，描述了属性（property）的各种特征。E
2020-12-24 18:38:44
1142
2
原创 记 Vue 数据更新视图不同步的问题
问题描述：控制台打印出数组/对象数据已经修改成功，但是页面上并没有同步更新。解决方法：搜索引擎搜一下可以看到有好多答案了，总结有以下两点：数组：使用数组更新检测方法push()pop()shift()unshift()splice()sort()reverse()对象：Vue.set( target, propertyName/index, value )向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用
2020-10-28 15:09:29
1865
原创 记一个前端请求 egg.js 接口 404 的问题
背景学习用 egg.js 写接口，前端项目请求该接口。Postman 测试接口是通的前端跨域问题，可以通过配置代理解决devServer: { proxy: { '/api': { target: 'http://127.0.0.1:7001', pathRewrite: { '^/api': '' }, changeOrigin: true, secure: false, }, }, },解决跨域问题之
2020-08-27 15:20:45
2530
原创 vue 中使用 worker-loader 及遇到的问题
Web Worker 使用教程Worker - Web API 接口参考 | MDN版本Vue CLI 3webpack 4worker-loader 3vue-cli3 中依赖的 webpack 版本是 "webpack": "^4.0.0"，而 "worker-loader": "^3.0.0" 要求的 webpack 版本是 4 | 5。使用前要检查下各个依赖对应版本，不然会引发一些错误。不同版本配置文件会有所不同，后面介绍。使用参考：vue中使用web workerwebp
2020-08-05 19:05:09
15876
3
原创 终于搞懂了vue 的 render 函数（二）(๑•̀ㅂ•́)و✧
文章目录先来了解下 vm.$scopedSlots深入数据对象JSX注：本文代码都是在单文件组件中编写。代码地址先来了解下 vm.$scopedSlotsvm.$scopedSlots用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。注意： 从 2.6.0 开始，这个 property 有两个变化：作用域插槽函数现在保证返回一个 VNode 数组，除非在返回值无效的情况下返回 undefined。所有的 $slots 现在都会
2020-07-07 20:24:24
12922
2
原创 记一个关于“core-js/modules/es6.xxx.xxx”的报错
项目框架iView 其他的框架原理也是一样的问题描述gitLab 发测试构建失败（机器上构建失败，本地可以构建成功）错误信息[email protected] alpha /data/app/backstagevue-cli-service build --mode alpha[91m- Building for alpha...[0m ERROR Failed to ...
2020-04-15 18:29:54
3962
原创 nvm 设置默认 node 版本失败
问题描述使用命令设置 node 版本默认版本号无效：nvm alias default v10.3.0问题原因全局安装了 v8.11.3 版本，所以设置默认版本不成功，只能每次 nvm use v10.3.0 来切换解决办法删除全局安装的 node，使用 nvm 来安装管理 node 版本。参考：使用 nvm 管理不同版本的 node 与 npm...
2019-11-22 15:36:47
2185
原创 在一个 less 文件中引用另一个 less 文件
less-loaderwebpack provides an advanced mechanism to resolve files. The less-loader applies a Less plugin that passes all queries to the webpack resolver. Thus you can import your Less modules from ...
2019-11-22 15:27:47
2855
翻译 是否可以使用箭头函数编写 react 生命周期组件?
是否可以使用箭头函数编写 react 生命周期组件?内容来自 #10810, 本文只提供翻译而且是基于谷歌翻译的意译. 如有错误欢迎指正.例如:class MyComponent extends React.Component{ render() {}}class MyComponent extends React.Component{ render = () => ...
2019-09-17 15:03:02
659
翻译 less reference
reference 原文本文采用采用意译而非直译, 大部分还参考了谷歌翻译, 如有错误欢迎指出更正.参考: [less/sass]如何避免因公共模块导致生成重复css代码使用 @import (reference) 引用外部的 less 文件, 除了被用到的文件样式其他部分不会被编译到目标文件.v1.5.0 版发布使用方法: @import (reference) "foo.less"...
2019-08-30 14:27:22
801
原创 vue 使用 eslint 报错 [vue/no-parsing-error] Parsing error: x-invalid-end-tag.
项目环境及编辑器项目框架：vue iview编辑器：vscode错误提示见下图：[vue/no-parsing-error] Parsing error: x-invalid-end-tag.原因Col components are wrong in eslint-plugin-vue解决办法以下三种办法都能搜出来，这里做个总结以及记录遇到的问题：作者给出的办法关闭...
2019-07-19 12:00:00
46035
原创 时区转换，时间格式转换
基本概念UT - 世界时TAI - 国际原子时GMT - 格林尼治标准时间/格林威治平均时间UTC - 协调世界时LT - 本地时间这篇文章解释的都很详细 一些时间的概念与区分(UTC、GMT、LT、TAI等)我们一般认为GMT和UTC是一样的，都与英国伦敦的本地时相同。UTC或GMT与LT如下的换算关系：LT = UTC + 时区差；东区是加相应的时区差，西区是减时区...
2019-07-05 00:29:29
8553
原创 记一个被门夹过的智商 —— antd Table 设置 fixed 行对不齐
问题描述如题，antd Table 组件设置了 fixed 行对不齐。问题解决给 Action 按钮的父节点（不是td）加跟 Image 一样的高度，即 action。
2019-06-26 20:02:13
6616
2
原创 记一个 antd DatePicker 语言问题
问题描述想要设置组件为英文，代码如下：import locale from 'antd/lib/date-picker/locale/en_US';...省略其他代码...<RangePicker { ...{ locale } }/>但是并没有得到想要的效果，由下图中 6月 2019 可以看到应该是已经修改为英文顺序了，但是组件中的字还是中文的。...
2019-06-26 17:22:44
3375
原创 使用 Chrome://inspect 调试 Android 和 IOS 上的浏览器页面
这一篇是调试两种设备上的浏览器页面（不是应用中的 Webview），等我研究明白了怎么调试应用中的 Webview 会再写一篇。Android参考：使用Chrome://inspect调试 Android 设备上Webview注意：调试安卓设备的浏览器页面很简单，按照参考文章操作没有遇到什么问题。可以调试安卓自带浏览器和Chrome。IOS参考：使用 ios-webkit-d...
2019-05-28 19:13:24
16975
原创 理解 call, apply, bind 的用法
callcall() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。function list() { return Array.prototype.slice.call(arguments, 0, 1);}list(1, 2, 3, 4, 5); // [1]我们经常能看到以上代码 Array.prototype.slice.call(argumen...
2019-05-20 17:07:22
380
1
原创 this 学习整理
参考：MDN本文只讨论在浏览器中的指向this在绝大多数情况下，函数的调用方式决定了 this 的值。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。在严格模式和非严格模式之间也会有一些差别。全局环境无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。var a = 12;this.a; // 12t...
2019-05-20 16:01:26
182
原创 iView Input 输入框表单非空校验，默认值是 Number 类型校验失败
问题描述iView 按照 Form 组件文档用法写非空校验，当表单数据有默认值并且默认值类型为 Number校验失败，手动输入可以校验成功。问题原因官方已经给出回答，校验规则默认是 string。而手动输入的时候 Input 组件会把输入内容转为字符串。#4817解决办法默认值设置为字符串类型，或者用自定义校验。...
2019-05-20 14:35:20
5091
原创 记一个 FormData 多文件上传问题
问题描述：直接给 FormData append 一个数组的话会变成一个字符串，这样后台拿不到文件信息，如下：const fd = new FormData();fd.append('files', this.fileList);console.log(fd.getAll('files'));解决办法：const fd = new FormData();this.fileList...
2019-05-14 16:21:32
5679
4
原创 记一个 forEach 不能跳出循环引发的问题
问题描述：做一个可以移动组件顺序（上下）的功能，向上移动没问题，向下移动的时候即使想移动一个位置组件也会跑到最下方。经排查发现是 break 无法跳出 forEach 循环，导致循环一直继续。解决办法：JavaScript中forEach循环数组时，如何中途跳出循环？JS-为什么forEach无法跳出循环...
2019-05-14 16:20:32
398
原创 记一个事件太多的性能优化问题
项目背景：用 iView-admin 做一个组件列表，点击组件弹出组件配置并且可以编辑。问题描述：加了图片库之后，从点击组件到弹出组件配置项用时比没加之前明显感觉长了很多。路由切换也变慢了。用 vue-devtool 查看之后发现每次操作 Events 都增加十几个到几十个，事件很快增到千级。我把图片库写成一个修改图片组件，其他组件的配置项里也会引用这个组件，有的组件修改的图片有十个，那...
2019-05-14 16:19:30
189
原创 slot 插槽笔记（与文档基本没差别，仅作学习记录）
文档地址githubVue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。例子（Vue 2.6.0 以上语法）1. 插槽内容子组件 <navigation-link><a v-bind:href="url" class="n...
2019-05-14 16:16:46
371
原创 【JavaScript 中的相等性判断】学习笔记
JavaScript 中的相等性判断严格相等：不进行类型转换。满足以下条件的两个值全等值相等值类型相等当值类型为数值类型时：浮点数 0 是不分正负的，所以 +0 === -0 返回 true不是 NaN ，等式 (x !== x) 成立的唯一情况是 x 的值为 NaN宽松相等（非严格相等）：执行类型转换比较两个值是否相等前，将两个被比较的值转换为相同类型。在转换后（等式...
2019-04-29 17:12:04
207
原创 前端字符串解析HTML
parse5 工具集parse5 - HTML解析器和序列化器注意：默认情况下，所有函数都使用默认树适配器生成的树格式。 可以通过提供自定义树适配器实现来更改树格式。方法：parse - 解析 HTML 字符串，返回一个 Document const parse5 = require('parse5'); const document = parse5.parse('&amp;amp;lt...
2019-01-23 20:18:41
5357
原创 Vue 指令 —— v-cloak
官网用法这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。官网示例CSS:[v-cloak] { display: none;}HTML:<div v-cloak> {{ message }}</div>...
2019-01-18 11:35:57
869
原创 iview Form 组件阻止回车提交表单
问题描述当 form 中只有个 input 时回车会自动提交表单。解决办法第一种是在 Input 上加 @keydown.native.enter.prevent =&quot;handleEnter&quot;第二种是在 Form 上加 @submit.native.prevent...
2018-12-28 16:08:56
3120
原创 Unexpected character '#'
记两个编译报错（项目环境：vue-cli3）我在项目中引入了一个可以把 psd 文件转成 json 的库 psd.js，然后就报了下面这两个错误第一个：1. 报错信息Module parse failed: Unexpected character '#' (1:0)You may need an appropriate loader to handle this file type....
2018-12-17 20:33:53
15159
原创 Python 3 学习（三）—— 高级特性
文章目录Python教程切片迭代列表生成式生成器迭代器Python教程廖雪峰 Python 教程切片切片（Slice）操作符：用于取一个list或tuple指定索引范围的操作。&amp;gt;&amp;gt;&amp;gt; L = ['Michael', 'Sarah', 'Tracy', 'Bob', 'Jack']&amp;gt;&amp;gt;&amp;gt; L[0:3]['Michael
2018-12-09 18:29:27
135
原创 Python 3 学习（一）—— 基础：廖雪峰 Python 教程学习笔记
文章目录值类型和引用类型列表和字典的基本操作列表（例如：classmates=['Michael', 'Bob', 'Tracy']）字典（例如：d = {'Michael': 95, 'Bob': 75, 'Tracy': 85}）值类型和引用类型数据类型整数浮点数字符串布尔值（True/False）（and/or/not）空值（None）list/tupledict/set...
2018-12-07 13:50:11
476
原创 Python 3 学习（二）—— 常用内置函数（网上收集整理）
文章目录数学运算类型转换序列操作函数操作数学运算abs(x) 返回一个数的绝对值。实参可以是整数或浮点数。如果实参是一个复数，返回它的模。divmod(a, b) 它将两个（非复数）数字作为实参，并在执行整数除法时返回一对商和余数。对于混合操作数类型，适用双目算术运算符的规则。对于整数，结果和 (a // b, a % b) 一致。对于浮点数，结果是 (q, a % b) ，q 通常...
2018-12-06 20:49:52
260
1
原创 谷歌放大图片插件效果
插件的效果是鼠标移到图片上图片放大，移开缩小。用 mouseover 和 mouseout 事件，因为要给网页上所有图片添加这种效果所以事件要加在 document 上：// 鼠标移上图片放大document.getElementsByTagName('body')[0].onmouseover = (e) => { if (e.target.nodeName.toUpperCa...
2018-11-06 15:19:33
997
原创 记一个关于 Select 的小 bug：Select 的 on-change 事件会自动触发
iView Select 框在页面加载的时候会弹出还没有触发的方法里面的错误信息，如下：代码：<Select v-model="form.id" filterable clearable @on-change="selectAccount"> <Option v-for="account in accountsList" :value="account.id" :key=...
2018-11-02 22:12:36
4450
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人