前端小魔女_社区达人页

2023年04月

• 04.20 14:26:41
  发表了文章 2023-04-20 14:26:41

  兄台：JS闭包了解一下

  函数即对象 闭包
• 04.20 14:22:35
  发表了文章 2023-04-20 14:22:35

  兄台: 作用域、执行上下文了解一下

  • 作用域（Scopes） • 词法环境(Lexical environments) • 作用域链 • 执行上下文 • 调用栈
• 04.20 14:17:29
  发表了文章 2023-04-20 14:17:29

  V8如何处理JS

  Chromium本身就是一个浏览器 Chrome浏览器一般选择Chromium的稳定版本作为它的基础 浏览器大战，其实就是渲染引擎之争 v8是「JS虚拟机」的一种 源代码对 V8 来说只是「一堆字符串」 执行JS代码核心流程 1. 先编译 2. 后执行 V8采用「JIT」（Just In Time）技术提升效率

  
• 04.20 14:13:40
  发表了文章 2023-04-20 14:13:40

  CPU如何执行程序

  1. CPU = 运算单元 + 数据单元 + 控制单元 2. CPU 只能识别「二进制」的指令 3. 总线像连接 CPU 和内存这两个设备的高速公路 4. 执行高级语言的两种方式：1. 解释执行 2. 编译执行 5. 汇编语言和机器语言是一一对应的 6. 内存中的每个存储空间都有其对应的独一无二的地址 7. CPU时钟周期：取出指令、分析指令、执行指令这三个过程
• 04.20 13:51:22
  发表了文章 2023-04-20 13:51:22

  JS篇之数据类型那些事儿

  JS组成 JS数据类型(7+1) 类型转换(装箱/拆箱)
• 04.20 13:38:25
  发表了文章 2023-04-20 13:38:25

  前端roadmap_浏览器工作原理

  • 浏览器架构总览 • 进程、线程 • 站点隔离 • 渲染流程总览 • 导航阶段 • UI进程👉拼装URL • 网络进程👉获取数据 • 重定向 • 根据Content-Type进行数据处理 • 唤起渲染进程 • 更新Tab状态 -->导航阶段结束 • 渲染阶段 • 编译处理 • BNF • HTML 解析器 • DOM • 标记算法 • DOM树构建算法 • 处理子资源 • 将CSS附加(attachment)到DOM节点==>生成Render Tree • CSS 解析器 • 创建呈现器 • 属性标准化 • 样式计算并保存到ComputedStyle • 布局(Layout)
• 04.20 13:24:49
  发表了文章 2023-04-20 13:24:49

  前端进阶之路_网络协议之传输层(transport layer)

  a. 前言 b. OSI七层协议 c. 传输层 • 有状态的TCP协议 • 三次握手--建立有效通信 • 为什么要三次握手 • 四次挥手--断开连接 • 为什么要四次挥手
• 04.20 13:20:19
  发表了文章 2023-04-20 13:20:19

  React组件封装和逻辑复用新解

  a. 组件封装 • RenderProps增强版 • Web Component • 配置化(LCD) b. 逻辑复用 • 中间件(MiddleWare) • Redux Thunk • 监听history • stateComponment
• 04.20 13:14:26
  发表了文章 2023-04-20 13:14:26

  换一个角度来审视React

  a. React是什么 • 前端场景下MVC架构 • Flux设计模式 • Redux + React = MVC b. JSX • 手动实现一个JSX转换器
• 04.20 13:07:57
  发表了文章 2023-04-20 13:07:57

  JS（Memory Management） 内存管理

  • 1.内存的生命周期 • 2.堆和栈 • 栈：静态内存分配 • 堆：动态内存分配 • 示例 • 3.JS中的引用 • 示例 • 4.垃圾回收 • 引用计数 • 标记清除 • 5.内存泄漏 • 将变量挂载到全局变量 • 关闭定时器和清除回调函数 • 清除DOM 引用

  
• 04.20 12:58:57
  发表了文章 2023-04-20 12:58:57

  JS (Event Loop)事件循环 和 (Call Stack) 调用堆栈

  • 1.JS如何在浏览器中运行 • 调用栈 • 堆栈溢出 • Web APIs • 回调队列 • 事件循环 • setTimeout(fn,0) • 工作队列和异步代码 • Promises • promises适合在哪里
• 04.20 12:50:52
  发表了文章 2023-04-20 12:50:52

  React Fiber生命周期及架构

  React Fiber生命周期及架构
• 04.20 12:48:35
  发表了文章 2023-04-20 12:48:35

  JS继承

  JS继承
• 04.20 12:46:07
  发表了文章 2023-04-20 12:46:07

  “头部补零右移运算符”

  头部补零右移运算符
• 04.20 12:43:30
  发表了文章 2023-04-20 12:43:30

  使用Unicode为私密文本添加数字水印

  随着数字时代的到来，可以说一切的生活，都是基于网络的。而在有些特定的场景中，涉及到私密信息的时候，总是会有心怀鬼胎的人去捏造事实和进行造谣，变成三人成虎的一个尴尬的局面。 所以就需要一种技术去识别私密文本的发布者。从而找出真凶。
• 04.20 12:39:42
  发表了文章 2023-04-20 12:39:42

  JS执行环境（执行上下文 ） ES3版本

  执行环境（execution context） 中的 context 有着上下文和环境两层含义。
• 04.20 12:34:25
  发表了文章 2023-04-20 12:34:25

  React组件封装思路拓展

  其实React中组件化，是一个编程思路，我感觉，懒人才可以真正的领略到他的魅力，因为懒人才可以想出让自己书写代码，更快，更高，更强的方式。 这也是一种编程习惯和方式。用最短的时间，写最少的代码，干最漂亮的代码。 希望我啰嗦这么多，能对你有所帮助。如果大家看到有哪里不是很明白的，可以评论区，留言。如果感觉还不是很尽兴。没关系，这些东西，有很多。 其实每天都在吵吵组件化，组件化，组件化是在实际开发项目中，在解决实际业务中，才会有灵感。他主要的目的是解决实际问题，而不是闭门造车。
• 04.20 11:58:01
  发表了文章 2023-04-20 11:58:01

  带你走进JS作用域(Scope)的世界

  概念介绍 最少访问原则 JS中的作用域 全局作用域 局部作用域 块级声明 上下文(Context) 执行上下文(Execution Context) 词法作用域(Lexical Scope) 闭包 公共作用域和私有作用域 通过.call(), .apply() and .bind()修改上下文
• 04.20 11:44:46
  发表了文章 2023-04-20 11:44:46

  后生，React-Hooks了解一下

  简单介绍了useState/useEffect的使用方式，我相信大家在使用过程中，肯定遇到了比这还复杂的。但是，万变不离其宗。都是利用hook的一些API。为函数组件赋予状态。 还有一点，因为在使用useState或者useEffect的时候，我们可以将相关的代码进行统一处理，这样不管在业务开发还是代码维护上，变的很清楚。而不是像原来的开发一样，一个生命周期包含着无数的不相干的逻辑代码。 并且，hooks还支持自定义。本人认为，这才是hooks的真正强大之处。通过自定义一些业务代码，真正的实现逻辑复用。可以有效的减少wrapper hell。让代码实现切片化编程。
• 04.20 11:37:34
  发表了文章 2023-04-20 11:37:34

  JS闭包(Closures)了解一下

  闭包对于前端开发者来说，既十分重要，又非常难理解。如果能很好的理解它，那你将能写出很多高逼格的代码，并且成为人生赢家，赢取白富美。 这篇文章，我们来一起简单的认识一下，你走向人生巅峰的敲门砖(闭包)。 Note： 闭包不是JS所特有的。它是一个计算机概念，应用的场景也很多。

  
• 04.20 11:32:04
  发表了文章 2023-04-20 11:32:04

  朋友，柯里化(Currying)了解一哈

  greet获取了它应获取的参数，curry也停止了递归处理。并且，我们也获得了想要的结果Hello,范北宸。 其实利用curry对greet经过如上处理之后，现在处理之后的函数能够同时接收任意(n≥0)的参数。
• 04.20 11:23:01
  发表了文章 2023-04-20 11:23:01

  骚年，你对前端模块化了解多少

  不管是前端老司机还是刚接触前端的"菜鸟"。模块化想必在每天工作中，或多或少都会接触到。尤其针对一些针对React、Vue开发的同学来说，那就是每天都会脱口而出的一个必备术语。并且在很多技术文档中，都常常看到AMD、UMD、COMMONJS还有ES6中的module。 但是，模块化的本质是什么！前端是如何从"茹毛饮血"的<script>到现在es6的module的呢。 今天我们就来唠唠这段鲜为人知的故事。
• 04.20 11:13:13
  发表了文章 2023-04-20 11:13:13

  JS_Module模式深入了解一下

  大多数的高级模式都可以互相组合用于构建一个更加方便的模式。如果想要构建一个比较复杂的程序。可以尝试loose augmentation、private state、 和 sub-modules的组合。
• 04.20 11:07:30
  发表了文章 2023-04-20 11:07:30

  想了解JS数据类型转换吗？不用找了，这里都有

  但是有一点就是复杂类型数据和基本数据类型进行比较的时候，都是先调用valueOf()，如果返回的值为基本数据类型，进行比较，如果不是基本数据类型，继续调用该复杂类型的toString()。
• 04.20 10:58:50
  发表了文章 2023-04-20 10:58:50

  ES6_Extends如何对ES5的继承进行“糖化”

  我用我拙劣的代码来将这层糖的成分细细分析一下。 下面一些方法，都是基于class被脱糖之后的分析。关于class是如何被脱糖的过程===>请先查看ES6-Class如何优雅的进行Prototype“糖化” 内容很精彩，但是不要忘记回来看这个。这个剧情也挺赤鸡的。
• 04.20 10:48:24
  发表了文章 2023-04-20 10:48:24

  ES6-Class如何优雅的进行“糖化”

  这是一篇番外篇，其实他的主线是由一篇ES6-Class科普文章引发的“惨案”。虽然是番外篇，但是有些剧情还是不容错过的。 现在我们来进入番外篇的主线：ES6的Class是ES5构造函数的语法糖。
• 04.19 23:31:06
  发表了文章 2023-04-19 23:31:06

  由一篇ES6-Class科普文章引发的“惨案”

  让我们就开始惨案的解密过程吧。 首先，我们不按常规去思考上面的疑惑，我们需要在破案之前，需要一些准备工具。 首先让人很刺眼的一个是：Object.defineProperty。既然遇到了，我们就来会会他。
• 04.19 23:22:23
  发表了文章 2023-04-19 23:22:23

  理解JS中的原型(Prototypes)

  全新对象；给对象赋值；Prototypes；设置属性；对象字面量

  
• 04.19 23:12:50
  发表了文章 2023-04-19 23:12:50

  理解JS函数调用和"this"

  如果理解核心函数的调用机制，同时验证一些以核心函数为基础的其他实现方式的运行机制，关于上述所说的问题就会迎刃而解。
• 04.19 23:06:11
  发表了文章 2023-04-19 23:06:11

  数据结构和算法基础之时间复杂度为O(n²)排序(偏向前端方向)

  在实际项目开发中，不管是后端还是前端，最基本的操作就是数据的CRUD。换句话说，后端是根据某些条件组装数据，前端是拿着后端提供的数据，进行数据展示。但是不管在进行数据封装还是展示，其中在特定的场景下，需要根据某些条件，对数据进行排序。而在既定的现有框架下，都有现成的方法对数据进行排序处理。 但是，在开发中，有没有想过，这些排序底层是如何实现的，还有就是针对不同的数据，不同的排序是否在性能方面有不同的体现。

  
• 04.19 22:57:39
  发表了文章 2023-04-19 22:57:39

  数据结构和算法基础(偏向前端方向)

  接下来的文档，将一起汇总一下我跟着极客时间的数据结构与算法之美的课程来一起回顾和总结一下(内容大部分是极客时间的，但是有一些也是我查询相关资料来进行比对和校验的)。

  
• 04.19 22:39:29
  发表了文章 2023-04-19 22:39:29

  纯手硬撸Redux

  当今不管作为一个前端小白还是一个资深的前端攻城狮。如果不掌握几种前端框架(React,Vue,ng)，都不好意思出去说自己是做前端。但是面对如此之多的前端框架，尤其是React、Vue这种纯负责UI展示的架子来说。有一件事是绕不开的就是前端的数据存储问题。 作为业界层出不穷的数据处理框架Redux(React的数据存储框架)又是不得不提起的。 Vue的数据处理一般用Vuex。但是他的设计思路都是基于Redux等。 所以，有必要看看Redux是如何实现数据存储，又如何使得存储的数据被组件获取，并且组件在触发CRUD的时候，能够及时更新数据呢。 我们就按照Redux的实现原理来剖析一下这些数据存储

  
• 04.19 22:30:45
  发表了文章 2023-04-19 22:30:45

  7中方式来减少webpack bundle体积

  使用Webpack4并启用production模式；处理lodash.js；处理moment.js；作用域提升(Scope hoisting)
• 04.19 22:22:43
  发表了文章 2023-04-19 22:22:43

  React-HOC了解一下

  最近在公司接了一个老项目迁移React。在组件开发过程中，发现有一些组件的处理逻辑很类似。想在某一个地方来统一处理。进过思考和分析，发现HOC(higher-order component)很适合完成此类工作。 再次来总结HOC的概念和基本用法。
• 04.19 22:16:40
  发表了文章 2023-04-19 22:16:40

  React-Router底层原理分析与实现

  React-Router基本了解 对于React-Router是针对React定义的路由库，用于将URL和component进行匹配。 React Router的简单使用教程
• 04.19 22:08:17
  发表了文章 2023-04-19 22:08:17

  React组件隔离

  组件隔离适用范围 同一个页面引用多个相同的自定义公共组件(该类组件拥有自己的Redux)并且这些组件之间有交互。 案例背景 在一个页面中存在两个相同的公共组件(A)，在页面处理中，对A组件进行操作，有一些重要的数据被存入到A组件的对应的Redux中。 如果该页面只存在一个A组件，不管进行如何的操作，数据都是一份。但是如果该页面中存在多个A组件，在对第一个A组件进行数据处理之后，数据存入到Rudex中。此时在对另一个A组件进行相同的操作步骤，但是存入的数据和第一个A组件的存储在Redux中的数据有差别，此时在第二个A组件的操作就会影响第一个A组件的数据。
• 04.19 22:03:27
  发表了文章 2023-04-19 22:03:27

  代码来构建一个简单的compiler

  Parsing 我们来构建一个tokenizer用于进行lexical analysis（词法分析）
• 04.19 21:56:17
  发表了文章 2023-04-19 21:56:17

  编译程序(compiler)的简单分析

  在现今前端项目中，模块化是一个避不开的话题。所以就会出现AMD,CMD等模块加载方式。同时由于JS不停的在更新迭代。出现很多实用的新语法。但是由于有些语法有些超前，JS的宿主环境(浏览器/Node没有跟上JS更新步骤)，但是为了在项目中使用这些好用到令人发指的新特性，来提高开发效率等。就出现了各种前端编译插件(Babel)。
• 04.19 12:45:44
  发表了文章 2023-04-19 12:45:44

  与babel的"孽缘"

  Babel is a JavaScript compiler babel主要的职责就是将一些前沿时髦的JS特性通过"翻译"用到老旧的‘宿主’环境里。(浏览器，Node等)