性能测试如果被问到如何测试某个运算的速度，绝多数JavaScript开发者都会使用类似下面的代码：var start = (new Date()).getTime(); // ईኁDate.now() //需要测试的代码 var end = (new Date()).getTime(); console.log("用时:", (end - start));相信大部分人都是这么想的吧！但是这种方案有很多错误，这里我们能知道的只有这次运算消耗了大概这么长的时间。而它是否总是以这样的速度运行，我们基本上一无所知，你不知道JavaScript引擎这个时候有没有受到什么影响...
简介Promise的出现，我们可以将回调进行反客为主，不在受回调调用者的限制（控制反转和信任问题），但是它并没有解决异步编程导致的代码顺序问题，有没有一种方式，可以让我们的代码虽然是异步的，但是书写顺序却是同步的，这样完全符合我们人类大脑理解方式？console.log("同步的1"); axios({ ... }).then(() => { console.log("异步的回调，如果需要等待结果处理，代码只能写在这个回调里") }); console.log("同步的2")很明显，如果我们希望"同步...
上下文规则大括号常见的大括号使用就是对象常量定义var a = { foo: bar() };但是还有一种不是很常用的方式，就是标签{ foo: bar() }很多人以为这种写法是一种对象常量，只是没有赋值给变量，但是事实并不是这样。{ ... }在这里只是一个普通的代码块。从语法上说这段代码是完全合法的，这里涉及到JavaScript中一个不太为人知的特性：标签语句；foo是bar()的标签，这种标签一般用来配合continue 和 break 语句进行跳出处理。比如我们有一个三层的for循环，但是break和continue只能跳出一层循环，如果我们在第三层找到了需要...
简介将值从一种类型转换为另一种类型通常被称为类型转换，这是显式的情况，而隐式的情况被称为强制类型转换。在JavaScript中通常将它们统称为强制类型转换，而显式和隐式的区分分界线其实并不明显，它很大程度上取决你是否了解这段代码是否转换了类型，如果你知道它转换了类型，那么这段代码对于你而言就是显式的，而隐式常常是那些不了解或者是比较隐晦的代码。var a = 42; var b = a + ""; // 隐式强制类型转换 var c = String(a); // 显式强制类型转换隐式转换带来的副作用其实都是相对而言的，如果你足够了解，其实它就没有副作用，只是我们在编...
前言对于js的原型链继承，大部分都是知道的，但是对于以下内容，很多人可能并不清楚或者理解不完整，那就是屏蔽属性。什么是屏蔽属性，其实这个功能来源于面向对象语言中的多态，表示父级定义的属性，在子级可以自己扩展，虽然属性名相同，但是功能却可以不同。由于js的继承，它不像强类型语言是完全的复制，js对于继承是通过原型链的方式，当子级没有的情况下会通过在原型链上查找。那么子级如果需要覆写某一个属性，显然它是绝对不能直接修改原型链上的内容，这回导致所有继承的子类产生问题，这显然是不合适的。于是就有了屏蔽属性，当子级去覆写一个原型上存在的属性时，其实并不会去修改原型链的属性，而是给子级自己添加一个对...
规则概览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效果展示：总结：个人的实现...
前言以前写过一篇《目前前端下载文件的最佳实践》的文章，虽然这个文章是我经过工作实践得出得，但是直到今天我才发现，原来不止如此，根据我目前的知识，可以把文件下载分为两类：接口返回文件流文件下载地址之前分析的文章仔细一想，其实都在做一个事情：读取文件流再手动转文件进行本地下载首先我们需要知道，我们的a链接下载其实并没有问题，本来是不需要读取文件流的，但是后端对头信息的了解不多，导致下载文件的链接是一个预览的头信息，这就导致我们a链接无法直接通过点击直接下载，反而是直接打开了这个文件。这带来的结果就是我们会认为图片啊，pdf这些浏览器可以直接打开的文件，并不会触发下载，而是预览，因为我们很少去...
踩坑指南虽然howler.js说他可以自动感知然后自动播放，事实上没什么软用，所以我们还需要自己去配置一下触发器。监听一个全局的click事件之类的。虽然howler.js说可以自动降级到h5播放，但是实际测试无法在安卓4.4中进行播放，但是个人测试，如果你使用一个audio元素，是可以播放的，但是这样就需要自己去手动封装一个基于audio元素的播放管理，项目赶的很，实在没有多余的时间去研究这个，特别是音效的播放，还是专业的库处理比较好，所以暂时对于安卓4.4的兼容是没法做到的。官方对于这个问题也是很模糊，找不到解决办法。howler.js在文档中找了半天，也没看到官方提供动态替换资源的...
前言大概在上个月的时候我就看了对应的一些资料，但是一直拖着，因为这个功能其实vue的框架就有提供，比如element ui的input组件，它的这个功能叫自适应文本域，属性为autosize。所以本文也不过多讲解具体实现，主要还是它的原理层的东西。这个功能可以用在哪呢？比如移动端的聊天输入框的高度判断，拿我们的QQ来讲，在没有内容的时候它就只有1行的高度，如果内容过高，就会自动变高，然后也会有一个max的最大高度阈值，这个高度一般是几行，比如最大6行高度，多了就滚动条处理。那么就开始吧！最基本的实现变高原理其实非常简单，假设我现在有一个textarea元素用于用户的输入，然后我希望它在用...
最近评论