这波能反杀－小专栏

首页

发现

小书

这波能反杀

独立开发者，大前端架构师

关注 0 被关注 68 获得赞 84

个人书籍

JavaScript 核心进阶

本书旨在带给读者地道的前端基础知识体系，深入底层原理，带大家了解最权威的基础知识，并通过一步一步的深入，带领读者感受正确的学习方法的独特魅力，通过完整的知识体系，帮助读者突破瓶颈，能力更上一层楼

个人专栏

不疯魔，不成活

已发表 6

性能优化专题

给你体系化的性能优化学习体验

已发表 10

前端核心基础

只给你地道的前端基础知识分享

已发表 69

这波能反杀 in 前端核心基础

47b239dd5e639e3cbc91d4b01fc4a8b7

七、5. 如何项目组织代码结构

分享一位读者读完上一章之后的评论，我觉得很有道理。 “经历过前端开发刀耕火种的年代，自然就明白模块化组件化虚拟 DOM 等概念的重要意义，也就更容易把这些知识看得更加重要，视若珍宝。”这...

这波能反杀 in 前端核心基础

七、4. 模板语言 JSX

组件化的思想就是做聚合，把属于一个组件组件的所有模块聚合在一起。 HMTL 片段是一个组件的重要组成部分。在 React 中，使用模板语言 JSX 来表现 HTML。他与 HTML 标签类似，但是又不是 HTML 标签，因此我...

这波能反杀 in 前端核心基础

71ddcc2868feecd992d19d5e1f8bc6f4

七、3. 组件化应用：React

一、基础 React 是目前前端大型项目的最佳解决组件化解决方案。 webpack 将所有资源都看成是模块的打包方式，让组件化开发思维有了落地实践的可能，React 则是在此基础上，彻底贯彻了组件化思维。 Reac...

这波能反杀 in 前端核心基础

Dbb497d9b814ed40627a7cc7b92dcacd

七、2. webpack 入门

webpack 是一个资源打包工具。对于 webpack 来说，每一个资源，都被看成是一个模块，而不仅仅只是 js 文件。得益于 webpack 的这个特性，我们可以将一个组件的所有资源，以模块的形式组合成为一个整体...

这波能反杀 in 前端核心基础

513e3c13dbd2d4f849fb188ecc38d581

七、1. 组件化思维

导读：我会用一个大的章节来介绍组件化，主要目的在于分享组件化的开发思维，组件化由何而来，让大家对于组件化底层思维有一个了解，并且有自己的独立思考。为深入的掌握好组件化提供一个方...

这波能反杀 in 前端核心基础

748ee3b7c7a7925145a67f3acf273385

八、7. 类型兼容性是关键

在 ts 的开发中，类型兼容性无处不在。可是大家在学习 ts 时，往往会忽略类型兼容性的重要性。不理解类型兼容性，就容易在使用时出现很多无法理解的错误。实际使用时，往往需要对各种类型声明进...

这波能反杀 in 前端核心基础

18974bcf8aee75bd8172d0a7f2319b84

八、6. 附录：常用高级类型

实践中场景往往比较复杂，因此许多时候我们需要一些复杂的高级类型来确保变量的类型与实际情况相符合。这一章我们把一些常见的复杂类型单独拿出来与大家一起来学习一下。 1 枚举使用关键字enu...

这波能反杀 in 前端核心基础

Bdf7d138b8b3b1b65b42d6790f42c531

八、5. 附录：类型推导是核心

学会了规则，表示你能使用 TypeScript。理解了类型推导，你才能成为 TypeScript 高手。当我想要声明一个变量为 number 类型时，常规的语法是这样的 let a: number = 20 我会明确指定变量 a 的类型。但是如果我...

这波能反杀 in 前端核心基础

八、4. 附录：得泛型者得天下

这篇文章跟大家分享学习ts的又一个重难点「泛型」。在 ts 中，得泛型者，得天下！丢泛型者，失天下！ 1 什么是泛型整个ts的学习，其实就是各种数据类型的类型约束的学习。当我们规定一个变量只...

这波能反杀 in 前端核心基础

496db7869c5b10adf7c80a43e7f53226

八、3. 附录：React 拖拽组件实践

1 方法通过上一篇文章的学习，我们知道，TypeScript 其实是一套约束规则。理解了这一点，就可以大概确定我们的学习方向。是规则，那么知识点之间，就不会有太强的关联性。我们可以一条一条的逐...

这波能反杀 in 前端核心基础

2be2d5cc33856edc834a0b61508281df

八、2. 附录：TypeScript 为什么必须学

因为大家都在说要掌握？当然不是！或者换一个问题，为什么在项目中，我们要选择使用 typescript？也许你还不知道，一起跟着我的思路捋一捋。 1 基础动因对 JS 执行原理有过了解的同学应该知道，JS ...

这波能反杀 in 前端核心基础

94fdafd8bf1eaa6997a87660258ef3e9

八、1. TypeScript 入门导读

TypeScript ，后面简称 ts。 ts 在前端开发中，占据越来越重要的作用。因此，如何学习 ts，并将其运用于实践项目中，也变得非常重要。 ts 的语法学习并不困难，学习资源也并不难获取，官方文档提供了完...

这波能反杀 in 前端核心基础

Bb1397c15f9ec44def9065aba336e48c

六、10. 模块化案例二

一个页面的内容如何展示，往往需接口请求之后才能完全确认。因此，大多数页面在默认时，都会展示一个 Loading 提示，或者是骨架展示。等到接口请求完成之后，再切换成想要展示的内容。这是我们...

这波能反杀 in 前端核心基础

9c4520aabd19816bb83907e280429bd1

六、9. 模块化实践案例一

我们先来实现一个简单的场景。首先有一个普通的div。然后有一堆设置按钮。我们可以通过这堆按钮，来控制 div 的显示或隐藏，背景颜色，边框颜色，长，宽等属性。实践中的类似场景非常多，例...

这波能反杀 in 前端核心基础

16aa566ef568751f1c7b173c42841295

六、8.1 ES6 Modules

Create React App 是一个用于学习 React 的集成环境。与此同时，他也是一个学习 ES6 Modules 的舒适环境。因此为了降低学习成本，我们直接使用该环境来学习 ES6 Moduels 语法。 1. 创建项目npx create-react-app my-app --tem...

这波能反杀 in 前端核心基础

5e774379a47df86311478ad246ec385d

六、8. 模块化

本书所指的模块，都是代码模块，而非业务功能模块。我们在前面学习了很多方法，用于拆分代码的规模。例如把一段逻辑封装为函数，把一些实例提炼成为类。我们在用很多方式把一个大的问题，化...

这波能反杀 in 前端核心基础

F2ebe7beda2485a43c42959064e91e88

六、7. 事件循环机制

事件循环机制「Event Loop」，负责是整个 JavaScript 执行环境的代码执行顺序的问题。准确的说，事件循环机制，是执行环境的机制，不是 JavaScript 的机制。函数调用栈是 JavaScript 的代码顺序机制。在前...

这波能反杀 in 前端核心基础

B620e44ec951952f2b8f8655fc0805c3

六、6. Promise 的封装

我们自己封装一个 Promise 对象有一定的难度。但是只要我们抓住封装的核心思想：如何封装与如何使用息息相关，事情就会变得简单。来分析一下：以图片加载为例，Promise 的使用如下 function imageLoad(ur...

这波能反杀 in 前端核心基础

9c379fea303d94f2fa7145addbd394b3

六、5. Promise 的使用

关于 Promise 状态单词的使用说明：promise 的三种状态，和表白是一样，你向一个人表白，发出一个想跟对方交往的请求，无非就是三种状态。 1、还没有正面回答或者跟你说我在想想：pending 2、同意跟你交...

这波能反杀 in 前端核心基础

019951541b96ee726e8cc57f3171f6b4

六、4. 展开运算符

在ES6中，使用 ... 来表示展开运算符，它可以将数组/对象进行展开。通过一个简单的例子来了解一下展开运算符的作用。 // 首先声明一个数组 const arr1 = [1, 2, 3]; // 其次声明另一个数组，我们期望新数组...

这波能反杀 in 前端核心基础

9ddf012865884d76e4fcf7f168b40662

六、3. 解析结构

解析结构是一种从对象/数组中取值的全新写法。一个简单的例子就能搞定它。首先假设有如下对象。 var tom = { name: 'TOM', age: 20, gender: 1, job: 'studend' } 我们使用对象的方式，保存了 TOM 的一些基本...

这波能反杀 in 前端核心基础

E68a9c571f4b8e8b0b997a8038ea6306

六、2. 模板字符串

模板字符串是为了解决传统字符串拼接不便利而出现的。我们先通过一个简单的例子来观察一下模板字符串与传统字符串的差别。 // ES5 var a = 20; var b = 30; var string = a + "+" + b + "=" + (a + b); // ES6 const a = 20; c...

这波能反杀 in 前端核心基础

F9d3b78f57cb04cee818bb2246579234

六、1. ES6 + 常用语法

ES6 是 ECMAScript 6 的简称。也是 ECMAScript 新标准的一种统称。之所以要单独将 ES6 拿出来学习，是因为与之前的版本相比较，它的语法很大程度上改变了我们的编程习惯。虽然在某种程度上来说， ES6 的出现...

这波能反杀 in 前端核心基础

646370baf26d10166eca739eb7392d27

五、6. 装饰者模式

当我们想要扩展一个对象的能力时，可以采用的方案有添加原型方法修改构造函数继承装饰者模式前面三种方法，都不可避免的会修改原有对象的代码。而如果不修改原有对象代码的情况下，装饰...

这波能反杀 in 前端核心基础

57006e72a7de7d375976371474b5ced3

五、5. 策略模式

策略模式，是一种封装算法与规则的设计模式。我们在学习封装的终极奥义时已经知道，封装就是提炼出来相同点，将不同点作为变量。当不同点是一段逻辑、一个算法、一个规则时，我们就可以进一...

这波能反杀 in 前端核心基础

190948bbb3f7d046bfea7dd2c613ef52

五、4. 代理模式

理解代理模式，很形象的例子就是明星的经纪人。我希望能够让某位明星成为我的代言人，但是一般情况只能跟经纪人洽谈。而不会跟明星直接联系。经纪人就是明星的代理。生活中也有许多代理模式...

这波能反杀 in 前端核心基础

6f570a86ba277323249500f338ba2272

五、3. 观察者模式

观察者模式也可以称之为监听者模式。它由观察者「Observer」与被观察者「Subject」共同组成。又名发布订阅模式，在复杂场景下，为了适应更多需求，除了观察者与被观察者，还会引入更多的角色，...

这波能反杀 in 前端核心基础

5bbeac9b41f27bae9ef59b27e05c0af6

五、2. 工厂模式

要准确的理解工厂模式并不简单。 JavaScript 中没有接口和抽象类的概念，因此基于 JavaScript 理解工厂模式，在实现上与其他语言有所不同。因此学习时要注意区分假设我有一个手机工厂，工厂里能生产...

这波能反杀 in 前端核心基础

1b64ad51252563a81c7fdf905594b4c5

五、1. 单例模式

单例模式是最简单的一种设计模式。同时也是使用最多的设计模式。我们在无意识中可能会大量使用它。顾名思义，单例模式强调的就是一个类只有一个实例。 JavaScript 中去思考单例，要比在其他开发...

这波能反杀 in 前端核心基础

B2bc42ab7f7381769c27f31baa4d1102

五、设计模式

在学习封装时，我们知道，封装很重要的一个核心就是要学会提炼可复用的公共逻辑。而设计模式，就是大佬们在实践过程中，逐渐提炼出来的一系列可复用的公共逻辑。设计模式是在运用面向对象思维...

这波能反杀 in 前端核心基础

F14fb3fd02950cff911268a4c9c3fc79

四、10. 封装一个运动框架

单从技术的角度来看，JavaScript 动画能力的掌握与否，会将前端程序员的能力水平划分到不同的 level 中。很显然，大多数人并不知道如何使用 JavaScript 封装一个动画函数，去满足日常的动画需求。因此，不...

这波能反杀 in 前端核心基础

F15895a211489b3da5cba4fac3f11ce3

四、9. 封装一个无缝滚动对象

刚开始学习 JavaScript 的时候，真心觉得无缝滚动是一个神奇的功能。为什么明明只有几个方块，就是滚不到头？背后到底是怎么回事？明白了原理之后，才知道原来是使用了一些障眼法来实现。 1原理假...

这波能反杀 in 前端核心基础

5c7bb0a092e615f77f2a2200886362d6

四、8. 封装一个选项卡对象

选项卡在 web 中的应用可以说是无处不在。因此掌握它的实现对我们来说非常有用。通常情况下，选项卡由两部分组成。一部分是头部，它包含一堆按钮，每一个按钮对应不同的页面，按钮包括选中，与...

这波能反杀 in 前端核心基础

Baba10938d1e704abe758fa342f93d0b

四、7. 封装一个拖拽对象

基础概念的掌握并不是很难，但是要真正的转化为自己的知识，则需要通过大量的实践才行。 1如何让一个DOM元素动起来。拖拽的本质就是让 DOM 元素能够跟着鼠标运动起来。因此，让元素动起来，是我们...

这波能反杀 in 前端核心基础

四、6. jQuery 封装思维详解

早几年学习前端，大家都非常热衷于研究 jQuery 源码。我还记得当初从 jQuery 源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹，“原来 JavaScript 居然可以这样用！” 虽然随着前端的发展，另...

这波能反杀 in 前端核心基础

D8d827d938948dd1a2a11dc76d0b1b6b

四、5. 封装思维的终极进阶

本文介绍的是封装的思维，而不是封装在语法上的支持。通常情况下，语法上封装可以很随意，但是处理得不好，可能无法利用封装的重大利好。甚至让你的代码陷入混乱从思维上理解我们已经知道，...

这波能反杀 in 前端核心基础

87a95f33175efe2aaf71b5fc71a3c89f

四、4. 继承

核心理念继承是对类的封装。这是继承最核心的理念。怎么来理解呢？通过一个实践案例来聊一聊。现在有许多的类，如下，学生，教师，医生等等。 class Student {} class Teacher {} class Doctor {} 这些类，...

这波能反杀 in 前端核心基础

D94b5662c7740cb8f0004fbeac6cbd60

四、3. 原型与原型链

原型在对实例的封装中，我们将所有实例共享的方法抽离出来，挂载在一个对象里，这个对象就是原型对象。构造函数中，使用 prototype 指向原型对象。实例对象中，使用 __proto__ 指向原型对象。原型...

这波能反杀 in 前端核心基础

8a9c940cead6c1a34c0c02d2073cd535

四、2. 构造函数

在上一章节中，为了帮助大家能够更加清晰的了解到面向对象思维的必要性，我们通过一步一步的场景分析，给出了最后的解决方案。创建对象的方式大概如下： function createPerson(name, age) { this.name = name ...

这波能反杀 in 前端核心基础

5ad0855572959198dabae86bdd7a5681

四、1. 一切始于封装

面向对象思维，在任何开发语言中，都是必不可少的思维模式。那么什么是面向对象思维呢？上一章我们知道，对象是使用代码描述一个具体的实例。现在有三个实例，张三，李四，王五。我们使用代码...

这波能反杀 in 前端核心基础

521559ee06f6d8b0df1f2b41dcb20553

四、面向对象

如果要我总结一下学习编程以来，我遇到了那些瓶颈，那么面向对象一定是第一个毫不犹豫浮现在脑海里的。尽管我现在已经对于面向对象有了一些掌握，但是当初那种似懂非懂的痛苦，依然历历在目。 ...

这波能反杀 in 前端核心基础

6cf4878d35a068ab5b6a5045ad9e1229

三、14. 组合

学习代码组合之前，我们需要回顾一下高阶函数的应用。在高阶函数的章节学习中，我们探讨了一个实践中的案例。每一个页面都会判断用户的登录状态，因此我们封装了一个 withLogin 的高阶函数来处理...

这波能反杀 in 前端核心基础

76117103db281424602d17cdf4188e00

三、13. 柯里化

通过上一个章节的学习我们知道，接收函数作为参数的函数，都可以叫做高阶函数。我们常常利用高阶函数来封装一些公共的逻辑。这一章我们要学习的柯里化，其实就是高阶函数的一种特殊用法。柯...

这波能反杀 in 前端核心基础

B31152fa8c520c2ddaec1f48ad12956b

三、12. 高阶函数

我想大家对于面向对象相关的知识都应该有所涉猎「如果还没有接触过，可以在后面的章节中学习」，有一个问题会困扰很多人：在构造函数中，如果我们使用了 this，那么这个 this 指向的是谁？如果在...

这波能反杀 in 前端核心基础

D2a853cea9637bac2eb1e10e6a7e197f

三、11. 纯函数

相同的输入总会得到相同的输出，并且不会产生副作用的函数，就是纯函数。这里需要关注两个重点相同的输入总会得到相同的输出一个非常简单的例子来说明纯函数与其他函数的不同 var a = 10 function a...

这波能反杀 in 前端核心基础

F5491bee00b906fa4ba22e1f1128bf26

三、10. 函数是一等公民

所谓一等公民，其实就是普通公民。也就是说，函数和其他数据类型一样，没有什么特殊的，我们可以像对待任何其他数据类型一样，对待函数。可以把函数赋值给一个变量 const fn = function() {} 可以把...

这波能反杀 in 前端核心基础

D284e5af53b5cc5de83106658f69d2cf

三、9. 函数式编程

在之前的文章中，我们学习了许多关于函数本质的知识，那么我们接下来，就应该思考函数的应用问题：在实际开发中，我们需要用函数来做些什么？我们可以使用函数这些特性来玩一些什么高级的东西...

这波能反杀 in 前端核心基础

393e6595c54ce051aa9da9be69a87e6d

三、8. chrome 调试工具

前端迅猛发展，知识也会过时。也许前面我们学的某个知识点，在未来的某个节点就会悄然发生变化，因此我们需要掌握一些技能，来确保知识发生变化时，我们能够具备辨别自己所学知识是否发生了变...

这波能反杀 in 前端核心基础

472bb2043d865e16fe76e9c98c42e95d

三、7. this

this 的学习至关重要。而掌握 this 的关键，是要明白，函数的 this，是在什么时候确认的。前面我们学习执行上下文的章节中，有提到关于 this 的信息。在执行上下文中的环境记录对象中，提供了一个内...

这波能反杀 in 前端核心基础

4067ea8a92cceb74792249330d24cbc9

三、6. 闭包的应用

对于闭包的理解，有许多错误的言论。其中一个非常错误的言论就是：我们应该尽量避免使用闭包。 _ 闭包给我们的功能实现，带来了许多的便利，在代码中，闭包几乎是无处不在，无论你愿意或者不愿意...

这波能反杀 in 前端核心基础

2e454db49f28039061c65f826249a9e3

三、5. 闭包

闭包是一个特殊的对象。凡是没有将闭包，定义为对象的说法，都是错误的。词法作用域词法作用域并非 JavaScript 特有的说法，通常我们也直接称之为作用域。词法作用域表达的是一个静态关系，通常...

这波能反杀 in 前端核心基础

4086c139d59a597e1081c57596ec370c

三、4. 执行上下文

在 ECMAScript 中，执行上下文是一种用于跟踪代码执行状态的抽象规范。每一个函数调用，都会创建一个新的执行上下文。我们前面章节学过的函数调用栈，用于管理所有的执行上下文。在任何时候，只能有...

这波能反杀 in 前端核心基础

Caac313b9f133d571df7ea531b50f51f

三、3.3 栈操作原理与函数调用

如果大家对寄存器的存在还是不够理解的话，可以简单粗暴的将寄存器理解为变量。每一个变量都用于存储特定的值，以协助 CPU 进行运算。一个栈空间中的情况大概如下现有如下函数 function foo(a, b) { ...

这波能反杀 in 前端核心基础

8368f26a54b4d7c7ed6b0c264c84985c

三、3.2 汇编急速入门

汇编不可怕。机器代码一般人读不懂。例如，某种计算机一条表示加法的指令，为 10001010，减法指令为 00010011。看都看不懂，更别说要实现可编程的目的了。汇编就是对机器代码的封装。让人能够勉强读...

这波能反杀 in 前端核心基础

37afcbfefd4541a1ad0b61c1d6ee7386

三、3.1 从冯.洛伊曼说起

看过《三体》的读者朋友应该听过这个理论，科学家汪淼在在游戏中的秦始皇年代，遇到了一个叫做冯.洛伊曼的人，他使用三千万士兵完成了计算机的计算。当然，我们的真实社会中，也有这么一个牛逼...

这波能反杀 in 前端核心基础

A8e571daa328cb7b555d54848b13699a

三、3. 函数调用栈

函数调用栈对于代码的执行顺序有着非常重要的决定性影响。在完成一个应用程序的过程中，我们需要调用大量的函数来帮助我们完成各种功能，JavaScript 使用函数调用栈来管理所有函数的执行。函数体 ...

这波能反杀 in 前端核心基础

A737f8ced77558d764c9da3622864d8c

三、2. 作用域与作用域链

作用域是规定变量与函数可访问范围的一套规则。最常见的作用域有两种，分别是全局作用域与函数作用域。全局作用域全局作用域中声明的变量与函数，可以在代码的任何地方被访问。一般来说，以...

这波能反杀 in 前端核心基础

C7da5793b657e9ae0a276edcd4085620

三、1. V8引擎是如何工作的

JavaScript 的代码执行顺序，是每个前端开发工程师都必须要关注的重中之重。无论是未来我们会学习到的函数调用栈，还是事件循环等，都是为了探索代码执行顺序的奥秘而展开的。只有清晰明白代码执行...

这波能反杀 in 前端核心基础

Fce2e5886944830b70d73a8cad561e8d

三、函数

函数是参与程序运行的重要个体。常见的函数形式有四种情况，分别是函数声明、函数表达式、匿名函数与自执行函数。函数声明函数声明是指利用关键字 function 来声明一个函数。 function fn() { console.l...

这波能反杀 in 前端核心基础

7d2e1a5c056850769d1a36f66bc2b3eb

二、5. 再谈引用数据类型

引用数据类型在实践中是一个雷区。由于引用类型引发的惨案，也频频发生。进一步掌握引用类型，是作为一个合格前端开发必不可少的学习过程。引用类型，是可变的。当我们操作引用类型时，如果不...

这波能反杀 in 前端核心基础

19faf0c3cd53f261b2ee7cda5db021c8

二、4. 数据结构：链表

链表是一种递归的数据结构，它由多个节点组成，节点之间使用引用相互关联，组成一根链条。 _ 从上图中，我们可以总结出链表的几个特征在内存中，链表是松散不连续的结构，通过引用确定节点之...

这波能反杀 in 前端核心基础

9e1281bee1a8bd2e165f337ff6a69eae

二、3. 数据结构：队列

队列是一种先进先出的数据结构。如果要将队列运用到实践中，很容易就能够想到会有如下操作从队列最后入队从队列头部出队从队列任意位置离队「有其他事情」从队列任意位置插队「特殊权利...

这波能反杀 in 前端核心基础

E95c3ec5db7055a1d9293476b8e3a4f2

二、2. 数据结构：堆

本文为数据结构扩展章节，如果一些知识还没有接触过，可以暂时先放一放，后续再来学习堆数据结构，是树中的一种。在实践中，我们更常用的堆数据结构就是二叉堆。二叉堆能够实现优先级队列** ...

这波能反杀 in 前端核心基础

Cf819256eba27125268e4acffa65a6ca

二、1. 数据结构：栈

本文为扩展章节，如果一些知识还没有接触过，可以暂时先放一放，后续再来学习栈数据结构的基础理论很简单，先进后出，后进先出。我们需要用代码体现出来，才能算是真正的掌握了栈的思维。在...

这波能反杀 in 前端核心基础

22a034d37b81b8bb9589ee4014891857

二、内存与数据结构

我们可以把一个页面，看成是一个完整的独立应用。那么，哪些个体参与了应用的运行，这些个体以什么样的形式存在，这些个体要存放在哪里「内存中」，这些个体在内存中如何存放，都是我们要一一...

这波能反杀 in 前端核心基础

6c11bb498da4091791d847db7a42ef31

导读：只给你地道的前端进阶思维

什么是知识体系知识体系，就是把分散的，相对独立的概念或者观点，加以整合，形成具有一定关联性的知识系统。互联网时代，是一个信息爆炸的碎片化时代。我们每一个人，每一天都能够接触到非常...

这波能反杀 in 前端核心基础

7fb2851c35713ca94c5a9409bbebc58d

JavaScript 核心进阶目录

一、导读：只给你地道的前端进阶思维二、内存与数据结构数据结构：栈数据结构：堆数据结构：队列数据结构：链表再谈引用数据类型三、函数 V8 引擎是如何工作的作用域与作用域链函...

这波能反杀 in React 魔道

F15e5f99acb92db97b7295e2e8144b55

React Native 6：项目启动时注入配置项

这里面涉及到工程化最重要的一个场景，类似于自定义环境变量。例如，上一篇文章中，在 ReactotronConfig.js 里我们配置了本地电脑的 ip 地址。但是，多人开发的项目中，每个人的本地电脑 ip 都不一样，...

这波能反杀 in React 魔道

472cf4547fb8eecdb8044289831ff0ce

React Native 5：新增调试工具

我们可以使用官方提供的方式进行调试，你可以参考官方文档中的这篇文章操作尝试。 https://reactnative.cn/docs/debugging 但是在实际开发中，我们会使用更好的工具来调试。它就是 Reactotron。一、先下载 http...

这波能反杀 in React 魔道

Ff157614ed2b36bdd31bc9f766493327

React Native 4：语法支持装饰器

默认的情况下并不支持装饰器语法，但是装饰器语法在项目中随时都有可能会使用到，因此需要通过配置，扩展 babel 的功能以支持。安装如下插件 yarn add/plugin-proposal-decorators --dev 然后修改 babel.config.js ...

这波能反杀 in React 魔道

5c885d312673c46b399cfba707e32eb9

React Native 3：配置别名

1 先理解场景。别名配置属于工程化的一个优化项。目的在于优化开发体验。别名配置是为了解决相对路径过于复杂的问题，例如当项目稍微复杂一点，当前项目要引入别的组件，你可能需要这样使用 im...

这波能反杀 in 前端核心基础

E6361f4bf8894289fc746399622136a9

连等表达式的核心原理

有这样一道面试题，在群里引发了剧烈的讨论，讨论一天之后，仍然有同学还存在疑问。 var a = { n: 1 } var b = a a.x = a = { n: 2 } console.log(a.x) // 打印结果是什么这个问题其实在网络上也非常火，但是，正确...

这波能反杀 in React 魔道

3442af9c8bd0748944f19609f0bf7804

React Native 2：支持 typescript

如果是新创建的项目，直接运行如下指令创建即可支持 npx react-native init projectName --template react-native-template-typescript 如果你使用的是老版本的 react-native，也可是使用如下方式，让自己的项目支持 typescript ...

这波能反杀 in React 魔道

4ec4509b1e4e7b1eab0fc57ec63dac71

React Native 1：创建项目

按照官方文档的指引，在本地跑起来一个 demo 项目。 https://reactnative.cn/docs/getting-started.html 项目启动的过程中，如果遇到了问题，大概率可以分为如下情况一. 基础依赖版本问题。例如你的 node 版本比较...

这波能反杀 in 性能优化专题

3beba06b6124d375f6030b687fe34e2e

性能策略：利用闭包缓存计算结果

有这样一个函数。该函数接收两个整数参数，第一个参数表示开始数字，第二个参数表示结束数字，该函数的功能是计算开始到结束的范围中，所有整数的和。 function sum(start, end) { let res = 0 for (let i = sta...

这波能反杀 in 性能优化专题

8fe8c00806645b114b8a245f91b12144

九、资源串行加载优化策略

实践场景：一个活动页面，页面中引用到了大量的图片，为了动画效果，需要提前将所有的图片加载进来。这种场景类似于许多游戏，在游戏加载之前需要加载大量的静态资源。对于游戏来说，需要考...

这波能反杀 in 性能优化专题

0f8e1f05f9142163e85ed1b2852bfb6c

八、性能分析面板 Performance

在 chrome 中，Performance 是一个非常强大的性能分析工具。也是我们在做性能优化时「特别是代码优化」，必须要借助的工具。当然，在学习 Performance 时，需要有一些应该掌握的基础知识作为铺垫，例如浏...

这波能反杀 in 性能优化专题

E0758840f6ae290a72f18994b18b6621

七、网络请求 network 面板

网络请求面板，是我们在实践中，使用最多的工具之一。几乎每一次开发任务，我们都会使用到他。因此，这也是我们非常熟悉的工具。网络请求面板会记录网页从开始加载到整个运行过程中，所有的网...

这波能反杀 in 性能优化专题

Cf9ae89fedd1aa82a558a2aa062153a9

六、性能核心思想，走最短的路

如果我们要从 JS 的角度去分析，如何做性能优化，那么，我们需要分析的东西就太多了。但是我们学习的目的并不是把每一个可能涉及到性能优化的知识点都过一遍，而是掌握这种思维，不同的场景，...

这波能反杀 in 性能优化专题

B9a1e145031caf2c9ea699c5e00994d6

五、为 DOM 瘦身

熟知网页的渲染流程应该知道，如果 DOM 越复杂，那么对应的样式就会越复杂，生成的 render tree 就会越庞大。也就意味着，GUI 在渲染时要处理的逻辑就越多，计算量也就越大，自然性能可能就会越低下。...

这波能反杀 in 性能优化专题

A86e344f88b61f43af49f35cea7765e1

四、浏览器进程线程详解

在学习实践中的一些优化方案之前，我们需要对浏览器的工作原理有一个简单的认知。浏览器的工作，靠不同的进程协同完成。什么是进程我们可以很简单的理解什么是应用程序。我们下载一个app，就...

这波能反杀 in 性能优化专题

Abb642ddd002b22d1d11b06af2217d13

三、网络请求优化策略

面试经常会问一个问题，浏览器中输入url之后，发生了什么？我靠，还能发生什么，当然是出现页面呀。这问题问得，也太莫得水平了吧。当然，我们作为专业人士，自然要体现出和别人不一样的逼格。...

这波能反杀 in 性能优化专题

Af2cc8f758d65977ba5c4fcce4921db6

二、客户端如何与服务端建立通信连接

客户端拿到服务器的 ip 地址之后，接下来要做的事情，就是与服务器建立连接，这样才能相互传输数据。例如我们访问一个网页，网页内容都需要从服务端里获取。于是，我们面临的下一个问题是，客户...