- 博客(161)
- 收藏
- 关注
RSS订阅
原创 为什么说 bind 的实现非常考验对原型链的理解？
bind 的实现其实非常考验对原型链的理解。bind 和 apply，call 是 JS 修改 this 指向的三把利器 🔱。但看似简单的内容，实则包含了 JS 的两大核心内容：原型链和构造函数 (new) 。这篇文章分为两部分：一部分讲如何实现一个基础版本的 bind 方法，带大家做好热身运动；另一部分进入主题，详细讲解如何通过原型链来实现一个让人眼前一亮的 bind 方法。
2022-10-24 17:56:32
1235
5
原创 JS 内存泄漏与垃圾回收机制
JavaScript 是在创建变量（对象，字符串等）时自动进行了分配内存，并且在不使用它们时“自动”释放。 释放的过程称为垃圾回收。这个“自动”是混乱的根源，并让 JavaScript 开发者错误的感觉他们可以不关心内存管理，进而引发内存泄漏。
2022-04-06 21:08:59
2009
原创 详谈前端模块化这十四年的发展史：CommonJS、AMD、CMD、ES6
十年之前，模块化还只是使用「闭包」简单的实现一个命名空间。转眼间模块化已经发展了有十余年了，不同的工具和轮子层出不穷，下面是最各大工具或框架的诞生时间
2022-02-24 21:52:14
1514
1
原创 JS 异步编程的 5 种解决方案
异步为什么很重要？如何使用异步来有效处理潜在的阻塞操作？我们知道 JS 语言的执行环境是"单线程"，所谓"单线程"，就是指一次只能完成一件任务，这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。...
2022-02-23 21:04:02
4812
2
原创 JS 异步编程终极解决方案 async/await 的使用手册
ES8 提出了 JS 异步编程终极解决方案 async/await 。No more callback hell。使用 关键字 async 来表示，在函数内部使用 await 来表示异步。简单来说，它们是基于promises的语法糖，使异步代码更易于编写和阅读。通过使用它们，异步代码看起来更像是老式同步代码，因此它们非常值得学习。
2022-01-19 23:57:42
4957
原创 从零开始带你手写一个“发布-订阅者模式“ ，保姆级教学
发布订阅者模式想必大家都不陌生，是前端不可不掌握的设计模式，搞懂四个基本的核心内容就能掌握并实现这个模式！
2022-01-13 18:17:44
3450
11
原创 看了就会，手写 Promise 全部 API 教程，包括处于 TC39 第四阶段草案的 Promise.any()
根据规范实现了 Promise ES6+ 的全部 API，手写实现了 then 方法以外的两个实例方法以及目前 Promise 规范的全部六个静态方法。
2021-12-21 17:42:35
470
原创 手把手一行一行代码教你“手写Promise“，完美通过 Promises/A+ 官方872个测试用例
保姆级教程，看完还不懂的私聊我亲自教！
2021-12-20 20:19:51
1564
2
原创 ES6新特性 Class 类的全方面理解
javascript语言只有对象，没有类的概念。跟传统的面向对象语言（比如 C++ 和 Java）差异很大，非常容易让人困惑~ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念！本文就带你全方面理解class~
2021-10-20 17:02:41
925
1
原创 详解宏任务、微任务与事件循环 Event Loop
事件循环 Event Loop，是指浏览器或Node的一种解决javaScript单线程运行时“非阻塞”的一种机制，也就是我们经常使用异步的原理。本文会带你吃透“事件循环”，掌握底层原理，轻松应对JavaScript执行机制问题~
2021-10-19 17:35:21
1778
原创 通俗易懂的Promise知识点总结，检验一下你是否真的完全掌握了promise？
Promise 想必大家都十分熟悉，想想就那么几个 api，可是你真的了解 Promise 吗？
2021-10-18 17:16:51
2163
8
原创 越来越火的Fetch是如何请求数据的？与Ajax和Axios又有什么区别
fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。浏览器原生提供这个对象。本文详细介绍它的用法，以及与Ajax和Axios的区别~
2021-10-09 15:43:30
1379
原创 简洁全面的“手写AJAX，以及用Promise封装AJAX请求“，给你一个满分答案
原生js实现Ajax，本文用最简洁的脉路，帮你梳理前端经典面试“手写ajax”，然后再告诉你廖雪峰是如何使用Promise封装ajax！！！
2021-10-06 14:59:23
869
2
原创 由浅入深的正则表达式教程，简单快速学习正则
正则表达式，对大家来说既熟悉又陌生。熟悉是因为工作中有很多场景能用到，比如手机号、邮箱、密码等规则校验。陌生则是因为正则表达式看上去就是一堆乱码，且一眼看上去很难看懂匹配规则。有时候在网上去找一个特定规则的正则表达式，搜出来的结果各不相同，执行效果更是不尽人意，想自己去修改，感觉也无从下手。让我们通过这篇由浅入深的正则表达式教程，简单快速学习正则！！！
2021-10-04 03:43:07
1268
2
原创 掌握js类型转换，先来学习js原始值转换的抽象操作 toPrimitive
`Symbol.toPrimitive` 是一个内置的抽象操作，它是作为对象的函数值属性存在的，当一个对象转换为对应的 原始值 时，会调用此函数。
2021-10-01 11:45:58
1183
原创 JS 数组有哪些原生方法，那么多 API 真的很难记住吗？
通过梳理数组 API 的方式，归纳整理，你会发现js的数据方法并没有很难记住，一起来学习吧~
2021-09-29 23:46:15
1520
2
原创 如何理解 slice() 方法是浅拷贝？深入数组浅拷贝里的小细节
slice 不会修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组，如何理解slice方法的浅拷贝呢？
2021-09-26 23:56:25
2958
1
原创 常见Web安全攻防解析，前端开发的你不来了解一下嘛~
随着互联网的高速发展，信息安全问题已经成为企业最为关注的焦点之一，而前端又是引发企业安全问题的高危据点。在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，又时常遭遇网络劫持、非法调用 API 等新型安全问题。当然，浏览器自身也在不断在进化和发展，不断引入 CSP、Same-Site Cookies 等新技术来增强安全性，但是仍存在很多潜在的威胁，这需要前端技术人员不断进行“查漏补缺”。
2021-09-15 03:44:35
1190
原创 网络协议知识点汇总，巩固你的 HTTP 知识体系
掌握网络协议可以让我们在日常项目开发过程中，定位那些在发起网络请求遇到的奇怪问题。而且在一些比较成熟的团队面试过程中也经常会问到网络协议这方面的知识。因此作为一名前端，我们需要掌握网络协议这方面的相关知识。
2021-09-13 00:16:29
2922
4
原创 深入理解 HTTPS 工作原理，一文帮你搞懂 HTTPS 加密、解密、验证及数据传输过程
HTTPS (`Hyper Text Transfer Protocol over SecureSocket Layer`）是在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。在 HTTPS 中，使用`传输层安全性协议(TLS)`或`安全套接字协议(SSL)`对通信协议进行加密。也就是 `HTTP + SSL(TLS) = HTTPS`。HTTPS = HTTP+加密+认证+完整性保护。...
2021-09-13 00:09:30
2046
4
原创 从URL输入到页面展现到底发生什么？爆肝研读数十篇文章详解 TCP 三次握手 和 四次挥手！！！
面试常被问到：浏览器从URL输入到页面展现到底发生了什么？这也是一个前端面试经典问题了，本文就带你彻底了解面试官到底问这个问题想让你回答些什么。
2021-09-09 04:47:09
713
原创 304 状态码是什么意思？图解 HTTP 强缓存和协商缓存
HTTP 的缓存机制，可以说这是前端工程师需要掌握的重要知识点之一。本文将针对 HTTP 缓存整体的流程做一个详细的讲解，争取做到大家读完整篇文章后，对缓存有一个整体的了解。HTTP 缓存分为 2 种，一种是强缓存，另一种是协商缓存。主要作用是可以加快资源获取速度，提升用户体验，减少网络传输，缓解服务端的压力。
2021-09-05 01:59:23
2839
1
原创 【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度
通过`thread-loader`开启多进程打包，注意：请仅在耗时的操作中使用此 loader！因为每个 worker 都是一个独立的 node.js 进程，其开销大约为 600ms 左右。
2021-09-02 17:23:05
3643
原创 【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验
渐进式网络应用程序(`progressive web application - PWA`)可以为我们的项目添加离线体验**，使用名为 `Workbox` 的 Google 项目，帮助我们更简单地为 web app 提供离线支持
2021-09-02 16:50:53
2448
2
原创 【Webpack 性能优化系列(7) - 懒加载和预加载】
懒加载或者按需加载，会在文件需要使用时才加载，是一种很好的优化网页或应用的方式。懒加载的使用加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。预加载 prefetch：会在使用之前，提前加载js文件，等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
2021-09-01 22:38:26
2416
原创 【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载
`code splitting(代码分离)`是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。作用：代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。...
2021-09-01 20:49:59
2854
1
原创 【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码，减少代码体积！！！
`tree shaking` 是一个术语，用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 `import` 和 `export`。**`tree shaking` 可以去除未引用代码，减少代码体积。**
2021-09-01 16:50:30
2082
1
原创 【Webpack 性能优化系列(4) - 缓存 】详解如何做babel缓存和文件资源缓存
缓存我们会从两个点出发，一个是对bable进行缓存，另一个是对整体的文件资源进行缓存
2021-08-31 22:15:15
2202
3
原创 【Webpack 性能优化系列(3) - oneOf】
我们在写loader的时候，`rules`里面有非常非常多的loader规则，但是每个文件只能匹配一个 loader，被一个 loader 处理，因此可以使用 oneOf 唯一匹配，不需要每个文件把所有的 loader 都询问一遍，这样可以提高 loader 的执行效率
2021-08-31 01:07:29
1566
5
原创 【Webpack 性能优化系列(2) - source-map】
开发环境下如何调试代码，解决开发环境下调试代码问题，这个技术叫`source-map`，`source-map`: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）
2021-08-31 00:43:12
1092
原创 【Webpack 性能优化系列(1) - HMR 热模块替换】
为什么要使用`HMR 热模块替换`功能？当我们修改css文件时，明明js文件没有变化，但js文件也被重新加载了一次，所以打包的时候，看似只修改了css文件，实际上是把js文件也重新打包了一次，这是一个问题。假设以后我们有100个js模块，100个样式模块，如果只修改其中某一个模块，这整200个模块就需要重新打包，这个速度可以想想是非常慢的，更不要说以后的模块会越来越多，那打包情况只会越来越慢。所以我们想实现这样的功能：如果只有一个模块发生变化，那么只需要修改这一个模块代码就足够了，其他模块理应是不变的
2021-08-30 17:45:49
1341
4
原创 【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理，如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel！！！
生产环境的特点是能让代码优化上线运行的环境。我们要做哪些事情呢？样式经过css-loader的处理被整合在js中，如果样式在js中的话，会让js体积非常大，下载就会慢；同时因为是先加载js才能通过创建style标签插入到页面中，这里就会出现闪屏现象。所以，我们就需要将css从js中提取出来；当然还需要对代码进行压缩和兼容性处理，这里包括html、css和js。.........
2021-08-27 23:07:14
1597
原创 【Webpack 开发环境配置】总结学习如何打包样式资源、html资源、图片资源和其他资源？devServer是什么，如何配置？
webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 `src/index.js`，然后会在 `dist/main.js` 输出结果，并且**在生产环境开启压缩和优化**。通常你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 `webpack.config.js` 文件，然后 webpack 会自动使用它。**`webpack.config.js`是webpack的配置文件。** 作用是：指示 webpack 干哪些活（当你运行 webpac
2021-08-19 23:34:37
2833
6
原创 【Webpack 简介及五个核心概念】
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
2021-08-15 19:19:07
3501
5
原创 取数组的最大值（ES5、ES6），详解Math.max() 和 reduce() API
取数组的最大值（ES5、ES6）的几种方法，这里提供了三种写法，前两种用的都是`Math.max()`方法实现的，最后一种用了`reduce`API，下面会讲到如何利用基本的`Math.max()`方法实现 取数组的最大值，详解apply方法在实例中的运用思想，以及`reduce`API的介绍和使用。
2021-08-04 17:55:28
4442
原创 防抖和节流的区别是什么？防抖和节流的实现 详解！
防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于设置的时间，防抖的情况下只会调用一次，而节流的情况会每隔一定时间调用一次函数。防抖防抖(debounce): n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间function debounce(func, wait, immediate = true) { let timer; // 延迟执行函数 const later = (context, args
2021-07-13 02:07:11
7769
转载 详解JS继承，从原理入手到五种 js 实现继承方式
javascript继承的几种方法：原型链继承，其重点是让新实例的原型等于父类的实例；借用构造函数继承（也称伪造对象或经典继承）；组合继承（组合原型链继承和借用构造函数继承）；寄生组合式继承（完美⽅式）。
2021-07-13 01:19:29
459
原创 对 rest 参数(剩余参数) 与 Spread 语法(展开语法)的理解
Rest 参数（剩余参数语法）可以把一个不定数量的参数表示为一个数组。函数的最后一个命名参数以三个点`...`为前缀，则它就会成为一个由剩余参数组成的真数组。Spread 语法(展开语法) 可以将数组表达式或者string在语法层面展开；将对象表达式按key-value的方式展开。
2021-07-08 16:11:58
644
原创 谈谈你对原型的理解？什么是原型链？【原型链解决的是什么问题？】prototype 和 __proto__ 区别是什么？
谈谈你对原型的理解？在 JavaScript 中，每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。使用原型对象的好处是所有对象实例共享它所包含的属性和方法。什么是原型链？【原型链解决的是什么问题？】原型链解决的主要是继承问题。每个对象拥有一个原型对象，通过 __proto__ (读音: dunder proto) 指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向null(Object.prototype.__proto__ 指向的是n
2021-07-08 01:23:36
676
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人