- 博客(79)
- 收藏
- 关注
RSS订阅原创 详解async和await的实现
1. generator和yield在学习async和await之前，首先要知道生成器和迭代器的概念，因为本质上前者就是后者的一个语法糖，这部分不了解的可以先看博文https://blog.csdn.net/zl13015214442/article/details/88018172。2. async和await没有async和await的时候，我们来看下面一个场景：// name.txt...
2019-09-28 21:26:27
1595
原创 详解Promise的实现
1. 初级版首先要确定promise有什么特点：promise是一个类；每次new 一个promise 都需要传递一个执行器 执行器是立即执行的；执行器函数中有两个参数 resolve reject；默认promise有三个状态 pending => fulfilled 表示成功了，pending => rejected 表示失败了；如果一旦成功了，不能变成失败；一旦失...
2019-09-25 23:02:53
799
原创 发布订阅模式和观察者模式
1. 发布订阅先实现一个简单的发布订阅：const fs = require('fs');const school = {};let e = { arr: [], on(fn) { this.arr.push(fn); }, emit() { this.arr.forEach(fn => fn()); }}...
2019-09-25 20:17:34
258
原创 实现Promise.all、Promise.race、Promise.finally
1. 实现Promise.all实现思路promise.all(iterable)返回一个新的promise实例。此实例在iterable参数内所有的promise都fulfilled或者参数中不包含promise时，状态才变成fulfilled；如果参数中有一个失败rejected，此实例回调失败，失败的信息是第一个失败promise的返回结果。let p1 = new Promise...
2019-07-21 20:54:10
5754
原创 webpack4+配置及优化
1. 安装首先安装webpack，参考https://blog.csdn.net/zl13015214442/article/details/96117592一文。2. 配置webpack通过webpack.config.js来配置，来看一下文件构造（zlpack可以忽略）：在webpack.config.js中基本的配置有：// 基于node的 遵循commonJS规范let pa...
2019-07-17 22:16:02
590
原创 webpack4-loader实现
这部分内容接上一篇webpack-js模块的实现一文。在src下新建文件index.css，简单设置个样式，如下：// index.cssbody { background: lightcoral;}现在文件结构如下：然后在入口文件index.js中引入该样式文件：执行指令npx webpack --mode development会报错，告诉我们没有安装相应的解析该文件...
2019-07-17 19:21:06
255
原创 webpack4-js模块实现
前言：ES6模块化是ECMA提出的JavaScript模块化规范，他在语言的层面上实现了模块化。浏览器厂商和node都宣布要原生支持该规范。他将逐渐取代上一篇所提到的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。采用ES6模块化导入和导出时的代码如下：// 导入import { name } from './person.js'// 导出export const ...
2019-07-17 16:47:43
641
原创 模块化规范简单实现（理解使用和原理）
1. 模块化模块化就是指将一个复杂的系统分解到多个模块方便编码，但是在js当中是没有模块体系的，在之前我们实现模块化普遍采用的是命名空间的方式，但是通过这种方式来组织代码会造成以下不好的几点：命名空间冲突，两个库可能会使用同一个名称；无法合理的管理项目的依赖和版本；无法方便的控制依赖的加载顺序。所以出现了几种模块加载方案，比如CommonJS和AMD。2. CommonJSCom...
2019-07-16 11:27:41
1182
原创 call、apply及bind的实现原理
1. call和applycall 和 apply 的功能相同，都是改变 this 的执行，并立即执行函数。区别在于传参方式不同。func.call(thisArg, arg1, arg2, ...)：第一个参数是 this 指向的对象，其它参数依次传入。func.apply(thisArg, [argsArray])：第一个参数是 this 指向的对象，第二个参数是数组或类数组。2. c...
2019-07-15 16:29:13
2117
1
原创 js中的数据类型
1. 基本数据类型和复杂数据类型基本类型：undefined，null，bool，string，number，symbol(ES6新增)。虽然 typeof null 返回的值是 object，但是null不是对象，而是基本数据类型的一种。这是一个历史遗留问题，JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象，null 表示为全零，所...
2019-06-25 17:47:05
127
转载 正则表达式
老姚：https://juejin.im/post/5965943ff265da6c30653879#comment老师写得很精炼易懂，有记忆点，收藏。
2019-06-25 14:43:17
106
转载 web安全
这为博主写的很好，还有相应的实例https://juejin.im/post/5cd6ad7a51882568d3670a8e#heading-0
2019-06-13 23:51:52
109
原创 原生js实现拖拽
1. 预备知识offsetTop/offsetLeft ：调用者：任意元素。(盒子为主)作用：距离父系盒子中带有定位的距离。scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)调用者：document.body.scrollTop作用：浏览器无法显示的部分（被卷去的部分）。clientY/clientX:调用者：event.clientX/clientY作...
2019-05-29 16:05:06
315
原创 for...of，for...in，forEach和map的区别
1. for…of循环具有 iterator 接口，就可以用for...of循环遍历它的成员(属性值value)。for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象、Generator 对象，以及字符串。for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。对于普通的对象，for...of结构不能直接使用，会报错，必须部署了 Iter...
2019-05-27 17:09:52
3801
1
转载 防抖和节流
防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于设置的时间，防抖的情况下只会调用一次，而节流的情况会每隔一定时间调用一次函数。1. 防抖⑴ 函数防抖（debounce）：n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。如下例，对于高频操作Mousemove，没有限制count函数执行频率时，数字在不停的加一：<...
2019-05-27 11:16:09
448
原创 网页性能优化
1. 网络加载⑴ DNS预加载通过dns-prefetch属性可以让浏览器提前解析资源或接口对应的服务器IP地址，避免在请求中发起DNS解析请求，节省请求时间。⑵ CDN加速CDN的优点： 本地Cache加速，加快访问速度 镜像服务，消除运营商之间互联的瓶颈影响，保证不同网络的用户都能得到良好的访问质量 远程加速，自动选择cache服务器 带宽优化，分担网络流量，...
2019-05-27 09:41:26
6602
1
原创 原生js中如何添加dom元素
1. appendChild()概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。使用方式：fatherdom.appendChild( insertdom )。兼容性：所有浏览器都支持此方法。2. insertBefore()概念：把要插入的节点添加到指定父级里面的指定节点之前。使用方式：fatherdom.insertBefore( insertdom，chose...
2019-05-22 22:15:56
38738
1
转载 常见布局总结
CSS 标准为我们提供了 3 种布局方式：标准文档流、浮动布局和定位布局1. 标准文档流元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父级元素的边框换行。2. 浮动布局元素浮动之后不占据原来的位置（脱标）；浮动的盒子在一行上显示，如果一行不够往下移动；行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）。...
2019-05-15 20:14:03
288
原创 进程、线程
1. 基本概念并发、并行并发是指宏观上在一段时间内能同时运行多个程序，而并行则指同一时刻能运行多个指令。并行需要硬件支持，如多流水线或者多处理器。操作系统通过引入进程和线程，使得程序能够并发运行。共享共享是指系统中的资源可以被多个并发进程共同使用。有两种共享方式：互斥共享和同时共享。互斥共享的资源称为临界资源，例如打印机等，在同一时间只允许一个进程访问，需要用同步机制来实现对临...
2019-05-14 15:23:08
148
原创 二叉树先序遍历/中序遍历/后序遍历
1. 递归版function TreeNode(x) { this.value = x; this.left = null; this.right = null;}先序遍历var val1 = [];function preOrderRecur(head) { if(head===null) { return; } //打印顺序为根左右 val1...
2019-05-09 21:40:10
293
转载 CDN详解
这两篇博文都总结的很好，就不班门弄斧了https://www.zhihu.com/question/36514327?rf=37353035https://www.cnblogs.com/losbyday/p/5843960.html
2019-05-09 20:14:52
394
转载 移动端响应式布局
目前主流设计稿为iphone6或iphone8尺寸：750*1334。目前主流的适配移动端页面方法：用rem做单位，通过css3媒体查询来改变html中的font-size值。rem 是相对于 html 元素的 font-size 的一个单位。1. 步骤加重置样式reset.css/normalize.css确保字体设置及基础样式在各终端有相同的值。通过rem的方式适配移动设备。2. ...
2019-04-28 22:57:52
499
转载 怎样理解Vue中的路由
1. 路由传统的路由指的是：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发。而前端路由是不涉及服务器的，是前端利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换。目前Vue 推荐单页面应用 SPA 开发模式，大型单页应用最显著特点之一就是采用前端路由系统，通过改变URL，在...
2019-04-28 13:02:22
4768
转载 最全的跨域总结
在面试中不止一次被问到了对跨域的理解，总是答得不尽人意，今天就来总结一下跨域中的方方面面。1. 浏览器的同源策略浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。所谓“同源”指的是：协议相同、域名相同、端口相同。举例来说，http://www.example.com/dir/page.html 这个网址，协议是http://，域名是www.ex...
2019-04-26 22:22:37
285
原创 CSS属性的继承
1. 无继承性的属性⑴ display：规定元素应该生成的框的类型⑵ 文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向⑶ 盒子模型的属性：width、height、margin 、margin-top、margin-...
2019-04-26 15:50:53
200
原创 js浮点数/大数相加
console.log(0.1 + 0.2); //0.30000000000000004console.log(0.1 + 0.2 === 0.3); //false原因在于 js的 Number 是IEEE 754标准的64-bits的双精度数值，这是一种二进制表示法，可以精确地表示分数，比如1/2，1/8，1/1024。但是，二进制浮点数表示法并不能精确的表示类似0.1这样 的简...
2019-04-26 11:20:15
3776
转载 函数式编程
1. 函数式编程当我们想要使用一个函数时，通常情况下其实就是想要将一些功能，逻辑等封装起来。相信大家对于封装这个概念并不陌生。我们在初学时，往往会不由自主的使用命令式编程的风格来完成我们想要干的事情。因为命令式编程更加的简单，直白。例如我们现在有一个数组，array = [1, 3, 'h', 5, 'm', '4']，现在想要找出这个数组中的所有类型为number的子项。当我们使用命令式编程...
2019-04-23 15:53:46
115
原创 js和异步
关于以js和异步编程一直理解的不够透彻，这两个不是相斥的吗？1、js和异步js引擎是基于单线程事件循环的概念构建的，即同一时刻只允许一个代码块执行，与之相反的Java/C++，它们允许许多个不同的代码块同时执行。js将即将运行的代码块放在一个**任务队列（job queue）**中，每当js引擎中的一段代码结束执行，**事件循环（event loop）**会执行队列中的下一个任务。但是对于一...
2019-04-22 21:40:46
327
原创 Vue3.0之proxy代替object.definProperty()
在最新的Vue 3.0，一个很重要的改变就是将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。对于Object.defineProperty大家应该在学习Vue中的响应式数据时深有体会，它可以 重写属性的 get 与 set 方法，从而完成监听数据的改变。1. Vue 2.x中的 Object.defineProperty实现响应式数据...
2019-04-22 11:56:34
3440
原创 深拷贝with浅拷贝
浅拷贝: 以赋值的形式拷贝引用对象，仍指向同一个地址，修改时原对象也会受到影响Object.assign(target,source1,source2...) 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。注意前面说的是可枚举属性，这是一个介于完全的深拷贝和完全的浅拷贝之间的方法：❶ 如果我们把它的第一个参数target设置为一个空对象 {}，同时保证剩余的源对象sou...
2019-04-21 21:29:11
177
原创 计算机网络结构
1. 计算机网络体系结构应用层 ：为特定应用程序提供数据传输服务，例如 HTTP、DNS 等。数据单位为报文。运输层 ：提供的是进程间的通用数据传输服务。由于应用层协议很多，定义通用的运输层协议就可以支持不断增多的应用层协议。运输层包括两种协议：传输控制协议 TCP，提供面向连接、可靠的数据传输服务，数据单位为报文段；用户数据报协议 UDP，提供无连接、尽最大努力的数据传输服务，数...
2019-04-21 14:42:57
10485
转载 网页很卡的原因
打开开发者工具看network里的瀑布图。原因一：http请求次数太多解决：减少http请求次数① 图片地图：把多张图片整合到一张图片中，以位置定位超链接。② CSS Sprites合并图片，通过指定CSS的backgroud-image和backgroud-position来显示元素。③ 合并JS脚本和CSS样式表。④ 使用外部JS和CSS文件。原因二：接收数据时间过长，如下载资...
2019-04-21 14:11:00
5390
转载 函数柯里化
1. 定义柯里化是指这样一个函数(假设叫做createCurry)，他接收函数A作为参数，运行后能够返回一个新的函数。并且这个新的函数能够处理函数A的剩余参数。假如有一个接收三个参数的函数A：function A(a, b, c) { // TODO something}又假如我们有一个已经封装好了的柯里化通用函数createCurry。他接收bar作为参数，能够将A转化为柯里...
2019-04-20 22:25:13
397
1
原创 js实现缓动动画
我们都知道实现动画的原理就是：盒子未来的位置 = 盒子当前的位置+步长。那么缓动动画实现就是步长越来越小。盒子慢慢停下的效果。根据这个原理实现一个缓动的效果：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title><
2019-04-20 21:24:08
1040
原创 迭代器和生成器
我们在用循环语句迭代数据时，必须要初始化一个变量来记录每一次迭代在数据集合中的位置，var values = [1, 2, 3];for(var i=0, len=values.length; i&amp;lt;len; i++) { console.log(value[i]);}上面的for循环通过变量i跟踪数组的索引。虽然语法简单，但是如果将多个循环嵌套则需要追踪多个变量，代码的复杂度会...
2019-04-20 21:23:13
236
原创 offsetLeft和style.left的区别
最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。如果父系盒子中都没有定位，以body为准。style.left只能获取行内式，如果没有返回“”;offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px。offsetLeft 只读，而 style.left 可读写。（只读是获取值，可写是赋值）style....
2019-04-20 21:22:08
301
原创 图片懒加载的实现
1. datasetHTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。dataset自定义属性的格式：data-xx；前面的data-是固定的，后面的xx一般为表示与自定义属性相关的字符串。img标签中的data-src属性就属于一种自定义的dataset属性。举个例子：&lt;div id="today" data-food="sushi" ...
2019-03-16 16:23:21
7304
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人