多啦的博客

文章目录什么是循环依赖CommonJS中对循环依赖的处理ESM的处理Webpack对循环依赖的处理参考什么是循环依赖循环依赖一般会伴随模块化一起出现，就是在a模块中依赖b模块，而b模块又依赖a模块。在以前开发时就遇到过这种情况，在store初始化时使用了utils模块中的方法，而utils中有利用到了store中的数据在开发时没有问题，但是在打包后运行时就报错了，实际上就是遇到了循环依赖的问题。对于循环依赖，Node默认的CommonJS模块和ES6的模块以及Webpack打包时的处理各不相同C

《你不知道的JavaScript（上卷）》读书笔记。

想要实现这样一个需求，给定一个输入框和按钮，点击按钮时会将输入框的内容复制到剪贴板，方便用户操作。该如何实现呢？

JavaScript中的高精度运算

在群聊里看到一位同学要实现这样一个需求，点击按钮，弹窗回收到按钮的位置。实现这样一个小动画，群里的大神给出了一个解决方案，自己记录一下，并进行了一点改进，以备不时之需。

JavaScript中函数参数调用时：基本类型是传值调用，引用类型是传共享调用

连等赋值面试题

实现Echarts双Y轴刻度对齐

数组中的空位JavaScript中数组有空位的概念，也就是一个数组的位置上没有任何的值，生成的方式有四种：（1）直接定义let arr = [1, , 3]; // [1, empty, 3]（2）删除属性let arr = [1]; delete arr[0]; // [empty,];（3）使用new Array方法new Array(2); // [empty, empt...

元素可见性页面的可见性可以用document.visibilityState或者document.hidden获得，通过document.visibilitychange来监听页面可见性的变化，但是对于页面的元素的可见性却只能手动通过位置判断。例如下面这个例子需要监听scroll事件，根据target元素的是否出现，来更改顶部的文字和样式。由于target内嵌了几层，所以判断时需要通过ge...

mouseover/mouseout与mouseenter/mouseleave的区别以及模拟

首先看最简的题目：for(var i=0; i++； i<2) { setTimeout(() => console.log(i))}输出结果是什么？由于i是通过var定义的，它是一个全局变量，当log的时候内存中只存在一个i，并且这个i通过循环已经变成了2，所以输出结果是输出两次2对题目进行改造。将var换为let:for(let i=0; i++；...

以美图的图片处理为例子，学习JS中对图片的处理。处理图片时需要使用canvas1 图片的跨域使用canvas处理图片，首先需要加载图片，如果是在线图片需要针对图片进行跨域的处理。具体的处理方法是：在图片服务器上设置跨域头，并且在前端加载图片之前将<img>标签的crossOrigin设置为*这样做的原因是： 尽管不通过CORS就可以在画布中使用图片，但是这会...

在上传图片的过程中，如果耗时较长，如果能够给用户一个进度的提示，会让用户体验更加良好。做了几个比较常见的上传进度提示的demo：原理这几个demo是在Vue框架中完成的，使用了axios发送http请求，原理和简单，都是获取上传进度值，控制视图状态，其他就是表现形式的不同。关键点就是onprogress这个事件，它是XMLHttpRequest对象的一个回调函数，在上传或者下载...

1 什么是JWTJWT是JSON WEB TOKEN的缩写，是为了在网络应用环境建传递声明而执行的一种基于JSON的开放标准。该Toekn被设计为紧凑并且安全的，特别适用于分布式站点的单点登录（SSO）2 传统的session认证传统的session认证是为了让我们的而英勇能识别是哪个用户发送的请求，需要在服务器存储一份用户的登陆信息，这份登陆信息会在返给用户的响应时传递给浏览器，...

简介bcryptjs是一个第三方加密库，用来实现在Node环境下的bcrypt加密 bcrypt，是一个跨平台的文件加密工具。由它加密的文件可在所有支持的操作系统和处理器上进行转移。它的口令必须是8至56个字符，并将在内部被转化为448位的密钥。安装和引入安装：npm install bcryptjs -S引入：import bcrypt from '...

精华（1） ES6是静态加载，在编译时加载，为静态代码检查提供了更多可能性。（2） export实质上是向外提供了接口，正确的语法：export const a = 1export function f(){}// 更加推荐的做法：const b = 1const c = 'de'function g(){}export {a, g}export {a as hel...

ES6 诞生以前，异步编程的方法，大概有下面四种。 - 回调函数 - 事件监听 - 发布/订阅 - Promise 对象协程的Generator函数实现整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用yield语句注明。Generator函数可以暂停执行和恢复执行，这是它能封装异步任务的根本原因。除此之外，它还有两个特性...

JS中上传文件的两种原生方法

Webpack 配置目前使用这个特性，需要使用webpack进行编译首先安装插件：npm install babel-plugin-transform-decorators-legacy --save-dev然后在哎.babelrc中进行配置：{ "presets": ["es2015", "stage-0", "react"], "plugins": [ ...

开始Jest是由Facebook发布的开源的、基于Jasmine的Javascript的单元测试框架。官方文档在这里。安装：npm install --save-dev jest然后创建一个sum.js文件，输出一个方法：function sum(a, b) { return a + b;}module.exports = sum;然后，创建一个名为sum....

这里的内容和原型、继承关系很大，应该再重新回顾原型、继承之后再来重看这里（2018.4.26）简介Class可以通过extends关键字实现继承class Point {}class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y...

ES6为了更接近传统语言的写法，引入了Class的概念，作为对象的模板。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。ES5的写法：function Person(name) { this.name = name}Person.prototype.sayHe...

含义async函数是ES2017引入的，实质上，async函数是Generator函数的语法糖用一个Generator函数依次读取两个文件const fs = require('fs');const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs....

数组的reduce()方法接受一个函数作为累加器，将数组的每个值从左到右开始用该函数进行处理，最终输出为一个值最常见的用法就是数组求和：let arr = [5, 4, 3, 2, 1];let reducer = (total, currentValue, currentIndex, arr) => { console.log('total', total); con...

精华（1）建议不再使用var命令，而是使用let命令取代。（2）在let和const之间，建议优先使用const，尤其是在全局环境（3）所有的函数都应该设置为常量（4）静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号（5）使用数组成员对变量赋值时，优先使用解构赋值（6）函数的参数如果是对象的成员，优先使用解构赋值（7）如果函数返回多个值，优先使用对象...

Iterator（遍历器）的概念遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator 的作用有三个： 1. 为各种数据结构，提供一个统一的、简便的访问接口 2. 使得数据结构的成员能够按某种次序排列 3. ES6 创造了一种新的遍历命令for....

基本概念Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。Generator函数有多种理解角度。语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数...

关于reg.exec和string.match方法exec是RegExp对象的方法，参数才是字符串，match是字符串执行匹配正则表达式规则的方法，参数是正则表达，返回的都是数组；在正则表达式没有全局标志g时，二者的返回值是相同的 - 正则表达式中没有捕获组时，返回值是只有一个成员的数组，第一项是从起始位置开始寻找的第一个匹配项，无论执行多少次都是相同的（从位置0开始） - 正则表达式...

简介一个很方便的用来在JS中控制元素类的方法，完全可以取代jQuery中对class的操作classList属性返回元素的类名，作为DOMTokenList对象。该属性用于在元素中添加，移除及切换 CSS 类。classList属性是只读的，但你可以使用add()和remove()方法修改它。兼容性：方法add(class1, class2, ...)：在元素中添加一个或多个类名。...

普通对象与函数对象JavaScript 中，对象分为普通对象和函数对象通过new Function创建的都是函数对象，比如Function、Object、Array、Set、Map、Proxy、Symbol等，其他的对象都是普通对象typeof Function // "function"typeof Object // "function"typeof Array // "f...

定义bind的作用和call与apply类似，区别在于使用上。bind的执行的结果返回的是绑定了一个对象的新函数先看一个使用例子：var obj = { name: 'Jay' };function sayName(){ console.log(this.name);}var fn = sayName.bind(obj) ;fn() // 'Jay'MDN上的定义：b...

定义函数可以访问它被创建时的上下文环境，称为闭包内部函数比它的外部函数具有更长的生命周期function closure(name) { var status = 1; return { getName: function() { return name; }, getStatus: function() { return status...

继承相关知识还是有点乱，来总结一下。本质上，JS里面的继承都是通过原型链实现的（除了实例属性之外），原型链继承的关键就是对象的__proto__属性，它应该指向另外一个对象的prototype构造函数的继承ES5里面最常用的继承方法是以下两种：在子类内部执行父类（call/apply改变this），继承实例属性子类的prototype等于父类的一个实例(new 父类)，继承实例属性和原...

新的APIW3C指定了Page Lifecycle API，统一了网页从诞生到卸载的行为模式，并且定义了新的事件，允许开发者响应网页状态的各种转换。生命周期网页的生命周期被分为了六个阶段，每个时刻只可能处于其中一个阶段。（1）Active 阶段网页处于可见状态，且拥有输入焦点。（2）Passive阶段此阶段网页可见，但是没有输入焦点，无法接受输入。UI更新（比如动画）仍然在执行。...

已同步到个人博客，欢迎访问。ES10/ES2019还只是一个草案，但是大多数功能在新版本的Chrome中已经实现了。虽然ES6还没有掌握全，但是还是要紧跟时代，了解一下JavaScript的发展趋势吧BigIntBigInt是第七种原始类型，用来标识超出JavaScript最大安全整数之外的数字在之前，JavaScript的数字是使用的是双精度浮点数数据类型，可以表示的最大安全整数...

已同步到个人博客，欢迎访问传统方法所谓异步，简单说就是一个任务不是连续完成的，被分成了两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。在JavaScript中，ES6之前，实现的异步编程的方法有四种：回调函数事件监听发布/订阅Promise回调函数所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到回过头重新执行这个任务的时候，就直接调用...

无法使用Map遍历Array创建的数组的原因原文：Here’s Why Mapping a Constructed Array in JavaScript Doesn’t Work作者：shawn.webdev示例为了便于说明，假设现在需要你生成一个数组，数组由数字 0~99 组成。你会怎么做？下面是一种方案：const arr = [];for (let i = 0; i &l...

判断类型利用parseIntconst isInteger(target) => parseInt(target) === target注意，parseInt只会返回两个类型的结果，数值或者NaN利用取余运算const isInteger(target) => typeof target === 'number' && target % 1 === 0...

JavaScript中的二进制运算整数JavaScript中，将十进制数字转换为二进制的方法是使用toString(2)方法，对于正整数的返回值是从不为零的首位开始返回：(8).toString(2); // 1000对于负数，不会返回其真正的二进制编码（即其相反数的补码），而是直接利用符号-来表示：(-8).toString(2); // -1000所以，想要求出负数的二进制编码...