
JavaScript
多拉斯基
笨蛋一个
-
原创 你不知道的JavaScript(上卷)读书笔记
《你不知道的JavaScript(上卷)》读书笔记。2020-03-27 11:27:26188
0
-
原创 JS67 复制到剪贴板
想要实现这样一个需求,给定一个输入框和按钮,点击按钮时会将输入框的内容复制到剪贴板,方便用户操作。该如何实现呢?2019-12-05 17:13:3081
0
-
原创 JS66 高精度运算
JavaScript中的高精度运算2019-12-04 19:51:05181
0
-
原创 动画07 展开收起小动画
在群聊里看到一位同学要实现这样一个需求,点击按钮,弹窗回收到按钮的位置。实现这样一个小动画,群里的大神给出了一个解决方案,自己记录一下,并进行了一点改进,以备不时之需。2019-12-01 21:58:1688
0
-
原创 JS语言理解16 函数参数的传值调用方式
JavaScript中函数参数调用时:基本类型是传值调用,引用类型是传共享调用2019-11-28 10:50:1786
0
-
原创 JS语言理解15 连等赋值
连等赋值面试题2019-11-19 14:41:0870
0
-
原创 JS65 Echarts双Y轴刻度对齐
实现Echarts双Y轴刻度对齐2019-11-11 10:38:021235
0
-
原创 JS64 数组中的空位.md
数组中的空位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...2019-11-08 12:37:10104
0
-
原创 JS63 IntersectionObserver API
元素可见性页面的可见性可以用document.visibilityState或者document.hidden获得,通过document.visibilitychange来监听页面可见性的变化,但是对于页面的元素的可见性却只能手动通过位置判断。例如下面这个例子需要监听scroll事件,根据target元素的是否出现,来更改顶部的文字和样式。由于target内嵌了几层,所以判断时需要通过ge...2019-10-31 17:37:07191
0
-
原创 JS23 mouseover与mouseenter
mouseover/mouseout与mouseenter/mouseleave的区别以及模拟2019-10-21 19:59:2094
0
-
原创 关于for循环的一道题目
首先看最简的题目: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++;...2018-08-21 15:21:16683
0
-
原创 JS中图片的处理与合成(生成水印)
以美图的图片处理为例子,学习JS中对图片的处理。处理图片时需要使用canvas1 图片的跨域使用canvas处理图片,首先需要加载图片,如果是在线图片需要针对图片进行跨域的处理。具体的处理方法是:在图片服务器上设置跨域头,并且在前端加载图片之前将<img>标签的crossOrigin设置为*这样做的原因是: 尽管不通过CORS就可以在画布中使用图片,但是这会...2018-07-31 17:22:1826595
2
-
原创 JS25 上传文件
JS中上传文件的两种原生方法2018-07-18 21:24:581820
0
-
原创 JS中上传进度提示
在上传图片的过程中,如果耗时较长,如果能够给用户一个进度的提示,会让用户体验更加良好。做了几个比较常见的上传进度提示的demo:原理这几个demo是在Vue框架中完成的,使用了axios发送http请求,原理和简单,都是获取上传进度值,控制视图状态,其他就是表现形式的不同。关键点就是onprogress这个事件,它是XMLHttpRequest对象的一个回调函数,在上传或者下载...2018-09-05 16:07:022840
0
-
原创 JS42 利用JWT实现登录
1 什么是JWTJWT是JSON WEB TOKEN的缩写,是为了在网络应用环境建传递声明而执行的一种基于JSON的开放标准。该Toekn被设计为紧凑并且安全的,特别适用于分布式站点的单点登录(SSO)2 传统的session认证传统的session认证是为了让我们的而英勇能识别是哪个用户发送的请求,需要在服务器存储一份用户的登陆信息,这份登陆信息会在返给用户的响应时传递给浏览器,...2018-07-02 15:33:592223
0
-
原创 bcryptjs 加密
简介bcryptjs是一个第三方加密库,用来实现在Node环境下的bcrypt加密 bcrypt,是一个跨平台的文件加密工具。由它加密的文件可在所有支持的操作系统和处理器上进行转移。它的口令必须是8至56个字符,并将在内部被转化为448位的密钥。安装和引入安装:npm install bcryptjs -S引入:import bcrypt from '...2018-07-01 13:08:455370
1
-
原创 17 ES6标准入门(Module)
精华(1) ES6是静态加载,在编译时加载,为静态代码检查提供了更多可能性。(2) export实质上是向外提供了接口,正确的语法:export const a = 1export function f(){}// 更加推荐的做法:const b = 1const c = 'de'function g(){}export {a, g}export {a as hel...2018-04-28 14:52:32100
0
-
原创 12 ES6标准入门(Generator函数的异步应用)
ES6 诞生以前,异步编程的方法,大概有下面四种。 - 回调函数 - 事件监听 - 发布/订阅 - Promise 对象协程的Generator函数实现整个Generator函数就是一个封装的异步任务,或者说是异步任务的容器。异步操作需要暂停的地方,都用yield语句注明。Generator函数可以暂停执行和恢复执行,这是它能封装异步任务的根本原因。除此之外,它还有两个特性...2018-04-27 17:35:5065
0
-
原创 16 ES6标准入门(Decorator)
Webpack 配置目前使用这个特性,需要使用webpack进行编译首先安装插件:npm install babel-plugin-transform-decorators-legacy --save-dev然后在哎.babelrc中进行配置:{ "presets": ["es2015", "stage-0", "react"], "plugins": [ ...2018-04-27 09:28:21151
0
-
原创 11 ES6标准入门(Generator)
基本概念Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。Generator函数有多种理解角度。语法上,首先可以把它理解成,Generator函数是一个状态机,封装了多个内部状态。执行Generator函数会返回一个遍历器对象,也就是说,Generator函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历Generator函数...2018-04-24 19:26:4765
0
-
原创 10 ES6标准入门(Iterator)
Iterator(遍历器)的概念遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。Iterator 的作用有三个: 1. 为各种数据结构,提供一个统一的、简便的访问接口 2. 使得数据结构的成员能够按某种次序排列 3. ES6 创造了一种新的遍历命令for....2018-04-20 15:26:5854
0
-
原创 18 ES6标准入门(编程风格)
精华(1)建议不再使用var命令,而是使用let命令取代。(2)在let和const之间,建议优先使用const,尤其是在全局环境(3)所有的函数都应该设置为常量(4)静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号(5)使用数组成员对变量赋值时,优先使用解构赋值(6)函数的参数如果是对象的成员,优先使用解构赋值(7)如果函数返回多个值,优先使用对象...2018-05-03 09:58:18109
0
-
原创 JS40 reduce方法
数组的reduce()方法接受一个函数作为累加器,将数组的每个值从左到右开始用该函数进行处理,最终输出为一个值最常见的用法就是数组求和:let arr = [5, 4, 3, 2, 1];let reducer = (total, currentValue, currentIndex, arr) =&amp;gt; { console.log('total', total); con...2018-04-25 16:11:34182
0
-
原创 13 ES6标准入门(async函数)
含义async函数是ES2017引入的,实质上,async函数是Generator函数的语法糖用一个Generator函数依次读取两个文件const fs = require('fs');const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs....2018-04-25 16:52:50409
0
-
原创 14 ES6标准入门(class)
ES6为了更接近传统语言的写法,引入了Class的概念,作为对象的模板。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。ES5的写法:function Person(name) { this.name = name}Person.prototype.sayHe...2018-04-26 11:46:3799
0
-
原创 15 ES6标准入门(class的继承)
这里的内容和原型、继承关系很大,应该再重新回顾原型、继承之后再来重看这里(2018.4.26)简介Class可以通过extends关键字实现继承class Point {}class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y...2018-04-26 16:51:52107
0
-
原创 前端单元测试入门(Jest)
开始Jest是由Facebook发布的开源的、基于Jasmine的Javascript的单元测试框架。官方文档在这里。安装:npm install --save-dev jest然后创建一个sum.js文件,输出一个方法:function sum(a, b) { return a + b;}module.exports = sum;然后,创建一个名为sum....2018-05-04 16:56:562900
0
-
原创 JS46 JS中的match和exec方法
关于reg.exec和string.match方法exec是RegExp对象的方法,参数才是字符串,match是字符串执行匹配正则表达式规则的方法,参数是正则表达,返回的都是数组;在正则表达式没有全局标志g时,二者的返回值是相同的 - 正则表达式中没有捕获组时,返回值是只有一个成员的数组,第一项是从起始位置开始寻找的第一个匹配项,无论执行多少次都是相同的(从位置0开始) - 正则表达式...2018-09-12 20:44:2770
0
-
原创 HTML DOM classList属性
简介一个很方便的用来在JS中控制元素类的方法,完全可以取代jQuery中对class的操作classList属性返回元素的类名,作为DOMTokenList对象。该属性用于在元素中添加,移除及切换 CSS 类。classList属性是只读的,但你可以使用add()和remove()方法修改它。兼容性:方法add(class1, class2, ...):在元素中添加一个或多个类名。...2018-09-20 08:56:52304
0
-
原创 原型与原型链
普通对象与函数对象JavaScript 中,对象分为普通对象和函数对象通过new Function创建的都是函数对象,比如Function、Object、Array、Set、Map、Proxy、Symbol等,其他的对象都是普通对象typeof Function // "function"typeof Object // "function"typeof Array // "f...2018-10-06 09:52:24100
0
-
原创 JS语言理解13 bind函数的实现
定义bind的作用和call与apply类似,区别在于使用上。bind的执行的结果返回的是绑定了一个对象的新函数先看一个使用例子:var obj = { name: 'Jay' };function sayName(){ console.log(this.name);}var fn = sayName.bind(obj) ;fn() // 'Jay'MDN上的定义:b...2019-09-23 12:54:35106
0
-
原创 JS语言理解05 闭包
定义函数可以访问它被创建时的上下文环境,称为闭包内部函数比它的外部函数具有更长的生命周期function closure(name) { var status = 1; return { getName: function() { return name; }, getStatus: function() { return status...2019-07-05 16:30:4988
0
-
原创 JS语言理解04 继承的总结
继承相关知识还是有点乱,来总结一下。本质上,JS里面的继承都是通过原型链实现的(除了实例属性之外),原型链继承的关键就是对象的__proto__属性,它应该指向另外一个对象的prototype构造函数的继承ES5里面最常用的继承方法是以下两种:在子类内部执行父类(call/apply改变this),继承实例属性子类的prototype等于父类的一个实例(new 父类),继承实例属性和原...2019-07-05 16:29:0976
0
-
原创 JS44 页面生命周期
新的APIW3C指定了Page Lifecycle API,统一了网页从诞生到卸载的行为模式,并且定义了新的事件,允许开发者响应网页状态的各种转换。生命周期网页的生命周期被分为了六个阶段,每个时刻只可能处于其中一个阶段。(1)Active 阶段网页处于可见状态,且拥有输入焦点。(2)Passive阶段此阶段网页可见,但是没有输入焦点,无法接受输入。UI更新(比如动画)仍然在执行。...2019-07-03 09:54:21291
0
-
原创 JS60 ES10的新特性简介
已同步到个人博客,欢迎访问。ES10/ES2019还只是一个草案,但是大多数功能在新版本的Chrome中已经实现了。虽然ES6还没有掌握全,但是还是要紧跟时代,了解一下JavaScript的发展趋势吧BigIntBigInt是第七种原始类型,用来标识超出JavaScript最大安全整数之外的数字在之前,JavaScript的数字是使用的是双精度浮点数数据类型,可以表示的最大安全整数...2019-02-28 17:54:441119
0
-
原创 JS56 Generator 函数的异步应用
已同步到个人博客,欢迎访问传统方法所谓异步,简单说就是一个任务不是连续完成的,被分成了两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段。在JavaScript中,ES6之前,实现的异步编程的方法有四种:回调函数事件监听发布/订阅Promise回调函数所谓回调函数,就是把任务的第二段单独写在一个函数里面,等到回过头重新执行这个任务的时候,就直接调用...2019-01-22 10:33:27204
0
-
翻译 JS54 无法使用Map遍历Array创建的数组的原因
无法使用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 &amp;l...2019-01-15 19:15:39789
0
-
原创 JS55 Generator函数
已同步到个人博客,欢迎访问简介Generator函数有两个特征:function关键字后面有一个*函数体内部使用yield表达式function* helloWorldGenerator() { yield 'hello'; yield 'word'; return 'ending'}const hw = helloWorldGenerator()调用函数后,函数...2019-01-18 14:28:04100
0
-
原创 JS49 判断整数类型和直接取整的方法
判断类型利用parseIntconst isInteger(target) =&gt; parseInt(target) === target注意,parseInt只会返回两个类型的结果,数值或者NaN利用取余运算const isInteger(target) =&gt; typeof target === 'number' &amp;&amp; target % 1 === 0...2019-01-03 17:25:45175
0
-
原创 JS48 JS中的二进制运算和按位操作符
JavaScript中的二进制运算整数JavaScript中,将十进制数字转换为二进制的方法是使用toString(2)方法,对于正整数的返回值是从不为零的首位开始返回:(8).toString(2); // 1000对于负数,不会返回其真正的二进制编码(即其相反数的补码),而是直接利用符号-来表示:(-8).toString(2); // -1000所以,想要求出负数的二进制编码...2019-01-03 17:00:561309
0