前言对于js的原型链继承，大部分都是知道的，但是对于以下内容，很多人可能并不清楚或者理解不完整，那就是屏蔽属性。什么是屏蔽属性，其实这个功能来源于面向对象语言中的多态，表示父级定义的属性，在子级可以自己扩展，虽然属性名相同，但是功能却可以不同。由于js的继承，它不像强类型语言是完全的复制，js对于继承是通过原型链的方式，当子级没有的情况下会通过在原型链上查找。那么子级如果需要覆写某一个属性，显然它是绝对不能直接修改原型链上的内容，这回导致所有继承的子类产生问题，这显然是不合适的。于是就有了屏蔽属性，当子级去覆写一个原型上存在的属性时，其实并不会去修改原型链的属性，而是给子级自己添加一个对...
看了下vant的tab组件源码，当开启swipeable功能后，其实会对容器监听touch事件，这就导致我们在内容部分存在横向的滚动的时候，会导致同时触发touch事件，从而产生了冲突。解决办法就是二选一，要不在这个横向scroll的时候不触发swipeable，要不放弃swipeable。如果是第一种方案，我们需要对存在横向scroll的容器元素，做一个事件冒泡阻断，问题就解决了。<div @touchstart.stop @touchmove.stop @touchend.stop> scroll的div </div>
服务器返的时间是一个utc的时间字符串2022-12-01 03:00:30，我们需要将其转为我们本地时区，以东八区为准，正确的时间应该是2022-12-01 11:00:30。我当时这么写的：moment(new Date(time)).local();其实这是有问题的，首先我其实是为了防止time这个变量错误，所以使用了new Date，但其实是不对的，new Date会导致时间被转为本地时间且不会加上本地时区的8个小时。new Date("2022-12-01 03:00:30"); //Thu Dec 01 2022 03:00:30 GMT+0800 (中...
规则概览0级通配选择器、选择符、逻辑组合伪类通配选择器：* {}选择符：+、>、~、空格、||逻辑组合伪类：:not() {} :is() {} :where() {} :has() {}1级标签选择器body {}2级类名选择器、属性选择器、伪类类名选择器：.foo {}属性选择器：[foo] {}伪类：:hover {} :active {} :focus {} :focus-within {} :focus-visible {} :link {} :visited {} :any-link {} :target {} :target-within {}...
for...in循环可以用来遍历对象的可枚举属性列表，但是如果遍历对象的值呢？以数组为例，我们最基础的方式就是for循环：var myArray = [1, 2, 3]; for (var i = 0; i < myArray.length; i++) { console.log(myArray[i]); } // 1 2 3事实上这种并不是真的遍历值，而是在遍历下标来获取到对应的值。ES5新增了一些数组的遍历方法，比如：forEach(..)、every(..) 和 some(..)；每种方法都可以接受一个回调函数并将其应用到数组每个元素上，，唯一的区别就是它们对于回...
简介在 ES5 之前，JavaScript 语言本身并没有提供可以直接检测属性特性的方法，比如判断属性是否是只读。但是从 ES5 开始，所有的属性都具备了属性描述符。var myObject = { a: 2 }; Object.getOwnPropertyDescriptor(myObject, "a"); // { // value: 2, // writable: true, // enumerable: true, // configurable: true // }输出的这个对象被称为属性描述符，我们可以通过Object.definePropert...
防抖防抖在日常项目开发的时候还是很重要的，用于防止函数的重复触发，节省性能开支。比如监听用户的input输入进行api查询，由于input事件每次改变输入的内容都会触发，但是一般来说，只有最后一次input才有效，所以会经常采用防抖的形式来触发。防抖：在一定时间内重复触发之后只会生效最后一次。如何写一个防抖呢，我们慢慢来< script > "use strict" const input = document.querySelector("input"); input.addEventListener("input&quo...
this绑定的规则从执行上下文中我们可以知道，函数在运行时会生成函数执行上下文，在这个里面存在着this，而this绑定谁，则由规则去定义。一共有四条规则，我们按从小到大一一讲解。默认绑定规则当其它三条规则不满足时，则使用默认绑定规则，在非严格模式下，this会被指向全局对象，也就是window，但是再严格模式下，会被指向undefined。function a() { console.log(this); //window } a();function a() { "use strict"; console.log(this); //und...
什么是执行上下文JavaScript引擎在执行代码阶段时，通常是调用函数的时候，就会先做一些准备工作，这个准备工作被称为执行上下文，简称EC，或者也可以叫做执行环境。执行上下文也是有不同的，有三个类型：全局执行上下文：最基础的执行上下文，一个程序也只会存在一个全局执行上下文，全局上下文会生成一个全局对象，这个对象就是window，并且会将该上下文的中this绑定到该全局对象上。函数执行上下文：当函数被调用时都是产生一个新的上下文对象，不管函数是否是重复调用Eval函数执行上下文：执行在 eval 函数内部的代码也会有它属于自己的执行上下文而this是由上下文中提供的，我们可以将上下文理解...
为什么会有thisthis在JavaScript中是一个非常复制的机制，它的存在其实是为了能让我们更好的复用代码，this提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将API设计的更加简洁且易于复用。我们举个例子：new一个构造函数，我们可以得到一个新的实例对象，这个对象会继承原型，此时，如果没有this，如何在原型方法里去访问你的新的实例对象，以及获取属性这些操作。显然是不太好做的，难道每次都把自身作为参数传递给prototype上的方法吗？显然这非常不方便，如果使用了this，this会指向这个新的实例对象，那么我们在书写代码是就会更加方便了，复用也更加简单。这个thi...
随着ES6的let和const的声明，我们终于可以创建完整，不受约束的块作用域，但是这个功能终究是新的功能，老设备怎么办呢，它不支持啊！所以我们现在都是使用新的语法，再打垫片（polyfill）去支持新旧设备。那么块级作用域怎么实现旧设备也能用呢？以这段为例：{ let a = 2; console.log(a); // 2 } console.log(a); // ReferenceError分析之前说过的，with和catch，你会发现只能通过使用catch的方式实现这个功能。try { throw 2; } catch (a) { console....
前言到现在为止，我们应该知道作用域是做啥的了，以及词法作用域模式中，根据代码声明的位置和方式分配作用域的相关原理，。函数作用域和块作用域的行为是一样的，可以总结为：任何声明在某个作用域内的变量，都将附属于这个作用域。但是作用域中的变量标识符和其声明的位置却有一些微妙的联系。编译a = 2; var a; console.log(a);这段代码，其实会输出2；至于为什么，我们可以从编译的角度去理解。我们知道，JavaScript在运行之前会进行一次编译，其中就有词法分析，并将词法与对应的作用域进行关联，于是会将声明先提取出去，于是乎上述的var a;会被先取走并丢入作用域中去。当代码编译完...
前言函数作用域和块作用域，并不是高出词法作用域的一种东西，可以将其理解为词法作用域的一些单元，如果词法作用域是房子，函数作用域和块作用域就是房间。函数作用域每个函数都会为其自身创建一个新的局部环境（函数作用域），属于这个函数的全部变量（函数内声明的），都只能在该环境范围内使用，当然也包括作用域嵌套。function foo(a) { var b = 2; // 一些代码 function bar() { // ... } // 更多的代码 var c = 3; } bar(); // ReferenceError 上述代码中，ba...
什么是词法作用域在上文中我们说道作用域的概念，这套规则是用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。而作用域共有两种工作模型：词法作用域动态作用域词法作用域是被普遍使用的一种工作模式，也是JavaScript所使用的，而动态作用域也是有语言在使用的，比如：Bash脚本，perl。词法作用域称之为静态作用域，这个也是由他的实际原理所提现的，具体我们往下看。词法阶段在JavaScript编译时，第一个阶段就是词法分析； 简单来说，词法作用域就是定义在词法分析阶段的作用域，换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处...
什么是作用域几乎是所有编程语言的最基本的功能之一，就是能够存储变量的值，并且后续能够对这个值进行访问和修改，这种能力被称之为状态。如果没有状态这个概念，程序的使用会受到很大的限制，虽然没有状态也能执行一些简单的任务。变量的引入会有几个有意思的问题：变量存储在哪里？程序如果找到它们？解决这些问题的方式就是设计一套良好的规则来存储变量，并且之后也可以很方便的找到这些变量，这套规则被称之为作用域。编译原理JavaScript在运行的时候，如何创建一个变量，如何获取一个变量的值，都是通过作用域来实现的，可以将作用域理解为一个工具，往里面存东西，从里面拿东西等一系列操作。js的完整运行有三个模块：...
根据element框架的el-scrollbar来实现的，根据官方源码自己写了一版，用于了解该功能的实现。要点：通过margin的负值以及不定宽高的父级元素verflow: hidden实现隐藏滚动条真实的滚动条被隐藏后实现一个自己的滚动条（点击滚动滑轨滚动和拖拽滑块滚动）实现一个div的resize事件监听来动态更新虚拟滚动条的大小其中最难的就是拖拽滑块滚动，那个算法真的看不懂，反正照抄了，由于不是很有时间研究，所以没有对移动端的touch事件进行兼容。参考文章： Element-ui el-scrollbar 源码解析本人仓库：CustomScrollBar效果展示：总结：个人的实现...
默认情况vue的build打包，都是基于根路径来进行的，但是，如果我们将打包的文件放置再二级目录，就会导致文件无法加载，页面空白。原因有两个：路由路径无法正确匹配资源文件路径错误下面我们就来讲讲做法路由配置在路由实例的创建时，我们常常会看到一个base选项，内容如下：const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })base官方有很明确是解释：类型: string 默认值: "/"应用的基路径。例如，如果整个单页应用服...
前言以前写过一篇《目前前端下载文件的最佳实践》的文章，虽然这个文章是我经过工作实践得出得，但是直到今天我才发现，原来不止如此，根据我目前的知识，可以把文件下载分为两类：接口返回文件流文件下载地址之前分析的文章仔细一想，其实都在做一个事情：读取文件流再手动转文件进行本地下载首先我们需要知道，我们的a链接下载其实并没有问题，本来是不需要读取文件流的，但是后端对头信息的了解不多，导致下载文件的链接是一个预览的头信息，这就导致我们a链接无法直接通过点击直接下载，反而是直接打开了这个文件。这带来的结果就是我们会认为图片啊，pdf这些浏览器可以直接打开的文件，并不会触发下载，而是预览，因为我们很少去...
前言最近国庆了，由于主要计划被迫放弃，所以只能走点次要计划，就是将个人全栈开发的书签系统移动到其它服务器上，主要还是因为财力问题，无法供给多台服务器，腾讯云也没有什么好活动，全是老用户与狗不得参与系列。无奈的搬运，其中最简单的是项目打包带走，数据库的还原，站点的配置，其中我就遇到了个贼奇葩的问题，就是我的头信息总是获取不到。一开始我是以为是我的反代服务的问题，因为是nodejs的后端服务，如果想要通过域名访问api就不得不通过反代的方式来使用。反代是将a的请求接受后自己再发给真实服务，然后将真实服务的返回再返回给a，其中我们知道一个xhr请求是有很多参数的，其中header头信息也是一种...
踩坑指南虽然howler.js说他可以自动感知然后自动播放，事实上没什么软用，所以我们还需要自己去配置一下触发器。监听一个全局的click事件之类的。虽然howler.js说可以自动降级到h5播放，但是实际测试无法在安卓4.4中进行播放，但是个人测试，如果你使用一个audio元素，是可以播放的，但是这样就需要自己去手动封装一个基于audio元素的播放管理，项目赶的很，实在没有多余的时间去研究这个，特别是音效的播放，还是专业的库处理比较好，所以暂时对于安卓4.4的兼容是没法做到的。官方对于这个问题也是很模糊，找不到解决办法。howler.js在文档中找了半天，也没看到官方提供动态替换资源的...
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
最近评论