
前端
文章平均质量分 62
js html css 等前端知识的学习和使用
「已注销」
这个作者很懒,什么都没留下…
展开
-
peer dependencies 学习记录
文章目录内容来自本篇仅用作学习笔记,大部分是谷歌翻译加上自己的理解。如有错误欢迎指出~内容来自What are peer dependencies in a Node module?Types of dependenciesPeer Dependencies原创 2021-10-11 12:48:58 · 1235 阅读 · 0 评论 -
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 · 1998 阅读 · 0 评论 -
一个正则导致浏览器页面卡死
参考正则表达式不要背JS正则表达式完整教程(略长)正则表达式是如何让你的网页卡住的问题描述使用正则校验文本框只能输入数字和英文逗号,但是加上正则页面就卡死了。把下面的内容复制到输入框:// 注意倒数第三行少了一个逗号1361561645243047937,1283568469996085249,1357502175307243521,1359626241765941249,1364219002896916481,136822608371922534510932103037原创 2021-04-27 18:12:33 · 2433 阅读 · 0 评论 -
从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 · 469 阅读 · 0 评论 -
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 · 688 阅读 · 1 评论 -
JavaScript 中的类
前言整理 JavaScript 中类(包括 ES5、ES6 及 TypeScript)的实现方法, 以及相关知识。原封不动地记录了我觉得比较重要的概念,明白了这些概念也就理解了 JavaScript 中类的实现方式。内容主要来自:JavaScript 高级程序设计(第3版)ES6 标准入门(第3版)MDN本文仅整理、记录、学习。理解对象属性的类型(属性描述符)ECMA-262 第 5 版在定义只有在内部才用的特性(attribute)时,描述了属性(property)的各种特征。E原创 2020-12-24 18:38:44 · 1253 阅读 · 2 评论 -
TCP 三次握手与四次挥手
三次握手1. 为什么要握手主要是为了建立连接(确认两台主机都具备收和发的能力)2. 为什么握三次如上图,三次握手实际上就是客户机A跟服务器B之前发了三条消息。A/B 需要确认对方具备收发能力才会进行通信,如果任何一方的收发存在问题通信都无法成功。第一次握手(让B知道A可以发出消息)SYN = 1,请求建立连接seq = n(249),发出一个序列号(例如:249...原创 2018-07-24 11:47:35 · 156 阅读 · 0 评论 -
时区转换,时间格式转换
基本概念UT - 世界时TAI - 国际原子时GMT - 格林尼治标准时间/格林威治平均时间UTC - 协调世界时LT - 本地时间这篇文章解释的都很详细 一些时间的概念与区分(UTC、GMT、LT、TAI等)我们一般认为GMT和UTC是一样的,都与英国伦敦的本地时相同。UTC或GMT与LT如下的换算关系:LT = UTC + 时区差;东区是加相应的时区差,西区是减时区...原创 2019-07-05 00:29:29 · 8969 阅读 · 0 评论 -
理解 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 · 433 阅读 · 1 评论 -
this 学习整理
参考:MDN本文只讨论在浏览器中的指向this在绝大多数情况下,函数的调用方式决定了 this 的值。this 不能在执行期间被赋值,并且在每次函数被调用时 this 的值也可能会不同。在严格模式和非严格模式之间也会有一些差别。全局环境无论是否在严格模式下,在全局执行环境中(在任何函数体外部)this 都指向全局对象。var a = 12;this.a; // 12t...原创 2019-05-20 16:01:26 · 240 阅读 · 0 评论 -
【JavaScript 中的相等性判断】学习笔记
JavaScript 中的相等性判断严格相等:不进行类型转换。满足以下条件的两个值全等值相等值类型相等当值类型为数值类型时:浮点数 0 是不分正负的,所以 +0 === -0 返回 true不是 NaN ,等式 (x !== x) 成立的唯一情况是 x 的值为 NaN宽松相等(非严格相等):执行类型转换比较两个值是否相等前,将两个被比较的值转换为相同类型。在转换后(等式...原创 2019-04-29 17:12:04 · 259 阅读 · 0 评论 -
前端字符串解析HTML
parse5 工具集parse5 - HTML解析器和序列化器注意:默认情况下,所有函数都使用默认树适配器生成的树格式。 可以通过提供自定义树适配器实现来更改树格式。方法:parse - 解析 HTML 字符串,返回一个 Document const parse5 = require('parse5'); const document = parse5.parse('&lt...原创 2019-01-23 20:18:41 · 5599 阅读 · 0 评论 -
谷歌放大图片插件效果
插件的效果是鼠标移到图片上图片放大,移开缩小。用 mouseover 和 mouseout 事件,因为要给网页上所有图片添加这种效果所以事件要加在 document 上:// 鼠标移上图片放大document.getElementsByTagName('body')[0].onmouseover = (e) => { if (e.target.nodeName.toUpperCa...原创 2018-11-06 15:19:33 · 1260 阅读 · 0 评论 -
前端检测版本更新
需求场景用户使用网站时如果有新版本发布会弹出询问是否更新到新版本。要求不依赖后台,纯前端实现。项目背景前端框架 Vue,构建工具 webpack。实现思路webpack 可以配置编译时在 js 文件名里添加 hash,我们要做的就是对比当前 js 的 hash 与新版本的 hash 是否一致,不一致则提示用户更新版本。添加个定时器每五分钟请求下网站首页地址,之后解析,之后对比。代码...原创 2018-11-01 20:01:16 · 5101 阅读 · 0 评论 -
export default / export const
export default 是默认导出export const 是命名导出参考:Javascript (ES6), export const vs export default(基本上就是翻译这篇)Default Export (export default)每个文件都可以有一个默认导出 export default,导入此类文件时需要指定一个任何你喜欢的名称。例如:import My...翻译 2018-10-26 11:30:27 · 10395 阅读 · 0 评论 -
enter(click) 与 blur冲突的解决办法
需求描述input 的 on-enter 和 on-blur 事件触发时保存文本,文本不能有重复。问题描述on-enter 触发之前会先触发 on-blur 导致执行两次保存操作,第二次也就是 on-enter 触发的时候会提示文本重复,保存不成功。解决办法设置一个全局变量 iSave: false,if(!iSave) 执行保存操作,下次触发编辑文本之前再将 iSave 重置为 fal...原创 2018-10-26 11:08:35 · 1409 阅读 · 0 评论 -
clientHeight / offsetHeight / scrollHeight / Window.innerHeight / Window.outerHeight
总是记不住这几个高度,记录一下Element.clientHeight只读单位像素四舍五入取整如果你需要一个浮点数值,请用 element.getBoundingClientRect()对于没有定义CSS或者内联布局盒子的元素为0(例如,<span>标签的clientHeight值为0,除非设置display: block变成块级元素)包含内边距(不包括水平滚动条、...原创 2018-09-18 19:25:34 · 1117 阅读 · 0 评论 -
px转vh/vw
需求:页面头部高度固定(60px),剩下的内容整体高度占满可视区的高度,并且可以随着浏览器窗口大小调整而变化。解决:首先想到的vh,100vh的高度刚好可以撑开整个可视区的高度。由于头部有高度剩下的内容整体高度就不能是100vh,而是100vh-60px,这就涉及到两个单位之间的转换。可视区高度:window.innerHeight + ‘px’ = 100vh1px = 100 / w...原创 2018-09-18 18:10:42 · 8514 阅读 · 0 评论 -
base64和file互转
以图片文件为例:应用场景工作中经常遇到需要把图片文件操作之后再上传到服务器(比如,拼接、裁剪、生成预览等),通常操作之后的图片都会变成一个 base64 的字符串,把这个字符串嵌入到 img 标签的 src 属性中就能看到图片了。正常来说也是可以把这个字符串传给服务器存储的,但是图片生成base64字符串后特别特别的长,这样存取的话非常慢。所以我们需要把它转回成文件对象再传给服...原创 2018-08-25 15:51:17 · 23950 阅读 · 1 评论 -
深拷贝
function deepClone(origin, target) { var target = target || {}; var toStr = Object.prototype.toString; var arrStr = '[object Array]'; for(var prop in origin) { if(origin.hasOw...原创 2018-08-25 15:58:01 · 183 阅读 · 0 评论 -
防抖 & 节流
在前端开发中,有一部分的用户行为会频繁地触发事件执行,从而对DOM操作,资源加载等耗费性能的处理很可能导致页面卡顿甚至浏览器崩溃。函数节流(throttle)和函数防抖(debounce)就是为了解决类似需求应运而生的。 节流:预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。场景:窗口调整(resize)页面滚动(scroll)抢购疯狂点击(m...原创 2018-07-24 20:09:00 · 303 阅读 · 0 评论 -
事件委托(事件代理)
事件委托:(也叫事件代理)就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。直接看代码HTML :<ul> <li class="item">item 1</li&gt原创 2018-07-19 19:00:38 · 243 阅读 · 0 评论 -
立即执行函数
概念:立即执行函数没有函数声明,在一次执行过后即释放,适合做初始化工作。形式:(function() { // code}());由来:据说立即执行函数并不是标准里专门定义的有这样一个语法来写这样一个函数,而是程序员们根据需求自己鼓捣出来的。理解立即执行函数之前先要了解两个概念: 1. 只有表达式才能被执行符号( ‘()’ )执行; 2. 能被执行符号执...原创 2018-06-23 18:09:04 · 372 阅读 · 0 评论 -
JavaScript 闭包
这篇算接上一篇:【JavaScript 预编译:函数声明提升,变量声明提升】这两篇都是因为看了这个视频,觉得讲的挺清楚的就记录下来了说闭包之前我们先介绍几个概念:1. 执行期上下文当函数执行时(实际上是函数执行前一刻)会创建一个称为执行期上下文的对象(就是上一篇介绍的 Activation Object),一个执行期上下文定义了一个函数执行期间的环境。当函数执行完毕,它所产生...原创 2018-06-23 17:31:29 · 199 阅读 · 0 评论 -
JavaScript 预编译:函数声明提升,变量声明提升
我们都知道 js 中函数声明会提升,变量声明会提升(赋值不提升)。那为什么会这样呢,这就涉及到 js 预编译。js 运行三部曲语法解析——检查有无语法错误;预编译;解释运行——将 js 翻译成计算机识别的语言(0 和 1组成的),翻译一行执行一行。预编译什么时候发生预编译不仅发生在函数体内,还发生在全局;预编译发生在函数或代码执行前一刻。说预编译之前有亮点需要...原创 2018-06-21 20:45:17 · 1133 阅读 · 2 评论 -
在一个 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 · 2981 阅读 · 0 评论 -
less reference
reference 原文本文采用采用意译而非直译, 大部分还参考了谷歌翻译, 如有错误欢迎指出更正.参考: [less/sass]如何避免因公共模块导致生成重复css代码使用 @import (reference) 引用外部的 less 文件, 除了被用到的文件样式其他部分不会被编译到目标文件.v1.5.0 版发布使用方法: @import (reference) "foo.less"...翻译 2019-08-30 14:27:22 · 876 阅读 · 0 评论